[refactor] simplify Function Component rendering with Async Cell (#39)

Author: TechQuery

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
                   node-version: 22

.github/workflows/push.yml

@@ -15,7 +15,7 @@ jobs:
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
                   node-version: 22

ReadMe.md

@@ -283,7 +283,7 @@ export class MyButton extends HTMLElement {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].6/dist/css/bootstrap.min.css"
                 />
                 <a className="btn">
                     <slot />
@@ -531,14 +531,14 @@ https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
 
 ## Basic knowledge
 
--   [Web components][23]
--   [Custom elements][24]
--   [Shadow DOM][25]
--   [Element Internals][26]
--   [CSS variables][27]
--   [View transitions][28]
--   [ECMAScript 6+][29]
--   [TypeScript 5+][4]
+- [Web components][23]
+- [Custom elements][24]
+- [Shadow DOM][25]
+- [Element Internals][26]
+- [CSS variables][27]
+- [View transitions][28]
+- [ECMAScript 6+][29]
+- [TypeScript 5+][4]
 
 ## Life Cycle hooks
 
@@ -564,23 +564,23 @@ https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
 
 We recommend these libraries to use with WebCell:
 
--   **State management**: [MobX][3] (also powered by **TypeScript** & **Decorator**)
--   **Router**: [Cell Router][43]
--   **UI components**
+- **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]
+    - [BootCell][44] (based on **BootStrap v5**)
+    - [MDUI][45] (based on **Material Design v3**)
+    - [GitHub Web Widget][46]
 
--   **HTTP request**: [KoAJAX][47] (based on **Koa**-like middlewares)
--   **Utility**: [Web utility][48] methods & types
--   **Event stream**: [Iterable Observer][49] (`Observable` proposal)
--   **MarkDown integration**: [Parcel MDX transformer][50] (**MDX** Compiler plugin)
+- **HTTP request**: [KoAJAX][47] (based on **Koa**-like middlewares)
+- **Utility**: [Web utility][48] methods & types
+- **Event stream**: [Iterable Observer][49] (`Observable` proposal)
+- **MarkDown integration**: [Parcel MDX transformer][50] (**MDX** Compiler plugin)
 
 ## Roadmap
 
--   [x] [Server-side Render][51]
--   [x] [Async Component loading][52]
+- [x] [Server-side Render][51]
+- [x] [Async Component loading][52]
 
 ## [v2 to v3 migration](./guide/Migrating.md)
 

guide/Migrating-zh.md

@@ -28,9 +28,7 @@ import {
 +   accessor key = '';
 }
 
