[add] Quick Start document of WebCell v3 (#19)

Author: TechQuery

ReadMe.md

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.4",
+    "version": "3.0.0-rc.5",
     "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.5.3",
-        "dom-renderer": "^2.0.4",
+        "dom-renderer": "^2.0.5",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.1.3"
@@ -45,8 +45,8 @@
         "@parcel/transformer-typescript-tsc": "~2.11.0",
         "@parcel/transformer-typescript-types": "~2.11.0",
         "@types/jest": "^29.5.11",
-        "@typescript-eslint/eslint-plugin": "^6.18.0",
-        "@typescript-eslint/parser": "^6.18.0",
+        "@typescript-eslint/eslint-plugin": "^6.18.1",
+        "@typescript-eslint/parser": "^6.18.1",
         "core-js": "^3.35.0",
         "element-internals-polyfill": "^1.3.10",
         "eslint": "^8.56.0",
@@ -62,7 +62,7 @@
         "rimraf": "^5.0.5",
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.25.6",
+        "typedoc": "^0.25.7",
         "typedoc-plugin-mdn-links": "^3.1.11",
         "typescript": "~5.3.3"
     },

legacy/utility/MobX.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from '../source';
+
+const Async: FC<PropsWithChildren> = ({ children }) => (
+    <div>Async load: {children}</div>
+);
+export default Async;

package.json

@@ -1,9 +1,11 @@
 import { formToJSON } from 'web-utility';
-import { FC, PropsWithChildren } from '../source';
+import { FC, PropsWithChildren, lazy } from '../source';
 
 import { ClassClock, FunctionClock } from './Clock';
 import { TestField } from './Field';
 
+const Async = lazy(() => import('./Async'));
+
 const Hello: FC<PropsWithChildren> = ({ children }) => (
     <h1>Hello {children}!</h1>
 );
@@ -23,6 +25,7 @@ export const HomePage = () => (
             </a>
             .
         </div>
+
         <ul>
             <li>
                 <FunctionClock />
@@ -31,6 +34,7 @@ export const HomePage = () => (
                 <ClassClock />
             </li>
         </ul>
+
         <form
             // @ts-ignore
             onSubmit={({ currentTarget }) =>
@@ -41,5 +45,7 @@ export const HomePage = () => (
 
             <button>√</button>
         </form>
+
+        <Async>content</Async>
     </>
 );

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "target": "ES6",
+        "module": "ES2020",
         "moduleResolution": "Node",
         "useDefineForClassFields": true,
         "jsx": "react-jsx",

preview/Async.tsx

@@ -1,17 +1,19 @@
 import { observable } from 'mobx';
-import { HTMLProps } from 'web-utility';
+import { JsxProps } from 'dom-renderer';
 
 import { ClassComponent, WebCell, component } from './WebCell';
 import {
+    FC,
     FunctionComponent,
+    PropsWithChildren,
     WebCellComponent,
     observer,
     reaction
 } from './decorator';
 
 export type ComponentTag = string | WebCellComponent;
 
-export type WebCellProps<T extends HTMLElement = HTMLElement> = HTMLProps<T>;
+export type WebCellProps<T extends HTMLElement = HTMLElement> = JsxProps<T>;
 
 export interface AsyncBoxProps extends WebCellProps {
     loader: () => Promise<ComponentTag>;
@@ -31,7 +33,7 @@ export class AsyncBox extends HTMLElement {
     accessor loader: AsyncBoxProps['loader'];
 
     @observable
-    accessor component: ComponentTag;
+    accessor component: FC<PropsWithChildren>;
 
     @observable
     accessor delegatedProps: AsyncBoxProps['delegatedProps'];
@@ -43,8 +45,12 @@ export class AsyncBox extends HTMLElement {
     @reaction((element: AsyncBox) => element.loader)
     protected async load() {
         this.component = undefined;
-        this.component = await this.loader();
 
+        const Tag = await this.loader();
+
+        this.component = ({ children, ...props }) => (
+            <Tag {...props}>{children}</Tag>
+        );
         this.emit('load', this.component);
     }
 

preview/Home.tsx

@@ -0,0 +1,15 @@
+import { DataObject } from 'dom-renderer';
+import { ObservableValue } from 'mobx/dist/internal';
+
+export function getMobxData<T extends DataObject>(observable: T) {
+    for (const key of Object.getOwnPropertySymbols(observable)) {
+        const store = observable[key as keyof T]?.values_ as Map<
+            string,
+            ObservableValue<T>
+        >;
+        if (store instanceof Map)
+            return Object.fromEntries(
+                Array.from(store, ([key, { value_ }]) => [key, value_])
+            ) as T;
+    }
+}