Tutoriel Svelte : Svelte 5 & les runes

Svelte 5 vient de sortir et cette nouvelle version introduit un nouvel élément pour gérer la réactivité (synchronisation de l'état et du DOM) : les Runes. Dans cette article je vous propose de découvrir un peu plus en profondeur cette nouveauté.

Une nouvelle syntaxe

Avant de commencer il est important de noter que cette nouvelle syntaxe est en opt-in par défaut. Vos composants écrit avec l'ancienne syntaxe continueront de fonctionner avec Svelte 5. Mais il est préférable d'utiliser la nouvelle syntaxe pour les nouveaux composants.

<script>
  let { title } = $props();
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    document.title = "Compteur : " + count;
  });

  const increment = () => {
    count++;
  };
</script>

<main class="container" style="margin-block:2rem;">
  <h1>{title}</h1>
  <p>Compteur: {counter.count}</p>
  <p>Double: {counter.double}</p>

  <button onclick={counter.increment}>Incrementer</button>
</main>

Des "runes" qui cachent un signal

Pour gérer la réactivité Svelte se repose sur un système de signal que l'on peut créer avec la fonction $state(). La particularité ici est que dans le code svelte il n'y a pas de syntaxe particulière pour accéder à la valeur à l'intérieur du signal, c'est le transpiler qui se chargera de rajouter les accès à la valeur.

// Le code au dessus une fois transpilé
const count = state(0);
const double = derived(() => get(count) * 2);

effect(() => {
    document.title = "Compteur : " + get(count);
});

const increment = () => {
    set(count, get(count) + 1);
};

L'avantage de ce nouveau système est qu'il est maintenant possible de déplacer la logique dans une fonction réutilisable. La seule restriction est qu'il faudra que le fichier soit nommé avec l'extension .svelte.js (cela nécessitait un store par le passé).

export function createCounter(n) {
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    document.title = "Compteur : " + count;
  });
  const increment = () => {
    count += n;
  };
  return {
    increment,
    get double() {
      return double;
    },
    get count() {
      return count;
    },
  };
}