[add] 404 page route (#17)

Author: TechQuery

Contributing.md

@@ -9,5 +9,6 @@ git clone https://github.com/EasyWebApp/cell-router.git ~/Desktop/cell-router
 cd ~/Desktop/cell-router
 
 pnpm i
+pnpm setup-browser
 npm start
 ```

ReadMe.md

@@ -13,20 +13,22 @@ https://web-cell.dev/cell-router/preview/
 
 ## Feature
 
-- [x] `<iframe />`-like **Route Component** as a **Page Container**
+- [x] **Route Component** as a **Page Configuration**
 
-- [x] **Page Link** (support `<a />`, `<area />` & `<form />`)
+- [x] **Path Matching** with [`new URLPattern()`][7] (`*` for HTTP `404`)
 
+- [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`)
+    - `<form method="get" action="route/path" />` (Form Data processed by `new URLSearchParams()`)
+    - custom component with `href` property
 
 - [x] **Path Mode**: `location.hash` (default) & `history.pushState()`
 
-- [x] **Async Loading** (based on `import()` ECMAScript syntax)
+- [x] **Async Loading** (based on `async`/`await` or `import()` ECMAScript syntax)
 
-- [x] [View Transition API][7] based **Page Transition Animation**
+- [x] [View Transition API][8] based **Page Transition Animation**
 
 ## Version
 
@@ -82,17 +84,11 @@ npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
 ```tsx
 import { DOMRenderer } from 'dom-renderer';
 import { FC } from 'web-cell';
-import { CellRouter, createRouter, PageProps } from 'cell-router';
+import { createRouter, PageProps } from 'cell-router';
 
-const { Route, Link } = createRouter();
+const { Router, Route, Link } = createRouter();
 
-const TestPage: FC<PageProps> = ({
-    className,
-    style,
-    path,
-    history,
-    ...data
-}) => (
+const TestPage: FC<PageProps> = ({ className, style, path, history, ...data }) => (
     <ul {...{ className, style }}>
         <li>Path: {path}</li>
         <li>Data: {JSON.stringify(data)}</li>
@@ -105,14 +101,12 @@ new DOMRenderer().render(
             <Link to="test?a=1">Test</Link>
             <Link to="example/2">Example</Link>
         </nav>
-        <CellRouter className="router">
-            <Route
-                path=""
-                component={props => <div {...props}>Home Page</div>}
-            />
+        <Router>
+            <Route path="" component={() => <h1>Home Page</h1>} />
             <Route path="test" component={TestPage} />
             <Route path="example/:id" component={TestPage} />
-        </CellRouter>
+            <Route path="*" component={() => <h1>404 Not Found</h1>} />
+        </Router>
     </>
 );
 ```
@@ -129,43 +123,94 @@ new DOMRenderer().render(
 }
 ```
 
+#### `source/Dynamic.tsx`
+
+```tsx
+import { FC } from 'web-cell';
+import { PageProps } from 'cell-router';
+
+const DynamicPage: FC<PageProps> = ({ path, id, ...props }) => (
+    <div {...props}>
+        <h1>Dynamic</h1>
+        <pre>
+            <code>{JSON.stringify({ path, id, ...props }, null, 4)}</code>
+        </pre>
+    </div>
+);
+export default DynamicPage;
+```
+
+#### `source/Async.tsx`
+
+```tsx
+import { FC, observer } from 'web-cell';
+import { sleep } from 'web-utility';
+import { PageProps } from 'cell-router';
+
+export const AsyncPage: FC<PageProps> = observer(async props => {
+    await sleep();
+
+    return (
+        <div {...props}>
+            <h1>Async</h1>
+            <pre>
+                <code>{JSON.stringify(props, null, 4)}</code>
+            </pre>
+        </div>
+    );
+});
+```
+
 #### `source/index.tsx`
 
 ```tsx
 import { DOMRenderer } from 'dom-renderer';
 import { FC, lazy } from 'web-cell';
-import { CellRouter, createRouter, PageProps } from 'cell-router';
+import { createRouter, PageProps } from 'cell-router';
+
+import { AsyncPage } from './Async';
 
-const { Route, Link } = createRouter();
+const { Router, Route, Link } = createRouter();
 
