Le runes di Svelte 5: stato, derivati ed effetti

In Svelte 5 lo stato si dichiara con $state: la rune è una chiamata che il compilatore riconosce, non un let di cui indovina il ruolo. Da quella chiamata il compilatore sa cosa tracciare e cosa lasciare fermo.

Quattro runes coprono quasi tutto

$state per lo stato mutabile, $derived per i valori calcolati, $effect per gli effetti collaterali, $props per gli input del componente. $bindable, $inspect e $host servono in casi più stretti.

npx sv migrate svelte-5

  let { start = 0 }: { start?: number } = $props();
  let count = $state(start);
  const double = $derived(count * 2);


 (count += 1)}>Add one
{count} × 2 = {double}

$state avvolge oggetti e array in un proxy: le modifiche annidate sono tracciate. Per dati grandi che sostituisci in blocco c’è $state.raw; per passare un oggetto a una libreria esterna usa $state.snapshot, che restituisce una copia semplice.

Derived non è un effetto

$derived dichiara un valore, $derived.by accetta un blocco di codice. $effect gira dopo l’aggiornamento del DOM, solo nel browser, e serve per il DOM o per API esterne: usarlo per allineare due stati produce un ciclo che il compilatore non ti segnala.

  let query = $state("");
  let items = $state([]);

  const matches = $derived.by(() =>
    items.filter((item) => item.name.toLowerCase().includes(query.toLowerCase())),
  );

  $effect(() => {
    document.title = matches.length + " results";
  });

Props con $props e $bindable

let { title, value = 0 } = $props() dichiara gli input e i loro default. $bindable() rende una prop scrivibile da fuori: senza, l’assegnazione resta locale al figlio e il genitore non vede il cambio.

Il limite da mettere in conto

Le runes esistono solo dove il compilatore le vede: nei file .svelte e in quelli con suffisso .svelte.ts. Un modulo .ts normale non può contenere $state, e $effect non gira durante il rendering sul server.

Errori che si vedono nella migrazione

• Mescolare la sintassi vecchia e le runes nello stesso componente: in un componente con runes export let non è ammesso.
• Scrivere dentro un $derived: il valore è in sola lettura e l’errore arriva a runtime.
• Usare $effect per sincronizzare due stati: serve un $derived, l’effetto aggiunge un ciclo.
• Leggere uno stato dopo un await dentro un effetto e aspettarsi che venga tracciato: la dipendenza va letta prima della pausa.

I componenti Svelte del catalogo sono già in questa forma: flowbite-svelte e svelte-bits si installano come sorgente, e il blocco form mostra il caso in cui lo stato locale basta. Il routing è in routing e layout in SvelteKit, il vecchio modello di store in store che non si aggiorna, il confronto in Svelte vs React.