svelte-router

Simple router for vite+svelte

Usage

App.svelte

<script lang="ts">
    import Router, { route } from './lib/Router.svelte';
    import TodosPage from './pages/TodosPage.svelte';
    import TodoPage from './pages/TodoPage.svelte';

    route('/', TodosPage);
    route('/[id]', TodoPage);
</script>

<Router>
    {#snippet notfound()}
        <h1>Not found</h1>
        <p>Sorry, the page you are looking for does not exist.</p>
        <p>Return to <a href="/">home</a>.</p>
    {/snippet}
</Router>

TodoPage.svelte

<script lang="ts">
    import { paramNumber } from '../lib/Router.svelte';

    const id = $derived(paramNumber('id'));

    async function getTodos() {
        return await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) => res.json());
    }
</script>

{#await getTodos()}
    <div>loading...</div>
{:then todo}
    <h1>
        {todo.title}
    </h1>
    <label>
        Completed
        <input type="checkbox" checked={todo.completed} />
    </label>
{/await}

TodosPage.svelte

<script lang="ts">
    import { queryNumber } from '../lib/Router.svelte';

    const page = $derived(queryNumber('page', 1));
    const limit = $derived(queryNumber('limit', 5));

    async function getTodos() {
        return await fetch(`https://jsonplaceholder.typicode.com/todos?_page=${page}&_limit=${limit}`).then((res) => res.json());
    }
</script>

<h1>Todos</h1>

<div>
    Items per page
    <a href="?page={page}&limit=5">5</a>
    <a href="?page={page}&limit=10">10</a>
    <a href="?page={page}&limit=25">25</a>
</div>

{#await getTodos()}
    <div>loading...</div>
{:then data}
    <ul>
        {#each data as todo}
            <li>
                <a href="/{todo.id}">{todo.title}</a>
            </li>
        {/each}
    </ul>
{/await}

<div>
    <a href="?page={Math.max(1, page - 1)}&limit={limit}">prev page</a>
    <span>page {page}</span>
    <a href="?page={page + 1}&limit={limit}">next page</a>
</div>