routes gen

Sobre

routes-gen é uma ferramenta de cli agnóstica de estrutura para a análise de rotas e geração de um ajudante seguro para o uso de rota segura. Pense nisso como prisma, mas em rotas.

Instalação

Primeiro, você deve instalar o próprio gerador de rotas:

 yarn add routes-gen

Motoristas oficiais

O gerador trabalha com "drivers", que são analisadores de rotas para diferentes estruturas.

Motorista	Instalação
Remix	yarn add @routes-gen/remix
Solidstart	yarn add @routes-gen/solid-start

Exemplo de uso

Você pode simplesmente correr:

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

Ele analisará e exportará as rotas, com base no driver que você forneceu.

Por exemplo, o driver @routes-gen/remix exportará as rotas por padrão para /app/routes.d.ts .

Observe que você pode alterar o caminho de saída através do sinalizador --output ou -o .

Agora você pode importar o ajudante route gerado em qualquer lugar e aproveitar as tímidas:

 import { route } from "routes-gen" ;

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

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

Params Tipos de uso

Você pode usar o tipo RouteParams para adicionar tipações aos seus parâmetros/segmentos dinâmicos de rota. Exemplo:

 import { RouteParams } from "routes-gen" ;

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

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

Opções da CLI

Opção	Alias	Descrição
--ajuda		Imprima a mensagem de ajuda e saída
--versão	-v	Imprima a versão da CLI e saia
--saída	-o	O caminho para a exportação de rotas
--motorista	-d	O motorista de manuseio de rotas analisando
--assistir	-c	Preste atenção nas mudanças
-Post-Export		Executar um comando após a exportação de rotas

Escrevendo seu motorista

Se não houver driver para sua estrutura preferida, você pode escrever o seu. Por exemplo, crie um arquivo driver.js simples em seu projeto, com o seguinte conteúdo:

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

Agora você pode usá -lo facilmente:

 routes-gen -d driver.js

Você também pode publicá -lo no NPM, instalá -lo e usá -lo como um pacote:

 routes-gen -d my-driver-package

Por favor, considere enviar seus drivers para este repositório.