@sirou/svelte

The SvelteKit adapter for Sirou. Integrates with SvelteKit's goto and page store to provide type-safe routing in Svelte applications.

Installation

npm install @sirou/svelte @sirou/core

Setup

// src/lib/router.ts
import { createSirouSvelteRouter } from "@sirou/svelte";
import { routes } from "./routes";

export const router = createSirouSvelteRouter(routes);

<!-- src/routes/+layout.svelte -->
<script>
  import { setupSirouGuards } from '@sirou/svelte';
  import { router } from '$lib/router';

  setupSirouGuards(router, {
    auth: async ({ meta }) => {
      const session = await getSession();
      if (!session && meta?.requiresAuth) {
        return { allowed: false, redirect: '/login' };
      }
      return { allowed: true };
    },
  });
</script>

<slot />

API Reference

createSirouSvelteRouter(config)

Creates an Sirou router instance backed by SvelteKit's goto and page store.

import { createSirouSvelteRouter } from "@sirou/svelte";
const router = createSirouSvelteRouter(routes);

setupSirouGuards(router, guards)

Registers named guards on the router.

setupSirouGuards(router, {
  auth: async (context) => {
    // ...
    return { allowed: true };
  },
});

Using the Router in Components

<script>
  import { router } from '$lib/router';

  function goHome() {
    router.go('home');
  }
</script>

<button on:click={goHome}>Go Home</button>

useSirouSvelteRoute()

A Svelte store that reactively tracks the current route.

<script>
  import { useSirouSvelteRoute } from '@sirou/svelte';
  const currentRoute = useSirouSvelteRoute();
</script>

<p>Current: {$currentRoute?.name}</p>

License

MIT