AbsoluteJS

Svelte

Server-render Svelte components with full type safety and automatic hydration.

#Build Configuration

Add Svelte to your build by specifying the directory containing your Svelte components:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  svelteDirectory: 'src/svelte/pages'
  // Svelte components are compiled during build
});

#Page Handler

Use handleSveltePageRequest with asset() to get the compiled paths for both the page and index files:

Framework handlers are non-streaming by default. Add { collectStreamingSlots: true } as the final argument to opt into framework streaming.

TS
// backend/server.ts
import { asset } from '@absolutejs/absolute';
import { handleSveltePageRequest } from '@absolutejs/absolute/svelte';

new Elysia()
  .get('/dashboard', async ({ cookie }) => {
    const user = await getUser(cookie);
    const stats = await getStats(user.id);

    // Both the page and index use asset() to get the compiled paths
    return handleSveltePageRequest({
      indexPath: asset(manifest, 'DashboardIndex'),
      pagePath: asset(manifest, 'Dashboard'),
      props: { user, stats }
    });
  })

#Components

Svelte components receive typed props via exports. Use svelte:head for meta tags:

SVELTE
<!-- src/svelte/pages/Dashboard.svelte -->
<script lang="ts">
  type DashboardProps = {
    user: User;
    stats: Stats;
  };

  export let user: DashboardProps['user'];
  export let stats: DashboardProps['stats'];
</script>

<svelte:head>
  <title>Dashboard | {user.name}</title>
</svelte:head>

<main>
  <h1>Welcome back, {user.name}</h1>

  <div class="stats-grid">
    <div class="stat">
      <span class="label">Total Views</span>
      <span class="value">{stats.views}</span>
    </div>
    <div class="stat">
      <span class="label">Revenue</span>
      <span class="value">${stats.revenue}</span>
    </div>
  </div>
</main>

<style>
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
</style>

#Compilation

During the build process, each raw .svelte file is compiled into two separate JavaScript files:

TS
// Your raw Svelte file:
src/svelte/pages/Dashboard.svelte

// Gets compiled into two files:
build/DashboardPage.js    // Compiled page component for SSR
build/DashboardIndex.js   // Compiled index file for client hydration
  • Page file: The compiled component used for server-side rendering
  • Index file: The compiled hydration script that makes the page interactive on the client