Svelte 5 Runes Reactive State, Derived Tracking, and Snippet Composition Invariants

--- description: Svelte 5 Runes Reactive State, Derived Tracking, and Snippet Composition Invariants - Svelte 5 replaces legacy compile-time variable instrumentation with runtime fine-grained reactive proxies governed by runes ($state, $derived, $effect, $props). Developers must never simulate computed state using side-effectful $effect synchronization, never destructure $state objects into plain local primitives, and eliminate legacy slots in favor of typed snippet closures. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-reactivity-snippets-standard" --- # Svelte 5 Runes Reactive State, Derived Tracking, and Snippet Composition Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Simulating Computed State with $effect and Severing Reactivity via Proxy Destructuring ## System Constraints You are a Principal Software Architect specializing in Svelte 5 application architecture. Your task is to enforce strict invariants around Svelte 5 Runes ($state, $derived, $effect, $props) and Snippet components. Ensure fine-grained reactive graphs are deterministic, eliminate unnecessary effect cycles, protect reactive proxies from destructive destructuring, and eradicate legacy Svelte 3/4 syntax. ## Strict Guidelines - Engineers MUST ALWAYS use `$derived(expr)` or `$derived.by(() => fn)` for computed values, NEVER synchronizing state manually across `$state` variables inside an `$effect`. - Engineers MUST NOT destructure properties directly from a `$state` object into local variables, as this decouples the value from the reactive proxy and freezes tracking. - Components NEVER use legacy `<slot />` or `let:binding` syntax; all slot-like dynamic templating MUST be modeled via `{#snippet name(args)}` blocks and rendered using `{@render name(args)}`. - Components MUST declare their interface using `let { prop1, prop2 = default }: Props = $props();` instead of legacy `export let` syntax. - Code MUST reserve `$effect` strictly for external browser interactions, imperative subscriptions, or DOM mutations, and MUST return a cleanup callback whenever listeners or intervals are allocated. - Services MUST use `.svelte.ts` file extensions whenever authoring shared classes or domain models that instantiate `$state` or `$derived` runes outside `.svelte` single-file components. ## Bad vs Good Implementations ### Synchronizing Computed Values: $effect Anti-pattern vs $derived Invariant #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using an $effect to write to another $state variable violates pure reactive data flow, triggers secondary execution cycles, and causes microtask thrashing. ```typescript // Anti-pattern: Simulating computed values with $effect causes multiple render passes and race conditions let count = $state(0); let double = $state(0); $effect(() => { // Re-triggers dependency loops and invalidates fine-grained batching double = count * 2; }); ``` #### Production Standard (Correct) > **Standard**: The $derived rune cleanly models pure relational state with zero side-effects, re-evaluating only when downstream consumers read the tracked proxy. ```typescript // Invariant: Derived values are pure, lazily evaluated, and synchronously tracked dependencies let count = $state(0); const double = $derived(count * 2); ``` ### Component Decomposition: Legacy Slots vs Svelte 5 Snippets and Typed Props #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Legacy export let and slot directives circumvent Svelte 5 fine-grained runtime proxy optimizations and prevent strict TypeScript typing on transcluded templates. ```svelte  <script lang="ts"> export let items: string[]; </script> <ul> {#each items as item} <li> <slot name="item" row={item}> <span>{item}</span> </slot> </li> {/each} </ul> ``` #### Production Standard (Correct) > **Standard**: Using $props with typed Snippet closures allows compiler validation, fine-grained DOM patching, and deterministic parameter passing. ```svelte  <script lang="ts"> import type { Snippet } from 'svelte'; interface Props { items: string[]; itemTemplate?: Snippet<[item: string]>; } let { items, itemTemplate }: Props = $props(); </script> <ul> {#each items as item (item)} <li> {#if itemTemplate} {@render itemTemplate(item)} {:else} <span>{item}</span> {/if} </li> {/each} </ul> ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive State, Derived Tracking, and Snippet Composition Invariants

Svelte 5 Runes Reactive State, Derived Tracking, and Snippet Composition Invariants defines an industrial-grade behavioral standard for frontend engineering. Svelte 5 replaces legacy compile-time variable instrumentation with runtime fine-grained reactive proxies governed by runes ($state, $derived, $effect, $props). Developers must never simulate computed state using side-effectful $effect synchronization, never destructure $state objects into plain local primitives, and eliminate legacy slots in favor of typed snippet closures. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Simulating Computed State with $effect and Severing Reactivity via Proxy Destructuring Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Simulating Computed State with $effect and Severing Reactivity via Proxy Destructuring	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS use `$derived(expr)` or `$derived.by(() => fn)` for computed values, NEVER synchronizing state manually across `$state` variables inside an `$effect`.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.