[refactor] rewrite to Async Rendering inspired by Crank.js

Author: TechQuery

ReadMe.md

@@ -0,0 +1,7 @@
+# DOM Renderer
+
+DOM Renderer with [Async Generator][1] support (inspired by [Crank.js][2]), which is based on [TSX][3] & **DOM-compatible virtual DOM**.
+
+[1]: https://tc39.es/ecma262/#sec-asyncgeneratorfunction-objects
+[2]: https://crank.js.org/
+[3]: https://www.typescriptlang.org/docs/handbook/jsx.html

package.json

@@ -1,15 +1,18 @@
 {
     "name": "dom-renderer",
-    "version": "2.0.0-alpha.0",
+    "version": "3.0.0-alpha.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
-    "description": "DOM Renderer based on TSX & DOM-compatible virtual DOM",
+    "description": "DOM Renderer with Async Generator support (inspired by Crank.js), which is based on TSX & DOM-compatible virtual DOM.",
     "keywords": [
         "DOM",
         "render",
+        "async",
+        "generator",
         "TypeScript",
         "JSX",
-        "vDOM"
+        "vDOM",
+        "crank"
     ],
     "homepage": "https://web-cell.dev/DOM-Renderer/",
     "repository": {
@@ -20,41 +23,39 @@
         "url": "https://github.com/EasyWebApp/DOM-Renderer/issues"
     },
     "source": "source/index.ts",
+    "dependencies": {
+        "web-utility": "1.5.0"
+    },
     "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",
-        "prettier": "^1.19.1",
-        "ts-jest": "^25.2.1",
-        "typescript": "^3.8.3"
+        "@types/jest": "^25.2.3",
+        "husky": "^4.2.5",
+        "jest": "^26.0.1",
+        "lint-staged": "^10.2.7",
+        "prettier": "^2.0.5",
+        "ts-jest": "^26.1.0",
+        "typescript": "^3.9.3"
     },
     "prettier": {
         "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
         "tabWidth": 4
     },
     "lint-staged": {
-        "*.{json,ts,tsx}": [
+        "*.{md,json,yml,ts,tsx}": [
             "prettier --write"
         ]
     },
     "jest": {
         "preset": "ts-jest",
-        "testEnvironment": "node",
-        "globals": {
-            "ts-jest": {
-                "tsConfig": "test/tsconfig.json"
-            }
-        }
+        "transformIgnorePatterns": []
     },
     "scripts": {
         "test": "lint-staged && jest"
     },
     "husky": {
-        "pre-commit": "npm test"
+        "hooks": {
+            "pre-commit": "npm test"
+        }
     }
 }

source/AsyncComponent.ts

@@ -0,0 +1,37 @@
+import { Props, GeneratorNode, AsyncGeneratorNode, VChild } from './creator';
+import { isEmpty } from 'web-utility/source/data';
+import { clearList } from './utility';
+
+export class AsyncComponent {
+    function: Function;
+    props: Props;
+    generator: GeneratorNode | AsyncGeneratorNode;
+
+    lastNodes: VChild[] = [];
+    realNodes: HTMLElement[] = [];
+
+    constructor(func: Function, props: Props) {
+        this.function = func;
+        this.props = props;
+        this.generator = func.call(this, props);
+    }
+
+    *[Symbol.iterator]() {
+        while (true) yield this.props;
+    }
+
+    async *[Symbol.asyncIterator]() {
+        while (true) yield this.props;
+    }
+
+    async render() {
+        const { realNodes } = this;
+
+        const { value } = await this.generator.next(
+            realNodes[1] ? realNodes : realNodes[0]
+        );
+        if (!isEmpty(value)) this.lastNodes = value;
+
+        return clearList(this.lastNodes);
+    }
+}

source/creator.ts

@@ -0,0 +1,72 @@
+import { HTMLProps } from 'web-utility/source/DOM-type';
+import { clearList } from './utility';
+import { AsyncComponent } from './AsyncComponent';
+
+export interface VElement {
+    tagName: string;
+    childNodes: VChildNode[];
+    [key: string]: any;
+}
+export type VChild = string | number | boolean | VElement;
+export type VChildNode = VChild | AsyncComponent;
+export type VChildren = VChildNode | VChildNode[];
+
+export type GeneratorNode = Generator<VChildren, any, Node | Node[]>;
+export type AsyncGeneratorNode = AsyncGenerator<VChildren, any, Node | Node[]>;
+
+export type AsyncNode = Promise<VChildren> | GeneratorNode | AsyncGeneratorNode;
+
+export type RenderNode = VChildren | AsyncNode;
+
+export interface Props extends HTMLProps {
+    children?: VChildren;
+    [key: string]: any;
+}
+
+export type FunctionComponent = (props: Props) => RenderNode;
+
+export type Component = string | FunctionComponent;
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [tagName: string]: Props;
+        }
+        interface ElementChildrenAttribute {
+            children: VChildren;
+        }
+    }
+}
+
+export function createElement(
+    tagName: Component,
+    props: Props | null,
+    ...childNodes: VChildNode[]
+) {
+    childNodes = clearList(childNodes);
+
+    if (typeof tagName === 'string')
+        return {
+            ...props,
+            tagName: tagName as string,
+            childNodes
+        };
+
+    props = { ...props, children: childNodes };
+
+    const result = tagName(props);
+
+    if (typeof (result as Promise<any>).then === 'function')
+        return new AsyncComponent(async function* () {
+            yield await (result as Promise<any>);
+        }, props);
+
+    if (typeof (result as Generator).next === 'function')
+        return new AsyncComponent(tagName, props);
+
+    return result;
+}
+
+export function Fragment({ children }: Props) {
+    return children;
+}

source/factory.ts

@@ -1,3 +1,5 @@
-export * from './type';
-export * from './renderer';
-export * from './factory';
+export * from './utility';
+export * from './creator';
+export * from './AsyncComponent';
+export * from './renderer';
+export * from './updater';