Router component for Crank engine, which is based on Iterable Observer.
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 byURLSearchParams)
Path Mode:
location.hash(default) &history.pushState()Async Loading (recommend to use with
import()ECMAScript proposal)
npm install @bikeshaving/crank crank-router \
iterable-observer web-utilityindex.tsx
import{createElement}from'@bikeshaving/crank';import{renderer}from'@bikeshaving/crank/dom';import{Router}from'crank-router/source';import{Page}from'./Page';window.onload=()=>renderer.render(<RouterclassName="router"startClass="start"endClass="end"map={[{path: '',component: Page},{path: 'test',component: Page},{path: /Example/i,component: Page}]}/>,document.body);Page.tsx
import{createElement,Fragment}from'@bikeshaving/crank';import{PageProps}from'crank-router/source';constColor={test: 'lightblue',example: 'pink'};exportfunctionPage({ path, history, ...data}: PageProps){return(<Fragment><nav><ahref="test?id=1">Test</a><ahref="example?id=2">Example</a></nav><ulstyle={{background: Color[path]}}><li>path: {path}</li><li>data: {JSON.stringify(data)}</li></ul></Fragment>);}index.less
body {
margin: 0;
}
nav>a {
display: inline-block;
margin: 0.5rem;
}
.router {
width: 100vw;
height: 100vh;
overflow: auto;
position: relative;
&>* {
position: absolute;
top: 0;
left: 0;
transform: translateX(0);
opacity: 1;
transition: 0.5s;
}
.start {
transform: translateX(100%);
opacity: 0;
}
.end {
transform: translateX(-100%);
opacity: 0;
}
}