Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eddeee888/route-codegen
Code generator for routes. Handle internal and external routing for react-router, Next.js and Node.js
https://github.com/eddeee888/route-codegen
code-generation next-js node-js react-router routing
Last synced: 18 days ago
JSON representation
Code generator for routes. Handle internal and external routing for react-router, Next.js and Node.js
- Host: GitHub
- URL: https://github.com/eddeee888/route-codegen
- Owner: eddeee888
- License: mit
- Created: 2020-01-19T23:15:21.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:33:02.000Z (about 2 years ago)
- Last Synced: 2024-12-18T23:26:56.950Z (21 days ago)
- Topics: code-generation, next-js, node-js, react-router, routing
- Language: TypeScript
- Homepage:
- Size: 3.14 MB
- Stars: 21
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# route-codegen
Route Codegen is a library that generates Typescript functions, hooks and types for routing purposes. There are many areas in modern web application routing:
- URL generation
- Safely accessing dynamic path params of a URL
- Linking to a route inside the app vs linking to an external route
- Making sure href of all anchors are correct when route patterns change
Route Codegen aims to simplify workflows by keeping apps' routes in one config file and generates the code to handle routing concerns.
## 🤝 Supports
- [Next.js](https://github.com/zeit/next.js/) v9.3.4^
- [React router](https://github.com/ReactTraining/react-router) v5^
## ⚡ Installation
```bash
yarn add -D @route-codegen/core
yarn add @route-codegen/utils
yarn add @route-codegen/react # Only if you use generate.redirectComponent option
```
Or
```bash
npm i --save-dev @route-codegen/core
npm i @route-codegen/utils
npm i @route-codegen/react # Only if you use generate.redirectComponent option
```
## 🛠️ Configuration
### Basic config
Add `route-codegen.yml` to your project root:
```yml
apps:
client:
routes:
login: /login
logout: /logout
user: /user/:id/:subview(profile|pictures)?
destinationDir: src/routes
plugins:
- name: "typescript-pattern"
- name: "typescript-generate-url"
- name: "typescript-react-router-5"
config:
generate:
linkComponent: true
- name: "typescript-root-index"
```
Then run the following command:
```bash
yarn route-codegen
```
Or
```bash
npx route-codegen
```
You will get fully typed functions to generate URLs to login, logout and user routes. These files are accompanied by related types based on the app's main routing approach.
For example, if you are using `react-router`, can set up your route file like this:
```jsx
// src/App.tsx
import { BrowserRouter, Switch, Route, Link, RouteComponentProps } from "react-router-dom";
import {
patternLogin,
patternLogout,
patternUser,
LinkLogin,
LinkUser,
generateUrlLogout,
PathParamsUser
} from "./routes";
function App() {
return (
-
Login
{/* 👆 Instead manually typing out href string */}
{/* 👇 Use LinkLogin it has href built-in */}
Login
-
Login
{/* 👆 Instead manually typing out href string */}
{/* 👇 Use typed `generateUrl` functions ( if you still want to use react-router's Link) */}
Logout
-
User 100 pictures page
{/* 👆 Instead of using string for href which is error prone */}
{/* 👇 Use typed Link components */}
User 100 pictures page
;
{/* 👇 pattern variables are directly pulled from config to minimise changes */}
{/* 👇 Path params are converted to TypeScript interfaces that can be used to type props */}
) => } />
);
}
```
### Advanced config
If you have more than one app and want to manage all routes in one config file, you can use one config file to do so:
```yml
apps:
client:
routes:
login: /login
logout: /logout
user: /user/:id/:subview(profile|pictures)?
destinationDir: client/src/routes
generate:
linkComponent: true
redirectComponent: true
useParams: true
useRedirect: true
plugins:
- name: "typescript-pattern"
- name: "typescript-generate-url"
- name: "typescript-react-router-5"
- name: "typescript-anchor"
- name: "typescript-root-index"
client-seo:
routes:
home: /
about: /about
destinationDir: client-seo/src/routes
plugins:
- name: "typescript-pattern"
- name: "typescript-generate-url"
- name: "typescript-next-js"
- name: "typescript-anchor"
- name: "typescript-root-index"
# An app without `routes` will get generated code to support routing to other apps.
express-server:
destinationDir: server/src/routes
# An app without `destinationDir` will not get generated code.
# Other apps will get generated code to support routing to this app.
legacy:
routes:
legacyApp: /legacy/app
# Origin can be used to prefix the URL path of certain apps.
# ${...} Can be used to pass environment variables to the config yml
externalApp:
origin: https://${SUB_DOMAIN}.external.com
routes:
externalAppHome: /
```
### Path parameters
Path parameter patterns are a subset of https://github.com/pillarjs/path-to-regexp:
- `:path`: This matches any string.
- `:path?`: This matches an optional string.
- `:path(enum1|enum2)`: This only matches if path value is `enum1` or `enum2` for React Router V5. For others, it matches any string.
- `:path(enum1|enum2)?`: This only matches if path value is `enum1` or `enum2` for React Router V5. For others, it matches any string. This param is optional.
### Customising links
If you have custom links ( e.g. to apply styling on top of underlying link components ), check out the [link options doc](./docs/plugins/link-options.md).
## 🔌 Plugins
Checkout the [list of plugins](./packages/core/src/plugins). ( More docs coming soon! )
## 🧑💻 Development
If you want to see how the codegen works, check out the [development guide](./docs/general/development.md).