[add] Async Component loading API

[add] MobX data reader utility
[optimize] several details

Author: TechQuery

Migrating.md

@@ -1,6 +1,6 @@
 # WebCell v2 to v3 migration
 
-## "state" concept has been totally dropped
+## React-style State has been totally dropped
 
 **WebCell v3** is heavily inspired by [the **Local Observable State** idea of **MobX**][1], and [not only React][2], Web Components can be much easier to manage the **Inner State & Logic**, without any complex things:
 

ReadMe.md

@@ -223,6 +223,7 @@ We recommend these libraries to use with WebCell:
 
 -   [x] [Extend **Build-in Elements** with Virtual DOM](https://github.com/snabbdom/snabbdom/pull/829)
 -   [x] [Server-side Render](https://web.dev/declarative-shadow-dom/)
+-   [x] [Async Component loading](https://reactjs.org/docs/react-api.html#reactlazy)
 
 ## More guides
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-alpha.1",
+    "version": "3.0.0-alpha.2",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -27,7 +27,7 @@
     "types": "dist/index.d.ts",
     "dependencies": {
         "@swc/helpers": "^0.3.3",
-        "mobx": "^5.15.7",
+        "mobx": ">=4.0.0 <6.0.0",
         "snabbdom": "^3.3.1",
         "web-utility": "^3.4.2"
     },
@@ -58,7 +58,7 @@
         "prettier": "^2.5.1",
         "ts-jest": "^27.1.3",
         "ts-node": "^10.5.0",
-        "typedoc": "^0.22.11",
+        "typedoc": "^0.22.12",
         "typescript": "~4.3.5"
     },
     "scripts": {

source/Async.tsx

@@ -0,0 +1,72 @@
+import { observable, reaction } from 'mobx';
+
+import { ComponentTag, WebCellProps, FunctionComponent } from './utility';
+import { WebCellClass, WebCell } from './WebCell';
+import { component, observer } from './decorator';
+import { createCell } from './renderer';
+
+export interface AsyncBoxProps extends WebCellProps {
+    loader: () => Promise<ComponentTag>;
+}
+
+@component({
+    tagName: 'async-box'
+})
+@observer
+export class AsyncBox extends WebCell<AsyncBoxProps>() {
+    @observable
+    loader: AsyncBoxProps['loader'];
+
+    @observable
+    component?: ComponentTag;
+
+    get delegatedProps() {
+        return Object.fromEntries(
+            Object.entries(Object.getOwnPropertyDescriptors(this))
+                .map(([key, { value }]) => value != null && [key, value])
+                .filter(Boolean)
+        );
+    }
+    connectedCallback() {
+        if (this.load instanceof Function) this.load();
+
+        this.disposers.push(reaction(() => this.loader, this.load));
+    }
+
+    protected load = async () => {
+        this.component = undefined;
+        this.component = await this.loader();
+
+        this.emit('load', this.component);
+    };
+
+    render() {
+        const {
+            component: Tag,
+            props: { defaultSlot, ...props },
+            delegatedProps
+        } = this;
+
+        return (
+            Tag && (
+                <Tag {...delegatedProps} {...props}>
+                    {defaultSlot}
+                </Tag>
+            )
+        );
+    }
+}
+
+type GetAsyncProps<T> = T extends () => Promise<{
+    default: FunctionComponent<infer P> | WebCellClass<infer P>;
+}>
+    ? P
+    : {};
+
+export function lazy<
+    T extends () => Promise<{ default: FunctionComponent | WebCellClass }>
+>(loader: T) {
+    return (props: GetAsyncProps<T>) => (
+        <AsyncBox {...props} loader={async () => (await loader()).default} />
+    );
+}

source/WebCell.tsx

@@ -10,9 +10,9 @@ import {
 } from 'web-utility';
 import { IReactionDisposer, observable } from 'mobx';
 
-import { WebCellProps } from './utility';
+import { WebCellProps, getMobxData } from './utility';
 import { ComponentMeta, DOMEventDelegater } from './decorator';
-import { Fragment, createCell, render } from './renderer';
+import { createCell, render } from './renderer';
 
 export interface WebCellComponent<P extends WebCellProps = WebCellProps>
     extends CustomElement {
@@ -26,7 +26,7 @@ export interface WebCellComponent<P extends WebCellProps = WebCellProps>
     disposers?: IReactionDisposer[];
     syncPropAttr?(name: string): void;
     defaultSlot?: JSX.Element;
-    render?(): JSX.Element;
+    render?(): JSX.Element | undefined;
     /**
      * Called after rendering
      */
@@ -54,11 +54,14 @@ export function WebCell<P extends WebCellProps = WebCellProps>(
 
         readonly internals?: ElementInternals;
         readonly root: DocumentFragment | HTMLElement;
-        readonly props: P = {} as P;
+
+        get props() {
+            return getMobxData<P>(this);
+        }
         readonly disposers: IReactionDisposer[] = [];
 
         @observable
-        defaultSlot = (<></>);
+        defaultSlot?: JSX.Element;
 
         [key: string]: any;
 
@@ -110,7 +113,11 @@ export function WebCell<P extends WebCellProps = WebCellProps>(
         }
 
         update() {
-            render(this.render(), this.root);
+            const tree = this.render();
+
+            if (!tree) return;
+
+            render(tree, this.root);
 
             this.updatedCallback?.();
         }

source/utility/MobX.ts

@@ -0,0 +1,12 @@
+import { toJS } from 'mobx';
+
+export function getMobxData<T extends Record<string, any>>(observable: any): T {
+    for (const key of Object.getOwnPropertySymbols(observable)) {
+        const store = observable[key]?.values;
+
+        if (store instanceof Map)
+            return Object.fromEntries(
+                Array.from(store, ([key, { value }]) => [key, toJS(value)])
+            );
+    }
+}

source/utility/index.ts

@@ -1 +1,2 @@
 export * from './vDOM';
+export * from './MobX';

source/utility/vDOM.ts

@@ -20,8 +20,8 @@ export type WebCellProps<T extends HTMLElement = HTMLElement> = VDOMData<T> &
         is?: ComponentMeta['tagName'];
     };
 
-export type FunctionComponent<P = {}, T extends HTMLElement = HTMLElement> = (
-    props: P & WebCellProps<T>
+export type FunctionComponent<P extends WebCellProps = WebCellProps> = (
+    props: P
 ) => VNode;
 
 export type ComponentTag =

test/Async.spec.tsx

@@ -0,0 +1,28 @@
+import 'element-internals-polyfill';
+import { sleep } from 'web-utility';
+
+import { WebCellProps } from '../source/utility/vDOM';
+import { createCell, render } from '../source/renderer';
+import { lazy } from '../source/Async';
+
+describe('Async Box component', () => {
+    it('should render an Async Component', async () => {
+        const Async = lazy(async () => ({
+            default: ({
+                defaultSlot,
+                ...props
+            }: WebCellProps<HTMLAnchorElement>) => (
+                <a {...props}>{defaultSlot}</a>
+            )
+        }));
+        render(<Async href="test">Test</Async>);
+
+        expect(document.body.innerHTML).toBe('<async-box></async-box>');
+
+        await sleep();
+
+        expect(document.body.innerHTML).toBe(
+            '<async-box><a href="test">Test</a></async-box>'
+        );
+    });
+});

test/renderer.spec.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from '../source';
+import { WebCellProps, FunctionComponent } from '../source';
 import {
     createCell,
     Fragment,
@@ -26,9 +26,9 @@ describe('Renderer', () => {
 
     it('should call Function while DOM rendering', () => {
         const hook = jest.fn();
-        const Test = jest.fn(() => <i ref={hook} />) as FunctionComponent<{
-            prop1: number;
-        }>;
+        const Test = jest.fn(() => <i ref={hook} />) as FunctionComponent<
+            { prop1: number } & WebCellProps
+        >;
         render(<Test prop1={1}>test</Test>);
 
         expect(hook).toBeCalledTimes(1);