v1.2.0

Routage
en HTML simple.

Un petit routeur Web Component pour les applications HTML-first. Itinéraire par nom de chemin ou requête de recherche, chargement différé des pages HTML/JS/TXT, imbrication des tracés d'itinéraire, protection des écrans protégés et maintien du verrouillage du cadre hors de votre couche de navigation.

Commencernpm i @beforesemicolon/router
5WEB COMPONENTS
0CONFIGURATION
HTMLJS-PAGES 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

Construit sur Web Component et Markup.

Router est construit sur Web Component et Markup. Même moteur, packages modulaires, zéro verrouillage.

Markup

@beforesemicolon/markup

Le système de modèles réactifs de 9 Ko qui alimente tout. Modèles étiquetés, état, effets, répétition, suspense.

Lire les documents

Web Component

@beforesemicolon/web-component

Une couche réactive sur les éléments personnalisés natifs – la base sur laquelle repose le Router. Accessoires, état, styles étendus, cycles de vie.

Lire les documents
// WHY THIS ROUTER

Routage qui disparaît dans HTML.

Cinq composants Web, un comparateur central et une API JS propre pour tout ce que vous ne pouvez pas exprimer dans le balisage.

Branchez et jouez

Insérez deux balises de script et acheminez avec HTML. Aucune étape de construction, aucune configuration de routeur, aucun JavaScript requis.

Minuscule et concentré

Une petite surface : cinq composants web et une API JS. Construit sur Markup + Web Component, sans aucun dépôt supplémentaire.

Pages chargées paresseusement

Pointez la page-route vers un fichier HTML, txt ou JS. Les modules se chargent une fois, mettent en cache entre les visites, se montent et se démontent proprement.

Itinéraires imbriqués et nommés

Les enfants prolongent le chemin de leurs parents. Utilisez l’attribut name pour une correspondance de type commutateur mutuellement exclusive.

Routage des requêtes de recherche

page-route-query restitue le contenu basé sur ?key=value – onglets, filtres et modaux sans une seule ligne d'état.

Redirections intelligentes

la redirection de page cible uniquement les chemins inconnus – ou toujours, limités à sa route parent. Parfait pour les 404 et les valeurs par défaut.

Une correspondance, un rendu

Un matcher central résout chaque navigation une fois. Les gardes courent une fois. Les abonnés ne se déclenchent que lorsqu'ils sont pertinents.

Remontages en cache

Les routes inactives sont détachées du DOM mais maintenues au chaud. Le retour est un remontage instantané, pas une reconstruction.

Fonctionne avec n'importe quel constructeur

Vite, Webpack, esbuild, plain HTML ou une balise de script CDN - ce ne sont que des composants Web, donc ils s'insèrent n'importe où.

// SEE IT IN ACTION

Cinq exemples. Plans de site infinis.

Composez page-route, page-link, page-route-query, page-redirect, page-data et la petite API JS qui les entoure.

EXEMPLE 01
Itinéraires et paramètres imbriqués
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>
EXEMPLE 02
Itinéraires de requête de recherche
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>
EXEMPLE 03
Métadonnées de la page
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>
EXEMPLE 04
Itinéraires protégés
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'
})
EXEMPLE 05
Pages adaptées aux regroupeurs
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

Installez en quelques secondes.

Choisissez votre méthode d'installation préférée. Fonctionne partout où JavaScript s'exécute.

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

Créez des applications monopages et multipages, à votre façon.

Combinez la simplicité des standards Web Vanilla avec la puissance du routage déclaratif.

CommencerLire les documents