Svelte SPA

// backend/server.ts — register a wildcard route per page so refresh /
// deep-link on any sub-route hits the same handler. The native router
// then dispatches based on the URL.
new Elysia()
  .get('/dashboard', dashboardHandler)
  .get('/dashboard/*', dashboardHandler)
  .listen(3000);

// backend/server.ts
import { handleSveltePageRequest } from '@absolutejs/absolute/svelte';
import type SvelteSpa from '../frontend/svelte/pages/SvelteSpa.svelte';

const svelteHandler = ({ request }: { request: Request }) =>
  handleSveltePageRequest<typeof SvelteSpa>({
    indexPath: asset(manifest, 'SvelteSpaIndex'),
    pagePath: asset(manifest, 'SvelteSpa'),
    props: { cssPath: asset(manifest, 'SpaCSS') },
    request, // ← URL auto-injected as props.url for the page
  });

new Elysia()
  .get('/svelte', svelteHandler)
  .get('/svelte/*', svelteHandler);

<!-- frontend/svelte/pages/SvelteSpa.svelte -->
<script lang="ts">
  import Link from '@absolutejs/absolute/svelte/router/Link.svelte';
  import Route from '@absolutejs/absolute/svelte/router/Route.svelte';
  import Router from '@absolutejs/absolute/svelte/router/Router.svelte';
  import { page } from '@absolutejs/absolute/svelte/router';

  type Props = { url?: string; cssPath?: string };
  let { url, cssPath }: Props = $props();
</script>

<Router {url}>
  <nav>
    <Link to="/svelte">Home</Link>
    <Link to="/svelte/settings">Settings</Link>
    <Link to="/svelte/profile">Profile</Link>
  </nav>

  <Route path="/svelte">
    {#snippet content()}<h2>Home</h2>{/snippet}
  </Route>
  <Route path="/svelte/settings">
    {#snippet content()}<h2>Settings</h2>{/snippet}
  </Route>
  <Route path="/svelte/profile">
    {#snippet content()}<h2>Profile</h2>{/snippet}
  </Route>

  <p>Current path: {page.url.pathname}</p>
</Router>

import {
  // Components (import each from its file path):
  // <Router>  — context provider, owns the registry + match resolver
  // <Route>   — declarative path matcher, renders its snippet at its
  //             own DOM location when active
  // <Link>    — anchor wrapper with click interception + prefetch
  // ↑ These three are available as 'svelte/router/Router.svelte' etc.

  // Programmatic API (importable from the package root):
  goto,           // (url, opts?) — programmatic nav, runs View Transition
  pushState,      // (url, state) — shallow routing (no Route swap)
  replaceState,   // (url, state) — same but with history.replaceState
  page,           // reactive route state — page.url, page.params, page.state

  // Types:
  type GotoOptions,
  type PageState,
  type RouterMode,
  type LinkPrefetchMode,
  type ExtractRouteParams,
} from '@absolutejs/absolute/svelte/router';

<!-- :param syntax — params type is INFERRED from the path literal -->
<Route path="/users/:id">
  {#snippet content(params)}
    <!-- params is { id: string } — fully typed, no annotation -->
    <p>User #{params.id}</p>
  {/snippet}
</Route>

<Route path="/users/:id/posts/:postId?">
  {#snippet content(params)}
    <!-- params is { id: string; postId: string | undefined } -->
    <p>User {params.id}, post {params.postId ?? '(none)'}</p>
  {/snippet}
</Route>

<Route path="/files/*">
  {#snippet content(params)}
    <!-- params is { wildcard: string } -->
    <p>File path: {params.wildcard}</p>
  {/snippet}
</Route>

<!-- <Link> renders a real <a href> for progressive enhancement.
     Click is intercepted on same-origin URLs (modifier-key clicks,
     target=_blank, download, and external URLs all fall through to
     a normal full-page navigation). -->

<Link to="/settings">Settings</Link>

<!-- Hover prefetch is on by default; viewport / off are alternatives. -->
<Link to="/profile" prefetch="viewport">Profile</Link>
<Link to="/contact" prefetch="none">Contact</Link>

<!-- Use replaceState instead of pushState (matches SvelteKit's API). -->
<Link to="/login" replaceState>Log in</Link>

<!-- All standard <a> attributes pass through. -->
<Link to="/docs" class="btn-primary" aria-label="Open docs">Docs</Link>

// page is a Svelte 5 $state-backed reactive object. Direct property
// access in templates re-renders. Mirrors SvelteKit's `page` from
// `$app/state` — same shape, same names.
import { page } from '@absolutejs/absolute/svelte/router';

// page.url       — URL object for the current path (reactive)
// page.url.pathname / .search / .hash / .searchParams
// page.params    — Record<string, string | undefined> from active Route
// page.state     — value attached to history.state (set via goto/pushState)

import { goto, pushState, replaceState } from '@absolutejs/absolute/svelte/router';

// Programmatic navigation. Triggers View Transitions when supported.
await goto('/dashboard');
await goto('/login', { replaceState: true });
await goto('/users/42', {
  state: { from: 'search' }, // available via page.state
  noScroll: true,
  keepFocus: true,
});

// Shallow routing — update URL bar + page.state without re-running
// <Route> matching. Useful for modals / drawers / side panels that
// want a shareable URL but shouldn't swap the active route.
pushState('/photos/42', { modal: 'photo', id: 42 });
replaceState('/photos/42', { modal: 'photo', id: 42 });

<!-- Hash mode is opt-in via the mode prop. The matcher operates against
     window.location.hash (with the leading "#/" stripped) instead of
     window.location.pathname. Useful for static deploys (GitHub Pages,
     S3, etc.) where the host can't be configured to wildcard-route to
     a single HTML file. -->

<Router mode="hash" {url}>
  <Route path="/dashboard">
    {#snippet content()}<Dashboard />{/snippet}
  </Route>
</Router>

<!-- URL: https://example.com/#/dashboard -->

<!-- Nested <Router> blocks compose their basepaths. The inner router
     matches against the full URL, but its <Route path> values are
     interpreted relative to the stacked basepath. Useful for embeddable
     SPA fragments shipped as packages. -->

<Router basepath="/portal" {url}>
  <Router basepath="/admin">
    <Route path="/users">
      {#snippet content()}<!-- matches /portal/admin/users -->{/snippet}
    </Route>
  </Router>
</Router>