Table des matières

• Quoi de nouveau dans Svelte 5
• Aperçu des Runes
• $state - Variables réactives
• $derived - Valeurs calculées
• $effect - Effets secondaires
• Migration depuis Svelte 4
• Pourquoi les Runes comptent
• Dans ce projet

Svelte 5 représente le plus grand changement dans l’histoire du framework. La syntaxe familière export let et les instructions réactives $: ont disparu. À leur place viennent les runes - un nouveau système primitif de réactivité qui reflète ce vers quoi des frameworks comme React se sont dirigés avec les hooks.

La différence clé? Les runes sont explicites. Vous dites à Svelte exactement ce qui est réactif, plutôt que de compter sur le compilateur pour l’inférer à partir des modèles d’assignation.

Svelte 5 introduit quatre runes principales:

• $state() - Déclare un état réactif
• $derived() - Crée des valeurs calculées
• $effect() - Exécute des effets secondaires lorsque les dépendances changent
• $props() - Définit les props des composants (remplace export let)

Chaque rune signale au compilateur: “fais attention à ceci.”

Dans Svelte 4, n’importe quelle variable pouvait devenir réactive simplement en la modifiant dans le template. Dans Svelte 5, vous opt-in:

<script>
  let count = $state(0);
  
  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  Count: {count}
</button>

La différence clé: count est maintenant profondément réactif. Vous pouvez le passer aux composants enfants et les changements se propageront automatiquement.

Pour les objets, utilisez $state avec un objet initial:

let user = $state({ name: 'Alice', age: 30 });

function birthday() {
  user.age += 1;  // Ceci déclenche des mises à jour!
}

Où vous auriez utilisé $: doubled = count * 2, utilisez maintenant $derived:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>Double est {doubled}</p>

La valeur se met à jour automatiquement quand count change. Plus de tableaux de dépendances à gérer, plus de bugs subtils oubliés.

Remplacer onMount et les instructions réactives par $effect:

<script>
  let count = $state(0);
  
  $effect(() => {
    // Ceci s'exécute quand count change
    console.log('Count is now:', count);
  });
</script>

Pour le nettoyage, retournez une fonction:

$effect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', { signal: controller.signal })
    .then(/* ... */);
    
  return () => controller.abort();
});

Ceci remplace le besoin d’instructions réactives ($:) pour les effets secondaires et consolide la gestion du cycle de vie.

Voici une référence rapide pour les migrations courantes:

La migration n’est pas tout ou rien. Svelte 5 est rétrocompatible, donc vous pouvez migrer de manière incrémentale.

Le modèle de réactivité explicite a plusieurs avantages:

1. Clarté - Quand vous voyez $state, vous savez exactement ce qui est réactif. Plus de devinettes sur quelles variables déclencheront des mises à jour.

2. Débogage - Les instructions réactives dans Svelte 4 pouvaient être délicates à déboguer. Les runes rendent le flux explicite.

3. Portabilité - Les runes fonctionnent de la même manière à l’intérieur et à l’extérieur des fichiers .svelte. Vous pouvez utiliser la réactivité de Svelte dans des modules JavaScript simples.

4. Performance - Le compilateur peut optimiser plus agressivement quand il sait exactement quoi suivre.

Ce blog lui-même utilise Svelte 5. Le composant Bluesky thread (BlueskyThread.svelte) est un bon exemple où les runes brillent. Voici comment il gère l’état et les props:

<script>
  // Props en utilisant $props() - la méthode Svelte 5
  interface Props {
    uri: string;
    initialCount?: number;
    incrementBy?: number;
    maxDepth?: number;
    path: URL;
  }

  let { 
    uri, 
    initialCount = 5, 
    incrementBy = 5, 
    maxDepth = 3, 
    path 
  }: Props = $props();

  // État du composant en utilisant $state
  let allReplies = $state<any[]>([]);
  let visibleCount = $state(0);
  let meta = $state<any>(null);
  let loading = $state(true);
  let error = $state<string | null>(null);

  // Initialiser depuis les props avec $effect
  $effect(() => {
    visibleCount = initialCount;
  });

  // Valeurs dérivées avec $derived
  let visibleReplies = $derived(allReplies.slice(0, visibleCount));
</script>

Au lieu de compter sur la réactivité implicite ou de gérer des instructions réactives, les runes rendent clair ce qui se passe. allReplies est la source de vérité, visibleReplies en est dérivé, et les changements coulent naturellement. Les props sont maintenant explicitement déclarées avec $props() au lieu de export let.

Si vous démarrez un nouveau projet Svelte, je recommends d’aller directement à Svelte 5. La syntaxe est plus propre, le modèle mental est plus simple, et le framework évolue dans une direction qui a du sens pour le développement web moderne.