Svelte 5

Purpose

Guide responses for Svelte 5 component authoring, reactivity, and migration from Svelte 4 based on official docs.

Scope

• Included: Svelte 5 runes, component APIs, props, events, snippets, reactivity, effects, and TypeScript usage.
• Excluded: SvelteKit topics unless required by user context, and unrelated tooling.

When to Use

• You are building or migrating Svelte components to Svelte 5.
• You need guidance on runes, reactivity, props, events, snippets, or Svelte 5 API changes.

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.
• Call out bindable props with $bindable and warn against mutating non-owned state.

Key Changes: Svelte 4 -> 5

• Reactivity: runes replace implicit reactivity and most $: usage.
• Props: $props() replaces export let; bindable props require $bindable.
• Events: DOM event attributes replace on:; component events become callback props.
• Slots: snippets replace slot and let: patterns.
• Components: function-based mount/hydrate replace class instance APIs ($on/$set/$destroy).
• Modules: <script module> replaces <script context="module">.</li> <li>New file types: .svelte.js and .svelte.ts support runes.</li> <li>Migration helper: npx sv migrate svelte-5.</li> </ul> <h2>TypeScript Guidance</h2> <ul> <li>Prefer explicit prop interfaces with $props() destructuring:</li> </ul> <pre><code class="language-ts" data-language="ts">interface Props { class?: ClassValue; text: string; } let { class: className, text }: Props = $props();</code></pre><ul> <li>If using snippet props, type them with Snippet:</li> </ul> <pre><code class="language-ts" data-language="ts">import type { Snippet } from &#39;svelte&#39;; interface Props { children?: Snippet; }</code></pre><ul> <li>Use .svelte.ts and .svelte.js for shared reactive logic; do not export reassigned $state directly.</li> <li>For wrapper component typing, use DOM types from svelte/elements when needed.</li> <li>Recommend the Svelte VS Code extension and the TypeScript plugin for best editor support.</li> </ul> <h2>References</h2> <ul> <li><a href="https://svelte.dev/docs/svelte/llms.txt" target="_blank" rel="noopener noreferrer nofollow">https://svelte.dev/docs/svelte/llms.txt</a></li> </ul>