svelte-runes

为响应式状态、props、衍生值、效果以及附件提供 Svelte 5 的语法指导。适用于实现响应式功能、管理组件 props、计算衍生状态、处理副作用，或从 Svelte 4 迁移时使用。可通过“响应式状态”、“组件 props”、“计算值”、“$state”、“$derived”、“$effect”、“$props”，或“Svelte 5 迁移”等短语来触发。适用于 .svelte 文件，使用 $state、$derived、$effect、$props、$bindable 等语法符，有效避免常见的响应式错误，以及 Svelte 4/5 语法混用的问题。

name: svelte-runes description: | Provides Svelte 5 runes guidance for reactive state, props, derived values, effects, and attachments. Use when implementing reactivity, managing component props, computing derived state, handling side effects, or migrating from Svelte 4. Triggers on "reactive state", "component props", "computed value", "$state", "$derived", "$effect", "$props", or "Svelte 5 migration". Works with .svelte files using $state, $derived, $effect, $props, $bindable runes and prevents common reactivity mistakes and Svelte 4/5 syntax mixing.

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

Svelte Runes

Quick Start

Which rune? Props: $props() | Bindable: $bindable() | Computed: $derived() | Side effect: $effect() | State: $state()

Key rules: Runes are top-level only. $derived can be overridden (use const for read-only). Don't mix Svelte 4/5 syntax. Objects/arrays are deeply reactive by default.

Example

svelte

<script>
	let count = $state(0); // Mutable state
	const doubled = $derived(count * 2); // Computed (const = read-only)

	$effect(() => {
		console.log(`Count is ${count}`); // Side effect
	});
</script>

<button onclick={() => count++}>
	{count} (doubled: {doubled})
</button>

Reference Files

•reactivity-patterns.md - When to use each rune
•migration-gotchas.md - Svelte 4→5 translation
•component-api.md - $props, $bindable patterns
•snippets-vs-slots.md - New snippet syntax
•common-mistakes.md - Anti-patterns with fixes
•attachments.md - @attach replaces use: actions

Notes

•Use onclick not on:click, {@render children()} in layouts
•$derived can be reassigned (5.25+) - use const for read-only
•Last verified: 2025-01-11