⚡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="mailto:me@super-cool.dev">Send me a mail</a>
 
<!-- ✅ after, typechecked route, error prone -->
<a href={LINKS.mailto}>Send me a mail</a>

LINKS - with params & search params*

<script lang="ts">
  import { LINKS } from '$lib/ROUTES'
</script>
 
<!-- 🤞 before, hardcoded string -->
<a href="https://twitter.com/jycouet/status/1727089217707159569?limit=12">
  <span>Check out the post </span>
</a>
 
<!-- ✅ after, typechecked route, error prone -->
<a href={LINKS.twitter_post({ name: 'jycouet', id: '1727089217707159569', limit: 12 })}>
  <span>Check out the post </span>
</a>

* You can add a lot of configs to specify search params, types, ...

Installation

npm i -D vite-plugin-kit-routes

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 config

It 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['/terms'] or PAGES.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_ROUTES type... It will be crazy good! I'm not sure you are ready! Under PAGES, SERVERS and ACTIONS, 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 want to use some LINKS in 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)
    mailto: 'mailto:[email]',
    // ✅ <a href={LINKS.mailto({ email: 'me@super.dev' })}>Mail</a>
 
    // reference to link with params & search params!
    twitter_post: {
      href: 'https://twitter.com/[name]/status/[id]',
      explicit_search_params: { limit: { type: 'number' } }
    }
    // ✅ <a href={LINKS.twitter_post({ name: 'jycouet', id: '1727089217707159569', limit: 12 })}>Twitter Post</a>
  }
})

Let me know what I forgot to add on TwiX, or what you would like to see in the future. 🙏

Helpers Vite - Watch and Run

⚡How to - vite-plugin-kit-routes

Examples

Installation

Configuration

Side Notes

⚡How to - `vite-plugin-kit-routes`