[optimize] update Read Me document

Author: TechQuery

.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]

preview/Async.tsx

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

preview/Home.tsx

@@ -4,7 +4,7 @@ import { AnimateCSS, FC, lazy, observer, PropsWithChildren, WebCellProps } from
 import { ClassClock, FunctionClock } from './Clock';
 import { TestField } from './Field';
 
-const Async = lazy(() => import('./Async'));
+const AsyncLoad = lazy(() => import('./Async'));
 
 const Hello: FC<WebCellProps> = ({ className, children }) => (
     <h1 className={className}>Hello {children}!</h1>
@@ -43,7 +43,7 @@ export const HomePage = () => (
             <button>√</button>
         </form>
 
-        <Async>content</Async>
+        <AsyncLoad>content</AsyncLoad>
         <AsyncComponent>content</AsyncComponent>
     </>
 );

test/Async.spec.tsx

@@ -40,6 +40,7 @@ describe('Async Box component', () => {
         const Async = lazy(async () => ({ default: Sync }));
 
         renderer.render(<Async href="test">Sync Component from Async Loading</Async>);
+
         expect(document.body.innerHTML).toBe('<function-cell></function-cell>');
 
         await sleep();