Zagnieżdżanie komponentów

Tak jak Yggdrasil ma gałęzie, a te mają mniejsze gałązki, tak komponenty Svelte mogą zawierać inne komponenty.

Przykład: Struktura wioski wikingów

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

Implementacja

<!-- 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>Wioska: {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>Koszary</h2>
  {#each warriors as name}
    <Warrior {name} />
  {/each}
</div>

Zapis <Warrior {name} /> to skrót od <Warrior name={name} />. Komponent Warrior odbiera tę wartość runą $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>

Dobre praktyki zagnieżdżania

1. Jeden komponent = jedna odpowiedzialność
2. Nie zagnieżdżaj zbyt głęboko (max 3-4 poziomy)
3. Wydzielaj powtarzalne elementy do osobnych komponentów
4. Nazywaj komponenty jasno - co robią, nie jak wyglądają

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

<VikingVillage name="Kattegat" />

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