v1.2.0

Roteamento
com HTML simples.

Um pequeno roteador com Web Components para aplicações HTML-first. Navegue por caminho ou consulta, carregue páginas HTML/JS/TXT sob demanda, aninhe layouts de rota, proteja telas e mantenha sua navegação independente de frameworks.

Primeiros Passosnpm i @beforesemicolon/router
5WEB COMPONENTS
0CONFIGURAÇÃO
HTMLPÁGINAS JS - 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>
// O ECOSSISTEMA

Construído com Web Component e Markup.

O Router é construído sobre Web Component e Markup. O mesmo motor, pacotes modulares e nenhuma dependência obrigatória de framework.

Markup

@beforesemicolon/markup

O sistema de templates reativos de 9 Kb que move tudo. Tagged templates, estado, efeitos, repetição e suspense.

Ler a Documentação

Web Component

@beforesemicolon/web-component

Uma camada reativa sobre Custom Elements nativos — a base sobre a qual o Router foi criado. Props, estado, estilos isolados e ciclos de vida.

Ler a Documentação
// POR QUE ESTE ROTEADOR

Roteamento que desaparece dentro do HTML.

Cinco web components, um matcher central e uma API JavaScript limpa para tudo que não pode ser expresso em marcação.

Pronto para usar

Adicione duas tags de script e faça o roteamento com HTML. Sem etapa de build, configuração de roteador ou JavaScript obrigatório.

Pequeno e focado

Uma superfície compacta: cinco web components e uma API JavaScript. Construído com Markup + Web Component, sem dependências extras.

Páginas carregadas sob demanda

Aponte page-route para um arquivo HTML, txt ou JS. Os módulos carregam uma vez, ficam em cache entre visitas e são montados e desmontados de forma limpa.

Rotas aninhadas e nomeadas

Rotas filhas estendem o caminho da rota pai. Use o atributo name para correspondência exclusiva, como em um switch.

Roteamento por consulta

page-route-query renderiza conteúdo com base em ?chave=valor — abas, filtros e modais sem uma única linha de estado.

Redirecionamentos inteligentes

page-redirect atua somente em caminhos desconhecidos — ou sempre, limitado à rota pai. Ideal para páginas 404 e destinos padrão.

Uma correspondência, uma renderização

Um matcher central resolve cada navegação uma única vez. Guards executam uma vez. Assinantes só são acionados quando necessário.

Remontagens em cache

Rotas inativas são removidas do DOM, mas permanecem prontas em memória. Voltar à rota remonta o conteúdo instantaneamente, sem reconstruí-lo.

Funciona com qualquer builder

Vite, Webpack, esbuild, HTML puro ou uma tag de script CDN — são apenas web components, então funciona em qualquer ambiente.

// VEJA EM AÇÃO

Cinco exemplos. Infinitos mapas de site.

Combine page-route, page-link, page-route-query, page-redirect, page-data e a pequena API JavaScript ao redor deles.

EXEMPLO 01
Rotas aninhadas e parâmetros
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>
EXEMPLO 02
Rotas por consulta
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>
EXEMPLO 03
Metadados da 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>
EXEMPLO 04
Rotas 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'
})
EXEMPLO 05
Páginas compatíveis com bundlers
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>
// início rápido

Instale em segundos.

Escolha seu método de instalação preferido. Funciona onde quer que JavaScript seja executado.

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

Crie aplicações de uma ou várias páginas, do seu jeito.

Combine a simplicidade dos padrões nativos da Web com o poder do roteamento declarativo.

Primeiros PassosLer a Documentação