route-sage-react
Version:
A TypeScript utility for managing and configuring routes with type safety and nested route support
111 lines (79 loc) • 3.46 kB
Markdown
# Route Sage 🧙♂️
[](https://www.npmjs.com/package/route-sage)
[](https://opensource.org/licenses/ISC)
**Route Sage** is a lightweight TypeScript utility for managing application routes with full type safety. It helps you define and organize your application's URL structure in a maintainable and type-safe way, eliminating common routing errors and improving developer experience.
## ✨ Features
- 🛣 **Type-Safe URLs**: Define routes with full TypeScript support and autocompletion
- 🌳 **Nested Routes**: Build complex route hierarchies with clean, maintainable code
- 🔍 **IntelliSense**: Get intelligent code completion for all your routes and parameters
- 🏗 **Framework Agnostic**: Works with any JavaScript/TypeScript project
- 🚀 **Lightweight**: Zero dependencies and minimal footprint
- ⚡ **Simple API**: Intuitive and focused on route management
## 📦 Installation
Install the package as a development dependency in your project:
```bash
npm install --save-dev route-sage
# or
yarn add -D route-sage
# or
pnpm add -D route-sage
```
## 🏗️ Project Setup
1. Create a `routes.ts` file in your project
2. Define your routes using `createPathConfig`
3. Export the configured routes for use throughout your application
## 🚀 Getting Started
### Basic Usage
Define your routes with type safety:
```typescript
import { createPathConfig } from "route-sage";
const routes = createPathConfig({
signin: () => ({ url: "/sign-in" }),
signup: () => ({ url: "/sign-up" }),
});
// Access routes with type safety
const signInUrl = routes.signin().url; // '/sign-in'
const postUrl = routes.feed().details("123").url; // '/feed/123'
```
### Nested Routes with Parameters
```typescript
const appRoutes = createPathConfig({
posts: () => ({
url: "/posts",
create: () => ({ url: "/new" }),
details: (postId: string) => ({
url: `/${postId}`,
comments: () => ({
url: `/comments`,
add: () => ({ url: `/new` }),
details: (commentId: string) => ({ url: `/${commentId}` }),
}),
}),
}),
});
// Usage examples
const Posts = appRoutes.posts().url; // '/posts'
const NewPost = appRoutes.posts().create().url; // '/posts/new'
const PosteDetails = appRoutes.posts().details("123").url; // '/posts/123'
const PostComments = appRoutes.posts().details("123").comments().url; // '/posts/123/comments'
const NewPostComment = appRoutes.posts().details("123").comments().add().url; // '/posts/123/comments/new'
const PostCommentDetails = appRoutes
.posts()
.details("123")
.comments()
.details("456").url; // '/posts/123/comments/456'
```
## 📄 License
This project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.
## 📚 API Reference
### `createPathConfig(config: RouteConfig): RouteBuilder`
Creates a type-safe route configuration object.
#### Parameters
- `config`: An object defining your route structure with nested routes and parameters
#### Returns
A type-safe route builder object with autocompletion for all defined routes
## 📄 License
This project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Thanks to all contributors who help improve this project
- Inspired by the need for better type safety in frontend routing