Asgard - Komunikacja między komponentami

Witaj w Asgardzie - pałacu bogów! Tutaj nauczysz się jak komponenty komunikują się ze sobą, tak jak bogowie porozumiewają się między swoimi salami.

Przepływ danych w Svelte

      Props (w dół)
         ↓
┌─────────────────────┐
│   Parent Component  │
└─────────────────────┘
         ↑
  Callback props (w górę)

• Props - dane przekazywane z rodzica do dziecka (jak rozkazy jarla)
• Callback props - funkcje od rodzica, które dziecko wywołuje, żeby wysłać informację w górę (jak raporty zwiadowców)

Props w Svelte 5 ($props)

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

<div class="warrior">
  <h3>{name}</h3>
  <p>Siła: {strength}</p>
  <p>Broń: {weapon}</p>
</div>

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

<Warrior name="Ragnar" strength={95} weapon="Topór" />
<Warrior name="Bjorn" weapon="Miecz" />
<!-- strength = 50 (domyślna) -->

Dla porównania: Svelte 4 (legacy)

W starszych projektach i tutorialach zobaczysz export let. W trybie runes (komponent używa $props, $state lub innych run) to błąd kompilacji, więc w nowym kodzie używaj tylko $props().

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

Typowanie props (TypeScript)

<script lang="ts">
  interface Props {
    name: string;
    strength?: number;
    weapon: 'Miecz' | 'Topór' | 'Włócznia';
  }

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

Spread props

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

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

<!-- Przekaż wszystkie właściwości -->
<Warrior {...ragnar} />

<!-- Równoważne z: -->
<Warrior name={ragnar.name} strength={ragnar.strength} weapon={ragnar.weapon} />

Props to rozkazy z Asgardu - płyną w dół hierarchii!

<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>