v1.2.0

Enrutamiento
con HTML sencillo.

Un pequeño enrutador Web Component para las primeras aplicaciones HTML. Enrute por nombre de ruta o consulta de búsqueda, cargue de forma diferida páginas HTML/JS/TXT, anide diseños de ruta, proteja pantallas protegidas y mantenga el bloqueo del marco fuera de su capa de navegación.

Empezarnpm i @beforesemicolon/router
5WEB COMPONENTS
0CONFIGURAR
HTMLJS - PÁGINAS DE TXT
html
<!-- index.html — zero JavaScript required -->
<nav>
    <page-link path="/" title="Home">Home</page-link>
    <page-link path="/todos" title="Todos">Todos</page-link>
    <page-link path="/contact" title="Contact">Contact</page-link>
</nav>

<page-route path="/">
    <h1>Welcome</h1>
</page-route>

<!-- lazy-load HTML, txt or JS files -->
<page-route path="/todos" src="./pages/todos.html"></page-route>
<page-route path="/contact" src="./pages/contact.js"></page-route>

<!-- redirect unknown paths -->
<page-redirect path="/404"></page-redirect>
// THE ECOSYSTEM

Construido sobre Web Component y Markup.

Router está construido sobre Web Component y Markup. Mismo motor, paquetes modulares, cero bloqueo.

Markup

@beforesemicolon/markup

El sistema de plantillas reactivas de 9Kb que lo impulsa todo. Etiquetado plantillas, estado, efectos, repetición, suspenso.

Lea los documentos

Web Component

@beforesemicolon/web-component

Una capa reactiva sobre elementos personalizados nativos: la base sobre la que se construye Router. Accesorios, estado, estilos de alcance, ciclos de vida.

Lea los documentos
// WHY THIS ROUTER

Enrutamiento que desaparece en HTML.

Cinco componentes web, un comparador central y una API JS limpia para todo lo que no puedes expresar en el marcado.

Conectar y reproducir

Introduzca dos etiquetas de secuencia de comandos y enrute con HTML. No se requiere ningún paso de compilación, ni configuración del enrutador, ni JavaScript.

Pequeño y concentrado

Una superficie pequeña: cinco componentes web y una API JS. Construido sobre Markup + Web Component, sin departamentos adicionales.

Páginas cargadas de forma diferida

Apunte la ruta de página a un archivo HTML, txt o JS. Los módulos se cargan una vez, almacenan en caché entre visitas, se montan y desmontan limpiamente.

Rutas anidadas y con nombre

Los niños amplían el camino de sus padres. Utilice el atributo de nombre para coincidencias mutuamente excluyentes, similares a cambios.

Enrutamiento de consultas de búsqueda

page-route-query representa contenido basado en ?key=value: pestañas, filtros y modales sin una sola línea de estado.

Redirecciones inteligentes

page-redirect apunta solo a rutas desconocidas, o siempre, con alcance a su ruta principal. Perfecto para 404 y valores predeterminados.

Una coincidencia, un render

Un comparador central resuelve cada navegación una vez. Los guardias corren una vez. Los suscriptores sólo disparan cuando son relevantes.

Remontajes en caché

Las rutas inactivas se desconectan del DOM pero se mantienen calientes. Regresar es un remontaje instantáneo, no una reconstrucción.

Funciona con cualquier constructor

Vite, Webpack, esbuild, HTML simple o una etiqueta de script CDN: son solo componentes web, por lo que caben en cualquier lugar.

// SEE IT IN ACTION

Cinco ejemplos. Mapas de sitio infinitos.

Redacte ruta de página, enlace de página, consulta de ruta de página, redireccionamiento de página, datos de página y la pequeña API JS que los rodea.

EJEMPLO 01
Rutas y parámetros anidados
html
<!-- nested routes — child paths extend the parent -->
<page-route path="/projects" exact="false">
    <h1>Projects</h1>

    <!-- /projects -->
    <page-route src="./pages/projects-list.js"></page-route>

    <!-- /projects/:projectId — pathname params -->
    <page-route path="/:projectId" src="./pages/project.js">
        <div slot="loading">Loading project...</div>
        <div slot="fallback">Could not load this project.</div>
    </page-route>

    <!-- only redirects unknown CHILD routes of /projects -->
    <page-redirect path="/projects/not-found"></page-redirect>
</page-route>
EJEMPLO 02
Rutas de consulta de búsqueda
html
<!-- routing by ?tab= — perfect for tabs, filters, modals -->
<div class="tabs">
    <div class="tab-header">
        <page-link search="tab=one">Tab 1</page-link>
        <page-link search="tab=two">Tab 2</page-link>
    </div>

    <div class="tab-content">
        <page-route-query key="tab" value="one">
            Tab One content
        </page-route-query>

        <page-route-query key="tab" value="two">
            Tab Two content
        </page-route-query>
    </div>
</div>
EJEMPLO 03
Metadatos de la página
html
<!-- render location metadata: payload, params and search queries -->
<page-link path="/users/42" title="User profile" payload='{"role": "admin"}'
    >Open user 42</page-link
>

<page-route path="/users/:userId">
    <h1>User <page-data param="userId">unknown</page-data></h1>

    <!-- payload data passed via the link -->
    <p>Role: <page-data key="role">guest</page-data></p>

    <!-- current search query value (following router API search-param attribute) -->
    <p>Tab: <page-data search-param="tab">overview</page-data></p>
</page-route>
EJEMPLO 04
Rutas protegidas
javascript
import {
    registerGlobalGuard,
    registerRouteGuard,
} from '@beforesemicolon/router'

registerGlobalGuard((pathname) => {
    const publicPages = ['/', '/login', '/pricing', '/404']

    if (!publicPages.includes(pathname) && !auth.isSignedIn()) {
        return '/login'
    }

    return true
})

registerRouteGuard('/admin/:section', async () => {
    return (await auth.hasRole('admin')) || '/unauthorized'
})
EJEMPLO 05
Páginas compatibles con paquetes
javascript
import { registerRouteModules } from '@beforesemicolon/router'

registerRouteModules(
    import.meta.glob('./pages/**/*.{js,html,txt}', {
        eager: false,
    })
)
html
<page-route path="/" src="./pages/home.js"></page-route>
<page-route path="/docs" src="./pages/docs.html"></page-route>
<page-route path="/legal" src="./pages/legal.txt"></page-route>
// quick start

Instalar en segundos.

Elija su método de instalación preferido. Funciona en todos los lugares donde se ejecuta JavaScript.

<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>
npm install @beforesemicolon/router
yarn add @beforesemicolon/router
pnpm add @beforesemicolon/router

Cree aplicaciones de una o varias páginas, a tu manera.

Combine la simplicidad de los estándares web básicos con el poder del enrutamiento declarativo.

EmpezarLea los documentos