routes gen下載 - routes gen源代碼下載

routes gen

Ai源碼

1.0.0

下載

關於

routes-gen是一種框架不可知的CLI工具，用於解析和生成類型安全的助手，用於安全路線使用。將其視為Prisma，但對於路線。

安裝

首先，您必須安裝路由生成器本身：

 yarn add routes-gen

官方司機

發電機與“驅動程序”一起工作，這是用於不同框架的路由解析器。

司機	安裝
混音	`yarn add @routes-gen/remix`
實心	`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" ,
} ) ;

參數類型使用

您可以使用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}" ] ;
    } ,
}