https://github.com/techquery/crank-router

Router component for Crank engine, which is based on Iterable Observer.
https://github.com/techquery/crank-router

async component crank generator iterator observable router

Last synced: 13 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/techquery/crank-router
• Owner: TechQuery
• License: lgpl-3.0
• Created: 2020-04-24T10:05:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-27T18:37:23.000Z (over 4 years ago)
• Last Synced: 2024-04-26T02:04:52.232Z (9 months ago)
• Topics: async, component, crank, generator, iterator, observable, router
• Language: TypeScript
• Homepage: https://tech-query.me/crank-router/
• Size: 141 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: ReadMe.md
  • Contributing: Contributing.md
  • License: License

Awesome Lists containing this project

README

        
# Crank Router

**Router component** for [Crank engine][1], which is based on [Iterable Observer][2].

[![NPM Dependency](https://david-dm.org/TechQuery/crank-router.svg)][3]

[![API Document](https://github.com/TechQuery/crank-router/workflows/API%20Document/badge.svg?branch=master)][4]

[![NPM](https://nodei.co/npm/crank-router.png?downloads=true&downloadRank=true&stars=true)][5]

## Feature

-   **Page Link** (support ``, `` & ``)

    -   `Page title`

    -   `Example page`

    -   `Page section` (Scroll to an Anchor smoothly)

    -   `` (Form Data processed by `URLSearchParams`)

-   **Path Mode**: `location.hash` (default) & `history.pushState()`

-   **Async Loading** (recommend to use with `import()` ECMAScript proposal)

## Installation

```shell

npm install @bikeshaving/crank crank-router \

    iterable-observer web-utility

```

## Example

-   [Source code](https://github.com/TechQuery/crank-router/tree/master/test/source)

-   [Online preview](https://tech-query.me/crank-router/demo/)

`index.tsx`

```jsx

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(

        ,

        document.body

    );

```

`Page.tsx`

```jsx

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 (

        

            

                Test

                Example

            

            


                
path: {path}

                
data: {JSON.stringify(data)}

            

        

    );

}

```


`index.less`

```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

-   https://github.com/bikeshaving/crank/issues/27#issuecomment-617633472

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

[1]: https://crank.js.org/

[2]: https://web-cell.dev/iterable-observer/

[3]: https://david-dm.org/TechQuery/crank-router

[4]: https://github.com/TechQuery/crank-router/actions

[5]: https://nodei.co/npm/crank-router/