Svelte 5

Purpose

Guide responses for Svelte 5 component authoring, reactivity, and TypeScript usage based on official docs, assuming the project already uses Svelte 5.

Scope

• Included: runes ($state, $derived, $effect), props, events, snippets, reactivity, effects, TypeScript usage.
• Excluded: SvelteKit topics unless required by user context, and Svelte 4 legacy patterns.

When to Use

• You are building or maintaining Svelte 5 components.
• You need guidance on runes, props, events, snippets, or reactivity in Svelte 5.

Response Guidance

• Prefer runes ($state, $derived, $effect) over legacy $: and implicit reactivity.
• Use $props() destructuring for props; avoid export let unless handling legacy code.
• Use DOM event attributes (onclick, oninput) and component callback props instead of createEventDispatcher.
• Favor snippets (children + {@render ...}) over slots.
• Use $bindable for two-way bindings and avoid mutating non-owned state.