routes gen

Um

routes-gen sind ein agnostisches CLI-Tool für Routen an Parsen und Erzeugung eines Typ-Safe-Helfers für eine sichere Route. Betrachten Sie es als Prisma, aber für Routen.

Installation

Zunächst müssen Sie den Routes -Generator selbst installieren:

 yarn add routes-gen

Offizielle Fahrer

Der Generator arbeitet mit "Treibern" zusammen, bei denen es sich um Routenparser für verschiedene Frameworks handelt.

Treiber	Installation
Remix	yarn add @routes-gen/remix
Solidstart	yarn add @routes-gen/solid-start

Nutzungsbeispiel

Sie können einfach rennen:

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

Es wird die Routen analysieren und exportieren, basierend auf dem von Ihnen bereitgestellten Treiber.

Beispielsweise exportiert der @routes-gen/remix Treiber die Routen standardmäßig an /app/routes.d.ts .

Beachten Sie, dass Sie den Ausgangspfad über das Flag --output oder -o ändern können.

Jetzt können Sie den generierten route überall importieren und die Typierungen genießen:

 import { route } from "routes-gen" ;

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

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

Nutzung von Parametypen

Sie können den RouteParams -Typ verwenden, um Ihre dynamischen Routenparameter/-segmente hinzuzufügen. Beispiel:

 import { RouteParams } from "routes-gen" ;

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

Remix -Beispiel:

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

CLI -Optionen

Option	Alias	Beschreibung
--helfen		Drucken Sie die Hilfebotschaft aus und beenden Sie
--Version	-V	Drucken Sie die CLI -Version aus und beenden Sie
--Ausgabe	-O	Der Pfad für Routen exportieren
--Treiber	-D	Der Fahrer der Analyse von Routen
--betrachten	-W	Achten Sie auf Änderungen
-Post-Export		Führen Sie einen Befehl nach dem Exportieren von Routen aus

Schreiben Sie Ihren Fahrer

Wenn es keinen Treiber für Ihr bevorzugter Framework gibt, können Sie Ihre eigenen schreiben. Erstellen Sie beispielsweise eine einfache Datei driver.js -Datei in Ihrem Projekt mit dem folgenden Inhalt:

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

Jetzt können Sie es leicht verwenden:

 routes-gen -d driver.js

Sie können es auch an NPM veröffentlichen, installieren und als Paket verwenden:

 routes-gen -d my-driver-package

Bitte überlegen Sie, ob Sie Ihre Fahrer in dieses Repository einreichen.