Svelte 6 Runes : Le Guide Complet du Nouveau Système de Réactivité

Svelte 6 introduit les Runes, un nouveau système de réactivité qui remplace les anciennes conventions (let, $:) par des primitives explicites et plus puissantes. Cette refonte majeure simplifie la compréhension du code tout en améliorant les performances et l'expérience développeur.

🚀 Qu'est-ce que les Runes ?

Les Runes sont des fonctions spéciales préfixées par $ qui gèrent la réactivité dans Svelte 6. Elles remplacent les comportements "magiques" de Svelte 5 par des APIs explicites et prévisibles.

Migration conceptuelle

<!--- Svelte 5 (ancien système) --->
<script>
  let count = 0; // Réactif automatiquement
  $: doubled = count * 2; // Label réactif

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

<!--- Svelte 6 (avec Runes) --->
<script>
  let count = $state(0); // Explicite
  let doubled = $derived(count * 2); // Explicite

  function increment() {
    count += 1; // Toujours réactif
  }
</script>

<button onclick={increment}>
  Compteur: {count} (x2 = {doubled})
</button>

Pourquoi les Runes ?

• Explicite : plus de "magie" compilateur
• Performant : détection fine-grained des changements
• TypeScript : meilleur support et inférence de types
• Composition : réutilisabilité du code réactif
• Debugging : traçabilité des dépendances

💡 Les 7 Runes Essentielles

1. $state() - État Réactif de Base

<script>
  // État primitif
  let count = $state(0);
  let name = $state("Alice");

  // État objet (profondément réactif)
  let user = $state({
    name: "Bob",
    age: 30,
    preferences: {
      theme: "dark"
    }
  });

  // Modification directe (réactive)
  function updateTheme() {
    user.preferences.theme = "light"; // Déclenche réactivité
  }

  // Arrays réactifs
  let todos = $state([
    { id: 1, text: "Learn Runes", done: false }
  ]);

  function addTodo(text) {
    todos.push({ id: Date.now(), text, done: false });
    // Ou : todos = [...todos, newTodo]; (les deux fonctionnent)
  }
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

<button onclick={updateTheme}>
  Thème: {user.preferences.theme}
</button>

2. $derived() - Valeurs Dérivées

<script>
  let radius = $state(10);

  // Dérivation simple
  let diameter = $derived(radius * 2);

  // Dérivation complexe
  let area = $derived(Math.PI * radius ** 2);

  // Dérivation avec logique
  let category = $derived(() => {
    if (radius moins de 5) return "petit";
    if (radius moins de 15) return "moyen";
    return "grand";
  });

  // Chaînage de dérivations
  let circumference = $derived(Math.PI * diameter);
</script>

<input type="range" bind:value={radius} min="1" max="50" />

<div>
  Rayon: {radius}px<br />
  Diamètre: {diameter}px<br />
  Aire: {area.toFixed(2)}px²<br />
  Circonférence: {circumference.toFixed(2)}px<br />
  Catégorie: {category}
</div>

3. $effect() - Effets de Bord

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

  // Effect basique
  $effect(() => {
    console.log(`Le compteur vaut maintenant: ${count}`);
  });

  // Effect avec nettoyage
  $effect(() => {
    const interval = setInterval(() => {
      logs.push(`Count = ${count} at ${new Date().toLocaleTimeString()}`);
    }, 1000);

    // Cleanup function (retourne une fonction)
    return () => {
      clearInterval(interval);
      console.log("Effect nettoyé");
    };
  });

  // Effect avec dépendances explicites
  $effect(() => {
    // S'exécute seulement quand count change
    document.title = `Count: ${count}`;
  });
</script>

4. $props() - Props du Composant

<!--- Composant enfant (Button.svelte) --->
<script>
  // Ancienne méthode Svelte 5
  // export let label;
  // export let disabled = false;

  // Nouvelle méthode Svelte 6 avec Runes
  let { label, disabled = false, onclick } = $props();

  // Props avec validation TypeScript
  interface Props {
    label: string;
    disabled?: boolean;
    variant?: "primary" | "secondary";
    onclick?: () => void;
  }

  let {
    label,
    disabled = false,
    variant = "primary",
    onclick
  }: Props = $props();
</script>

<button
  {disabled}
  class={variant}
  onclick={onclick}
>
  {label}
</button>

<!--- Composant parent --->
<script>
  import Button from "./Button.svelte";

  function handleClick() {
    console.log("Clicked!");
  }
</script>

<Button
  label="Cliquez-moi"
  variant="primary"
  onclick={handleClick}
/>

5. $bindable() - Props Bidirectionnelles

