[optimize] update half of ReadMe document

[fix] some detail bugs
EasyWebApp · Jan 7, 2024 · b7f9824 · b7f9824
1 parent f5e9b2e
commit b7f9824
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 53 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -2,7 +2,7 @@
 
 [Web Component][1] Router based on [WebCell][2] & [MobX][3]
 
-[![NPM Dependency](https://david-dm.org/EasyWebApp/cell-router.svg)][4]
+[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/cell-router.svg)][4]
 [![CI & CD](https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml/badge.svg)][5]
 
 [![NPM](https://nodei.co/npm/cell-router.png?downloads=true&downloadRank=true&stars=true)][6]
@@ -30,21 +30,33 @@ https://web-cell.dev/scaffold/
 
 ## Installation
 
+### Command
+
 ```shell
-npm install web-cell cell-router
-npm install parcel -D
+npm install dom-renderer web-cell cell-router
+npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 ```
 
-`tsconfig.json`
+### `tsconfig.json`
 
 ```json
 {
     "compilerOptions": {
-        "target": "ES5",
-        "experimentalDecorators": true,
-        "jsx": "react",
-        "jsxFactory": "createCell",
-        "jsxFragmentFactory": "Fragment"
+        "target": "ES6",
+        "useDefineForClassFields": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "dom-renderer"
+    }
+}
+```
+
+### `.parcelrc`
+
+```json
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
     }
 }
 ```
@@ -53,43 +65,42 @@ npm install parcel -D
 
 ### Sync Pages
 
-`source/index.tsx`
+#### `source/index.tsx`
 
-```jsx
-import { documentReady, render, createCell, Fragment } from 'web-cell';
-import { History, PageProps, CellRouter } from 'cell-router/source';
+```tsx
+import { documentReady } from 'web-utility';
+import { DOMRenderer } from 'dom-renderer';
+import { FC } from 'web-cell';
+import { createRouter, PageProps } from 'cell-router';
 
-const history = new History();
+const { Route, Link } = createRouter();
 
-function TestPage({ path, history, defaultSlot, ...data }: PageProps) {
-    return (
-        <ul>
-            <li>Path: {path}</li>
-            <li>Data: {JSON.stringify(data)}</li>
-        </ul>
-    );
-}
+const TestPage: FC<PageProps> = ({ path, history, defaultSlot, ...data }) => (
+    <ul>
+        <li>Path: {path}</li>
+        <li>Data: {JSON.stringify(data)}</li>
+    </ul>
+);
 
 documentReady.then(() =>
-    render(
+    new DOMRenderer().render(
         <>
             <nav>
-                <a href="test?a=1">Test</a>
-                <a href="example?b=2">Example</a>
+                <Link to="test?a=1">Test</Link>
+                <Link to="example?b=2">Example</Link>
             </nav>
-            <CellRouter
-                className="router"
-                history={history}
-                routes={[{ paths: ['test', /^example/], component: TestPage }]}
-            />
+            <main className="router">
+                <Route path="test" component={TestPage} />
+                <Route path="example" component={TestPage} />
+            </main>
         </>
     )
 );
 ```
 
 ### Async Pages
 
-`tsconfig.json`
+#### `tsconfig.json`
 
 ```json
 {
@@ -99,7 +110,7 @@ documentReady.then(() =>
 }
 ```
 
-`source/page/index.ts`
+#### `source/page/index.ts`
 
 ```javascript
 export default [
@@ -114,7 +125,7 @@ export default [
 ];
 ```
 
-`source/index.tsx`
+#### `source/index.tsx`
 
 ```jsx
 import { documentReady, render, createCell, Fragment } from 'web-cell';
@@ -140,7 +151,7 @@ documentReady.then(() =>
 [1]: https://www.webcomponents.org/
 [2]: https://web-cell.dev/
 [3]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
-[4]: https://david-dm.org/EasyWebApp/cell-router
+[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

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "cell-router",
-    "version": "3.0.0-rc.0",
+    "version": "3.0.0-rc.1",
     "license": "LGPL-3.0",
     "description": "Web Component Router based on WebCell & MobX",
     "keywords": [
@@ -29,7 +29,7 @@
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "urlpattern-polyfill": "^9.0.0",
-        "web-cell": "^3.0.0-rc.3",
+        "web-cell": "^3.0.0-rc.4",
         "web-utility": "^4.1.3"
     },
     "devDependencies": {
@@ -53,7 +53,7 @@
         "rimraf": "^5.0.5",
         "ts-jest": "^29.1.1",
         "typedoc": "^0.25.6",
-        "typedoc-plugin-mdn-links": "^3.1.10",
+        "typedoc-plugin-mdn-links": "^3.1.11",
         "typescript": "~5.3.3"
     },
     "scripts": {
@@ -63,7 +63,7 @@
         "preview": "cd test/  &&  rimraf .parcel-cache/ dist/  &&  parcel --open",
         "pack-preview": "cd test/  &&  rimraf .parcel-cache/ dist/  &&  parcel build --public-url=. --dist-dir=../docs/preview/",
         "pack-dist": "rimraf dist/  &&  parcel build source/index.ts",
-        "test": "lint-staged  &&  npm run pack-dist  &&  npm run pack-preview  &&  jest --testTimeout 6000 --forceExit",
+        "test": "lint-staged  &&  npm run pack-dist  &&  npm run pack-preview",
         "pack-docs": "rimraf docs/  &&  typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs",
         "help": "npm run pack-docs  &&  web-server docs/ -o",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/source/Router.tsx b/source/Router.tsx
@@ -1,6 +1,6 @@
 import { computed, observable } from 'mobx';
 import {
-    ComponentClass,
+    ClassComponent,
     FunctionComponent,
     attribute,
     component,
@@ -14,14 +14,12 @@ import { PageProps, nextTick, watchStop } from './utility';
 
 export interface CellRouteProps extends HTMLProps<HTMLElement> {
     path: string;
-    component: FunctionComponent<PageProps> | ComponentClass;
+    component: FunctionComponent<PageProps> | ClassComponent;
     startClass?: string;
     endClass?: string;
 }
 
-@component({
-    tagName: 'cell-route'
-})
+@component({ tagName: 'cell-route' })
 @observer
 export class CellRoute extends HTMLElement {
     declare props: CellRouteProps;
@@ -30,8 +28,7 @@ export class CellRoute extends HTMLElement {
     @observable
     accessor path: string;
 
-    @observable
-    accessor component: CellRouteProps['component'];
+    component: CellRouteProps['component'];
 
     @attribute
     @observable