Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sandulat/routes-gen
Framework agnostic routes typings generator. Remix ☑️ SolidStart ☑️
https://github.com/sandulat/routes-gen
nextjs remix routes solid-js typescript
Last synced: about 2 months ago
JSON representation
Framework agnostic routes typings generator. Remix ☑️ SolidStart ☑️
- Host: GitHub
- URL: https://github.com/sandulat/routes-gen
- Owner: sandulat
- License: mit
- Created: 2022-01-09T17:06:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T10:40:05.000Z (8 months ago)
- Last Synced: 2024-11-06T11:53:11.536Z (2 months ago)
- Topics: nextjs, remix, routes, solid-js, typescript
- Language: TypeScript
- Homepage:
- Size: 898 KB
- Stars: 281
- Watchers: 4
- Forks: 12
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-remix - routes-gen
- awesome-remix - routes-gen
README
## 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();
return
;
}
```
## 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.**