Svelte 5 Runes Reactive Graph Cycle Prevention and Push-Pull Leak Guardrail

--- description: Svelte 5 Runes Reactive Graph Cycle Prevention and Push-Pull Leak Guardrail - Enforces strict structural constraints on Svelte 5 rune topologies ($state, $derived, $effect) to eliminate infinite evaluation loops and subscription leaks. Protects against memory bloat and microtask exhaustion under high-throughput telemetry updates by mandating untracked reads, bounded buffers, and decoupled frame rendering. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-runes-reactive-graph-cycle-push-pull-leak-guardrail" --- # Svelte 5 Runes Reactive Graph Cycle Prevention and Push-Pull Leak Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dynamic Graph Dependency Churn and Cyclic Invalidation Under High-Frequency Stream Mutation ## System Constraints You are a Principal Software Architect enforcing production-grade Svelte 5 reactive graph integrity. You must guarantee that high-frequency state updates (telemetry, WebSockets, real-time charts) never cause push-pull invalidation cascades, cyclic dependencies, or retained reference leaks across $derived and $effect rune graphs. ## Strict Guidelines - Engineers MUST ALWAYS isolate incidental state reads using `untrack(() => ...)` within `$effect` and `$derived.by` to prevent accidental dependency registration. - Engineers MUST NOT mutate any `$state` signal directly or transitively inside a `$derived` or `$derived.by` computation; derivations MUST remain pure projection functions. - Engineers MUST NOT mutate state signals inside an `$effect` that read that same state synchronously without an explicit termination condition or `untrack()` boundary, preventing microtask cycles (`ERR_SVELTE_TOO_MANY_UPDATES`). - Code MUST bound high-frequency telemetry ingestion using fixed-capacity circular ring buffers or batching arrays, avoiding unbounded append mutations on `$state` collections. - Components NEVER instantiate nested `$effect.root()` or dynamic `$derived` signals inside loops or continuous event callbacks without retaining and executing explicit cleanup disposers. - Services MUST decouple high-throughput stream ingestion from visual rune reactivity by aggregating raw telemetry off-graph and flushing snapshots to `$state` at display refresh intervals (e.g., via `requestAnimationFrame`). ## Bad vs Good Implementations ### High-Frequency Telemetry Ingestion and Derived Metric Topology #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating `this.totalSum` inside `$derived.by` introduces an illegal side effect in Svelte 5's push-pull execution model, triggering cascading invalidation cycles. Additionally, continuously mutating an unbounded array inside `$state` without ring-buffering creates retained memory leaks and escalates dirty-flag checking cost. ```typescript // telemetry-store.svelte.ts import { untrack } from 'svelte'; export class TelemetryMonitor { rawPackets = $state<number[]>([]); totalSum = $state(0); // ANTI-PATTERN: Mutating state inside derived, creating downstream evaluation cycle movingAverage = $derived.by(() => { const sum = this.rawPackets.reduce((acc, curr) => acc + curr, 0); // Side effect inside derived: Mutates state, poisoning push-pull scheduler this.totalSum = sum; return this.rawPackets.length > 0 ? sum / this.rawPackets.length : 0; }); constructor(socket: WebSocket) { // ANTI-PATTERN: Unbounded reactive array growth triggers exponential push-pull dirty checks socket.onmessage = (event) => { const payload = JSON.parse(event.data); this.rawPackets.push(payload.metric); // Continuously expands graph memory footprint }; } } ``` #### Production Standard (Correct) > **Standard**: The revised implementation buffers telemetry updates off-graph and synchronizes them to `$state` once per animation frame. The `$derived.by` computation remains strictly pure with zero external mutations, preventing graph evaluation cycles, bounding heap memory, and protecting scheduler microtasks. ```typescript // telemetry-store.svelte.ts import { untrack } from 'svelte'; export class TelemetryMonitor { private readonly maxCapacity: number; // Fixed-size window to guarantee memory boundedness private buffer: number[] = []; private animationFrameId: number | null = null; // Public rune state exposed as read-only snapshot samples = $state<readonly number[]>([]); // PURE projection: strictly pull-driven with zero state mutations movingAverage = $derived.by(() => { const current = this.samples; if (current.length === 0) return 0; const sum = current.reduce((acc, val) => acc + val, 0); return sum / current.length; }); constructor(socket: WebSocket, capacity = 100) { this.maxCapacity = capacity; // Ingestion off-graph: avoid dirtying the reactive graph at network wire speed socket.onmessage = (event) => { const payload = JSON.parse(event.data); this.buffer.push(payload.metric); if (this.buffer.length > this.maxCapacity) { this.buffer.shift(); } this.scheduleFlush(); }; } private scheduleFlush(): void { if (this.animationFrameId !== null) return; // Decouple ingestion from reactive graph updates using display frame throttling this.animationFrameId = requestAnimationFrame(() => { this.animationFrameId = null; // Update rune state in a single bounded atomic transaction this.samples = [...this.buffer]; }); } destroy(): void { if (this.animationFrameId !== null) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Graph Cycle Prevention and Push-Pull Leak Guardrail

Svelte 5 Runes Reactive Graph Cycle Prevention and Push-Pull Leak Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict structural constraints on Svelte 5 rune topologies ($state, $derived, $effect) to eliminate infinite evaluation loops and subscription leaks. Protects against memory bloat and microtask exhaustion under high-throughput telemetry updates by mandating untracked reads, bounded buffers, and decoupled frame rendering. 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: Dynamic Graph Dependency Churn and Cyclic Invalidation Under High-Frequency Stream Mutation 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	Dynamic Graph Dependency Churn and Cyclic Invalidation Under High-Frequency Stream Mutation	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 isolate incidental state reads using `untrack(() => ...)` within `$effect` and `$derived.by` to prevent accidental dependency registration.

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.