refactor(mount): move mount to it's own file

jest.config.ts

@@ -28,9 +28,7 @@ const config: Config = {
   coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: ['/node_modules/', 'src/main.ts'],
 
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: 'v8',

src/__tests__/component.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '../main';
+import { mount } from '../mount';
 import { tags } from '../tags';
 import { type Component } from '../types';
 import { getByText, getByTestId, fireEvent } from '@testing-library/dom';

src/__tests__/main.test.ts → src/__tests__/mount.test.ts

@@ -1,6 +1,7 @@
-import { Component, mount, tags } from '../main';
+import { Component, tags } from '../main';
+import { mount } from '../mount';
 
-describe('main', () => {
+describe('mount', () => {
   test('`null` element', () => {
     const el = document.querySelector('.not-defined');
 

src/__tests__/walker.test.ts

@@ -1,5 +1,6 @@
 import { fireEvent, getByRole, getByText } from '@testing-library/dom';
-import { Component, mount } from '../main';
+import { Component } from '../main';
+import { mount } from '../mount';
 import { tags } from '../tags';
 
 const { div, p, button, ul, li } = tags;

src/main.ts

@@ -1,60 +1,13 @@
-import type { Children, Context, Component, TentNode, Attrs } from './types';
+import { mount } from './mount';
 import { createTag, tags } from './tags';
-import { walker } from './walker';
-
-function mount<S extends {} = {}, A extends Attrs = {}>(
-  element: HTMLElement | Element | TentNode<A> | null,
-  component: Component<S, A>,
-) {
-  if (element == null) return;
-
-  let node: TentNode<A>;
-  const { view, mounted } = component;
-  const state = 'state' in component ? component.state : ({} as S);
-  const el = element as TentNode<A>;
-
-  el.$tent = { attributes: {} };
-
-  const handler = {
-    get(obj: S, key: string) {
-      if (typeof obj[key] === 'object' && obj[key] != null) {
-        return new Proxy(obj[key], handler);
-      } else {
-        return obj[key];
-      }
-    },
-    set(obj: S, prop: string, value: unknown) {
-      if (!obj.hasOwnProperty(prop)) {
-        throw new Error(
-          `The property "${String(prop)}" does not exist on the state object.`,
-        );
-      }
-      if (obj[prop] === value) return true;
-
-      const s = Reflect.set(obj, prop, value);
-
-      walker(node, view({ state: proxy, el }));
-
-      return s;
-    },
-  };
-
-  const proxy = new Proxy<S>({ ...state }, handler);
-
-  node = view({ state: proxy, el });
-  node.$tent = { attributes: {} };
-
-  el.append(node);
-
-  mounted?.({ state: proxy, el });
-}
+import type { Children, Component, Context, TentNode } from './types';
 
 export {
-  tags,
-  mount,
   createTag,
-  type Context,
-  type TentNode,
+  mount,
+  tags,
   type Children,
   type Component,
+  type Context,
+  type TentNode,
 };

src/mount.ts

@@ -0,0 +1,51 @@
+import type { Component, TentNode, Attrs } from './types';
+import { walker } from './walker';
+
+function mount<S extends {} = {}, A extends Attrs = {}>(
+  element: HTMLElement | Element | TentNode<A> | null,
+  component: Component<S, A>,
+) {
+  if (element == null) return;
+
+  let node: TentNode<A>;
+  const { view, mounted } = component;
+  const state = 'state' in component ? component.state : ({} as S);
+  const el = element as TentNode<A>;
+
+  el.$tent = { attributes: {} };
+
+  const handler = {
+    get(obj: S, key: string) {
+      if (typeof obj[key] === 'object' && obj[key] != null) {
+        return new Proxy(obj[key], handler);
+      } else {
+        return obj[key];
+      }
+    },
+    set(obj: S, prop: string, value: unknown) {
+      if (!obj.hasOwnProperty(prop)) {
+        throw new Error(
+          `The property "${String(prop)}" does not exist on the state object.`,
+        );
+      }
+      if (obj[prop] === value) return true;
+
+      const s = Reflect.set(obj, prop, value);
+
+      walker(node, view({ state: proxy, el }));
+
+      return s;
+    },
+  };
+
+  const proxy = new Proxy<S>({ ...state }, handler);
+
+  node = view({ state: proxy, el });
+  node.$tent = { attributes: {} };
+
+  el.append(node);
+
+  mounted?.({ state: proxy, el });
+}
+
+export { mount };