[refactor] merge Wrap Logic of Sync & Async Function components to support Async Importing & Loading (#40)

Author: TechQuery

.npmignore

@@ -1,7 +1,6 @@
 *.sh
 .*
-eslint.config.mjs
-jest.config.ts
+*.config.ts
 test/
 preview/
 Contributing.md

.vscode/extensions.json

@@ -9,6 +9,7 @@
         "esbenp.prettier-vscode",
         "eamodio.gitlens",
         "github.vscode-pull-request-github",
-        "github.vscode-github-actions"
+        "github.vscode-github-actions",
+        "GitHub.copilot"
     ]
 }

ReadMe.md

@@ -109,9 +109,7 @@ npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 import { DOMRenderer } from 'dom-renderer';
 import { FC, PropsWithChildren } from 'web-cell';
 
-const Hello: FC<PropsWithChildren> = ({ children = 'World' }) => (
-    <h1>Hello, {children}!</h1>
-);
+const Hello: FC<PropsWithChildren> = ({ children = 'World' }) => <h1>Hello, {children}!</h1>;
 
 new DOMRenderer().render(<Hello>WebCell</Hello>);
 ```
@@ -203,9 +201,7 @@ class CounterModel {
 const couterStore = new CounterModel();
 
 const Counter: FC = observer(() => (
-    <button onClick={() => (couterStore.times += 1)}>
-        Counts: {couterStore.times}
-    </button>
+    <button onClick={() => (couterStore.times += 1)}>Counts: {couterStore.times}</button>
 ));
 
 new DOMRenderer().render(<Counter />);
@@ -419,12 +415,7 @@ class MyField extends HTMLElement implements WebField {
         const { name } = this;
 
         return (
-            <input
-                name={name}
-                onChange={({ currentTarget: { value } }) =>
-                    (this.value = value)
-                }
-            />
+            <input name={name} onChange={({ currentTarget: { value } }) => (this.value = value)} />
         );
     }
 }
@@ -440,6 +431,22 @@ new DOMRenderer().render(
 
 ### Async component
 
+```tsx
+import { DOMRenderer } from 'dom-renderer';
+import { observer, PropsWithChildren } from 'web-cell';
+import { sleep } from 'web-utility';
+
+const AsyncComponent = observer(async ({ children }: PropsWithChildren) => {
+    await sleep(1);
+
+    return <p>Async Component in {children}</p>;
+});
+
+new DOMRenderer().render(<AsyncComponent>WebCell</AsyncComponent>);
+```
+
+### Async loading
+
 #### `AsyncTag.tsx`
 
 ```tsx
@@ -504,10 +511,7 @@ import { DOMRenderer } from 'dom-renderer';
 import { AnimateCSS } from 'web-cell';
 
 new DOMRenderer().render(
-    <AnimateCSS
-        type="fadeIn"
-        component={props => <h1 {...props}>Fade In</h1>}
-    />
+    <AnimateCSS type="fadeIn" component={props => <h1 {...props}>Fade In</h1>} />
 );
 ```
 
@@ -567,7 +571,6 @@ We recommend these libraries to use with WebCell:
 - **State management**: [MobX][3] (also powered by **TypeScript** & **Decorator**)
 - **Router**: [Cell Router][43]
 - **UI components**
-
     - [BootCell][44] (based on **BootStrap v5**)
     - [MDUI][45] (based on **Material Design v3**)
     - [GitHub Web Widget][46]

guide/ReadMe-zh.md

@@ -109,9 +109,7 @@ npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 import { DOMRenderer } from 'dom-renderer';
 import { FC, PropsWithChildren } from 'web-cell';
 
-const Hello: FC<PropsWithChildren> = ({ children = '世界' }) => (
-    <h1>你好，{children}！</h1>
-);
+const Hello: FC<PropsWithChildren> = ({ children = '世界' }) => <h1>你好，{children}！</h1>;
 
 new DOMRenderer().render(<Hello>WebCell</Hello>);
 ```
