type-safe-path

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