Svelte 5 Runes Reactive Isolation Boundary & Cascading Cycle Protection

--- description: Svelte 5 Runes Reactive Isolation Boundary & Cascading Cycle Protection - Enforces deterministic state synchronization and strict reactive boundaries within Svelte 5 application trees. Prevents runaway fine-grained signal loops, microtask queue starvation, and silent subscription leakage caused by un-isolated mutations inside $derived runes, ambient $effect tracking, and cross-boundary mutable state sharing. 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-reactive-isolation-boundary-production-standard" --- # Svelte 5 Runes Reactive Isolation Boundary & Cascading Cycle Protection > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Signal Feedback Loops and Ambient Reactive Entanglement Across Rune Boundaries ## System Constraints You are a Principal Frontend Architect enforcing strict Svelte 5 Runes Reactive Isolation Boundaries. Svelte 5 uses fine-grained push-pull signals under the hood. You must strictly forbid mutable side effects inside $derived and $derived.by expressions, prevent uncontrolled read-write cycles in $effect, mandate untrack() for non-dependent reactive reads, and demand frozen snapshot isolation for cross-boundary state propagation across domain stores and shared components. ## Strict Guidelines - Engineers MUST ALWAYS keep $derived and $derived.by strictly pure and free of external mutations, side-effects, or cross-store writes. - Engineers MUST wrap external service subscriptions, analytical dispatchers, or non-reactive read accesses inside untrack() when executed within $effect blocks. - Components and domain classes MUST NEVER mutate external reactive state directly within an $effect without guarding against reciprocal dependency loops. - Engineers MUST isolate shared global state exposing immutable getters and explicit command methods rather than leaking raw, deeply mutable $state proxy references. - Engineers MUST use $derived.by with an explicit scope boundary when computing complex tree structures to avoid registering ambient subscriptions across dynamic evaluation paths. ## Bad vs Good Implementations ### Prevent Cascading Feedback Loops and Ambient Dependencies in Effects #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating filter.filterCounter inside the effect while reading reactive state creates an infinite signal invalidation cycle. In addition, reading metrics.totalLogged introduces an ambient signal dependency that triggers unexpected re-execution whenever metric stats update. ```typescript import { untrack } from 'svelte'; class FilterState { selectedCategory = $state<string>('all'); filterCounter = $state<number>(0); queryResults = $state<Item[]>([]); } // ANTI-PATTERN: Ambient read causes cyclic dependency and derived mutation side-effect export function setupSync(filter: FilterState, metrics: MetricsService) { $effect(() => { // Mutating state directly inside effect while reading dependencies filter.filterCounter++; // Reading metrics and category introduces bidirectional dependency const data = fetchCategory(filter.selectedCategory); filter.queryResults = data; // Ambient read of metrics triggers effect re-run when metrics change metrics.log('filter_run', { category: filter.selectedCategory, count: metrics.totalLogged }); }); } ``` #### Production Standard (Correct) > **Standard**: The refactored code bounds reactive reads to filter.selectedCategory. The state update and external telemetry log are wrapped inside untrack(), preventing infinite reactive cascades and eliminating ambient dependency leakage from metrics.totalLogged. ```typescript import { untrack } from 'svelte'; interface Item { id: string; name: string; } interface MetricsService { totalLogged: number; log(event: string, payload: Record<string, unknown>): void; } class FilterState { #selectedCategory = $state<string>('all'); #queryResults = $state<Item[]>([]); #filterExecutionCount = $state<number>(0); get selectedCategory(): string { return this.#selectedCategory; } get queryResults(): readonly Item[] { return this.#queryResults; } get filterExecutionCount(): number { return this.#filterExecutionCount; } setCategory(category: string): void { this.#selectedCategory = category; } applyResults(results: Item[]): void { this.#queryResults = Object.freeze([...results]); this.#filterExecutionCount += 1; } } // PRODUCTION FIX: Explicit isolation boundary using untrack and unidirectional synchronization export function setupSync(filter: FilterState, metrics: MetricsService, fetchCategory: (cat: string) => Item[]) { $effect(() => { const category = filter.selectedCategory; const data = fetchCategory(category); // Isolate side effects and non-dependent state updates untrack(() => { filter.applyResults(data); metrics.log('filter_run', { category, totalLogged: metrics.totalLogged }); }); }); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Isolation Boundary & Cascading Cycle Protection

Svelte 5 Runes Reactive Isolation Boundary & Cascading Cycle Protection defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic state synchronization and strict reactive boundaries within Svelte 5 application trees. Prevents runaway fine-grained signal loops, microtask queue starvation, and silent subscription leakage caused by un-isolated mutations inside $derived runes, ambient $effect tracking, and cross-boundary mutable state sharing. 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: Unbounded Signal Feedback Loops and Ambient Reactive Entanglement Across Rune Boundaries 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	Unbounded Signal Feedback Loops and Ambient Reactive Entanglement Across Rune Boundaries	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 keep $derived and $derived.by strictly pure and free of external mutations, side-effects, or cross-store writes.

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.