routes gen

Acerca de

routes-gen es una herramienta de CLI agnóstica marco para el análisis de rutas y la generación de un ayudante seguro para el uso de rutas seguras. Piense en ello como prisma, pero en rutas.

Instalación

Primero, debe instalar el generador de rutas en sí:

 yarn add routes-gen

Conductores oficiales

El generador funciona con "controladores", que son analizadores de ruta para diferentes marcos.

Conductor	Instalación
Remezclar	yarn add @routes-gen/remix
Sólido	yarn add @routes-gen/solid-start

Ejemplo de uso

Simplemente puedes ejecutar:

 yarn routes-gen -d @routes-gen/remix

Analizará y exportará las rutas, según el controlador que ha proporcionado.

Por ejemplo, el controlador @routes-gen/remix exportará las rutas de forma predeterminada a /app/routes.d.ts .

Tenga en cuenta que puede cambiar la ruta de salida a través del indicador --output o -o .

Ahora puede importar el ayudante route generado en cualquier lugar y disfrutar de las tipificaciones:

 import { route } from "routes-gen" ;

// Compiles to /products
route ( "/products" ) ;

// Compiles to /products/1337
route ( "/products/:productId" , {
    productId : "1337" ,
} ) ; 

Uso de tipos de parámetros

Puede usar el tipo RouteParams para agregar tipos a sus parámetros/segmentos de ruta dinámica. Ejemplo:

 import { RouteParams } from "routes-gen" ;

const { productId } = params as RouteParams [ "/products/:productId" ] ;

Ejemplo de remix :

 import { LoaderFunction , useParams } from "remix" ;
import { RouteParams } from "routes-gen" ;

export const loader : LoaderFunction = async ( { params } ) => {
  const { productId } = params as RouteParams [ "/products/:productId" ] ;
} ;

export default function Product ( ) {
  const { productId } = useParams < RouteParams [ "/products/:productId" ] > ( ) ;

  return < div / >;
} 

Opciones de CLI

Opción	Alias	Descripción
--ayuda		Imprima el mensaje de ayuda y la salida
--versión	-V	Imprima la versión y la salida de CLI
--producción	-O	El camino para la exportación de rutas
--conductor	-d	El conductor de la analización de rutas de manejo
--mirar	-Wor	Esté atento a los cambios
-poste-export		Ejecutar un comando después de la exportación de rutas

Escribir a tu conductor

Si no hay controlador para su marco preferido, puede escribir el suyo. Por ejemplo, cree un archivo sencillo driver.js en su proyecto, con el siguiente contenido:

 module . exports = {
    // Where to export the typings if the "output" flag was not provided.
    defaultOutputPath : "src/routes.d.ts" ,
    
    // The routes parser. Must export and array of routes matching the { path: string } interface.
    routes : async ( ) => {
        return [
            {
                path : "/products" ,
            } ,
            {
                path : "/products/:productId" , // Note that the dynamic segments must match the :myVar pattern.
            } ,
        ] ;
    } ,

    // The paths to be watched for changes. Must return and array of relative paths.
    watchPaths : async ( ) => {
        return [ "/my-routes/**/*.{ts,tsx,js,jsx}" ] ;
    } ,
}

Ahora puedes usarlo fácilmente:

 routes-gen -d driver.js

También puede publicarlo en NPM, instalarlo y usarlo como un paquete:

 routes-gen -d my-driver-package

Considere enviar sus controladores a este repositorio.