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

Decorator based Router component framework, powered by WebCell
https://github.com/easywebapp/cell-router

decorator router spa web-app web-cell web-component

Last synced: 3 months ago
JSON representation

Decorator based Router component framework, powered by WebCell

• Host: GitHub
• URL: https://github.com/easywebapp/cell-router
• Owner: EasyWebApp
• Created: 2018-06-28T03:03:20.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-06-19T17:58:57.000Z (7 months ago)
• Last Synced: 2024-10-29T02:39:03.676Z (3 months ago)
• Topics: decorator, router, spa, web-app, web-cell, web-component
• Language: TypeScript
• Homepage: https://web-cell.dev/cell-router/
• Size: 1.25 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: ReadMe.md
  • Contributing: Contributing.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Cell Router

[Web Component][1] Router based on [WebCell][2] & [MobX][3]

[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/cell-router.svg)][4]

[![CI & CD](https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml/badge.svg)][5]

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

## Demo

https://web-cell-scaffold.vercel.app/

## Feature

-   [x] ``-like **Route Component** as a **Page Container**

-   [x] **Page Link** (support ``, `` & ``)

    -   `Page title`

    -   `Example page`

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

    -   `` (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][7] based **Page Transition Animation**

## Installation

### Command

```shell

npm install dom-renderer web-cell cell-router

npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D

```

### `tsconfig.json`

```json

{

    "compilerOptions": {

        "target": "ES6",

        "useDefineForClassFields": true,

        "jsx": "react-jsx",

        "jsxImportSource": "dom-renderer"

    }

}

```

### `.parcelrc`

```json

{

    "extends": "@parcel/config-default",

    "transformers": {

        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]

    }

}

```

## Usage

### Sync Pages

#### `source/index.tsx`

```tsx

import { DOMRenderer } from 'dom-renderer';

import { FC } from 'web-cell';

import { createRouter, PageProps } from 'cell-router';

const { Route, Link } = createRouter();

const TestPage: FC = ({

    className,

    style,

    path,

    history,

    ...data

}) => (

    


        
Path: {path}

        
Data: {JSON.stringify(data)}

    

);


new DOMRenderer().render(

    <>

        

            Test

            Example

        

        

             
Home Page
}

            />

            

            

        

    >

);

```


### Async Pages

#### `tsconfig.json`

```json

{

    "compilerOptions": {

        "module": "ES2020"

    }

}

```

#### `source/index.tsx`

```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 = ({

    className,

    style,

    path,

    history,

    ...data

}) => (

    


        
Path: {path}

        
Data: {JSON.stringify(data)}

    

);

const AsyncPage = lazy(() => import('./Async'));


new DOMRenderer().render(

    <>

        

            Test

            Example

        

        

             
Home Page
}

            />

            

            

        

    >

);

```


[1]: https://www.webcomponents.org/

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

[3]: https://mobx.js.org/

[4]: https://libraries.io/npm/cell-router

[5]: https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml

[6]: https://nodei.co/npm/cell-router/

[7]: https://developer.chrome.com/docs/web-platform/view-transitions/