routes gen

О

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

Парамы типы использования

Вы можете использовать тип RouteParams для добавления типов в параметры/сегменты динамического маршрута. Пример:

 import { RouteParams } from "routes-gen" ;

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

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

CLI варианты

Вариант	Псевдоним	Описание
--помощь		Распечатайте сообщение о справке и выйти
--версия	-В	Распечатайте версию CLI и выйти
--выход	-О	Путь для экспорта маршрутов
-драйвер	-Д	Водитель обработки маршрутов
--смотреть	-W	Следите за изменениями
-Пост-экспорт		Выполнить команду после экспорта маршрутов

Написание своего водителя

Если нет драйвера для вашей предпочтительной структуры, вы можете написать свой собственный. Например, создайте простой файл 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}" ] ;
    } ,
}

Теперь вы можете легко использовать его:

 routes-gen -d driver.js

Вы также можете опубликовать его в NPM, установить и использовать в качестве пакета:

 routes-gen -d my-driver-package

Пожалуйста, рассмотрите возможность отправить своих водителей в этот репозиторий.