routes gen

À propos

routes-gen est un outil CLI agnostique à framework pour les routes analyses et génération d'une aide de type type pour l'utilisation de l'itinéraire sûr. Considérez-le comme Prisma, mais pour les routes.

Installation

Tout d'abord, vous devez installer le générateur de routes lui-même:

 yarn add routes-gen

Moteurs officiels

Le générateur fonctionne avec "pilotes", qui sont des analyseurs d'itinéraire pour différents cadres.

Conducteur	Installation
Remix	yarn add @routes-gen/remix
Solide	yarn add @routes-gen/solid-start

Exemple d'utilisation

Vous pouvez simplement courir:

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

Il analysera et exportera les itinéraires, en fonction du pilote que vous avez fourni.

Par exemple, le pilote @routes-gen/remix exportera les routes par défaut vers /app/routes.d.ts .

Notez que vous pouvez modifier le chemin de sortie via l'indicateur --output ou -o .

Vous pouvez maintenant importer l'assistance route générée n'importe où et profiter des dactylographiques:

 import { route } from "routes-gen" ;

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

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

Params Types Utilisation

Vous pouvez utiliser le type RouteParams pour ajouter des tapis à vos paramètres / segments d'itinéraire dynamique. Exemple:

 import { RouteParams } from "routes-gen" ;

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

Exemple 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 / >;
} 

Options de CLI

Option	Alias	Description
--aide		Imprimez le message d'aide et sortez
--version	-v	Imprimez la version CLI et sortez
--sortir	-o	Le chemin d'exportation des routes
--conducteur	-d	Le conducteur de la manipulation des routes analyses
--montre	-W	Surveiller les changements
- Post-Export		Exécuter une commande après l'exportation des routes

Écrire votre chauffeur

S'il n'y a pas de pilote pour votre cadre préféré, vous pouvez écrire le vôtre. Par exemple, créez un fichier driver.js simple dans votre projet, avec le contenu suivant:

 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}" ] ;
    } ,
}

Maintenant, vous pouvez facilement l'utiliser:

 routes-gen -d driver.js

Vous pouvez également le publier sur NPM, l'installer et l'utiliser comme un package:

 routes-gen -d my-driver-package

Veuillez envisager de soumettre vos pilotes à ce référentiel.