{"id":14957424,"url":"https://github.com/eddeee888/route-codegen","last_synced_at":"2025-06-21T17:40:05.163Z","repository":{"id":42927038,"uuid":"234982209","full_name":"eddeee888/route-codegen","owner":"eddeee888","description":"Code generator for routes. Handle internal and external routing for react-router, Next.js and Node.js","archived":false,"fork":false,"pushed_at":"2023-01-07T04:33:02.000Z","size":3296,"stargazers_count":21,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T00:51:49.750Z","etag":null,"topics":["code-generation","next-js","node-js","react-router","routing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eddeee888.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-19T23:15:21.000Z","updated_at":"2024-06-02T23:24:08.000Z","dependencies_parsed_at":"2023-02-06T12:00:49.616Z","dependency_job_id":null,"html_url":"https://github.com/eddeee888/route-codegen","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddeee888%2Froute-codegen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddeee888%2Froute-codegen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddeee888%2Froute-codegen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddeee888%2Froute-codegen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eddeee888","download_url":"https://codeload.github.com/eddeee888/route-codegen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883315,"owners_count":18901365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-generation","next-js","node-js","react-router","routing"],"created_at":"2024-09-24T13:14:53.079Z","updated_at":"2025-01-21T01:59:53.221Z","avatar_url":"https://github.com/eddeee888.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CI](https://github.com/eddeee888/route-codegen/workflows/CI/badge.svg)\n![Release](https://github.com/eddeee888/route-codegen/workflows/Release/badge.svg)\n\n# route-codegen\n\nRoute Codegen is a library that generates Typescript functions, hooks and types for routing purposes. There are many areas in modern web application routing:\n\n- URL generation\n- Safely accessing dynamic path params of a URL\n- Linking to a route inside the app vs linking to an external route\n- Making sure href of all anchors are correct when route patterns change\n\nRoute Codegen aims to simplify workflows by keeping apps' routes in one config file and generates the code to handle routing concerns.\n\n## 🤝 Supports\n\n- [Next.js](https://github.com/zeit/next.js/) v9.3.4^\n- [React router](https://github.com/ReactTraining/react-router) v5^\n\n## ⚡ Installation\n\n```bash\nyarn add -D @route-codegen/core\nyarn add @route-codegen/utils\nyarn add @route-codegen/react # Only if you use generate.redirectComponent option\n```\n\nOr\n\n```bash\nnpm i --save-dev @route-codegen/core\nnpm i @route-codegen/utils\nnpm i @route-codegen/react # Only if you use generate.redirectComponent option\n```\n\n## 🛠️ Configuration\n\n### Basic config\n\nAdd `route-codegen.yml` to your project root:\n\n```yml\napps:\n  client:\n    routes:\n      login: /login\n      logout: /logout\n      user: /user/:id/:subview(profile|pictures)?\n    destinationDir: src/routes\n    plugins:\n      - name: \"typescript-pattern\"\n      - name: \"typescript-generate-url\"\n      - name: \"typescript-react-router-5\"\n        config:\n          generate:\n            linkComponent: true\n      - name: \"typescript-root-index\"\n```\n\nThen run the following command:\n\n```bash\nyarn route-codegen\n```\n\nOr\n\n```bash\nnpx route-codegen\n```\n\nYou 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.\n\nFor example, if you are using `react-router`, can set up your route file like this:\n\n```jsx\n// src/App.tsx\nimport { BrowserRouter, Switch, Route, Link, RouteComponentProps } from \"react-router-dom\";\nimport { \n  patternLogin, \n  patternLogout, \n  patternUser, \n  LinkLogin, \n  LinkUser, \n  generateUrlLogout, \n  PathParamsUser \n} from \"./routes\";\n\nfunction App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/login\"\u003eLogin\u003c/Link\u003e\n          {/* 👆 Instead manually typing out href string */}\n          {/* 👇 Use LinkLogin it has href built-in */}\n          \u003cLinkLogin\u003eLogin\u003c/Link\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/logout\"\u003eLogin\u003c/Link\u003e\n          {/* 👆 Instead manually typing out href string */}\n          {/* 👇 Use typed `generateUrl` functions ( if you still want to use react-router's Link) */}\n          \u003cLink to={generateUrlLogout()}\u003eLogout\u003c/Link\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cLink href=\"/user/100/pictures\"\u003eUser 100 pictures page\u003c/Login\u003e\n          {/* 👆 Instead of using string for href which is error prone */}\n          {/* 👇 Use typed Link components */}\n          \u003cLinkUser urlParams={{ path: { id: \"100\", subview: \"pictures\" } }}\u003e\n            User 100 pictures page\n          \u003c/LinkUser\u003e;\n        \u003c/li\u003e\n      \u003c/ul\u003e\n\n      \u003chr /\u003e\n\n      \u003cSwitch\u003e\n        {/* 👇 pattern variables are directly pulled from config to minimise changes */}\n        \u003cRoute exact path={patternLogin}\u003e\n          \u003cLogin /\u003e\n        \u003c/Route\u003e\n        \u003cRoute exact path={patternLogout}\u003e\n          \u003cLogout /\u003e\n        \u003c/Route\u003e\n        {/* 👇 Path params are converted to TypeScript interfaces that can be used to type props */}\n        \u003cRoute exact path={patternUser} \n          render={(routeProps: RouteComponentProps\u003cPathParamsUser\u003e) =\u003e \u003cUser routeProps={routeProps} /\u003e} /\u003e\n      \u003c/Switch\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n```\n\n### Advanced config\n\nIf 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:\n\n```yml\napps:\n  client:\n    routes:\n      login: /login\n      logout: /logout\n      user: /user/:id/:subview(profile|pictures)?\n    destinationDir: client/src/routes\n    generate:\n      linkComponent: true\n      redirectComponent: true\n      useParams: true\n      useRedirect: true\n    plugins:\n      - name: \"typescript-pattern\"\n      - name: \"typescript-generate-url\"\n      - name: \"typescript-react-router-5\"\n      - name: \"typescript-anchor\"\n      - name: \"typescript-root-index\"\n\n  client-seo:\n    routes:\n      home: /\n      about: /about\n    destinationDir: client-seo/src/routes\n    plugins:\n      - name: \"typescript-pattern\"\n      - name: \"typescript-generate-url\"\n      - name: \"typescript-next-js\"\n      - name: \"typescript-anchor\"\n      - name: \"typescript-root-index\"\n\n  # An app without `routes` will get generated code to support routing to other apps.\n  express-server:\n    destinationDir: server/src/routes\n\n  # An app without `destinationDir` will not get generated code.\n  # Other apps will get generated code to support routing to this app.\n  legacy:\n    routes:\n      legacyApp: /legacy/app\n\n  # Origin can be used to prefix the URL path of certain apps.\n  # ${...} Can be used to pass environment variables to the config yml\n  externalApp:\n    origin: https://${SUB_DOMAIN}.external.com\n    routes:\n      externalAppHome: /\n```\n\n### Path parameters\n\nPath parameter patterns are a subset of https://github.com/pillarjs/path-to-regexp:\n\n- `:path`: This matches any string.\n- `:path?`: This matches an optional string.\n- `:path(enum1|enum2)`: This only matches if path value is `enum1` or `enum2` for React Router V5. For others, it matches any string.\n- `: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.\n\n### Customising links\n\nIf 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).\n\n## 🔌 Plugins\n\nCheckout the [list of plugins](./packages/core/src/plugins). ( More docs coming soon! )\n\n## 🧑‍💻 Development\n\nIf you want to see how the codegen works, check out the [development guide](./docs/general/development.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddeee888%2Froute-codegen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddeee888%2Froute-codegen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddeee888%2Froute-codegen/lists"}