Svelte Islands

Erstelle reaktive Islands mit Svelte 5 - kompiliert, reaktiv und winzige Bundles.

Überblick

Bundle-Größe: 2-5kb (dein Code + Svelte Runtime)

Svelte kompiliert deine Components zur Build-Zeit zu Vanilla JavaScript, was zu minimalem Runtime-Overhead führt.

Svelte 5 Features:

• ✅ Runes API ($state, $derived, $effect)
• ✅ Standardmäßig reaktiv
• ✅ Kein Virtual DOM
• ✅ Winzige Bundle-Größe
• ✅ Einfach zu lernen

Grundstruktur

Svelte Islands bestehen aus zwei Dateien:

1. Svelte Component (.svelte)

<!-- islands/counter.svelte -->
<script>
  // Props
  let { title = 'Counter' } = $props();

  // Reactive state
  let count = $state(0);

  // Derived state
  let doubled = $derived(count * 2);

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }
</script>

<div class="p-6 bg-white rounded-lg border border-gray-200">
  <h3 class="text-lg font-semibold mb-4">{title}</h3>
  <p class="mb-2">Count: {count}</p>
  <p class="mb-4 text-gray-600">Doubled: {doubled}</p>
  <div class="flex gap-2">
    <button onclick={decrement} class="px-4 py-2 bg-gray-600 text-white rounded">-</button>
    <button onclick={increment} class="px-4 py-2 bg-blue-600 text-white rounded">+</button>
  </div>
</div>

<style>
  /* Component-scoped styles */
</style>

2. Island Wrapper (.js)

// islands/counter.js
import { mount, unmount } from 'svelte';
import Component from './counter.svelte';

export default class CounterIsland {
  constructor(element, props = {}) {
    const initialData = JSON.parse(element.dataset.initialData || '{}');
    const allProps = { ...initialData, ...props };

    this.component = mount(Component, {
      target: element,
      props: allProps
    });
  }

  destroy() {
    if (this.component) {
      unmount(this.component);
    }
  }
}

Svelte 5 Runes

$state() - Reaktiver State

<script>
  // Simple state
  let count = $state(0);

  // Object state
  let user = $state({
    name: 'John',
    age: 30
  });

  // Array state
  let todos = $state([]);
</script>

<button onclick={() => count++}>Count: {count}</button>
<button onclick={() => user.age++}>Age: {user.age}</button>

$derived() - Berechnete Werte

<script>
  let count = $state(0);

  // Derived state automatically updates
  let doubled = $derived(count * 2);
  let isEven = $derived(count % 2 === 0);
  let status = $derived(count > 10 ? 'High' : 'Low');
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<p>Even: {isEven}</p>
<p>Status: {status}</p>

$effect() - Seiteneffekte

<script>
  let count = $state(0);

  // Run effect when count changes
  $effect(() => {
    console.log(`Count is now ${count}`);
    document.title = `Count: ${count}`;
  });

  // Cleanup
  $effect(() => {
    const interval = setInterval(() => count++, 1000);
    return () => clearInterval(interval);
  });
</script>

Template-Syntax

Bedingte Darstellung

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in</p>
{/if}

Schleifen

{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

Two-Way Binding

<input bind:value={name}>
<input type="checkbox" bind:checked={agreed}>

Vorteile

• ✅ Standardmäßig reaktiv - Automatisches UI-Update
• ✅ Kleine Bundle-Größe - 2-5kb (kompiliert)
• ✅ Kein Virtual DOM - Direktes DOM-Update
• ✅ Runes API - Moderne, klare Syntax
• ✅ Scoped Styles - CSS pro Component

Nachteile

• ❌ Build-Step - Kompilierung erforderlich
• ❌ Lernkurve - Svelte-spezifische Syntax

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering