cell router

Roteador de células

Roteador de componentes da web com base em webcell & mobx

Demonstração

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

Recurso

• <iframe /> -como o componente de rota como um contêiner de página

• Link da página (suporte <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> (role para uma âncora sem problemas)
  • <form method="get" action="route/path" /> (formulário dados processados ​​por URLSearchParams )

• Modo de caminho : location.hash (padrão) e history.pushState()

• Carregamento assíncrono (baseado na sintaxe import() eCMAScript)

• Visualizar animação de transição baseada na API de transição

Instalação

Comando

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 " ]
    }
}

Uso

Páginas de sincronização

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

Páginas assíncronas

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