[refactor] merge Page containers into one Router component (#15)

Author: TechQuery

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
                   node-version: 22

ReadMe.md

@@ -13,20 +13,32 @@ https://web-cell.dev/cell-router/preview/
 
 ## Feature
 
--   [x] `<iframe />`-like **Route Component** as a **Page Container**
+- [x] `<iframe />`-like **Route Component** as a **Page Container**
 
--   [x] **Page Link** (support `<a />`, `<area />` & `<form />`)
+- [x] **Page Link** (support `<a />`, `<area />` & `<form />`)
 
-    -   `<a href="route/path">Page title</a>`
-    -   `<a href="route/path" title="Page title">Example page</a>`
-    -   `<a href="#page-section">Page section</a>` (Scroll to an Anchor smoothly)
-    -   `<form method="get" action="route/path" />` (Form Data processed by `URLSearchParams`)
+    - `<a href="route/path">Page title</a>`
+    - `<a href="route/path" title="Page title">Example page</a>`
+    - `<a href="#page-section">Page section</a>` (Scroll to an Anchor smoothly)
+    - `<form method="get" action="route/path" />` (Form Data processed by `URLSearchParams`)
 
--   [x] **Path Mode**: `location.hash` (default) & `history.pushState()`
+- [x] **Path Mode**: `location.hash` (default) & `history.pushState()`
 
--   [x] **Async Loading** (based on `import()` ECMAScript syntax)
+- [x] **Async Loading** (based on `import()` ECMAScript syntax)
 
--   [x] [View Transition API][7] based **Page Transition Animation**
+- [x] [View Transition API][7] based **Page Transition Animation**
+
+## Version
+
+|        SemVer        | status | WebCell |               API                | async page | page transition | nested router |
+| :------------------: | :----: | :-----: | :------------------------------: | :--------: | :-------------: | :-----------: |
+|        `4.x`         |   ✅   | `>=3.1` |        HTML tags (+ JSON)        |     ✅     |       ✅        |      ❌       |
+|        `3.x`         |   ❌   |  `3.x`  |            HTML tags             |     ✅     |       ✅        |      ❌       |
+|        `2.x`         |   ❌   |  `2.x`  |         HTML tag + JSON          |     ✅     |       ✅        |      ✅       |
+| `>=2.0.0-alpha.0 <2` |   ❌   |  `2.x`  |     `abstract class` + JSON      |     ✅     |       ❌        |      ✅       |
+|        `1.x`         |   ❌   |  `1.x`  | `abstract class` + ES decorators |     ❌     |       ❌        |      ❌       |
+|     `>=0.9 <1.0`     |   ❌   |  `0.x`  | `abstract class` + ES decorators |     ❌     |       ❌        |      ❌       |
+|        `<0.9`        |   ❌   |  `0.x`  |       `class` + HTML tags        |     ❌     |       ❌        |      ❌       |
 
 ## Installation
 
@@ -70,7 +82,7 @@ npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 ```tsx
 import { DOMRenderer } from 'dom-renderer';
 import { FC } from 'web-cell';
-import { createRouter, PageProps } from 'cell-router';
+import { CellRouter, createRouter, PageProps } from 'cell-router';
 
 const { Route, Link } = createRouter();
 
@@ -93,14 +105,14 @@ new DOMRenderer().render(
             <Link to="test?a=1">Test</Link>
             <Link to="example/2">Example</Link>
         </nav>
-        <main className="router">
+        <CellRouter className="router">
             <Route
                 path=""
                 component={props => <div {...props}>Home Page</div>}
             />
             <Route path="test" component={TestPage} />
             <Route path="example/:id" component={TestPage} />
-        </main>
+        </CellRouter>
     </>
 );
 ```
@@ -122,7 +134,7 @@ new DOMRenderer().render(
 ```tsx
 import { DOMRenderer } from 'dom-renderer';
 import { FC, lazy } from 'web-cell';
-import { createRouter, PageProps } from 'cell-router';
+import { CellRouter, createRouter, PageProps } from 'cell-router';
 
 const { Route, Link } = createRouter();
 
@@ -146,14 +158,14 @@ new DOMRenderer().render(
             <Link to="test?a=1">Test</Link>
             <Link to="example/2">Example</Link>
         </nav>
-        <main className="router">
+        <CellRouter className="router">
             <Route
                 path=""
                 component={props => <div {...props}>Home Page</div>}
             />
             <Route path="test" component={TestPage} />
             <Route path="example/:id" component={AsyncPage} />
-        </main>
+        </CellRouter>
     </>
 );
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "cell-router",
-    "version": "3.0.3",
+    "version": "4.0.0",
     "license": "LGPL-3.0",
     "description": "Web Component Router based on WebCell & MobX",
     "keywords": [
@@ -24,39 +24,47 @@
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
     "dependencies": {
-        "@swc/helpers": "^0.5.15",
+        "@swc/helpers": "^0.5.17",
         "dom-renderer": "^2.6.2",
-        "mobx": "^6.13.6",
+        "mobx": "^6.13.7",
         "regenerator-runtime": "^0.14.1",
-        "urlpattern-polyfill": "^10.0.0",
-        "web-cell": "^3.0.3",
+        "urlpattern-polyfill": "^10.1.0",
+        "web-cell": "^3.1.0",
         "web-utility": "^4.4.3"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.13.3",
-        "@parcel/packager-ts": "~2.13.3",
-        "@parcel/transformer-less": "~2.13.3",
-        "@parcel/transformer-typescript-tsc": "~2.13.3",
-        "@parcel/transformer-typescript-types": "~2.13.3",
+        "@parcel/config-default": "~2.15.2",
+        "@parcel/packager-ts": "~2.15.2",
+        "@parcel/transformer-less": "~2.15.2",
+        "@parcel/transformer-typescript-tsc": "~2.15.2",
+        "@parcel/transformer-typescript-types": "~2.15.2",
         "@types/jest": "^29.5.14",
         "cross-env": "^7.0.3",
-        "dotenv": "^16.4.7",
-        "element-internals-polyfill": "^3.0.1",
+        "dotenv": "^16.5.0",
+        "element-internals-polyfill": "^3.0.2",
         "fs-match": "^1.7.3",
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "koapache": "^2.2.2",
-        "lint-staged": "^15.4.3",
-        "parcel": "~2.13.3",
+        "lint-staged": "^16.1.1",
+        "parcel": "~2.15.2",
         "prettier": "^3.5.3",
         "process": "^0.11.10",
-        "puppeteer-core": "^24.4.0",
+        "puppeteer-core": "^24.10.1",
         "rimraf": "^6.0.1",
-        "ts-jest": "^29.2.6",
-        "typedoc": "^0.27.9",
-        "typedoc-plugin-mdn-links": "^5.0.1",
-        "typescript": "~5.8.2"
+        "ts-jest": "^29.4.0",
+        "typedoc": "^0.28.5",
+        "typedoc-plugin-mdn-links": "^5.0.2",
+        "typescript": "~5.8.3"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@swc/core",
+            "lmdb",
+            "msgpackr-extract"
+        ]
     },
     "scripts": {
         "prepare": "husky  &&  app-find chrome msedge firefox -c",