Éléments spéciaux de Svelte

Svelte propose des éléments spéciaux pour gérer des cas d'usage avancés. Avant de les découvrir, voici deux astuces qui demandaient des éléments spéciaux en Svelte 4, alors qu'en Svelte 5 de simples composants suffisent.

Récursion : un composant s'importe lui-même

Un composant peut se rendre lui-même. En Svelte 5, il importe simplement son propre fichier :

<!-- TreeNode.svelte - Branches d'Yggdrasil -->
<script>
  import TreeNode from './TreeNode.svelte';

  let { node, depth = 0 } = $props();
</script>

<div class="node" style="margin-left: {depth * 20}px">
  <span>{node.name}</span>

  {#if node.children}
    {#each node.children as child}
      <TreeNode node={child} depth={depth + 1} />
    {/each}
  {/if}
</div>

<style>
  .node {
    padding: 0.5rem;
    border-left: 2px solid #4a7c23;
  }
</style>

Utilisation :

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

  const yggdrasil = {
    name: 'Yggdrasil',
    children: [
      { name: 'Asgard', children: [{ name: 'Valhalla' }] },
      { name: 'Midgard', children: [{ name: 'Svenheim' }] },
      { name: 'Niflheim' }
    ]
  };
</script>

<TreeNode node={yggdrasil} />

En Svelte 4, on utilisait pour cela l'élément <svelte:self>. En Svelte 5, il est déprécié : le composant s'importe lui-même.

Composant dynamique

En Svelte 5, les composants sont dynamiques d'eux-mêmes : si la variable qui contient un composant change, Svelte affiche le nouveau. Il suffit de ranger le composant dans une variable dont le nom commence par une majuscule et de l'utiliser comme une balise :

<script>
  import Warrior from './Warrior.svelte';
  import Ship from './Ship.svelte';
  import Treasure from './Treasure.svelte';

  const components = {
    warrior: Warrior,
    ship: Ship,
    treasure: Treasure
  };

  let selected = $state('warrior');
  let Selected = $derived(components[selected]);
</script>

<select bind:value={selected}>
  <option value="warrior">Guerrier</option>
  <option value="ship">Navire</option>
  <option value="treasure">Trésor</option>
</select>

<Selected />

En Svelte 4, il fallait écrire <svelte:component this={...} />. En Svelte 5, cet élément est déprécié.

svelte:element - Élément HTML dynamique

<script>
  let { level = 1, text } = $props();

  // h1, h2, h3... dynamiquement
  let tag = $derived(`h${Math.min(level, 6)}`);
</script>

<svelte:element this={tag}>
  {text}
</svelte:element>

svelte:window - Événements de la fenêtre

Tu branches les événements sur la fenêtre du navigateur comme sur des éléments ordinaires, avec des attributs comme onkeydown. Les liaisons bind: ont besoin de variables créées avec $state :

<script>
  let innerWidth = $state(0);
  let innerHeight = $state(0);
  let scrollY = $state(0);

  function handleKeydown(event) {
    if (event.key === 'Escape') {
      console.log('Échap pressée !');
    }
  }
</script>

<svelte:window
  bind:innerWidth
  bind:innerHeight
  bind:scrollY
  onkeydown={handleKeydown}
/>

<p>Taille de la fenêtre : {innerWidth} x {innerHeight}</p>
<p>Défilement : {scrollY}px</p>

svelte:document et svelte:body

<script>
  function handleVisibility() {
    console.log("Visibilité de l'onglet :", document.visibilityState);
  }

  function handleMouseEnter() {
    console.log('Le curseur est revenu sur la page');
  }
</script>

<svelte:document onvisibilitychange={handleVisibility} />

<svelte:body onmouseenter={handleMouseEnter} />

svelte:head - Meta dans le head

<script>
  let { title = 'Le Pays des Vikings' } = $props();
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content="Apprendre Svelte au pays des Vikings" />
</svelte:head>

Les éléments spéciaux sont des runes de pouvoir pour les grandes occasions : utilise-les quand le HTML ordinaire ne suffit plus.