cell router

Zellrouter

Webkomponentenrouter basierend auf Webcell & MOBX

Demo

https://web-cell.dev/cell-router/preview/

Besonderheit

• <iframe /> -ähnliche Routenkomponente als Seitenbehälter

• 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> (scrollen Sie zu einem Anker reibungslos)
  • <form method="get" action="route/path" /> (Formulardaten, die von URLSearchParams verarbeitet werden)

• Pfadmodus : location.hash (Standard) & history.pushState()

• Async -Lade (basierend auf import() ECMascript -Syntax)

• Übergangs -API -basierte Seitenübergangsanimation anzeigen

Installation

Befehl

npm install dom-renderer web-cell cell-router
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D

tsconfig.json

{
    "compilerOptions" : {
        "target" : " ES6 " ,
        "useDefineForClassFields" : true ,
        "jsx" : " react-jsx " ,
        "jsxImportSource" : " dom-renderer "
    }
}

.parcelrc

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

Verwendung

Seiten synchronisieren

source/index.tsx

 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 >
    </ >
) ;

Asynchronen Seiten

tsconfig.json

{
    "compilerOptions" : {
        "module" : " ES2020 "
    }
}

source/index.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 < 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 >
    </ >
) ;