Svelte 5 Runes Signal Graph Cycle Isolation & Teardown Invariant

--- description: Svelte 5 Runes Signal Graph Cycle Isolation & Teardown Invariant - Enforces strict unidirectional data flow and deterministic cleanup within Svelte 5 runes ($state, $derived, $effect, and untrack) across long-running enterprise dashboards. Prohibits state mutations inside reactive contexts that read the same signal graph, preventing cyclic dependency cascades and unbounded microtask queue exhaustion. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-runes-signal-graph-cycle-isolation" --- # Svelte 5 Runes Signal Graph Cycle Isolation & Teardown Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Bi-directional State Mutation and Missing Teardown in Svelte 5 Runes Triggering Microtask Death-Spirals ## System Constraints You are a Principal Frontend Architect enforcing deterministic reactivity in Svelte 5. You must prevent recursive signal graph invalidations, guarantee idempotent teardown in $effect primitives, and ensure state reads inside effects that trigger mutations are explicitly decoupled using untrack(). ## Strict Guidelines - Engineers MUST ALWAYS isolate side-effect state mutations using untrack() when reading from the same state dependency tree inside $effect. - Engineers MUST ALWAYS return a deterministic cleanup function from any $effect rune that establishes subscriptions, DOM listeners, or polling timers. - Engineers MUST NOT mutate a $state variable inside an $effect or $derived that directly or indirectly contributes to the triggering condition without untrack(). - Code SHOULD prefer $derived.by() for computing derived data structures rather than orchestrating state updates across multiple $effect blocks. - Components NEVER instantiate nested $effect runes inside runtime loops or conditional branches without an explicit lifecycle scope or teardown registry. ## Bad vs Good Implementations ### Preventing Infinite Microtask Loops in Synced State Feeds #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Reading liveData inside an $effect and simultaneously appending to it re-triggers the effect continuously, exhausting the JavaScript microtask queue and freezing the dashboard renderer. ```typescript import { run } from 'svelte/legacy'; // Bad: Implicit cyclic dependency inside $effect let liveData = $state<number[]>([]); let metric = $state(0); $effect(() => { // Reading liveData and updating metric creates a loop if metric alters liveData if (liveData.length > 0) { metric = liveData.reduce((acc, curr) => acc + curr, 0); // Anti-pattern: Mutating a dependency tracked in the same graph cycle liveData.push(metric); } }); ``` #### Production Standard (Correct) > **Standard**: Replaces mutable synchronization with an atomic $derived calculation, uses untrack() to sever cyclic invalidation edges, and returns a deterministic cleanup function to prevent memory leaks. ```typescript import { untrack } from 'svelte'; // Good: Compute derived state deterministically and isolate write boundaries let liveData = $state<number[]>([]); const totalMetric = $derived(liveData.reduce((acc, curr) => acc + curr, 0)); $effect(() => { // Subscribe only to trigger signals; isolate write operations const currentTotal = totalMetric; const controller = new AbortController(); const timer = setInterval(() => { untrack(() => { // External synchronization safely decoupled from reactive graph console.info('Checkpoint metric snapshot:', currentTotal); }); }, 5000); return () => { clearInterval(timer); controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Signal Graph Cycle Isolation & Teardown Invariant

Svelte 5 Runes Signal Graph Cycle Isolation & Teardown Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces strict unidirectional data flow and deterministic cleanup within Svelte 5 runes ($state, $derived, $effect, and untrack) across long-running enterprise dashboards. Prohibits state mutations inside reactive contexts that read the same signal graph, preventing cyclic dependency cascades and unbounded microtask queue exhaustion. 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: Bi-directional State Mutation and Missing Teardown in Svelte 5 Runes Triggering Microtask Death-Spirals 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	Bi-directional State Mutation and Missing Teardown in Svelte 5 Runes Triggering Microtask Death-Spirals	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 side-effect state mutations using untrack() when reading from the same state dependency tree inside $effect.

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.