ascua-router

El router de Ascua en 1,03 kB gzip. La ruta es un signal: leerla dentro de una closure hace que ese nodo siga a la URL, igual que con cualquier otro dato.

stil add ascua-router      # o npm install ascua-router

import { links, mountRoutes, path } from "ascua-router";

links();   // los <a href="/…"> navegan sin recargar

const app = view`
  <div class="app">
    <nav>
      <a href="/" class=${() => (path() === "/" ? "activa" : "")}>Inicio</a>
      <a href="/pedidos">Pedidos</a>
    </nav>
    <main></main>
  </div>`;

mountRoutes(app.querySelector("main")!, [
  { pattern: "/", view: () => Inicio() },
  { pattern: "/pedidos", view: () => Pedidos() },
  { pattern: "/pedidos/:id", view: ({ id }) => Pedido({ id }) },
  { view: () => NoEncontrado() },           // sin patrón: el fallback
]);

mountRoutes es el show del runtime por debajo: mientras la ruta resuelva a lo mismo no se toca el DOM, y al cambiar se libera la vista anterior entera —efectos, memos, listeners, onCleanup— antes de construir la siguiente. Devuelve cómo soltarla.

Lo que hay

| | | |---|---| | path() | La ruta actual con su query. Reactiva. | | navigate(destino, { replace }) | Cambia de ruta. replace no apila historial — lo que quieres tras un login. | | links(raiz?, { base? }) | Intercepta los clicks en enlaces internos. Devuelve cómo soltarlo. | | match(pattern, contra?) | Los parámetros que captura, o null. | | query() | Un URLSearchParams con lo que va tras ?. | | stripQuery(valor) | El camino a secas. | | mountRoutes(padre, rutas) | Monta la vista de la ruta actual. |

Los patrones admiten :nombre para capturar un segmento y * para quedarse con el resto, que llega como rest. /pedidos y /pedidos/ son la misma ruta; /pedidos y /pedidos/4821 no.

links() respeta lo que un enlace significa: un click con ⌘ o ctrl, uno con el botón central, un target o un download siguen abriendo como siempre, y los enlaces externos no se tocan.

Si la aplicación vive bajo un camino y el resto del sitio son otras páginas —la portada en /, el juego en /jugar/—, links(document, { base: "/jugar/" }) solo intercepta lo que cuelga de /jugar/: el enlace a / carga la portada. Para un enlace suelto, rel="external".

Al desplegar

Las rutas son del cliente, así que el servidor tiene que devolver el index.html para cualquier camino — si no, recargar en /pedidos da 404. Cada hosting lo llama de una forma; con el httpd de busybox, que es lo que usa Hull con serve: static, basta un httpd.conf junto al sitio:

E404:/index.html

Licencia

MIT OR Apache-2.0