07: Svelte 5: runes, props, reactivity, blocks¶

These mirror 'client/web-app/src/lib/components/' (e.g. SustainabilityBar.svelte). This repo uses Svelte 5 runes: $props, $state, $derived, not the old Svelte 4 export let / $: syntax. Snippets here run on the Svelte 5 playground.

---

7.1: $props(): typed component inputs¶

Concept. A component declares its inputs by destructuring $props(), with a TypeScript annotation for the shape. This replaces Svelte 4's export let.

Example.

<script lang="ts">
  // From SustainabilityBar.svelte (trimmed).
  let { data }: {
    data: { co2: number; recyclability: number; packaging: number };
  } = $props();
</script>

<p>CO₂ score: {data.co2}</p>

{data.co2} in markup is an expression: Svelte renders the value and re-renders when it changes.

Your exercise. Write the '