Comparaison : ancienne et nouvelle syntaxe

Voyons comment l'ancienne syntaxe de Svelte 4 se traduit en Runes dans Svelte 5. Tu croiseras l'ancienne syntaxe dans des projets existants et des tutoriels plus anciens, il vaut donc la peine de la reconnaître, mais écris le nouveau code avec les runes. Dans chaque paire, Svelte 4 (legacy) vient d'abord, et Svelte 5 en dessous.

L'état

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;
  let items = [];
</script>

<!-- Svelte 5 avec les Runes -->
<script>
  let count = $state(0);
  let items = $state([]);
</script>

Déclarations réactives

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;
  $: doubled = count * 2;
  $: tripled = count * 3;
  $: total = doubled + tripled;
</script>

<!-- Svelte 5 avec les Runes -->
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  let tripled = $derived(count * 3);
  let total = $derived(doubled + tripled);
</script>

Instructions réactives

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;
  $: console.log('Count:', count);
  $: {
    if (count > 10) {
      alert('Beaucoup !');
    }
  }
</script>

<!-- Svelte 5 avec les Runes -->
<script>
  let count = $state(0);

  $effect(() => {
    console.log('Count:', count);
  });

  $effect(() => {
    if (count > 10) {
      alert('Beaucoup !');
    }
  });
</script>

Props

<!-- Svelte 4 (legacy) -->
<script>
  export let name;
  export let count = 0;
</script>

<!-- Svelte 5 avec les Runes -->
<script>
  let { name, count = 0 } = $props();
</script>

Props liables (bindable)

Le composant Input.svelte renvoie la valeur saisie à son parent grâce à bind:value :

<!-- Svelte 4 (legacy) -->
<script>
  export let value;
</script>

<input bind:value>

<!-- Svelte 5 avec les Runes -->
<script>
  let { value = $bindable() } = $props();
</script>

<input bind:value>

Chez le parent, l'utilisation est la même dans les deux versions :

<script>
  import Input from './Input.svelte';

  let myValue = $state('');
</script>

<Input bind:value={myValue} />
<p>Saisi : {myValue}</p>

Événements

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;
</script>

<button on:click={() => count++}>Cliqué {count} fois</button>

<!-- Svelte 5 avec les Runes -->
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>Cliqué {count} fois</button>

Quand utiliser quoi ?

Mode de compatibilité : composant par composant

Svelte 5 prend en charge les deux syntaxes, mais pas dans un même fichier. Un composant qui utilise ne serait-ce qu'une rune fonctionne en mode runes : $: et export let y sont alors des erreurs de compilation. Un composant sans runes fonctionne en mode de compatibilité (legacy). Tu peux donc migrer progressivement, fichier par fichier.

L'ancien composant continue de fonctionner sans changement :

<!-- OldCounter.svelte - Svelte 4 (legacy) -->
<script>
  let oldCount = 0;
  $: oldDoubled = oldCount * 2;
</script>

<button on:click={() => oldCount++}>
  Ancien compteur : {oldCount} (x2 = {oldDoubled})
</button>

Un nouveau composant à côté utilise les runes :

<!-- NewCounter.svelte - Svelte 5 avec les Runes -->
<script>
  let newCount = $state(0);
  let newDoubled = $derived(newCount * 2);
</script>

<button onclick={() => newCount++}>
  Nouveau compteur : {newCount} (x2 = {newDoubled})
</button>

Et le parent utilise les deux comme si de rien n'était :

<!-- App.svelte -->
<script>
  import OldCounter from './OldCounter.svelte';
  import NewCounter from './NewCounter.svelte';
</script>

<OldCounter />
<NewCounter />

Quand tu voudras passer tout un projet aux runes, la commande npx sv migrate svelte-5 t'aidera : elle réécrit automatiquement la plus grande partie du code.

Choisis les Runes pour les nouveaux projets : c'est le présent et l'avenir de Svelte !