Asgard - La communication entre composants

Bienvenue à Asgard, le palais des dieux ! Ici, tu vas apprendre comment les composants communiquent entre eux, tout comme les dieux communiquent entre leurs salles.

Flux de données en Svelte

      Props (vers le bas)
         ↓
┌─────────────────────┐
│   Parent Component  │
└─────────────────────┘
         ↑
  Callback props (vers le haut)

• Props - données transmises du parent à l'enfant (comme les ordres d'un jarl)
• Callback props - fonctions du parent que l'enfant appelle pour envoyer une information vers le haut (comme les rapports d'éclaireurs)

Les Props en Svelte 5 ($props)

<!-- Warrior.svelte -->
<script>
  // Svelte 5 avec les Runes
  let { name, strength = 50, weapon } = $props();
</script>

<div class="warrior">
  <h3>{name}</h3>
  <p>Force : {strength}</p>
  <p>Arme : {weapon}</p>
</div>

<!-- Parent.svelte -->
<script>
  import Warrior from './Warrior.svelte';
</script>

<Warrior name="Ragnar" strength={95} weapon="Hache" />
<Warrior name="Bjorn" weapon="Épée" />
<!-- strength = 50 (par défaut) -->

Pour comparaison : Svelte 4 (legacy)

Dans les anciens projets et tutoriels, tu verras export let. En mode runes (le composant utilise $props, $state ou d'autres runes), c'est une erreur de compilation : dans le nouveau code, utilise uniquement $props().

<!-- Warrior.svelte - Svelte 4 (legacy) -->
<script>
  export let name;
  export let strength = 50;
  export let weapon;
</script>

Typer les Props (TypeScript)

<script lang="ts">
  interface Props {
    name: string;
    strength?: number;
    weapon: 'Épée' | 'Hache' | 'Lance';
  }

  let { name, strength = 50, weapon }: Props = $props();
</script>

Spread des Props

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

  const ragnar = {
    name: 'Ragnar',
    strength: 95,
    weapon: 'Hache'
  };
</script>

<!-- Transmet toutes les propriétés -->
<Warrior {...ragnar} />

<!-- Équivalent à : -->
<Warrior name={ragnar.name} strength={ragnar.strength} weapon={ragnar.weapon} />

Les Props sont des ordres venus d'Asgard : ils descendent le long de la hiérarchie !

<script>
  // Asgard - Communication between Gods (components)
  import Warrior from './Warrior.svelte';
  import Shield from './Shield.svelte';

  let selectedWarrior = $state(null);

  // Callback prop: Warrior calls it with its data
  function handleSelect(warrior) {
    selectedWarrior = warrior;
  }
</script>

<main class="asgard">
  <h1>Asgard - Props and Events</h1>
  <p class="subtitle">Communication between gods</p>

  <div class="warriors">
    <Warrior
      name="Thor"
      weapon="Mjölnir"
      strength={95}
      onSelect={handleSelect}
    />
    <Warrior
      name="Odin"
      weapon="Gungnir"
      strength={100}
      onSelect={handleSelect}
    />
    <Warrior
      name="Tyr"
      strength={85}
      onSelect={handleSelect}
    />
  </div>

  {#if selectedWarrior}
    <div class="selected">
      <h2>Selected warrior:</h2>
      <Shield warrior={selectedWarrior} />
    </div>
  {/if}
</main>

<style>
  .asgard {
    font-family: 'Georgia', serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #0a1628 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #ffd700;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #8b7ca8;
  }

  .warriors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
  }

  .selected {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
  }

  .selected h2 {
    color: #ffd700;
    margin-top: 0;
  }
</style>