Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kruschid/typesafe-routes
Spices up your favorite routing library by adding type safety to plain string-based route definitions.
https://github.com/kruschid/typesafe-routes
angular-router react-router typesafe-routes typescript vue-router
Last synced: about 18 hours ago
JSON representation
Spices up your favorite routing library by adding type safety to plain string-based route definitions.
- Host: GitHub
- URL: https://github.com/kruschid/typesafe-routes
- Owner: kruschid
- License: mit
- Created: 2019-04-03T10:02:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-04T09:35:02.000Z (4 months ago)
- Last Synced: 2024-10-12T01:17:06.697Z (3 months ago)
- Topics: angular-router, react-router, typesafe-routes, typescript, vue-router
- Language: TypeScript
- Homepage: https://kruschid.github.io/typesafe-routes/
- Size: 2.87 MB
- Stars: 102
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - typesafe-routes - based route definitions. | kruschid | 36 | (TypeScript)
README
[](https://discord.gg/BCGmvSSJBk)
# Typesafe Routes
`typesafe-routes` helps you to accelerate your app development and reduce your test efforts by incorporating the TypeScript compiler for advanced type checking. Don't look for broken router paths manually; instead, let TypeScript notify you about inconsistencies in your routes.
`typesafe-routes` features include:
- Autocompletion for paths and parameters
- Path & template rendering
- Nested, absolute, and relative path rendering
- Parameter parsing and serialization
- Type-safe, customizable, and extendable
- Compatible with JavaScript (apart from type safety)
- Small bundle size starting at less than 1kb
## Example (Default Renderer)
``` ts
import { createRoutes, int, renderPath, parsePath, template } from "typesafe-routes";
// route tree definition
const routes = createRoutes({
users: {
path: ["users", int("uid")], // /users/:uid
children: {
edit: { path: ["edit"] }, // /users/:uid/edit
delete: { path: ["delete"] }, // /users/:uid/delete
}
}
});
// absolute paths
renderPath(routes.users, { uid: 123 }); // ~> "/users/123"
// nested paths
renderPath(routes.users.edit, { uid: 123 }); // ~> "/users/123/edit"
renderPath(routes.users.delete, { uid: 123 }); // ~> "/users/123/delete"
// relative paths ("_" indicates the starting segment)
renderPath(routes._.users.$render, { uid: 123 }); // ~> "users/123"
renderPath(routes.users._.edit, {}); // ~> "edit"
// parse path params
parsePath(routes.users.edit, { uid: "42" }); // ~> { uid: 42 }
parsePath(routes.users.edit, "/users/99/edit"); // ~> { uid: 99 }
// templates
template(routes.users.edit); // ~> "/users/:uid/edit"
template(routes._.users.edit); // ~> "users/:uid/edit"
template(routes.users._.edit); // ~> "edit"
```
## Quick Reference
The complete [documentation can be found here](https://kruschid.github.io/typesafe-routes).
- Functions
- `renderPath`: renders a path with parameters
- `renderQuery`: renders a search query
- `render`: renders a path with parameters including query string
- `template`: renders a route template
- `parsePath`: parses dynamic segments in a path
- `parseQuery`: parses parameters in a search query
- `parse`: parses path and search query for parameters
- `replace`: partially replaces dynamic segments and query params in a string-based path (i.e. `location.path`)
## Installation
``` sh
npm i typesafe-routes # or any npm alternative
```
## How to Contribute
- leave a star ⭐
- report a bug 🐞
- open a pull request 🏗️
- please discuss your idea on github or discord **before you start working on your PR**
- help others ❤️
- [buy me a coffee ☕](https://www.buymeacoffee.com/kruschid)
## Roadmap
- v10-v12 migration guide
- v12beta-v12.1 migration guide
- check for duplicate param names in the route tree
- customizable parsing of search params (for example with qs)
- demos & utils
- react-router
- wouter
- vue router
- angular router
- refinejs
## Docs
- [x] quickstart
- basic-features
- [x] absolute-routes
- [x] parameters
- [x] nested-routes
- [x] relative-routes
- [x] route-templates
- [x] parameter-parsing
- [x] parameter-binding
- [x] parameter-types
- advanced-features
- [x] replace-dynamic-segments
- [x] global-query-parameters
- customization
- [x] custom-parameter-types
- tutorials
- [x] angular router
- [ ] react router
- [ ] wouter
- [ ] vue router
- [ ] refine