[refactor] rewrite History & Router based on Crank Router's design

[add] Page Transition Animation [remove] Nested Routers [optimize] upgrade Upstream packages
EasyWebApp · Sep 3, 2020 · 43e4f68 · 43e4f68
1 parent 2e82471
commit 43e4f68
Show file tree

Hide file tree

Showing 20 changed files with 497 additions and 493 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,5 @@ node_modules/
 package-lock.json
 dist/
 .cache/
-.rts2_cache_*/
-docs/
+docs/
+.vscode/
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,6 @@
 test/
 dist/
-.rts2_cache_*/
 Contributing.md
 docs/
-.travis.yml
+.travis.yml
+.vscode/
diff --git a/Contributing.md b/Contributing.md
@@ -5,9 +5,8 @@
 ```shell
 git clone https://github.com/EasyWebApp/cell-router.git ~/Desktop/cell-router
 cd ~/Desktop/cell-router
-git checkout v2
 
 npm install
 npm run set-chrome
-npm run debug
+npm start
 ```
diff --git a/ReadMe.md b/ReadMe.md
@@ -1,6 +1,6 @@
 # Cell Router
 
-[Web Component][1] Router based on [WebCell][2] & [MobX][3]
+[Web Component][1] Router based on [WebCell][2] & [Iterable Observer][3]
 
 [![NPM Dependency](https://david-dm.org/EasyWebApp/cell-router.svg)][4]
 [![Build Status](https://travis-ci.com/EasyWebApp/cell-router.svg?branch=master)][5]
@@ -26,12 +26,12 @@ https://web-cell.dev/scaffold/
 
 -   [x] **Async Loading** (recommend to use with `import()` ECMAScript proposal)
 
--   [x] (experimental) [Nested Router][7] support
+-   [x] CSS based **Page Transition Animation** (example [CSS][7] & [TSX][8])
 
 ## Installation
 
 ```shell
-npm install web-cell mobx mobx-web-cell web-utility cell-router
+npm install web-cell cell-router
 npm install parcel-bundler -D
 ```
 
@@ -43,7 +43,8 @@ npm install parcel-bundler -D
         "target": "ES5",
         "experimentalDecorators": true,
         "jsx": "react",
-        "jsxFactory": "createCell"
+        "jsxFactory": "createCell",
+        "jsxFragmentFactory": "Fragment"
     }
 }
 ```
@@ -52,59 +53,38 @@ npm install parcel-bundler -D
 
 ### Sync Pages
 
-`source/model/index.ts`
+`source/index.tsx`
 
-```typescript
-import { History } from 'cell-router/source';
+```jsx
+import { documentReady, render, createCell, Fragment } from 'web-cell';
+import { History, PageProps, CellRouter } from 'cell-router/source';
 
-export const history = new History();
-```
-
-`source/page/PageRouter.tsx`
-
-```javascript
-import { createCell, component } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { HTMLRouter } from 'cell-router/source';
+const history = new History();
 
-import { history } from '../model';
-
-function Test({ path }) {
-    return <span>{path}</span>;
-}
-
-function Example({ path }) {
-    return <span>{path}</span>;
+function TestPage({ path, params, history }: PageProps) {
+    return (
+        <ul>
+            <li>Path: {path}</li>
+            <li>Data: {JSON.stringify(params)}</li>
+        </ul>
+    );
 }
 
-@observer
-@component({
-    tagName: 'page-router',
-    renderTarget: 'children'
-})
-export default class PageRouter extends HTMLRouter {
-    protected history = history;
-    protected routes = [
-        { paths: ['test'], component: Test },
-        { paths: ['example'], component: Example }
-    ];
-
-    render() {
-        return (
-            <main>
-                <ul>
-                    <li>
-                        <a href="test">Test</a>
-                    </li>
-                    <li>
-                        <a href="example">Example</a>
-                    </li>
-                </ul>
-                <div>{super.render()}</div>
-            </main>
-        );
-    }
-}
+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={[{ paths: ['test', /^example/], component: TestPage }]}
+            />
+        </>
+    )
+);
 ```
 
 ### Async Pages
@@ -134,47 +114,34 @@ export default [
 ];
 ```
 
-`source/component/PageRouter.tsx`
+`source/index.tsx`
 
-```javascript
-import { component, createCell } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { HTMLRouter } from 'cell-router/source';
-
-import { history } from '../model';
-import routes from '../page';
-
-@observer
-@component({
-    tagName: 'page-router',
-    renderTarget: 'children'
-})
-export default class PageRouter extends HTMLRouter {
-    protected history = history;
-    protected routes = routes;
-
-    render() {
-        return (
-            <main>
-                <ul>
-                    <li>
-                        <a href="home">Home</a>
-                    </li>
-                    <li>
-                        <a href="list">List</a>
-                    </li>
-                </ul>
-                <div>{super.render()}</div>
-            </main>
-        );
-    }
-}
+```jsx
+import { documentReady, render, createCell, Fragment } from 'web-cell';
+import { History, CellRouter } from 'cell-router/source';
+
+import routes from './page';
+
+const history = new History();
+
+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} />
+        </>
+    )
+);
 ```
 
 [1]: https://www.webcomponents.org/
 [2]: https://web-cell.dev/
-[3]: https://mobx.js.org/
+[3]: https://web-cell.dev/iterable-observer/
 [4]: https://david-dm.org/EasyWebApp/cell-router
 [5]: https://travis-ci.com/EasyWebApp/cell-router
 [6]: https://nodei.co/npm/cell-router/
-[7]: ./test/source/page/TopRouter.tsx
+[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
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "cell-router",
-    "version": "2.0.0-rc.8",
+    "version": "2.0.0",
     "license": "LGPL-3.0",
     "description": "Web Component Router based on WebCell & MobX",
     "keywords": [
@@ -23,43 +23,42 @@
     "types": "dist/index.d.ts",
     "main": "dist/cell-router.umd.js",
     "module": "dist/cell-router.js",
-    "peerDependencies": {
-        "mobx": "^5.15.4",
-        "mobx-web-cell": "^0.2.5",
-        "web-cell": "^2.0.0",
-        "web-utility": "^1.5.2"
+    "dependencies": {
+        "iterable-observer": "^1.0.0-beta.5",
+        "web-cell": "^2.2.0",
+        "web-utility": "^1.8.0"
     },
     "devDependencies": {
-        "@types/jest": "^25.2.1",
-        "fs-match": "^1.4.0",
+        "@types/jest": "^26.0.13",
+        "@types/node": "^14.6.3",
+        "@types/puppeteer-core": "^2.0.0",
+        "@webcomponents/webcomponentsjs": "^2.4.4",
+        "fs-match": "^1.5.0",
         "husky": "^4.2.5",
-        "jest": "^25.5.1",
-        "koapache": "^1.0.6",
-        "lint-staged": "^10.2.0",
-        "microbundle": "^0.11.0",
-        "mobx": "^5.15.4",
-        "mobx-web-cell": "^0.2.5",
+        "jest": "^26.4.2",
+        "koapache": "^2.1.1",
+        "less": "^3.12.2",
+        "lint-staged": "^10.2.13",
+        "microbundle": "^0.12.3",
         "parcel-bundler": "^1.12.4",
-        "prettier": "^2.0.5",
-        "puppeteer-core": "^3.0.2",
-        "snabbdom": "^0.7.4",
-        "ts-jest": "^25.4.0",
-        "typedoc": "^0.16.11",
-        "typescript": "^3.8.3",
-        "web-cell": "^2.0.0",
-        "web-utility": "^1.5.2"
+        "prettier": "^2.1.1",
+        "puppeteer-core": "^5.2.1",
+        "snabbdom": "^1.0.1",
+        "ts-jest": "^26.3.0",
+        "typedoc": "^0.19.0",
+        "typescript": "^4.0.2"
     },
     "scripts": {
-        "start": "cd test/  &&  parcel source/index.html --open",
+        "start": "cd test/  &&  parcel source/index.html --no-source-maps --open",
         "lint": "lint-staged",
         "pack-test": "cd test/  &&  parcel build source/index.html",
         "set-chrome": "app-find chrome -c",
         "test": "npm run lint  &&  npm run pack-test  &&  jest --testTimeout 6000 --forceExit",
-        "pack-dist": "microbundle --external web-cell,mobx --globals web-cell=WebCell --name CellRouter",
+        "pack-dist": "microbundle --external web-cell,web-utility,iterable-observer --globals web-cell=WebCell,web-utility=WebUtility,iterable-observer=IterableObserver --name CellRouter",
         "pack-docs": "typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs",
         "help": "npm run pack-docs  &&  web-server docs/ -o",
-        "prepublishOnly": "npm run build"
+        "prepublishOnly": "npm test  &&  npm run build"
     },
     "prettier": {
         "singleQuote": true,
@@ -78,7 +77,7 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "npm run lint",
+            "pre-commit": "npm test",
             "pre-push": "npm run build"
         }
     }