Cell Router

Web Component Router based on WebCell & MobX

Demo

https://web-cell.dev/cell-router/preview/

Feature

• [x] <iframe />-like Route Component as a Page Container

• [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)

• [x] Path Mode: location.hash (default) & history.pushState()

• [x] Async Loading (based on import() ECMAScript syntax)

• [x] View Transition API based Page Transition Animation

Installation

Command

npm install dom-renderer web-cell cell-router
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "useDefineForClassFields": true,
        "jsx": "react-jsx",
        "jsxImportSource": "dom-renderer"
    }
}

.parcelrc

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

Usage

Sync Pages

source/index.tsx

import { DOMRenderer } from 'dom-renderer';
import { FC } from 'web-cell';
import { createRouter, PageProps } from 'cell-router';

const { Route, Link } = createRouter();

const TestPage: FC<PageProps> = ({
    className,
    style,
    path,
    history,
    ...data
}) => (
    <ul {...{ className, style }}>
        <li>Path: {path}</li>
        <li>Data: {JSON.stringify(data)}</li>
    </ul>
);

new DOMRenderer().render(
    <>
        <nav>
            <Link to="test?a=1">Test</Link>
            <Link to="example/2">Example</Link>
        </nav>
        <main className="router">
            <Route
                path=""
                component={props => <div {...props}>Home Page</div>}
            />
            <Route path="test" component={TestPage} />
            <Route path="example/:id" component={TestPage} />
        </main>
    </>
);

Async Pages

tsconfig.json

{
    "compilerOptions": {
        "module": "ES2020"
    }
}

source/index.tsx

import { DOMRenderer } from 'dom-renderer';
import { FC, lazy } from 'web-cell';
import { createRouter, PageProps } from 'cell-router';

const { Route, Link } = createRouter();

const TestPage: 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'));

new DOMRenderer().render(
    <>
        <nav>
            <Link to="test?a=1">Test</Link>
            <Link to="example/2">Example</Link>
        </nav>
        <main className="router">
            <Route
                path=""
                component={props => <div {...props}>Home Page</div>}
            />
            <Route path="test" component={TestPage} />
            <Route path="example/:id" component={AsyncPage} />
        </main>
    </>
);