-@component({
-    tagName: 'my-tag'
-})
+@component({ tagName: 'my-tag' })
 +@observer
 -export class MyTag extends mixin<{}, State>() {
 +export class MyTag extends HTMLElement {
@@ -63,9 +61,8 @@ npm install mobx
 另一方面，[`mobx-web-cell` 适配器][6] 已经合并到了核心包中。
 
 ```diff
-+import { JsxProps } from 'dom-renderer';
 import {
--   WebCellProps,
+    WebCellProps,
     component,
     attribute,
 -   watch,
@@ -77,14 +74,11 @@ import {
 -import { observer } from 'mobx-web-cell';
 +import { observable } from 'mobx';
 
--export interface MyTagProps extends WebCellProps {
-+export interface MyTagProps extends JsxProps<HTMLElement> {
+export interface MyTagProps extends WebCellProps {
     count?: number
 }
 
-@component({
-    tagName: 'my-tag'
-})
+@component({ tagName: 'my-tag' })
 @observer
 -export class MyTag extends mixin<MyTagProps>() {
 +export class MyTag extends HTMLElement {

guide/Migrating.md

@@ -28,9 +28,7 @@ import {
 +   accessor key = '';
 }
 
-@component({
-    tagName: 'my-tag'
-})
+@component({ tagName: 'my-tag' })
 +@observer
 -export class MyTag extends mixin<{}, State>() {
 +export class MyTag extends HTMLElement {
@@ -63,9 +61,8 @@ npm install mobx
 On the other hand, [`mobx-web-cell` adapter][6] has been merged into the core package.
 
 ```diff
-+import { JsxProps } from 'dom-renderer';
 import {
--   WebCellProps,
+    WebCellProps,
     component,
     attribute,
 -   watch,
@@ -77,14 +74,11 @@ import {
 -import { observer } from 'mobx-web-cell';
 +import { observable } from 'mobx';
 
--export interface MyTagProps extends WebCellProps {
-+export interface MyTagProps extends JsxProps<HTMLElement> {
+export interface MyTagProps extends WebCellProps {
     count?: number
 }
 
-@component({
-    tagName: 'my-tag'
-})
+@component({ tagName: 'my-tag' })
 @observer
 -export class MyTag extends mixin<MyTagProps>() {
 +export class MyTag extends HTMLElement {

guide/ReadMe-zh.md

@@ -283,7 +283,7 @@ export class MyButton extends HTMLElement {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].6/dist/css/bootstrap.min.css"
                 />
                 <a className="btn">
                     <slot />
@@ -461,6 +461,42 @@ const AsyncTag = lazy(() => import('./AsyncTag'));
 new DOMRenderer().render(<AsyncTag />);
 ```
 
+### 异步渲染（试验）
+
+#### DOM 树
+
+```tsx
+import { DOMRenderer } from 'dom-renderer';
+
+new DOMRenderer().render(
+    <a>
+        <b>异步渲染</b>
+    </a>,
+    document.body,
+    'async'
+);
+```
+
+#### 类组件
+
+```tsx
+import { component } from 'web-cell';
+
+@component({
+    tagName: 'async-renderer',
+    renderMode: 'async'
+})
+export class AsyncRenderer extends HTMLElement {
+    render() {
+        return (
+            <a>
+                <b>异步渲染</b>
+            </a>
+        );
+    }
+}
+```
+
 ### Animate CSS 组件
 
 ```tsx
@@ -492,14 +528,14 @@ https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
 
 ## 基础知识
 
--   [Web 组件][23]
--   [自定义元素][24]
--   [虚拟 DOM][25]
--   [Element Internals][26]
--   [CSS 变量][27]
--   [视图渐变][28]
--   [ECMAScript 6+][29]
--   [TypeScript 5+][4]
+- [Web 组件][23]
+- [自定义元素][24]
+- [虚拟 DOM][25]
+- [Element Internals][26]
+- [CSS 变量][27]
+- [视图渐变][28]
+- [ECMAScript 6+][29]
+- [TypeScript 5+][4]
 
 ## 生命周期钩子
 
@@ -525,23 +561,23 @@ https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
 
 我们建议将这些库与 WebCell 一起使用：
 
--   **状态管理**：[MobX][3]（也由 **TypeScript** 和 **Decorator** 提供支持）
--   **路由**：[Cell Router][43]
--   **UI 组件**
+- **状态管理**：[MobX][3]（也由 **TypeScript** 和 **Decorator** 提供支持）
+- **路由**：[Cell Router][43]
+- **UI 组件**
 
-    -   [BootCell][44]（基于 **BootStrap v5**）
-    -   [MDUI][45]（基于 **Material Design v3**）
-    -   [GitHub Web Widget][46]
+    - [BootCell][44]（基于 **BootStrap v5**）
+    - [MDUI][45]（基于 **Material Design v3**）
+    - [GitHub Web Widget][46]
 
--   **HTTP 请求**：[KoAJAX][47]（基于类 **Koa** 中间件）
--   **实用程序**：[Web utility][48] 方法和类型
--   **事件流**：[Iterable Observer][49]（`Observable` 提案）
--   **MarkDown 集成**：[Parcel MDX transformer][50]（**MDX** 编译器插件）
+- **HTTP 请求**：[KoAJAX][47]（基于类 **Koa** 中间件）
+- **实用程序**：[Web utility][48] 方法和类型
+- **事件流**：[Iterable Observer][49]（`Observable` 提案）
+- **MarkDown 集成**：[Parcel MDX transformer][50]（**MDX** 编译器插件）
 
 ## 路线图
 
--   [x] [服务器端渲染][51]
--   [x] [异步组件加载][52]
+- [x] [服务器端渲染][51]
+- [x] [异步组件加载][52]
 
 ## [v2 到 v3 迁移](./Migrating-zh.md)
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.4",
+    "version": "3.1.0",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -26,9 +26,9 @@
     "source": "source/index.ts",
     "types": "dist/index.d.ts",
     "dependencies": {
-        "@swc/helpers": "^0.5.15",
+        "@swc/helpers": "^0.5.17",
         "dom-renderer": "^2.6.2",
-        "mobx": ">=6.13.6",
+        "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.4.3"
     },
@@ -38,41 +38,50 @@
         "jsdom": ">=23.1"
     },
     "devDependencies": {
-        "@cspell/eslint-plugin": "^8.17.5",
-        "@eslint/js": "^9.22.0",
-        "@parcel/config-default": "~2.13.3",
-        "@parcel/packager-ts": "~2.13.3",
-        "@parcel/transformer-typescript-tsc": "~2.13.3",
-        "@parcel/transformer-typescript-types": "~2.13.3",
-        "@stylistic/eslint-plugin": "^4.2.0",
+        "@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",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.13.10",
-        "core-js": "^3.41.0",
+        "@types/node": "^22.15.31",
+        "core-js": "^3.43.0",
         "element-internals-polyfill": "^1.3.13",
-        "eslint": "^9.22.0",
-        "eslint-config-prettier": "^10.1.1",
-        "eslint-plugin-react": "^7.37.4",
+        "eslint": "^9.29.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "globals": "^16.0.0",
+        "globals": "^16.2.0",
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jiti": "^2.4.2",
-        "jsdom": "^26.0.0",
-        "lint-staged": "^15.5.0",
-        "open-cli": "^8.0.0",
-        "parcel": "~2.13.3",
+        "jsdom": "^26.1.0",
+        "lint-staged": "^16.1.1",
+        "parcel": "~2.15.2",
         "prettier": "^3.5.3",
-        "prettier-plugin-sh": "^0.15.0",
+        "prettier-plugin-sh": "^0.17.4",
         "replace": "^1.2.2",
         "rimraf": "^6.0.1",
-        "ts-jest": "^29.2.6",
+        "serve": "^14.2.4",
+        "ts-jest": "^29.4.0",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.27.9",
-        "typedoc-plugin-mdn-links": "^5.0.1",
-        "typescript": "~5.8.2",
-        "typescript-eslint": "^8.26.1"
+        "typedoc": "^0.28.5",
+        "typedoc-plugin-mdn-links": "^5.0.2",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.34.0"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@swc/core",
+            "core-js",
+            "lmdb",
+            "msgpackr-extract"
+        ]
     },
     "scripts": {
         "prepare": "husky",
@@ -83,7 +92,7 @@
         "pack-dist": "parcel build source/index.ts",
         "pack-docs": "sh ./guide/pack-docs.sh",
         "build": "npm run clean  &&  npm run pack-dist  &&  npm run pack-docs  &&  npm run pack-preview",
-        "start": "npm run pack-docs  &&  open-cli docs/index.html",
+        "start": "npm run pack-docs  &&  serve docs/",
         "prepublishOnly": "npm test  &&  npm run build"
     },
     "lint-staged": {