[add] Async Page example & document

.npmignore

@@ -1,6 +1,8 @@
 test/
 Contributing.md
 docs/
+.env
+.parcelrc
 .parcel-cache/
 .husky/
 .github/

ReadMe.md

@@ -68,7 +68,6 @@ npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 #### `source/index.tsx`
 
 ```tsx
-import { documentReady } from 'web-utility';
 import { DOMRenderer } from 'dom-renderer';
 import { FC } from 'web-cell';
 import { createRouter, PageProps } from 'cell-router';
@@ -82,19 +81,17 @@ const TestPage: FC<PageProps> = ({ path, history, defaultSlot, ...data }) => (
     </ul>
 );
 
-documentReady.then(() =>
-    new DOMRenderer().render(
-        <>
-            <nav>
-                <Link to="test?a=1">Test</Link>
-                <Link to="example?b=2">Example</Link>
-            </nav>
-            <main className="router">
-                <Route path="test" component={TestPage} />
-                <Route path="example" component={TestPage} />
-            </main>
-        </>
-    )
+new DOMRenderer().render(
+    <>
+        <nav>
+            <Link to="test?a=1">Test</Link>
+            <Link to="example/2">Example</Link>
+        </nav>
+        <main className="router">
+            <Route path="test" component={TestPage} />
+            <Route path="example/:id" component={TestPage} />
+        </main>
+    </>
 );
 ```
 
@@ -105,54 +102,47 @@ documentReady.then(() =>
 ```json
 {
     "compilerOptions": {
-        "module": "ESNext"
+        "module": "ES2020"
     }
 }
 ```
 
-#### `source/page/index.ts`
-
-```javascript
-export default [
-    {
-        paths: ['', 'home'],
-        component: async () => (await import('./Home.tsx')).default
-    },
-    {
-        paths: ['list'],
-        component: async () => (await import('./List.tsx')).default
-    }
-];
-```
-
 #### `source/index.tsx`
 
-```jsx
-import { documentReady, render, createCell, Fragment } from 'web-cell';
-import { History, CellRouter } from 'cell-router/source';
-
-import routes from './page';
+```tsx
+import { DOMRenderer } from 'dom-renderer';
+import { FC, lazy } from 'web-cell';
+import { createRouter, PageProps } from 'cell-router';
 
-const history = new History();
+const { Route, Link } = createRouter();
 
-documentReady.then(() =>
-    render(
-        <>
-            <nav>
-                <a href="test?a=1">Test</a>
-                <a href="example?b=2">Example</a>
-            </nav>
-            <CellRouter className="router" history={history} routes={routes} />
-        </>
-    )
+const TestPage: FC<PageProps> = ({ path, history, defaultSlot, ...data }) => (
+    <ul>
+        <li>Path: {path}</li>
+        <li>Data: {JSON.stringify(data)}</li>
+    </ul>
+);
+const AsyncPage = lazy(() => import('./Async'));
+
+new DOMRenderer().render(
+    <>
+        <nav>
+            <Link to="test?a=1">Test</Link>
+            <Link to="example/2">Example</Link>
+        </nav>
+        <main className="router">
+            <Route path="test" component={TestPage} />
+            <Route path="example/:id" component={AsyncPage} />
+        </main>
+    </>
 );
 ```
 
 [1]: https://www.webcomponents.org/
 [2]: https://web-cell.dev/
-[3]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
+[3]: https://mobx.js.org/
 [4]: https://libraries.io/npm/cell-router
 [5]: https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml
 [6]: https://nodei.co/npm/cell-router/
-[7]: https://github.com/EasyWebApp/cell-router/blob/v2/test/source/index.less#L5
-[8]: https://github.com/EasyWebApp/cell-router/blob/v2/test/source/page/index.tsx#L12
+[7]: https://github.com/EasyWebApp/cell-router/blob/b7f98243834f9226088c15b111428e211bbfaa9f/test/source/index.less#L5-L25
+[8]: https://github.com/EasyWebApp/cell-router/blob/b7f98243834f9226088c15b111428e211bbfaa9f/test/source/page/index.tsx#L19-L32

package.json

@@ -29,7 +29,7 @@
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "urlpattern-polyfill": "^9.0.0",
-        "web-cell": "^3.0.0-rc.4",
+        "web-cell": "^3.0.0-rc.6",
         "web-utility": "^4.1.3"
     },
     "devDependencies": {

source/Router.tsx

@@ -54,7 +54,7 @@ export class CellRoute extends HTMLElement {
         return History.match(this.path, history.oldPath);
     }
 
-    @reaction((element: CellRoute) => element.matched)
+    @reaction(({ matched }) => matched)
     protected async toggleMotion(enter?: any) {
         if (!this.startClass || !this.endClass) return;
 

source/utility.ts

@@ -1,3 +1,5 @@
+import { JsxProps } from 'dom-renderer';
+
 import { History } from './History';
 
 export function watchStop<T extends HTMLElement | SVGElement>(
@@ -23,7 +25,7 @@ export function watchStop<T extends HTMLElement | SVGElement>(
     });
 }
 
-export interface PageProps {
+export interface PageProps extends JsxProps<HTMLElement> {
     path: string;
     history: History;
     [key: string]: any;

test/source/page/async.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'web-cell';
+import { PageProps } from '../../../source';
+
+const AsyncPage: FC<PageProps> = props => (
+    <div className={`page ${props.className}`}>
+        <h1>Async</h1>
+        <pre>
+            <code>{JSON.stringify(props, null, 4)}</code>
+        </pre>
+    </div>
+);
+export default AsyncPage;

test/source/page/example.tsx

@@ -1,14 +1,13 @@
+import { FC } from 'web-cell';
 import { PageProps } from '../../../source';
 
 export interface TestPageProps extends PageProps {
     edit: boolean;
 }
 
-export default function TestPage({ className, path, id, edit }: TestPageProps) {
-    return (
-        <ul className={`page ${className}`}>
-            <li>Path: {path}</li>
-            <li>Data: {JSON.stringify({ id, edit })}</li>
-        </ul>
-    );
-}
+export const TestPage: FC<TestPageProps> = ({ className, path, id, edit }) => (
+    <ul className={`page ${className}`}>
+        <li>Path: {path}</li>
+        <li>Data: {JSON.stringify({ id, edit })}</li>
+    </ul>
+);

test/source/page/index.tsx

@@ -1,9 +1,12 @@
 import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
+import { lazy } from 'web-cell';
 import { documentReady } from 'web-utility';
-
 import { createRouter } from '../../../source';
-import TestPage from './example';
+
+import { TestPage } from './example';
+
+const AsyncPage = lazy(() => import('./async'));
 
 configure({ enforceActions: 'never' });
 
@@ -18,10 +21,12 @@ documentReady.then(() =>
             <nav>
                 <Link to="list/1">List page</Link>
                 <Link to="detail/2?edit=true">Detail page</Link>
+                <Link to="async/3?edit=true">Async page</Link>
             </nav>
             <main className="router">
                 <Route path="list/:id" component={TestPage} />
                 <Route path="detail/:id" component={TestPage} />
+                <Route path="async/:id" component={AsyncPage} />
             </main>
         </>
     )

test/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
+        "module": "ES2020",
         "jsx": "react-jsx",
         "jsxImportSource": "dom-renderer"
     },