Cell Router

Web Component Router based on WebCell & Iterable Observer

Demo

https://web-cell.dev/scaffold/

Feature

• Router Component as a Page Container

• Page Link (support <a />, <area /> & <form />)

  • <a href="route/path">Page title</a>
  • <a href="route/path" title="Page title" target="_self">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)

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

• Async Loading (recommend to use with import() ECMAScript proposal)

• CSS based Page Transition Animation (example CSS & TSX)

Installation

npm install web-cell cell-router
npm install parcel-bundler -D

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "jsx": "react",
        "jsxFactory": "createCell",
        "jsxFragmentFactory": "Fragment"
    }
}

Usage

Sync Pages

source/index.tsx

import { documentReady, render, createCell, Fragment } from 'web-cell';
import { History, PageProps, CellRouter } from 'cell-router/source';

const history = new History();

function TestPage({ path, history, defaultSlot, ...data }: PageProps) {
    return (
        <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 }]}
            />
        </>
    )
);

Async Pages

tsconfig.json

{
    "compilerOptions": {
        "module": "ESNext"
    }
}

source/page/index.ts

export default [
    {
        paths: ['', 'home'],
        component: async () => (await import('./Home.tsx')).default
    },
    {
        paths: ['list'],
        component: async () => (await import('./List.tsx')).default
    }
];

source/index.tsx

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} />
        </>
    )
);