Svelte 5 Runes Signal Cycle Prevention and Untracked Boundary Segregation

--- description: "Svelte 5 Runes Signal Cycle Prevention and Untracked Boundary Segregation - Enforces strict dependency boundary isolation and explicit untracked reads across nested Svelte 5 signals ($derived, $derived.by, and $effect). Prevents microtask queue exhaustion, infinite reactive scheduling loops, and memory retention leaks caused by accidental closure subscriptions in complex state trees." globs: "src/**/*.{svelte,svelte.ts,ts}" alwaysApply: true license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-signal-isolation-and-cycle-prevention" --- # Svelte 5 Runes Signal Cycle Prevention and Untracked Boundary Segregation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Accidental Dependency Subscription Cascades and Infinite Reactive Loops in Nested Svelte 5 Runes ## System Constraints You are a Principal Software Architect enforcing rigorous Svelte 5 runes architecture. You mandate absolute boundary isolation across signals, preventing cyclic invalidation loops in microtask scheduling and ensuring untracked reads for secondary state. ## Strict Guidelines - Engineers MUST ALWAYS wrap auxiliary or non-triggering reads in `untrack(() => ...)` when referencing secondary reactive state inside `$effect` or `$derived.by` blocks. - Engineers MUST NOT mutate `$state` proxies directly or indirectly inside `$derived` or `$derived.by` evaluations; derived computations MUST remain pure mathematical projections. - Engineers MUST NEVER introduce bidirectional signal updates where an `$effect` mutates a `$state` that participates in its own upstream dependency subgraph. - Code SHOULD isolate collection-level transformations into leaf-level `$derived` instances rather than running monolithic iterative lookups inside parent components. - Services MUST expose encapsulated read-only getters or deep-frozen accessors for internal `$state` fields to prevent downstream mutation escapes. - Components NEVER use `$effect` to synchronize or mirror one state rune to another; state derivation MUST use `$derived` or `$derived.by`. ## Bad vs Good Implementations ### Preventing Infinite Microtask Schedule Loops in State Synchronization #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The $effect implicitly subscribes to `this.auditLog` when evaluating `this.auditLog[this.auditLog.length - 1]`. When it subsequently mutates `this.auditLog` via `.push()`, the signal runtime schedules another run of the effect in the next microtask, creating a catastrophic infinite loop and leaking memory. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Mutating state inside $effect based on dependencies it implicitly tracks, // causing an infinite invalidation loop and microtask queue overflow. export class FilteredCatalogState { items = $state<string[]>([]); selectedCategory = $state<string>('all'); auditLog = $state<string[]>([]); constructor() { $effect(() => { // Tracking items and selectedCategory const currentCategory = this.selectedCategory; const count = this.items.length; // Reading auditLog implicitly inside the effect creates a subscription const lastLog = this.auditLog[this.auditLog.length - 1]; // Mutating auditLog invalidates the effect itself -> infinite loop this.auditLog.push(`Category ${currentCategory} evaluated on ${count} items. Previous: ${lastLog}`); }); } } ``` #### Production Standard (Correct) > **Standard**: The reactive dependency is strictly isolated to `this.summary`. Reading and mutating `this.auditLog` is encapsulated within `untrack()`, severing the circular signal dependency and avoiding scheduling cycles in the Svelte runtime. ```typescript import { untrack } from 'svelte'; // PRODUCTION-GRADE: Explicit dependency boundaries using untrack() and pure derivation. export class FilteredCatalogState { items = $state<string[]>([]); selectedCategory = $state<string>('all'); auditLog = $state<string[]>([]); // Deterministic pure derivation without mutation side-effects summary = $derived.by(() => { return `${this.selectedCategory}: ${this.items.length} items`; }); constructor() { $effect(() => { // Explicitly declare the single trigger dependency const summary = this.summary; // Isolate auxiliary reads and mutations outside the reactive dependency graph untrack(() => { const lastLog = this.auditLog[this.auditLog.length - 1] ?? 'init'; this.auditLog = [...this.auditLog, `Updated: ${summary}. Previous: ${lastLog}`]; }); }); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Signal Cycle Prevention and Untracked Boundary Segregation

Svelte 5 Runes Signal Cycle Prevention and Untracked Boundary Segregation defines an industrial-grade behavioral standard for frontend engineering. Enforces strict dependency boundary isolation and explicit untracked reads across nested Svelte 5 signals ($derived, $derived.by, and $effect). Prevents microtask queue exhaustion, infinite reactive scheduling loops, and memory retention leaks caused by accidental closure subscriptions in complex state trees. 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: Accidental Dependency Subscription Cascades and Infinite Reactive Loops in Nested Svelte 5 Runes 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	Accidental Dependency Subscription Cascades and Infinite Reactive Loops in Nested Svelte 5 Runes	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 wrap auxiliary or non-triggering reads in `untrack(() => ...)` when referencing secondary reactive state inside `$effect` or `$derived.by` blocks.

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.