routes-gen - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #go #golang #machine-learning #docker #nodejs #awesome #cli #pytorch #ios #openai

routes-gen

(★ 282)

Framework agnostic routes typings generator. Remix ☑️ SolidStart ☑️

파일 탐색기

최종 버전 다운로드 (.zip)

- config.json
- README.md
- - bug_report.yml
  - config.yml
- routes-gen.png
- - CHANGELOG.md
  - package.json
  - rollup.js
  - tsconfig.json
- - CHANGELOG.md
  - jest.config.js
  - package.json
  - rollup.config.js
  - tsconfig.json
- - CHANGELOG.md
  - package.json
  - README.md
  - rollup.config.js
  - tsconfig.json
- - CHANGELOG.md
  - package.json
  - README.md
  - rollup.config.js
  - tsconfig.json
- publish.js
.gitignore
jest.config.js
LICENSE.md
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/sandulat/routes-gen

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd routes-gen

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add routes-gen

이 명령어를 터미널에 그대로 입력해 실행하세요.

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

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
    <a href="https://github.com/sandulat/routes-gen" target="_blank">
        <img src="https://raw.githubusercontent.com/sandulat/routes-gen/main/assets/routes-gen.png" width="250px" />
    </a>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/routes-gen"><img src="https://img.shields.io/npm/v/routes-gen?color=%236A3C8F&label=routes-gen" alt="routes-gen"></a>
<a href="https://www.npmjs.com/package/@routes-gen/remix"><img src="https://img.shields.io/npm/v/@routes-gen/remix?color=%236A3C8F&label=@routes-gen/remix" alt="@routes-gen/remix"></a>
<a href="https://www.npmjs.com/package/@routes-gen/solid-start"><img src="https://img.shields.io/npm/v/@routes-gen/solid-start?color=%236A3C8F&label=@routes-gen/solid-start" alt="@routes-gen/solid-start"></a>
<a href="https://github.com/sandulat/routes-gen/blob/main/LICENSE.md"><img src="https://img.shields.io/github/license/sandulat/routes-gen?color=%236A3C8F" alt="License"></a>
<a href="https://twitter.com/sandulat"><img src="https://img.shields.io/twitter/follow/sandulat?label=Twitter" alt="Twitter"></a>
</p>

## About

`routes-gen` is a framework agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage. Think of it as [Prisma](https://github.com/prisma/prisma), but for routes.

## Installation

First, you have to install the routes generator itself:
```
yarn add routes-gen
```

## Official Drivers

The generator works with "drivers", which are route parsers for different frameworks.

| Driver                                               | Installation                       |
|------------------------------------------------------|------------------------------------|
| [Remix](https://github.com/remix-run/remix)          | `yarn add @routes-gen/remix`       |
| [SolidStart](https://github.com/solidjs/solid-start) | `yarn add @routes-gen/solid-start` |

## Usage Example

You can simply run:
```
yarn routes-gen -d @routes-gen/remix
```

It will parse and export the routes, based on the driver that you've provided.

For example, the `@routes-gen/remix` driver will export the routes by default to `/app/routes.d.ts`.

> Note that you can change the output path via the `--output` or `-o` flag.

Now you can import the generated `route` helper anywhere and enjoy the typings:
```ts
import { route } from "routes-gen";

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

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

## Params Types Usage
You can use the `RouteParams` type to add typings to your dynamic route parameters/segments. Example:

```ts
import { RouteParams } from "routes-gen";

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

**Remix** example:
```ts
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 Options

| Option          | Alias | Description                           |
|-----------------|-------|---------------------------------------|
| --help          |       | Print the help message and exit       |
| --version       | -v    | Print the CLI version and exit        |
| --output        | -o    | The path for routes export            |
| --driver        | -d    | The driver of handling routes parsing |
| --watch         | -w    | Watch for changes                     |
| --post-export   |       | Execute a command after routes export |

## Writing Your Driver

If there is no driver for your preferred framework, you can write your own. For example, create a simple `driver.js` file in your project, with the following content:

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

Now you can easily use it:

```
routes-gen -d driver.js
```

You can also publish it to npm, install it, and use it as a package:

```
routes-gen -d my-driver-package
```

> **Please consider submitting your drivers to this repository.**