Web Component Router based on WebCell & MobX
https://web-cell.dev/cell-router/preview/
-
<iframe />-like Route 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">Example page</a><a href="#page-section">Page section</a>(Scroll to an Anchor smoothly)<form method="get" action="route/path" />(Form Data processed byURLSearchParams)
-
Path Mode:
location.hash(default) &history.pushState() -
Async Loading (based on
import()ECMAScript syntax) -
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>
</>
);