<!--- Composant TextField.svelte --->
<script>
  // Prop bindable (modifiable par le parent)
  let { value = $bindable("") } = $props();
</script>

<input bind:value />

<!--- Utilisation dans le parent --->
<script>
  import TextField from "./TextField.svelte";

  let username = $state("");
  let email = $state("");
</script>

<!-- Binding bidirectionnel -->
<TextField bind:value={username} />
<TextField bind:value={email} />

<p>Username: {username}</p>
<p>Email: {email}</p>

6. $inspect() - Debugging

<script>
  let user = $state({
    name: "Alice",
    age: 25,
    settings: {
      theme: "dark"
    }
  });

  // Log automatique à chaque changement
  $inspect(user);

  // Avec label personnalisé
  $inspect("État utilisateur:", user);

  // Inspecter plusieurs valeurs
  $inspect({ user, timestamp: Date.now() });
</script>

<button onclick={() => user.age++}>
  Anniversaire
</button>

<!-- Console affiche automatiquement les changements -->

7. $host() - Accès au Composant Parent

<!--- CustomElement.svelte --->
<svelte:options customElement="my-widget" />

<script>
  // Accéder à l'élément hôte du custom element
  const host = $host();

  $effect(() => {
    // Ajouter des attributs au host
    host.setAttribute("data-initialized", "true");
  });
</script>

🔧 Patterns Avancés avec les Runes

Composition de logique réutilisable

// stores/useCounter.svelte.js
export function useCounter(initial = 0) {
  let count = $state(initial);

  let doubled = $derived(count * 2);

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  function reset() {
    count = initial;
  }

  return {
    get count() { return count; },
    get doubled() { return doubled; },
    increment,
    decrement,
    reset
  };
}

<!--- Composant utilisant le hook --->
<script>
  import { useCounter } from "./stores/useCounter.svelte.js";

  const counter1 = useCounter(0);
  const counter2 = useCounter(10);
</script>

<div>
  <h3&gt;Compteur 1</h3&gt;
  <button onclick={counter1.increment}>+</button>
  <span>{counter1.count}</span>
  <button onclick={counter1.decrement}>-</button>
  <p>Doublé: {counter1.doubled}</p>
</div>

<div>
  <h3&gt;Compteur 2</h3&gt;
  <button onclick={counter2.increment}>+</button>
  <span>{counter2.count}</span>
  <button onclick={counter2.decrement}>-</button>
</div>

State Management Global

// stores/appState.svelte.js
class AppState {
  user = $state(null);
  isAuthenticated = $derived(this.user !== null);
  theme = $state("light");

  login(userData) {
    this.user = userData;
  }

  logout() {
    this.user = null;
  }

  toggleTheme() {
    this.theme = this.theme === "light" ? "dark" : "light";
  }
}

export const appState = new AppState();

<!--- Utilisation dans n'importe quel composant --->
<script>
  import { appState } from "./stores/appState.svelte.js";
</script>

{#if appState.isAuthenticated}
  <p>Bienvenue, {appState.user.name}!</p>
  <button onclick={() => appState.logout()}>
    Déconnexion
  </button>
{:else}
  <button onclick={() => appState.login({ name: "Alice" })}>
    Connexion
  </button>
{/if}

<button onclick={() => appState.toggleTheme()}>
  Thème: {appState.theme}
</button>

Fetch avec Loading States

<script>
  let userId = $state(1);

  let userData = $state(null);
  let loading = $state(false);
  let error = $state(null);

  // Effect qui fetch quand userId change
  $effect(() => {
    loading = true;
    error = null;

    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        userData = data;
        loading = false;
      })
      .catch(err => {
        error = err.message;
        loading = false;
      });
  });
</script>

<input type="number" bind:value={userId} />

