[add] Test scripts

Author: TechQuery

.gitignore

@@ -1,2 +1,3 @@
 package-lock.json
-node_modules/
+node_modules/
+.vscode/

package.json

@@ -21,8 +21,11 @@
     },
     "source": "source/index.ts",
     "devDependencies": {
+        "@types/core-js": "^2.5.3",
         "@types/jest": "^25.1.4",
         "@types/jsdom": "^16.1.0",
+        "core-js": "^3.6.4",
+        "husky": "^4.2.3",
         "jest": "^25.1.0",
         "jsdom": "^16.2.1",
         "lint-staged": "^10.0.8",
@@ -41,9 +44,17 @@
     },
     "jest": {
         "preset": "ts-jest",
-        "testEnvironment": "node"
+        "testEnvironment": "node",
+        "globals": {
+            "ts-jest": {
+                "tsConfig": "test/tsconfig.json"
+            }
+        }
     },
     "scripts": {
         "test": "lint-staged && jest"
+    },
+    "husky": {
+        "pre-commit": "npm test"
     }
 }

source/factory.ts

@@ -1,19 +1,32 @@
 import { CustomElementClass, VChild, VNode } from './type';
 
+const custom_cache = new WeakMap();
+
 export function createCell(
     tag: string | Function | CustomElementClass,
     data?: any,
-    ...childNodes: VChild[]
+    ...children: VChild[]
 ): VNode {
+    children = children.flat(Infinity);
+
     if (typeof tag === 'function') {
-        try {
-            const node = new (tag as CustomElementClass)();
+        let name = custom_cache.get(tag);
+
+        if (name) tag = name;
+        else
+            try {
+                const node = new (tag as CustomElementClass)();
+
+                if (node instanceof HTMLElement) {
+                    name = node.tagName.toLowerCase();
 
-            if (node instanceof HTMLElement) tag = node.tagName.toLowerCase();
-        } catch {}
+                    custom_cache.set(tag, (tag = name));
+                }
+            } catch {}
 
-        if (typeof tag === 'function') return (tag as Function)(data);
+        if (typeof tag === 'function')
+            return (tag as Function)({ ...data, children });
     }
 
-    return { ...data, tagName: tag, childNodes };
+    return { ...data, tagName: tag, childNodes: children };
 }

source/global.d.ts

@@ -0,0 +1,5 @@
+declare namespace JSX {
+    interface ElementChildrenAttribute {
+        children: any;
+    }
+}

test/factory.spec.tsx

@@ -0,0 +1,37 @@
+import './polyfill';
+import { createCell } from '../source';
+
+describe('JSX Factory method', () => {
+    it('should accept a Standard HTML Tag', () => {
+        expect(<a>test</a>).toEqual(
+            expect.objectContaining({
+                tagName: 'a',
+                childNodes: ['test']
+            })
+        );
+    });
+
+    it('should accept a Function Component', () => {
+        const Test = ({ children }) => <a>{children}</a>;
+
+        expect(<Test>test</Test>).toEqual(
+            expect.objectContaining({
+                tagName: 'a',
+                childNodes: ['test']
+            })
+        );
+    });
+
+    it('should accept a Class Component', () => {
+        class Test extends HTMLElement {}
+
+        customElements.define('x-test', Test);
+
+        expect(<Test />).toEqual(
+            expect.objectContaining({
+                tagName: 'x-test',
+                childNodes: []
+            })
+        );
+    });
+});

test/polyfill.ts

@@ -1,6 +1,7 @@
+import 'core-js/es/array/flat';
 import { JSDOM } from 'jsdom';
 
 const { window } = new JSDOM();
 
-for (const key of ['window', 'document', 'customElements'])
+for (const key of ['window', 'document', 'HTMLElement', 'customElements'])
     global[key] = window[key];

test/renderer.spec.tsx

@@ -0,0 +1,41 @@
+import './polyfill';
+import { update, createCell } from '../source';
+
+describe('Renderer methods', () => {
+    document.body.innerHTML = '<a title="test" />';
+
+    it('should update a Standard HTML Tag', () => {
+        update(document.body.firstElementChild, <a href="#">test</a>);
+
+        expect(document.body.innerHTML).toBe('<a href="#">test</a>');
+    });
+
+    it('should relpace an old HTML Tag', () => {
+        update(
+            document.body.firstElementChild,
+            <ol>
+                <li id="item-1">1</li>
+                <li id="item-0">0</li>
+            </ol>
+        );
+
+        expect(document.body.innerHTML).toBe(
+            '<ol><li id="item-1">1</li><li id="item-0">0</li></ol>'
+        );
+    });
+
+    it('should relpace an old HTML Tag', () => {
+        const root = document.body.firstElementChild;
+        const last = root.lastElementChild;
+
+        update(
+            document.body.firstElementChild,
+            <ol>
+                <li id="item-0">0</li>
+            </ol>
+        );
+
+        expect(root.outerHTML).toBe('<ol><li id="item-0">0</li></ol>');
+        expect(root.lastElementChild).toBe(last);
+    });
+});

test/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "target": "ES6"
+    },
+    "include": ["../source/*.ts", "*.ts", "*.tsx"]
+}