Crank Router

Router component for Crank engine, which is based on Iterable Observer.

Feature

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

• Path Mode: location.hash (default) & history.pushState()

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

Installation

npm install @bikeshaving/crank crank-router \
    iterable-observer web-utility

Example

• Source code

• Online preview

index.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(
        <Router
            className="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';

const Color = {
    test: 'lightblue',
    example: 'pink'
};

export function Page({ path, history, ...data }: PageProps) {
    return (
        <Fragment>
            <nav>
                <a href="test?id=1">Test</a>
                <a href="example?id=2">Example</a>
            </nav>
            <ul style={{ 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;
    }
}

Inspiration

• bikeshaving/crank#27 (comment)

• https://github.com/EasyWebApp/cell-router