routes genダウンロード-RoutesGen routes genコードのダウンロード

routes gen

AI ソースコード

1.0.0

ダウンロード

について

routes-gen安全なルート使用のためのタイプセーフヘルパーの解析と生成のためのフレームワーク不可知論のCLIツールです。それはプリスマだと考えてください。

インストール

まず、ルートジェネレーター自体をインストールする必要があります。

 yarn add routes-gen

公式ドライバー

ジェネレーターは、異なるフレームワークのルートパーサーである「ドライバー」と連携します。

ドライバ	インストール
リミックス	`yarn add @routes-gen/remix`
SOLIDSTART	`yarn add @routes-gen/solid-start`

使用例

単に実行できます：

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

提供したドライバーに基づいて、ルートを解析およびエクスポートします。

たとえば、 @routes-gen/remixドライバーは、デフォルトで/app/routes.d.tsにルートをエクスポートします。

--outputまたは-oフラグを介して出力パスを変更できることに注意してください。

これで、生成されたrouteヘルパーをどこにでもインポートして、タイピングを楽しむことができます。

 import { route } from "routes-gen" ;

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

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

Paramsタイプの使用法

RouteParamsタイプを使用して、動的ルートパラメーター/セグメントにタイピングを追加できます。例：

 import { RouteParams } from "routes-gen" ;

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

リミックスの例：

 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オプション

オプション	エイリアス	説明
- ヘルプ		ヘルプメッセージを印刷して終了します
- バージョン	-v	CLIバージョンを印刷して終了します
- 出力	-o	ルートのエクスポートのパス
- ドライバ	-d	ルートの処理のドライバー
- 時計	--w	変更に注意してください
-Post-Export		ルートエクスポート後にコマンドを実行します

あなたのドライバーを書く

優先フレームワークのドライバーがない場合は、独自のドライバーを書くことができます。たとえば、次のコンテンツを使用して、プロジェクトで簡単なdriver.jsファイルを作成します。

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