Svelte 5 Runes Complete Guide

# Svelte 5 Runes Complete Guide for Google Antigravity

Master the new Svelte 5 reactivity system with runes in Google Antigravity IDE. This comprehensive guide covers state management with $state, derived values with $derived, side effects with $effect, and the migration path from Svelte 4 stores to the new universal reactivity primitives.

## Configuration

Configure your Antigravity environment for Svelte 5:

```typescript
// .antigravity/svelte.ts
export const svelteConfig = {
  version: "5.x",
  features: {
    runes: true,
    snippets: true,
    eventAttributes: true
  },
  migration: {
    autoConvert: true,
    preserveStores: false
  }
};
```

## Basic State with $state

Create reactive state using the $state rune:

```svelte
<script lang="ts">
  let count = $state(0);
  let user = $state<User | null>(null);
  
  let todos = $state<Todo[]>([
    { id: 1, text: "Learn Svelte 5", done: false },
    { id: 2, text: "Build something", done: false }
  ]);
  
  function addTodo(text: string) {
    todos.push({
      id: Date.now(),
      text,
      done: false
    });
  }
  
  function toggleTodo(id: number) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
      todo.done = !todo.done;
    }
  }
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

<ul>
  {#each todos as todo (todo.id)}
    <li class:done={todo.done}>
      <input
        type="checkbox"
        checked={todo.done}
        onchange={() => toggleTodo(todo.id)}
      />
      {todo.text}
    </li>
  {/each}
</ul>
```

## Derived Values with $derived

Compute values reactively from state:

```svelte
<script lang="ts">
  let items = $state<CartItem[]>([]);
  let taxRate = $state(0.08);
  
  let subtotal = $derived(
    items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );
  
  let tax = $derived(subtotal * taxRate);
  let total = $derived(subtotal + tax);
  
  let itemCount = $derived(
    items.reduce((sum, item) => sum + item.quantity, 0)
  );
  
  let isEmpty = $derived(items.length === 0);
  
  let sortedItems = $derived(
    [...items].sort((a, b) => b.price - a.price)
  );
</script>

<div class="cart-summary">
  <p>Items: {itemCount}</p>
  <p>Subtotal: ${subtotal.toFixed(2)}</p>
  <p>Tax: ${tax.toFixed(2)}</p>
  <p>Total: ${total.toFixed(2)}</p>
</div>
```

## Side Effects with $effect

Handle reactive side effects:

```svelte
<script lang="ts">
  let searchQuery = $state("");
  let results = $state<SearchResult[]>([]);
  let loading = $state(false);
  
  $effect(() => {
    if (searchQuery.length < 3) {
      results = [];
      return;
    }
    
    loading = true;
    const controller = new AbortController();
    
    fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`, {
      signal: controller.signal
    })
      .then(r => r.json())
      .then(data => {
        results = data;
        loading = false;
      })
      .catch(err => {
        if (err.name !== "AbortError") {
          console.error(err);
          loading = false;
        }
      });
    
    return () => controller.abort();
  });
  
  $effect(() => {
    document.title = `Search: ${searchQuery || "Home"}`;
  });
</script>
```

## Props with $props

Define component props with type safety:

```svelte
<script lang="ts">
  interface Props {
    title: string;
    description?: string;
    variant?: "primary" | "secondary";
    onclick?: (event: MouseEvent) => void;
  }
  
  let { 
    title, 
    description = "",
    variant = "primary",
    onclick
  }: Props = $props();
</script>

<div class="card card-{variant}" {onclick}>
  <h2>{title}</h2>
  {#if description}
    <p>{description}</p>
  {/if}
</div>
```

## Bindable Props with $bindable

Create two-way bindable props:

```svelte
<script lang="ts">
  interface Props {
    value: string;
    placeholder?: string;
  }
  
  let { value = $bindable(), placeholder = "" }: Props = $props();
</script>

<input 
  type="text"
  bind:value
  {placeholder}
  class="input"
/>
```

## Class Components Pattern

Encapsulate logic in class-based state:

```svelte
<script lang="ts">
  class Counter {
    count = $state(0);
    
    increment() {
      this.count++;
    }
    
    decrement() {
      this.count--;
    }
    
    reset() {
      this.count = 0;
    }
  }
  
  const counter = new Counter();
</script>

<button onclick={() => counter.decrement()}>-</button>
<span>{counter.count}</span>
<button onclick={() => counter.increment()}>+</button>
<button onclick={() => counter.reset()}>Reset</button>
```

## Best Practices

Follow these guidelines for Svelte 5 runes:

1. **Use $state for mutable data** - Simple and reactive
2. **Use $derived for computed values** - Automatic dependency tracking
3. **Clean up effects** - Return cleanup functions from $effect
4. **Type your props** - Use interfaces with $props
5. **Prefer fine-grained reactivity** - Use $state.raw for large objects
6. **Migrate gradually** - Stores still work alongside runes

Google Antigravity IDE provides intelligent rune suggestions and automatic Svelte 4 to 5 migration assistance.