Skip to content

Create a path helper from a directory structure for any frameworks

License

Notifications You must be signed in to change notification settings

type-safe-dx/type-safe-path

Repository files navigation

type-safe-path

codecov npm version

Usage

npm i -D @kiyoshiro/type-safe-path
npx type-safe-path // generate a path helper file

Features

  • 🍃 Tiny runtime code
  • 🚀 Zero config (Currently supports Next, Nuxt3 and SvelteKit)
  • 🛠️️ Configurable for adapt any frameworks

Abstract

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

Comparison

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
image
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