@gamesome/route-builder

Have you ever been frustrated by not having a good way to manage your application's routes in a type-safe manner? Are you resorting to magic strings scattered throughout your codebase, and constantly breaking prod when your api server tries to redirect to a non-existing route?

@gamesome/route-builder is here to help!

You can now build your application's routes in a type-safe way with support for dynamic segments like so:

``typescript
import { buildRoutes } from '@gamesome/route-builder';

const routes = buildRoutes({
$: '/',
user: {
$: '/users',
id: (userId: string) => /${userId},
},
});

routes.$; // "/"
routes.user.$; // "/users"
routes.user.id('123'); // "/users/123"
`

You can also get fancy by creating a branded type like so:

`typescript
type UserId = string & { __brand: 'UserId' };

const routes = buildRoutes({
user: {
id: (userId: string) => /${userId as UserId},
},
});

routes.user.id('123'); // "/users/${UserId}"
`

If you need base urls in your routes you can do that as well. You configure this in the second argument to buildRoutes by passing an object with a baseUrl property. If you want both relative and absolute urls you can set inSeparateBranch to true in the same object. Per default the base url will be represented as BaseUrl in typehints, but if you want the actual string you can set fullBaseUrlInTypeHints to true.

`typescript
const routes = buildRoutes(
{
$: '/',
about: {
$: '/about',
},
},
{
baseUrl: 'https://example.com',
inSeparateBranch: true,
fullBaseUrlInTypeHints: true,
}
);

routes.$; // "/"
routes.about.$; // "/about"
routes.withBaseUrl.$; // "https://example.com/"
routes.withBaseUrl.about.$; // "https://example.com/about"
`

Type hints

In your IDE you will see autocompletion for both static and dynamic routes. as well as hints indicating what will be generated.

$3





$3





$3





$3





Use cases

- More ergonomic way of routing in your frontend application
- Create a stable contract between your frontend and backend regarding frontend pages and their parameters
- Organise your ts-rest api routes in a type-safe manner (if you for some reason don't use ts-rest yet, you really should check it out! Probably works in other setups as well though)

Installation

`bash
npm install @gamesome/route-builder


or


yarn add @gamesome/route-builder
``