Svelte 5 Runes Fine-Grained Reactive Signal Graph Cycle Guardrail

--- description: Svelte 5 Runes Fine-Grained Reactive Signal Graph Cycle Guardrail - Enforces strict Directed Acyclic Graph (DAG) topology across Svelte 5 rune dependencies ($state, $derived, $effect) to prevent microtask thrashing and infinite update cascades. Mandates explicit dependency truncation via untrack() and prohibits cyclic feedback loops induced by mutating state within reactive tracking contexts. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-signal-graph-cycle-guardrail" --- # Svelte 5 Runes Fine-Grained Reactive Signal Graph Cycle Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Microtask Exhaustion via Unbounded $effect State Mutations and Bidirectional Prop Cascades ## System Constraints You are a Principal Software Architect enforcing topological integrity and cycle prevention within Svelte 5 fine-grained reactive signal graphs. Mandate strict DAG invariants across all runes ($state, $derived, $effect, $props). Ensure $derived remains pure and deterministic, prohibit synchronous state mutations inside effects that subscribe to the mutated signal graph, and enforce untrack() boundaries across deep component hierarchies. ## Strict Guidelines - Engineers MUST ALWAYS treat Svelte 5 reactive graphs as strict Directed Acyclic Graphs (DAGs); circular signal references and feedback loops are strictly prohibited. - Engineers MUST NOT mutate `$state` inside an `$effect` if that `$effect` synchronously or transitively tracks the mutated signal without wrapping reads in `untrack()`. - Engineers MUST ALWAYS use `$derived` or `$derived.by` for computed values instead of synchronizing secondary state via `$effect` mutations. - Engineers MUST isolate non-triggering reactive dependencies inside `$effect` blocks by using `untrack(() => ...)` to truncate unbounded graph expansion. - Components NEVER mutate `$bindable` props inside `$effect` blocks responding to parent-provided values, as this triggers bidirectional ping-pong re-evaluations. - Services and shared rune modules (`.svelte.ts`) MUST encapsulate internal signal mutations within explicit methods rather than exposing mutable raw state proxies across deep component trees. ## Bad vs Good Implementations ### Anti-Pattern: Cyclic Mutation in $effect vs Invariant Fix with Pure $derived and untrack() #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The $effect subscribes to count, lastLoggedCount, and totalAudits upon execution. Mutating totalAudits and lastLoggedCount synchronously marks the effect dirty again, producing a non-terminating reactive microtask cascade that crashes the browser runtime. ```typescript // Anti-Pattern: Mutating $state inside $effect while tracking the same graph // triggers Svelte 5 runtime error: ERR_SVELTE_TOO_MANY_UPDATES import { untrack } from 'svelte'; let count = $state(0); let totalAudits = $state(0); let lastLoggedCount = $state(0); // VIOLATION: $effect tracks both totalAudits and count, then mutates totalAudits $effect(() => { if (count !== lastLoggedCount) { lastLoggedCount = count; totalAudits += 1; // CYCLIC MUTATION: re-triggers effect in subsequent tick } }); ``` #### Production Standard (Correct) > **Standard**: By wrapping reads and mutations of secondary tracking targets in untrack(), the effect isolates its dependency strictly to 'count'. The DAG is preserved without cyclic dependencies, eliminating recursive microtask evaluations. ```typescript // Production Invariant: Split derived state and decouple side-effects using untrack() import { untrack } from 'svelte'; let count = $state(0); let totalAudits = $state(0); let lastLoggedCount = 0; // Pure non-reactive lexical sentinel // Decoupled side effect: only re-executes when count transitions $effect(() => { const currentCount = count; untrack(() => { if (currentCount !== lastLoggedCount) { lastLoggedCount = currentCount; totalAudits += 1; // Mutation is safe: totalAudits is not tracked by this effect } }); }); ``` ### Anti-Pattern: Synchronizing Prop Mirrors via $effect vs Invariant Fix with $derived #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using $effect to mirror or normalize props into a local $state variable adds an unnecessary asynchronous render pass and can induce cascading cycles when combined with two-way bindings or downstream consumers. ```typescript // Anti-Pattern: Prop mirroring using $state and $effect in Svelte 5 component interface Props { filterQuery: string; } let { filterQuery }: Props = $props(); let normalizedFilter = $state(''); // VIOLATION: Using $effect to synchronize state creates redundant renders and potential ping-pong cycles $effect(() => { normalizedFilter = filterQuery.trim().toLowerCase(); }); ``` #### Production Standard (Correct) > **Standard**: $derived guarantees instantaneous, glitch-free topological updates without triggering additional microtask ticks, completely preventing synchronization loops. ```typescript // Production Invariant: Pure functional derivation using $derived interface Props { filterQuery: string; } let { filterQuery }: Props = $props(); // Correct: Pure, zero-overhead synchronous derived signal const normalizedFilter = $derived(filterQuery.trim().toLowerCase()); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Fine-Grained Reactive Signal Graph Cycle Guardrail

Svelte 5 Runes Fine-Grained Reactive Signal Graph Cycle Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict Directed Acyclic Graph (DAG) topology across Svelte 5 rune dependencies ($state, $derived, $effect) to prevent microtask thrashing and infinite update cascades. Mandates explicit dependency truncation via untrack() and prohibits cyclic feedback loops induced by mutating state within reactive tracking contexts. 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: Cyclic Microtask Exhaustion via Unbounded $effect State Mutations and Bidirectional Prop Cascades 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	Cyclic Microtask Exhaustion via Unbounded $effect State Mutations and Bidirectional Prop Cascades	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 Svelte 5 reactive graphs as strict Directed Acyclic Graphs (DAGs)

Engineers MUST ALWAYS treat Svelte 5 reactive graphs as strict Directed Acyclic Graphs (DAGs); circular signal references and feedback loops are strictly prohibited.

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.