{#if loading}
  <p>Chargement...</p>
{:else if error}
  <p class="error">{error}</p>
{:else if userData}
  <div>
    <h2&gt;{userData.name}</h2&gt;
    <p>Email: {userData.email}</p>
  </div>
{/if}

Formulaire avec Validation

<script>
  let formData = $state({
    email: "",
    password: "",
    confirmPassword: ""
  });

  let errors = $derived(() => {
    const err = {};

    if (formData.email && !formData.email.includes("@")) {
      err.email = "Email invalide";
    }

    if (formData.password && formData.password.length moins de 8) {
      err.password = "Mot de passe trop court (min 8 caractères)";
    }

    if (formData.password !== formData.confirmPassword) {
      err.confirmPassword = "Les mots de passe ne correspondent pas";
    }

    return err;
  });

  let isValid = $derived(Object.keys(errors).length === 0);

  function handleSubmit(event) {
    event.preventDefault();
    if (isValid) {
      console.log("Formulaire valide:", formData);
    }
  }
</script>

<form onsubmit={handleSubmit}>
  <div>
    <input
      type="email"
      bind:value={formData.email}
      placeholder="Email"
    />
    {#if errors.email}
      <span class="error">{errors.email}</span>
    {/if}
  </div>

  <div>
    <input
      type="password"
      bind:value={formData.password}
      placeholder="Mot de passe"
    />
    {#if errors.password}
      <span class="error">{errors.password}</span>
    {/if}
  </div>

  <div>
    <input
      type="password"
      bind:value={formData.confirmPassword}
      placeholder="Confirmer mot de passe"
    />
    {#if errors.confirmPassword}
      <span class="error">{errors.confirmPassword}</span>
    {/if}
  </div>

  <button type="submit" disabled={!isValid}>
    S'inscrire
  </button>
</form>

📊 Performances : Svelte 6 vs Svelte 5

Benchmarks réels

Fine-grained reactivity

<script>
  // Svelte 6 : seuls les éléments modifiés sont mis à jour
  let items = $state([
    { id: 1, name: "Item 1", count: 0 },
    { id: 2, name: "Item 2", count: 0 },
    { id: 3, name: "Item 3", count: 0 }
  ]);

  function incrementItem(id) {
    const item = items.find(i => i.id === id);
    item.count++; // Seul cet item sera re-rendu !
  }
</script>

{#each items as item (item.id)}
  <div>
    {item.name}: {item.count}
    <button onclick={() => incrementItem(item.id)}>+</button>
  </div>
{/each}

🚨 Pièges et Bonnes Pratiques

Piège 1 : $state() dans les boucles

<script>
  // ❌ MAUVAIS : $state() dans un #each
  let items = [1, 2, 3];
</script>

{#each items as item}
  <script>
    let count = $state(0); // Ne fonctionne pas !
  </script>
{/each}

<!--- ✅ BON : état au niveau composant --->
<script>
  let items = $state([
    { id: 1, count: 0 },
    { id: 2, count: 0 },
    { id: 3, count: 0 }
  ]);
</script>

{#each items as item}
  <button onclick={() => item.count++}>
    {item.count}
  </button>
{/each}

Piège 2 : $effect() infini

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

  // ❌ MAUVAIS : boucle infinie
  $effect(() => {
    count++; // Modifie count, déclenche l'effect à nouveau !
  });

  // ✅ BON : condition ou dépendance externe
  let trigger = $state(false);

  $effect(() => {
    if (trigger) {
      count++;
      trigger = false; // Arrête la boucle
    }
  });
</script>

Piège 3 : Oublier le cleanup

<script>
  // ❌ MAUVAIS : fuite mémoire
  $effect(() => {
    const interval = setInterval(() => console.log("tick"), 1000);
    // L'interval continue même si le composant est détruit
  });

  // ✅ BON : avec cleanup
  $effect(() => {
    const interval = setInterval(() => console.log("tick"), 1000);

    return () => clearInterval(interval);
  });
</script>

🎯 Migration depuis Svelte 5

Guide de migration automatique

# Svelte fournit un outil de migration
npx sv migrate svelte-6

# Ou migration manuelle progressive
# Les deux syntaxes coexistent pendant la transition

Étapes de migration

1. Installer Svelte 6 : npm install svelte@next
2. Activer les Runes : pas de config nécessaire
3. Migrer progressivement : un composant à la fois
4. Tester : les tests existants doivent passer
5. Nettoyer : supprimer l'ancienne syntaxe

🔮 Conclusion

Les Runes de Svelte 6 représentent une évolution majeure qui rend Svelte plus explicite, performant et maintenable. La courbe d'apprentissage est douce pour les développeurs Svelte existants, et la coexistence des syntaxes facilite une migration progressive.

Adoptez Svelte 6 si :

• Vous démarrez un nouveau projet
• Vous voulez des performances optimales
• Vous appréciez la clarté et l'explicite

Restez sur Svelte 5 si :

• Votre projet est stable et en production
• L'équipe n'est pas formée
• Les performances actuelles suffisent

Svelte 6 avec les Runes consolide la position de Svelte comme le framework le plus élégant et performant de l'écosystème JavaScript en 2025.

Articles connexes

Pour approfondir le sujet, consultez également ces articles :

• Svelte 5 et les Runes : La Révolution de la Réactivité en 2025
• Svelte 6 : Performances ultimes et compilation révolutionnaire octobre 2025
• Angular v19 : Signals GA et performances +60% en octobre 2025