npm.io
0.4.0 • Published 3 years agoCLI

@kiyoshiro/type-safe-path

Licence
MIT
Version
0.4.0
Deps
7
Size
56 kB
Vulns
0
Weekly
0

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
}

https://user-images.githubusercontent.com/40315079/224537579-e3a28043-68cd-4a0a-bcfc-73df8113456d.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