kitql icon indicating copy to clipboard operation
kitql copied to clipboard

One more way to format a route type with `vite-plugin-kit-routes`

Open Evertt opened this issue 8 months ago • 2 comments

Is your feature request related to a problem? Please describe.

I just like concise code whenever possible. And currently, when I have these routes:

const PAGES = {
	"/blog": `/blog`,
	"/blog/[id=integer]": (params: {
		id: Parameters<typeof import("../params/integer.ts").match>[0]
	}) => {
		return `/blog/${params.id}`
	},
}

Then I'd need to use it like this in my svelte component:

<script lang="ts">
	import { route } from "$lib/ROUTES"
</script>

<a href={route("/blog/[id=integer]", { id: 1 })}>Go to post 1</a>

Describe the solution you'd like

Before I found this vite plugin I was working on my own version for this, and I generated my routes firstly as a type and then an object that would work like that type. Which allowed me to generate a route with the type /blog/${number}. So instead of needing to write:

<a href={route("/blog/[id=integer]", { id: 1 })}>Go to post 1</a>

I only needed to write:

<a href={route("/blog/1")}>Go to post 1</a>

And it would get correctly type-checked. If I had written route("/blog/some-slug"), typescript would warn me that that was invalid.

Evertt avatar Jun 13 '24 14:06 Evertt