[migrate] upgrade to WebCell v3 RC & MobX 6.11+

.github/workflows/main.yml

@@ -7,22 +7,30 @@ jobs:
     Build-and-Publish:
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-            - name: Use Node.js
-              uses: actions/setup-node@v2-beta
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2
               with:
-                  node-version: 14
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
                   registry-url: https://registry.npmjs.org
-                  cache: yarn
+                  cache: pnpm
             - uses: browser-actions/setup-chrome@latest
-            - name: Install, Build & Publish
+
+            - name: Install Dependencies
+              run: |
+                  pnpm i --frozen-lockfile
+                  pnpm set-chrome
+
+            - name: Build & Publish
               run: |
-                  yarn  &&  yarn set-chrome
-                  cd test/  &&  yarn  &&  cd ..
-                  yarn publish
+                  cd test/  &&  pnpm i  &&  cd ..
+                  npm publish
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
             - name: Update document
               uses: peaceiris/actions-gh-pages@v3
               with:

.npmignore

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

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = false

.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}

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,95 +65,84 @@ 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 { 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(
-        <>
-            <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 }]}
-            />
-        </>
-    )
+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>
+    </>
 );
 ```
 
 ### Async Pages
 
-`tsconfig.json`
+#### `tsconfig.json`
 
 ```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`
 
-`source/index.tsx`
+```tsx
+import { DOMRenderer } from 'dom-renderer';
+import { FC, lazy } from 'web-cell';
+import { createRouter, PageProps } from 'cell-router';
 
-```jsx
-import { documentReady, render, createCell, Fragment } from 'web-cell';
-import { History, CellRouter } from 'cell-router/source';
+const { Route, Link } = createRouter();
 
-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} />
-        </>
-    )
+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
-[4]: https://david-dm.org/EasyWebApp/cell-router
+[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

@@ -1,6 +1,6 @@
 {
     "name": "cell-router",
-    "version": "3.0.0-alpha.0",
+    "version": "3.0.0-rc.2",
     "license": "LGPL-3.0",
     "description": "Web Component Router based on WebCell & MobX",
     "keywords": [
@@ -24,41 +24,47 @@
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
     "dependencies": {
-        "@swc/helpers": "^0.3.17",
-        "mobx": ">=4.0.0 <6.0.0",
-        "regenerator-runtime": "^0.13.9",
-        "urlpattern-polyfill": "^5.0.3",
-        "web-cell": "^3.0.0-beta.1",
-        "web-utility": "^3.7.3"
+        "@swc/helpers": "^0.5.3",
+        "dom-renderer": "^2.0.5",
+        "mobx": ">=6.11",
+        "regenerator-runtime": "^0.14.1",
+        "urlpattern-polyfill": "^9.0.0",
+        "web-cell": "^3.0.0-rc.6",
+        "web-utility": "^4.1.3"
     },
     "devDependencies": {
-        "@parcel/packager-ts": "~2.6.0",
-        "@parcel/transformer-less": "~2.6.0",
-        "@parcel/transformer-typescript-types": "~2.6.0",
-        "@types/jest": "^28.1.1",
-        "element-internals-polyfill": "^1.1.4",
-        "fs-match": "^1.6.0",
-        "husky": "^8.0.1",
-        "jest": "^28.1.0",
-        "jest-environment-jsdom": "^28.1.0",
-        "koapache": "^2.2.1",
-        "lint-staged": "^13.0.0",
-        "parcel": "~2.6.0",
-        "prettier": "^2.6.2",
+        "@parcel/config-default": "~2.11.0",
+        "@parcel/packager-ts": "~2.11.0",
+        "@parcel/transformer-less": "~2.11.0",
+        "@parcel/transformer-typescript-tsc": "~2.11.0",
+        "@parcel/transformer-typescript-types": "~2.11.0",
+        "@types/jest": "^29.5.11",
+        "element-internals-polyfill": "^1.3.10",
+        "fs-match": "^1.7.1",
+        "husky": "^8.0.3",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "koapache": "^2.2.2",
+        "lint-staged": "^15.2.0",
+        "parcel": "~2.11.0",
+        "prettier": "^3.1.1",
         "process": "^0.11.10",
-        "puppeteer-core": "^14.2.1",
-        "ts-jest": "^28.0.4",
-        "typedoc": "^0.22.17",
-        "typescript": "~4.7.3"
+        "puppeteer-core": "^21.7.0",
+        "rimraf": "^5.0.5",
+        "ts-jest": "^29.1.1",
+        "typedoc": "^0.25.7",
+        "typedoc-plugin-mdn-links": "^3.1.11",
+        "typescript": "~5.3.3"
     },
     "scripts": {
         "prepare": "husky install",
         "start": "cd test/  &&  npm start",
-        "pack-test": "cd test/  &&  npm run build",
         "set-chrome": "app-find chrome -c",
-        "pack-dist": "rm -rf dist/  &&  parcel build source/index.ts",
-        "test": "lint-staged  &&  npm run pack-dist  &&  npm run pack-test  &&  jest --testTimeout 6000 --forceExit",
-        "pack-docs": "rm -rf docs/  &&  typedoc source/",
+        "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",
+        "pack-docs": "rimraf docs/  &&  typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs",
         "help": "npm run pack-docs  &&  web-server docs/ -o",
         "prepublishOnly": "npm test  &&  npm run build"