Imbrication de composants

Tout comme Yggdrasil a des branches, et celles-ci ont de plus petites brindilles, les composants Svelte peuvent contenir d'autres composants.

Exemple : Structure d'un village viking

VikingVillage (root)
├── TownHall
│   ├── ChiefRoom
│   └── MeetingHall
├── Barracks
│   ├── Warrior
│   ├── Warrior
│   └── Warrior
├── Blacksmith
│   └── Forge
└── Harbor
    ├── Ship
    └── Ship

Implémentation

<!-- VikingVillage.svelte -->
<script>
  import TownHall from './TownHall.svelte';
  import Barracks from './Barracks.svelte';
  import Blacksmith from './Blacksmith.svelte';
  import Harbor from './Harbor.svelte';

  let villageName = 'Svenheim';
</script>

<div class="village">
  <h1>Village : {villageName}</h1>

  <TownHall />
  <Barracks />
  <Blacksmith />
  <Harbor />
</div>

<style>
  .village {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem;
  }
</style>

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

  let warriors = ['Ragnar', 'Bjorn', 'Ivar', 'Ubbe'];
</script>

<div class="barracks">
  <h2>Caserne</h2>
  {#each warriors as name}
    <Warrior {name} />
  {/each}
</div>

<Warrior {name} /> est un raccourci pour <Warrior name={name} />. Le composant Warrior reçoit cette valeur avec la rune $props() :

<!-- Warrior.svelte -->
<script>
  let { name } = $props();
</script>

<div class="warrior">
  <span class="icon">ᛏ</span>
  <span class="name">{name}</span>
</div>

<style>
  .warrior {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #3d2914;
    border-radius: 4px;
    margin: 0.25rem 0;
  }
</style>

Bonnes pratiques pour l'imbrication

1. Un composant = une responsabilité
2. Ne pas imbriquer trop profondément (3-4 niveaux max)
3. Extrais les éléments répétitifs dans des composants séparés
4. Nomme les composants clairement - selon ce qu'ils font, pas selon leur apparence

<script>
  // Nesting components - like branches of Yggdrasil
  import VikingVillage from './VikingVillage.svelte';
</script>

<VikingVillage name="Kattegat" />

<style>
  :global(body) {
    margin: 0;
    background: #0a0a0a;
  }
</style>