Svelte 5: разбираемся с Runes

Svelte 5 переписал систему реактивности. Вместо магических переменных и $: — явные примитивы которые называются runes.

$state — реактивное состояние

<script lang="ts">
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Нажали: {count}
</button>

$state() создаёт реактивную переменную. Когда она меняется — Svelte автоматически обновляет DOM. В Svelte 4 любая let переменная на верхнем уровне была реактивной — в Svelte 5 реактивность явная.

$derived — вычисляемые значения

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2); // пересчитывается автоматически
</script>

Аналог computed в Vue или useMemo в React — но без массива зависимостей.

$effect — побочные эффекты

<script lang="ts">
  let query = $state('');

  $effect(() => {
    // Запускается при каждом изменении query.
    // Svelte сам отслеживает какие $state переменные читаются внутри.
    console.log('Поиск:', query);
  });
</script>

$props — пропсы компонента

<script lang="ts">
  // Вместо export let name = '...' из Svelte 4
  let { name, age = 0 }: { name: string; age?: number } = $props();
</script>

Пропсы теперь явные и типизированные из коробки.