[add] Core methods of PoC

Author: TechQuery

package.json

@@ -0,0 +1,49 @@
+{
+    "name": "dom-renderer",
+    "version": "2.0.0-alpha.0",
+    "license": "LGPL-3.0",
+    "author": "shiy2008@gmail.com",
+    "description": "DOM Renderer based on TSX & DOM-compatible virtual DOM",
+    "keywords": [
+        "DOM",
+        "render",
+        "TypeScript",
+        "JSX",
+        "vDOM"
+    ],
+    "homepage": "https://web-cell.dev/DOM-Renderer/",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/EasyWebApp/DOM-Renderer.git"
+    },
+    "bugs": {
+        "url": "https://github.com/EasyWebApp/DOM-Renderer/issues"
+    },
+    "source": "source/index.ts",
+    "devDependencies": {
+        "@types/jest": "^25.1.4",
+        "@types/jsdom": "^16.1.0",
+        "jest": "^25.1.0",
+        "jsdom": "^16.2.1",
+        "lint-staged": "^10.0.8",
+        "prettier": "^1.19.1",
+        "ts-jest": "^25.2.1",
+        "typescript": "^3.8.3"
+    },
+    "prettier": {
+        "singleQuote": true,
+        "tabWidth": 4
+    },
+    "lint-staged": {
+        "*.{json,ts,tsx}": [
+            "prettier --write"
+        ]
+    },
+    "jest": {
+        "preset": "ts-jest",
+        "testEnvironment": "node"
+    },
+    "scripts": {
+        "test": "lint-staged && jest"
+    }
+}

source/factory.ts

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

source/index.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './renderer';
+export * from './factory';

source/renderer.ts

@@ -0,0 +1,74 @@
+import { VChild } from './type';
+
+const { slice } = Array.prototype;
+
+export function create(vNode: VChild) {
+    if (typeof vNode === 'string') return document.createTextNode(vNode);
+
+    const { tagName, childNodes, ...props } = vNode;
+
+    return Object.assign(document.createElement(tagName), props);
+}
+
+const cache = new WeakMap();
+
+function save(root: Node, id: string, child: Node) {
+    var map = cache.get(root);
+
+    if (!map) cache.set(root, (map = {}));
+
+    map[id] = child;
+}
+
+export function update(node: Element, vNode: VChild) {
+    if (typeof vNode === 'string') return node.replaceWith(vNode);
+
+    const { tagName, childNodes, ...props } = vNode;
+
+    if (node.tagName?.toLowerCase() !== tagName) {
+        const tag = document.createElement(tagName);
+
+        node.replaceWith(tag);
+
+        node = tag;
+    }
+
+    const prop_map = Object.entries(props);
+
+    for (const { name } of node.attributes) {
+        const [key] =
+            prop_map.find(([key]) => key.toLowerCase() === name) || [];
+
+        if (!key) node.removeAttribute(name);
+    }
+
+    for (const [key, value] of prop_map)
+        if (value !== node[key]) node[key] = value;
+
+    const children = node.childNodes;
+
+    vNode.childNodes.forEach((child, index) => {
+        var old = children[index];
+
+        if (!old) {
+            old = create(child);
+
+            if (child.id) save(node, child.id, old);
+
+            node.append(old);
+        } else {
+            const cached = cache.get(node)?.[child.id];
+
+            if (cached) {
+                old.before(cached);
+
+                old = cached;
+            }
+        }
+
+        update(old as Element, child);
+    });
+
+    for (const child of slice.call(children, vNode.childNodes.length))
+        child.remove();
+}

source/type.ts

@@ -0,0 +1,12 @@
+export interface VNode {
+    tagName: string;
+    childNodes: VNode[];
+    id?: string;
+    [key: string]: any;
+}
+
+export type VChild = string | VNode;
+
+export interface CustomElementClass {
+    new (): HTMLElement;
+}

test/polyfill.ts

@@ -0,0 +1,6 @@
+import { JSDOM } from 'jsdom';
+
+const { window } = new JSDOM();
+
+for (const key of ['window', 'document', 'customElements'])
+    global[key] = window[key];

tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "ES6",
+        "moduleResolution": "Node",
+        "esModuleInterop": true,
+        "downlevelIteration": true,
+        "jsx": "react",
+        "jsxFactory": "createCell",
+        "lib": ["ES2019", "DOM", "DOM.Iterable"]
+    }
+}