Cell Router

Cell Router

Web Component Router based on WebCell & MobX

NPM Dependency CI & CD

NPM

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

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

npm install dom-renderer web-cell cell-router
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
{
"compilerOptions": {
"target": "ES6",
"useDefineForClassFields": true,
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}
}
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>
</>
);
{
"compilerOptions": {
"module": "ES2020"
}
}
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>
</>
);
MMNEPVFCICPMFPCPTTAAATR