⚡ How to - vite-plugin-kit-routes
vite-plugin-kit-routes automatically updates route references in SvelteKit projects, crucial for
large applications where manual tracking of route changes is error-prone. It simplifies development
by ensuring all route links are consistent and up-to-date, saving time and preventing broken links.
You will essentially have 4 objects at your disposal: PAGES, SERVERS, ACTIONS and LINKS and
instead of hardcode strings, you will use these objects that are always up to date with your routes.
No more 🤞, now be confident ✅!
By default, no Configuration is requiered. Just Install the plugin, and use objects
available in your $lib/ROUTES.ts generated file (always in sync).
Examples
PAGES - First example
<script lang="ts">
import { PAGES } from '$lib/ROUTES'
</script>
<!-- 🤞 before, hardcoded string -->
<a href="/terms-and-conditions">Terms</a>
<!-- ✅ after, typechecked route, error prone -->
<a href={PAGES['/terms-and-conditions']}>Terms</a>
<!--
If you change location of `/terms-and-conditions/+page.svelte`:
- the key '/terms-and-conditions' will not exist
- `PAGES` object will yield!
-->PAGES - With 1 route param
<script lang="ts">
import { PAGES } from '$lib/ROUTES'
</script>
<!-- 🤞 before, hardcoded string -->
<a href="/site_contract/{siteId}">Go to site</a>
<!-- ✅ after, typechecked route, error prone -->
<a href={PAGES['/site_contract/{siteId}']({ siteId })}>Go to site</a>PAGES - With 1 Search Param*
<script lang="ts">
import { PAGES } from '$lib/ROUTES'
</script>
<!-- 🤞 before, hardcoded string -->
<a href="/site_contract/{siteId}?limit={3}">Go to site</a>
<!-- ✅ after, typechecked route, error prone -->
<a href={PAGES['/site_contract/{siteId}']({ siteId, limit: 3 })}>Go to site</a>ACTIONS - With a named action
<script lang="ts">
import { enhance } from '$app/forms'
import { page } from '$app/stores'
import { ACTIONS } from '$lib/ROUTES'
const siteId = $page.params.siteId
// 🤞 before, hardcoded string
const action = `/site_contract/${siteId}?/sendSomething`
// ✅ after, typechecked route, error prone
const action = ACTIONS['/site_contract/${siteId}']('sendSomething', { siteId })
</script>
<form method="POST" use:enhance {action}>
<button>Check</button>
</form>LINKS - 1 reference in config*
<script lang="ts">
import { LINKS } from '$lib/ROUTES'
</script>
<!-- 🤞 before, hardcoded string -->
<a href="https://twitter.com/jycouet">Twitter</a>
<!-- ✅ after, typechecked route, error prone -->
<a href={LINKS.twitter}>Twitter</a>LINKS - with params & search params*
<script lang="ts">
import { LINKS } from '$lib/ROUTES'
</script>
<!-- 🤞 before, hardcoded string -->
<img src="https://www.gravatar.com/avatar/jycouet?s=20&d=identicon" alt="logo" />
<!-- ✅ after, typechecked route, error prone -->
<img src={LINKS.gravatar({ str: 'jycouet', s: 20 })} alt="logo" />* You can add a lot of configs to specify search params, types, ...
Installation
npm i -D vite-plugin-kit-routesDemo
Local
npm create kitql@latest --template kit-routesOnline
Configuration
Add the plugin like this:
vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import { kitRoutes } from 'vite-plugin-kit-routes'
/** @type {import('vite').UserConfig} */
const config = {
plugins: [
sveltekit(),
// ✅ Add the plugin
kitRoutes()
]
}
export default configIt will generate a file ./src/lib/ROUTES.ts at the start of your dev server & any update of any of
your +page.svelte | +server.ts | +page.server.ts.
Side Notes
💡
You can make use of
ctrl + space to discover config options. 🎉- What kind of person are you:
PAGES['/info/terms']orPAGES.info_terms?
You can choose anyway 😜
vite.config.ts
kitRoutes({
// format: '/' (default)
format: '_'
})- You like nice and formated files? You can add any cmd after the generation
vite.config.ts
kitRoutes({
post_update_run: 'npm exec prettier ./src/lib/ROUTES.ts -- -w'
})- You can specify a searchParam for some paths (you can also do it globally)
vite.config.ts
kitRoutes({
PAGES: {
site: {
explicit_search_params: {
limit: { type: 'number' }
}
}
}
})- You can narrow down the type of params (You can also change
"string | number"default globally)
vite.config.ts
kitRoutes({
PAGES: {
site_id: {
params: {
id: { type: 'string' }
}
}
}
})- You want better typings? Add the
KIT_ROUTEStype... It will be crazy good! I'm not sure you are ready! UnderPAGES,SERVERSandACTIONS, you will get autocompletion for route config. 🤯
vite.config.ts
import type { KIT_ROUTES } from '$lib/ROUTES'
import { kitRoutes } from 'vite-plugin-kit-routes'
kitRoutes<KIT_ROUTES>({
// Conf
})- You are concerned about
code splittingand/orprivacy? Let's generate variables instead of objects!
vite.config.ts
kitRoutes({
format: 'variables'
})src/lib/ROUTES.ts
// With format: '_', it was like 👇
// export const PAGES: {
// main: '/main',
// about '/about'
// }
// With format: 'variables' it's like 👇
export const PAGES_main = '/main'
export const PAGES_about '/about'- You want to use some
LINKSin different places in your app? Let's show you what we can do:
vite.config.ts
kitRoutes({
LINKS: {
// reference to a hardcoded link
twitter: 'https://twitter.com/jycouet',
// ✅ <a href={LINKS.twitter}>Twitter</a>
// reference to link with params! (Like svelteKit routes add [ ] to specify params)
twitter_post: 'https://twitter.com/[name]/status/[id]',
// ✅ <a href={LINKS.twitter_post({ name: 'jycouet', id: '1727089217707159569' })}>Twitter Post</a>
// reference to link with params & search params!
gravatar: {
href: 'https://www.gravatar.com/avatar/[str]',
explicit_search_params: {
s: { type: 'number', default: 75 },
d: { type: '"retro" | "identicon"', default: '"identicon"' }
}
}
// ✅ <img src={LINKS.gravatar({ str: 'jycouet', s: 20 })} alt="logo" />
}
})Let me know what I forgot to add on TwiX, or what you would like to see in the future. 🙏