svelte5-runes

Svelte 5 migration converts `export let` to `$props()`, reactive statements to `$derived()` or `$effect()`, and event handlers like `on:click` to `onclick`. Replace two-way bindings with `$bindable()` and update slot syntax to snippets for full reactivity modernization.

`$derived()` computes reactive values that update automatically when dependencies change, returning a value. `$effect()` runs side effects (API calls, DOM updates) when dependencies change and supports cleanup functions for resource management.

Use `$bindable()` within `$props()` to create two-way bindings on component props. This replaces Svelte 4's `bind:` directive, enabling parent-child data synchronization while maintaining reactivity through the runes system.

Common mistakes include mixing Svelte 4 and 5 syntax, creating infinite loops with circular `$effect()` dependencies, and misusing `$state()` for derived values. The Skill identifies these anti-patterns and provides corrective code examples for reactive patterns.

`$state()` manages mutable state only. Use `$derived()` for computed values that depend on state to avoid unnecessary recalculation, and `$effect()` for side effects triggered by state changes, not state storage itself.

Svelte 5 replaces named and default slots with snippets, declared as `#snippet name(args)` and passed as props. This provides better type safety and composability while maintaining component flexibility across migration from Svelte 4.