Saltar al contenido
Librerías

modernjs-typed-routes

Plugin de Modern.js que genera los tipos de tus rutas a partir de la carpeta routes/ — una ruta mal escrita es un error de compilación y no un 404 en producción.

Creado Último commit
  • typescript
  • modernjs
  • codegen
  • react
  • cli

modernjs-typed-routes es un plugin sin configuración para Modern.js. Lee tus carpetas routes/, genera un único routes.gen.d.ts y reexporta Link, Navigate y useNavigate en versiones tipadas — así las rutas se autocompletan y los params son obligatorios, ruta por ruta.

Modern.js trae routing basado en archivos, pero sin tipos: <Link to="/blgo/[id]"> compila sin quejarse y recién falla en el navegador. Ese es el hueco que el plugin tapa.

Cómo se ve

import { Link, useNavigate } from 'modernjs-typed-routes';
 
<Link to="/about" />                                // ✅ unión de rutas autocompletada
<Link to="/blog/[id]" params={{ id: post.id }} />   // ✅ params tipados y obligatorios
<Link to="/blgo/[id]" params={{ id: post.id }} />   // ❌ error: ¿querías decir '"/blog/[id]"'?
 
const { navigateTo } = useNavigate();
navigateTo('/blog/[id]');                           // ❌ error: aquí `params` es obligatorio

La instalación es un plugin registrado en modern.config.ts. El archivo de declaración se regenera en cada modern dev, así que los tipos no se quedan atrás de las rutas.

Por qué funciona así

  • Los tipos salen del propio parser de rutas de Modern.js, no de una reimplementación de sus convenciones. Una reimplementación se desactualiza apenas el framework agrega una convención nueva; esta no puede — y de paso cubre [id] dinámicos, opcionales [id$], splats, layouts sin ruta, segmentos planos y apps multi-entry sin trabajo extra.
  • Solo tipos, cero costo en el bundle. Lo que se genera es un .d.ts; el resto lo hace el declaration merging.
  • Los params son objetos y obligatorios por ruta — la ruta y los nombres de sus params se autocompletan juntos.
  • Es un check de CI, no solo una comodidad del editor. modern typegen && tsc --noEmit convierte un link roto en un pull request que falla.

Lo construí en abierto porque responde a un feature request que Modern.js todavía no ha tomado.

Las guías completas y la referencia de la API están en modernjs-typed-routes.gio-labs.com; las notas de instalación, en el README en GitHub.