Asgard - Communication Between Components

Welcome to Asgard - the palace of the gods! Here you will learn how components communicate with each other, just as the gods communicate between their halls.

Data Flow in Svelte

      Props (down)
         ↓
┌─────────────────────┐
│   Parent Component  │
└─────────────────────┘
         ↑
  Callback props (up)

• Props - data passed from parent to child (like orders from a jarl)
• Callback props - functions from the parent that the child calls to send information up (like scout reports)

Props in Svelte 5 ($props)

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

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

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

<Warrior name="Ragnar" strength={95} weapon="Axe" />
<Warrior name="Bjorn" weapon="Sword" />
<!-- strength = 50 (default) -->

For Comparison: Svelte 4 (legacy)

Older projects and tutorials use export let. In runes mode (the component uses $props, $state or other runes) it is a compile error, so in new code use only $props().

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

Typing Props (TypeScript)

<script lang="ts">
  interface Props {
    name: string;
    strength?: number;
    weapon: 'Sword' | 'Axe' | 'Spear';
  }

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

Spread Props

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

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

<!-- Pass all properties -->
<Warrior {...ragnar} />

<!-- Equivalent to: -->
<Warrior name={ragnar.name} strength={ragnar.strength} weapon={ragnar.weapon} />

Props are orders from Asgard - they flow down the hierarchy!

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