Svelte Components

Requirement A component MUST hold its local state in runes, with props from $props and derived values from $derived.

Rationale Runes are the reactivity model the compiler understands. Legacy reactive statements and untyped prop access fall out of every component. An effect covers what derivation cannot express.

Example

<script lang="ts">
  let { orderId }: { orderId: string } = $props();
  let quantity = $state(1);
  let unitPrice = $state(0);
  let total = $derived(quantity * unitPrice);
</script>

Requirement A component MUST type its props, its events, and its snippets under strict mode.

Rationale An untyped prop fails at the call site the next author writes, which is the most expensive place to learn a shape. Strict mode turns that failure into a build error.