npm i -D @kiyoshiro/type-safe-path
npx type-safe-path // generate a path helper file- 🍃 Tiny runtime code
- 🚀 Zero config (Currently supports Next, Nuxt3 and SvelteKit)
- 🛠️️ Configurable for adapt any frameworks
pages/
└── posts/
├──index.svelte
└──[id].svelte
↓ $ type-safe-path
generated code
type PathToParams = {
"/posts": {
query?: Record<string, string | number | string[] | number[]>
hash?: string
}
"/posts/[id]": {
params: { id: string | number }
query?: Record<string, string | number | string[] | number[]>
hash?: string
}
}
/**
* @example
* $path('/posts/[id]', { params: { id: 1 }}) // => '/posts/1'
*/
export function $path<Path extends keyof PathToParams>(
path: Path,
args: PathToParams[Path]
): string {
return (
path.replace(/\[(\w+)\]/g, (_, key) => (args as any).params[key]) +
(args.query
? "?" + new URLSearchParams(args.query as any).toString()
: "") +
(args.hash ? "#" + args.hash : "")
)
}
/**
* @example
* $echoPath('/posts/[id]') // => '/posts/[id]'
*/
export function $echoPath<Path extends keyof PathToParams>(path: Path): string {
return path
}Kapture.2023-03-12.at.18.58.36.mp4
| This library | pathpida | |
|---|---|---|
| API | $path('posts/[id]', { params: { id: 1 }}) |
pagesPath.posts._id(1).$url() |
| Bundle Size | Constant even if the number of paths increases, because it only generates few functions. | Increases as paths increase, because it generates a big object. |
For long path(e.g. /foo/bar/baz) |
Just select one completion and we can search path like fuzzy |
Needs to push . key many times for pagesPath.foo.bar.baz.$url() |
| Supported Frameworks | Any frameworks (thanks to its flexible configuration) | Next.js, Nuxt.js |