@@ -203,9 +201,7 @@ class CounterModel {
 const couterStore = new CounterModel();
 
 const Counter: FC = observer(() => (
-    <button onClick={() => (couterStore.times += 1)}>
-        计数：{couterStore.times}
-    </button>
+    <button onClick={() => (couterStore.times += 1)}>计数：{couterStore.times}</button>
 ));
 
 new DOMRenderer().render(<Counter />);
@@ -419,12 +415,7 @@ class MyField extends HTMLElement implements WebField {
         const { name } = this;
 
         return (
-            <input
-                name={name}
-                onChange={({ currentTarget: { value } }) =>
-                    (this.value = value)
-                }
-            />
+            <input name={name} onChange={({ currentTarget: { value } }) => (this.value = value)} />
         );
     }
 }
@@ -440,6 +431,22 @@ new DOMRenderer().render(
 
 ### 异步组件
 
+```tsx
+import { DOMRenderer } from 'dom-renderer';
+import { observer, PropsWithChildren } from 'web-cell';
+import { sleep } from 'web-utility';
+
+const AsyncComponent = observer(async ({ children }: PropsWithChildren) => {
+    await sleep(1);
+
+    return <p>{children} 中的异步组件</p>;
+});
+
+new DOMRenderer().render(<AsyncComponent>WebCell</AsyncComponent>);
+```
+
+### 异步加载
+
 #### `AsyncTag.tsx`
 
 ```tsx
@@ -564,7 +571,6 @@ https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
 - **状态管理**：[MobX][3]（也由 **TypeScript** 和 **Decorator** 提供支持）
 - **路由**：[Cell Router][43]
 - **UI 组件**
-
     - [BootCell][44]（基于 **BootStrap v5**）
     - [MDUI][45]（基于 **Material Design v3**）
     - [GitHub Web Widget][46]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -38,41 +38,41 @@
         "jsdom": ">=23.1"
     },
     "devDependencies": {
-        "@cspell/eslint-plugin": "^9.1.1",
-        "@eslint/js": "^9.29.0",
-        "@parcel/config-default": "~2.15.2",
-        "@parcel/packager-ts": "~2.15.2",
-        "@parcel/transformer-typescript-tsc": "~2.15.2",
-        "@parcel/transformer-typescript-types": "~2.15.2",
-        "@stylistic/eslint-plugin": "^4.4.1",
+        "@cspell/eslint-plugin": "^9.2.0",
+        "@eslint/js": "^9.31.0",
+        "@parcel/config-default": "~2.15.4",
+        "@parcel/packager-ts": "~2.15.4",
+        "@parcel/transformer-typescript-tsc": "~2.15.4",
+        "@parcel/transformer-typescript-types": "~2.15.4",
+        "@stylistic/eslint-plugin": "^5.2.1",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.15.31",
-        "core-js": "^3.43.0",
+        "@types/node": "^22.16.5",
+        "core-js": "^3.44.0",
         "element-internals-polyfill": "^1.3.13",
-        "eslint": "^9.29.0",
-        "eslint-config-prettier": "^10.1.5",
+        "eslint": "^9.31.0",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "globals": "^16.2.0",
+        "globals": "^16.3.0",
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jiti": "^2.4.2",
         "jsdom": "^26.1.0",
-        "lint-staged": "^16.1.1",
-        "parcel": "~2.15.2",
-        "prettier": "^3.5.3",
-        "prettier-plugin-sh": "^0.17.4",
+        "lint-staged": "^16.1.2",
+        "parcel": "~2.15.4",
+        "prettier": "^3.6.2",
+        "prettier-plugin-sh": "^0.18.0",
         "replace": "^1.2.2",
         "rimraf": "^6.0.1",
         "serve": "^14.2.4",
         "ts-jest": "^29.4.0",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.28.5",
-        "typedoc-plugin-mdn-links": "^5.0.2",
+        "typedoc": "^0.28.7",
+        "typedoc-plugin-mdn-links": "^5.0.5",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.34.0"
+        "typescript-eslint": "^8.37.0"
     },
     "pnpm": {
         "onlyBuiltDependencies": [
@@ -104,6 +104,7 @@
         "trailingComma": "none",
         "arrowParens": "avoid",
         "tabWidth": 4,
+        "printWidth": 100,
         "plugins": [
             "prettier-plugin-sh"
         ]