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

Never be out of sync with your routes again 🥳

💡

It's very early, things might change! 😉

By default, no Configuration is needed, it will just infer as much as it can from your project. Then you will be able to narrow down types & search params.

Examples

+page.svelte

<script lang="ts">
  import { PAGES } from '$lib/ROUTES'
</script>
 
<!-- 🤞 before, random string -->
<a href="/site_contract/{siteId}-{contractId}?limit={3}">Go to site</a>
 
<!-- ✅ after, all typed & make sure it exist. // 'vite-plugin-kit-routes', -->
<a href={PAGES.site_contract_siteId_contractId({ siteId, contractId, limit: 3 })}>Go to site</a>

+page.svelte

<script lang="ts">
  import { enhance } from '$app/forms'
  import { page } from '$app/stores'
  import { ACTIONS } from '$lib/ROUTES'
 
  const siteId = $page.params.siteId
  const contractId = $page.params.contractId
 
  // 🤞 before, random string
  const action =  `/site_contract/${siteId}-${contractId}?/sendSomething`
 
  // ✅ after, all typed & make sure it exist. // 'vite-plugin-kit-routes',
  const action = ACTIONS.site_contract_siteId_contractId('sendSomething', { siteId, contractId })
</script>
 
<form method="POST" use:enhance {action}>
  <button>Check</button>
</form>

Installation

npm i -D vite-plugin-kit-routes

Configuration

Add the plugin like this:

vite.config.js

import { kitRoutes } from 'vite-plugin-kit-routes'
 
/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    // This is the plugin to add
    kitRoutes()
  ]
}
 
export default config

It will create 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 run prettier at the end of the process with something like:

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({
  extend: {
    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({
  extend: {
    PAGES: {
      site_id: {
        params: {
          id: { type: 'string' }
        }
      }
    }
  }
})

Then, you can add the ROUTES type... It will be crazy good!

vite.config.ts

import type { ROUTES } from '$lib/ROUTES'
import { kitRoutes } from 'vite-plugin-kit-routes'
 
kitRoutes<ROUTES>({
  // Conf
})

Vite - Watch and Run SvelteKit - Handles

⚡How to - vite-plugin-kit-routes

Examples

Installation

Configuration

Side Notes

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