Svelte 5 Runes Signal Mutation & Effect Isolation Boundary

--- description: Svelte 5 Runes Signal Mutation & Effect Isolation Boundary - Enforces unidirectional reactive state transitions in Svelte 5 by strictly prohibiting synchronous state mutations inside $derived runes, $effect primitives, and render paths. Guarantees deterministic fine-grained reactive state propagation while strictly preventing circular dependency cascades across enterprise component libraries. 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-mutation-effect-boundary" --- # Svelte 5 Runes Signal Mutation & Effect Isolation Boundary > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Reactive Loop Cascade via Cyclical Signal Mutation inside Svelte 5 Effects and Computed Proxies ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Signal Mutation & Effect Isolation Boundary. Mandate invariants that prevent infinite reactive loops, teardown leaks, and uncontrolled signal re-evaluations. Enforce absolute purity in $derived expressions, require untracked boundaries for asynchronous side-effects in $effect, and isolate state ownership to deterministic command handlers. ## Strict Guidelines - Engineers MUST ALWAYS treat $derived and $derived.by expressions as pure, side-effect-free projection functions that never mutate external signals or state references. - Engineers MUST NOT execute synchronous state mutations of tracked reactive variables directly within $effect or $effect.pre without explicitly wrapping non-reactive dependencies in untrack(). - Code SHOULD prefer deriving state mathematically via $derived rather than synchronizing disparate state variables manually inside $effect listeners. - Services MUST encapsulate writable runes ($state) within domain-driven class modules or factory functions, exposing only read-only signal projections to consuming components. - Components NEVER bridge cross-component communication by writing into parent-owned $bindable props from within an automated $effect block. ## Bad vs Good Implementations ### Preventing Cyclical Signal Invalidation inside Runes Reactive Effects #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating reactive state synchronously inside an active $effect causes immediate re-invalidation of downstream graph nodes, creating non-deterministic microtask churn and potential stack overflow runtime errors in Svelte 5's runtime scheduler. ```typescript import { untrack } from 'svelte'; export class EnterpriseTelemetryStore { count = $state(0); syncCount = $state(0); auditLog = $state<string[]>([]); constructor() { // Anti-pattern: Mutating another signal synchronously within an effect listening to related state // triggers circular graph re-evaluation and infinite microtask scheduling loops. $effect.root(() => { $effect(() => { if (this.count > 0) { this.syncCount = this.count * 2; // Synchronous write to signal creates a ping-pong cascade this.auditLog.push(`Value: ${this.count}`); // Direct mutation in render cycle } }); }); } } ``` #### Production Standard (Correct) > **Standard**: Replaces synchronous signal mutations inside effects with pure derived expressions ($derived) and explicit command methods, using untrack() to break cyclical dependency chains in persistent telemetry effects. ```typescript import { untrack } from 'svelte'; export class EnterpriseTelemetryStore { #count = $state(0); // Deterministic projection: Zero mutation required, calculated on-demand via push-pull signal graph readonly syncCount = $derived(this.#count * 2); #auditLog = $state<readonly string[]>([]); get count(): number { return this.#count; } get auditLog(): readonly string[] { return this.#auditLog; } setCount(next: number): void { this.#count = next; // Explicit command handler drives side-effects rather than implicit cyclic effects this.#auditLog = [...this.#auditLog, `Value: ${next}`]; } setupTelemetrySync(): () => void { return $effect.root(() => { $effect(() => { const current = this.count; // Non-reactive dependencies explicitly isolated using untrack untrack(() => { navigator.sendBeacon?.('/api/telemetry', JSON.stringify({ count: current })); }); }); }); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Signal Mutation & Effect Isolation Boundary

Svelte 5 Runes Signal Mutation & Effect Isolation Boundary defines an industrial-grade behavioral standard for frontend engineering. Enforces unidirectional reactive state transitions in Svelte 5 by strictly prohibiting synchronous state mutations inside $derived runes, $effect primitives, and render paths. Guarantees deterministic fine-grained reactive state propagation while strictly preventing circular dependency cascades across enterprise component libraries. 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: Reactive Loop Cascade via Cyclical Signal Mutation inside Svelte 5 Effects and Computed Proxies 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	Reactive Loop Cascade via Cyclical Signal Mutation inside Svelte 5 Effects and Computed Proxies	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 treat $derived and $derived.by expressions as pure, side-effect-free projection functions that never mutate external signals or state references.

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.