-const TestPage: FC<PageProps> = ({
-    className,
-    style,
-    path,
-    history,
-    ...data
-}) => (
+const SyncPage: FC<PageProps> = ({ className, style, path, history, ...data }) => (
     <ul {...{ className, style }}>
         <li>Path: {path}</li>
         <li>Data: {JSON.stringify(data)}</li>
     </ul>
 );
-const AsyncPage = lazy(() => import('./Async'));
+const DynamicPage = lazy(() => import('./Dynamic'));
 
 new DOMRenderer().render(
     <>
         <nav>
-            <Link to="test?a=1">Test</Link>
-            <Link to="example/2">Example</Link>
+            <Link to="sync?a=1">Sync</Link>
+            <Link to="dynamic/2">Dynamic</Link>
+            <Link to="async/3">Async</Link>
         </nav>
-        <CellRouter className="router">
-            <Route
-                path=""
-                component={props => <div {...props}>Home Page</div>}
-            />
-            <Route path="test" component={TestPage} />
-            <Route path="example/:id" component={AsyncPage} />
-        </CellRouter>
+        <Router>
+            <Route path="sync" component={SyncPage} />
+            <Route path="dynamic/:id" component={DynamicPage} />
+            <Route path="async/:id" component={AsyncPage} />
+        </Router>
+    </>
+);
+```
+
+### Custom Link Component
+
+```tsx
+import { Button } from 'boot-cell';
+import { createRouter } from 'cell-router';
+import { DOMRenderer } from 'dom-renderer';
+
+const { Router, Route, Button: XButton } = createRouter({ linkTags: { Button } });
+
+new DOMRenderer().render(
+    <>
+        <XButton href="route/path">Example Page</XButton>
+        <Router>
+            <Route path="route/path" component={() => <h1>Example Page</h1>} />
+        </Router>
     </>
 );
 ```
@@ -176,4 +221,5 @@ new DOMRenderer().render(
 [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://developer.chrome.com/docs/web-platform/view-transitions/
+[7]: https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
+[8]: https://developer.chrome.com/docs/web-platform/view-transitions/

package.json

@@ -1,6 +1,6 @@
 {
     "name": "cell-router",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "license": "LGPL-3.0",
     "description": "Web Component Router based on WebCell & MobX",
     "keywords": [
@@ -26,36 +26,36 @@
     "dependencies": {
         "@swc/helpers": "^0.5.17",
         "dom-renderer": "^2.6.2",
-        "mobx": "^6.13.7",
+        "mobx": "^6.15.0",
         "regenerator-runtime": "^0.14.1",
         "urlpattern-polyfill": "^10.1.0",
-        "web-cell": "^3.2.1",
-        "web-utility": "^4.5.1"
+        "web-cell": "^3.2.2",
+        "web-utility": "^4.6.1"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.15.4",
-        "@parcel/packager-ts": "~2.15.4",
-        "@parcel/transformer-less": "~2.15.4",
-        "@parcel/transformer-typescript-tsc": "~2.15.4",
-        "@parcel/transformer-typescript-types": "~2.15.4",
+        "@parcel/config-default": "~2.16.0",
+        "@parcel/packager-ts": "~2.16.0",
+        "@parcel/transformer-less": "~2.16.0",
+        "@parcel/transformer-typescript-tsc": "~2.16.0",
+        "@parcel/transformer-typescript-types": "~2.16.0",
         "@types/jest": "^29.5.14",
         "cross-env": "^10.0.0",
-        "dotenv": "^17.2.1",
+        "dotenv": "^17.2.2",
         "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": "^16.1.5",
-        "parcel": "~2.15.4",
+        "lint-staged": "^16.2.1",
+        "parcel": "~2.16.0",
         "prettier": "^3.6.2",
         "process": "^0.11.10",
-        "puppeteer-core": "^24.16.2",
+        "puppeteer-core": "^24.22.3",
         "rimraf": "^6.0.1",
-        "ts-jest": "^29.4.1",
-        "typedoc": "^0.28.10",
-        "typedoc-plugin-mdn-links": "^5.0.8",
+        "ts-jest": "^29.4.4",
+        "typedoc": "^0.28.13",
+        "typedoc-plugin-mdn-links": "^5.0.9",
         "typescript": "~5.9.2"
     },
     "pnpm": {
@@ -67,7 +67,8 @@
         ]
     },
     "scripts": {
-        "prepare": "husky  &&  app-find chrome msedge firefox -c",
+        "prepare": "husky",
+        "setup-browser": "app-find chrome msedge firefox -c",
         "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",
@@ -81,7 +82,8 @@
         "singleQuote": true,
         "trailingComma": "none",
         "arrowParens": "avoid",
-        "tabWidth": 4
+        "tabWidth": 4,
+        "printWidth": 100
     },
     "jest": {
         "preset": "ts-jest",