cell-router
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    Cell Router

    Web Component Router based on WebCell & Iterable Observer

    NPM Dependency CI & CD

    NPM

    Demo

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

    Feature

    • [x] Router 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" 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)
    • [x] Path Mode: location.hash (default) & history.pushState()

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

    • [x] 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} />
            </>
        )
    );

    Install

    npm i cell-router

    DownloadsWeekly Downloads

    2

    Version

    2.0.4

    License

    LGPL-3.0

    Unpacked Size

    122 kB

    Total Files

    18

    Last publish

    Collaborators

    • tech_query