Web Component Router based on WebCell & MobX
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
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"]
}
}
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>
</>
);
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>
</>
);