Co to są Runes w Svelte 5?

Nowy system reaktywności zastępujący składnię $:

Kurs Svelte i SvelteKit · Moduł 3: Reaktywność i runy

Komnata Run - Magia Reaktywności

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji4

Witaj w najświętszym miejscu Asgardu - Komnacie Run! Tutaj odkryjesz prawdziwą magię Svelte: reaktywność. W Svelte 5 ta magia przybrała nową formę - system Runes.

Czym jest reaktywność?

Reaktywność to automatyczna aktualizacja interfejsu gdy zmieniają się dane. W Svelte działa to jak runy - raz wyryte, automatycznie reagują na zmiany.

Svelte 4 vs Svelte 5

Stara magia (Svelte 4)

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;

  // Reaktywna deklaracja - $:
  $: doubled = count * 2;
  $: console.log('Count zmienił się na:', count);
</script>

Nowa magia - Runes (Svelte 5)

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

  // Reaktywna wartość pochodna
  let doubled = $derived(count * 2);

  // Efekt uboczny
  $effect(() => {
    console.log('Count zmienił się na:', count);
  });
</script>

Podstawowe Runes

Rune	Opis	Stary odpowiednik
`$state`	Stan reaktywny	`let x = ...`
`$derived`	Wartość pochodna	`$: x = ...`
`$effect`	Efekt uboczny	`$: { ... }`
`$props`	Props komponentu	`export let`
`$bindable`	Prop z bind	`export let` + `bind:`
`$inspect`	Podgląd zmian w konsoli (debug)	`$: console.log(x)`

Dlaczego Runes?

Jawność - wiadomo co jest reaktywne
TypeScript - lepsze typowanie
Wydajność - fine-grained reactivity
Spójność - te same reguły wszędzie

<script>
  // Svelte 5 z Runes
  let warriors = $state(['Ragnar', 'Bjorn']);
  let count = $derived(warriors.length);

  function addWarrior(name) {
    warriors.push(name); // Działa! Runes śledzą mutacje
  }
</script>

Runy są wyryte - magia jest aktywna!

Kod do tej lekcji: App.svelte

<script>
  // Rune Chamber - Magic of Reactivity
  // Svelte 5 Runes: $state, $derived, $effect

  // $state - reactive state
  let count = $state(0);
  let warriors = $state(['Ragnar', 'Bjorn']);

  // $derived - derived value
  let doubled = $derived(count * 2);
  let totalWarriors = $derived(warriors.length);

  // $effect - side effect
  $effect(() => {
    console.log('Count changed to:', count);
  });

  function addWarrior() {
    warriors.push('New Warrior');
  }
</script>

<main class="rune-chamber">
  <h1>Rune Chamber</h1>
  <p class="subtitle">Svelte 5 Runes - A new era of reactivity</p>

  <section class="rune">
    <h2>$state - Reactive state</h2>
    <p>Count: <strong>{count}</strong></p>
    <div class="buttons">
      <button onclick={() => count--}>-</button>
      <button onclick={() => count++}>+</button>
    </div>
  </section>

  <section class="rune">
    <h2>$derived - Derived value</h2>
    <p>Doubled: <strong>{doubled}</strong></p>
    <p class="hint">Automatically = count * 2</p>
  </section>

  <section class="rune">
    <h2>$state with array</h2>
    <p>Warriors ({totalWarriors}):</p>
    <ul>
      {#each warriors as w}
        <li>{w}</li>
      {/each}
    </ul>
    <button onclick={addWarrior}>+ Add warrior</button>
    <p class="hint">In Svelte 5 array mutations work!</p>
  </section>
</main>

<style>
  .rune-chamber {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #b19cd9;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #8b7ca8;
  }

  .rune {
    background: rgba(177, 156, 217, 0.1);
    border: 1px solid #b19cd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
  }

  h2 {
    color: #b19cd9;
    margin-top: 0;
    font-size: 1.1rem;
  }

  strong {
    color: #ffd700;
    font-size: 1.5rem;
  }

  .buttons {
    display: flex;
    gap: 0.5rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #4a2c7a;
    color: white;
    border: 1px solid #b19cd9;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background: #5a3c8a;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    padding: 0.25rem 0.5rem;
    background: rgba(0,0,0,0.3);
    margin: 0.25rem 0;
    border-radius: 4px;
  }

  .hint {
    font-size: 0.85rem;
    color: #8b7ca8;
    font-style: italic;
  }
</style>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Co to są Runes w Svelte 5?
2. Które Runes są podstawowymi w Svelte 5?