Svelte 5 Runes State Preservation, Pure Derivations, and Snippet Composition

--- description: Svelte 5 Runes State Preservation, Pure Derivations, and Snippet Composition - Enforces Svelte 5 runes architecture across components and module state. Prohibits breaking reactive proxy bindings via premature destructuring, disallows using $effect for pure synchronous state derivation, mandates snippets over deprecated slot projections, and restricts runes to .svelte and .svelte.ts execution boundaries. globs: src/**/*.svelte, src/**/*.svelte.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-runes-reactivity-snippets-guardrail" --- # Svelte 5 Runes State Preservation, Pure Derivations, and Snippet Composition > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Destructuring Reactive Proxies, Misusing $effect for Synchronous Computations, and Legacy Slot Patterns ## System Constraints You are a Principal Frontend Architect enforcing strict Svelte 5 Runes reactivity invariants. You must prevent legacy Svelte 3/4 patterns (let bindings, export let, <slot>), eliminate reactive proxy destructuring that severs dependency tracking, enforce $derived over state-synchronizing $effect loops, and ensure all non-component rune logic resides strictly within .svelte.ts files. ## Strict Guidelines - Engineers MUST ALWAYS use $derived or $derived.by for values computed from other state; NEVER use $effect to reassign a local $state variable based on dependencies. - Engineers MUST NOT destructure $state objects or $props() when passing downstream references where property reads must remain reactive across renders. - Components MUST declare reusable template fragments via {#snippet name(param)} and execute them using {@render name(param)}, completely replacing legacy <slot /> and slot props. - Engineers MUST suffix any external TypeScript module invoking runes ($state, $derived, $effect) with `.svelte.ts`; standard `.ts` files must never invoke Svelte 5 compiler runes directly. - Engineers SHOULD use $state.raw for immutable references, external library class instances, or large arrays/dictionaries that are replaced wholesale rather than mutated granularly. - Components NEVER execute DOM mutations or external asynchronous side effects in $derived expressions; side effects belong strictly in $effect or $effect.pre. ## Bad vs Good Implementations ### State Derivation: Pure $derived vs Mutating $effect Sync #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating reactive state inside an $effect causes an extra microtask flush cycle, degrades performance, and easily triggers infinite loop runtime errors. ```typescript // Anti-pattern: Using $effect to synchronize computed state creates unnecessary renders let count = $state(0); let double = $state(0); $effect(() => { // Anti-pattern: writing to state inside effect creates cyclic dependencies double = count * 2; }); export function increment() { count += 1; } ``` #### Production Standard (Correct) > **Standard**: The $derived rune compiles to a clean signal graph projection that computes lazily and synchronously with zero downstream render thrashing. ```typescript // Production standard: Pure synchronous signal propagation via $derived let count = $state<number>(0); const double = $derived<number>(count * 2); export function increment(): void { count += 1; } export function getMetrics(): { count: number; double: number } { return { count, double }; } ``` ### Props and Shared State: Preserving Reactive Signals across Module Boundaries #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Primitive values extracted from $state proxies are evaluated once as static numbers/strings. Callers reading `counter.count` will never observe updates. ```typescript // File: counter.svelte.ts (Broken destructuring) export function createCounter() { const state = $state({ count: 0, label: 'visits' }); // Anti-pattern: destructuring primitives severs the reactive proxy linkage const { count, label } = state; return { count, label, increment: () => { state.count++; } }; } ``` #### Production Standard (Correct) > **Standard**: Using ES getters preserves dynamic property resolution through the Svelte 5 reactive proxy wrapper whenever accessed by components or derived runes. ```typescript // File: counter.svelte.ts (Encapsulated reactive getters) export class CounterStore { #state = $state({ count: 0, label: 'visits' }); get count(): number { return this.#state.count; } get label(): string { return this.#state.label; } increment(): void { this.#state.count += 1; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes State Preservation, Pure Derivations, and Snippet Composition

Svelte 5 Runes State Preservation, Pure Derivations, and Snippet Composition defines an industrial-grade behavioral standard for frontend engineering. Enforces Svelte 5 runes architecture across components and module state. Prohibits breaking reactive proxy bindings via premature destructuring, disallows using $effect for pure synchronous state derivation, mandates snippets over deprecated slot projections, and restricts runes to .svelte and .svelte.ts execution boundaries. 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: Destructuring Reactive Proxies, Misusing $effect for Synchronous Computations, and Legacy Slot Patterns 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	Destructuring Reactive Proxies, Misusing $effect for Synchronous Computations, and Legacy Slot Patterns	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 or $derived.by for values computed from other state

Engineers MUST ALWAYS use $derived or $derived.by for values computed from other state; NEVER use $effect to reassign a local $state variable based on dependencies.

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.