Svelte 5 Runes Reactive Graph Cycle & Depth Bounding Guardrail

Q: How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (Unbounded Feedback Cascades and Untracked Async Re-entries in Svelte 5 Signal Graphs) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q: Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q: Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

--- description: Svelte 5 Runes Reactive Graph Cycle & Depth Bounding Guardrail - Enforces static determinism and runtime cycle/depth bounding across Svelte 5 runes ($state, $derived, $effect) to eliminate cascading reactive microtask storms. Mandates untracked async dependency isolation, mutation-free derivations, and cancellation semantics across asynchronous boundaries. 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-guardrail" --- # Svelte 5 Runes Reactive Graph Cycle & Depth Bounding Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Feedback Cascades and Untracked Async Re-entries in Svelte 5 Signal Graphs ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Reactive Graph Cycle & Depth Guardrail. Your mandate is to prevent reactive cycle storms, runtime stack overflows (ERR_SVELTE_TOO_MANY_UPDATES / effect_update_depth_exceeded), and non-deterministic graph evaluation across synchronous and asynchronous execution paths. Enforce strict isolation between derivation and mutation, require explicit untracking of post-await reads, and reject any circular feedback loops in runes. ## Strict Guidelines - Engineers MUST NEVER mutate any `$state` or proxy target within a `$derived` or `$derived.by` expression; derivations MUST remain pure and deterministic projections of upstream signals. - Engineers MUST NOT write to a `$state` signal inside an `$effect` or `$effect.pre` block if that write synchronously or asynchronously invalidates a signal read in the same tracking context without a strict idempotency termination guard. - Engineers MUST ALWAYS wrap signal reads in `untrack(() => ...)` when accessing reactive state inside asynchronous continuations (`.then()`, `await`, `setTimeout`) to prevent orphaned tracking attachments to the parent effect. - Engineers MUST ALWAYS bind asynchronous effects to an `AbortController` or cleanup function returned from `$effect` to discard stale promises and prevent out-of-order race mutations. - Code SHOULD prefer pure `$derived` or `$derived.by` chains over synchronizing two `$state` variables via an intermediary `$effect`. - Services MUST implement explicit cycle-depth boundaries (maximum loop tripcount <= 10) when updating shared reactive models across domain services. - Components NEVER bridge external event listeners directly into cascading `$state` setters without debouncing or batching via `tick()` / microtask boundaries. ## Bad vs Good Implementations ### Async Data Synchronization with Cycle and Race Condition Guard #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating reactive state read during execution creates an implicit dependency loop. In asynchronous branches, fetching without AbortController introduces race conditions, and failing to untrack post-await reads can corrupt the Svelte 5 reactive ownership tree, triggering 'effect_update_depth_exceeded'. ```typescript import { untrack } from 'svelte'; let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); let errorCount = $state(0); // ANTI-PATTERN: State mutation inside effect triggers cascading re-evaluation. // Post-await signal access implicitly attaches dependencies across async boundaries, // leading to unbounded microtask loops and out-of-order state corruption. $effect(() => { if (query.trim().length > 0) { loading = true; fetch(`/api/search?q=${query}`) .then(r => r.json()) .then(data => { results = data; loading = false; // Mutates tracked state within effect scope if (data.length === 0) { errorCount++; // Unbounded cycle: effect re-runs if errorCount is read upstream } }); } }); ``` #### Production Standard (Correct) > **Standard**: Tracks only `query` synchronously, cleans up pending requests via `AbortController`, and wraps all post-await mutations in `untrack` to guarantee that the signal graph terminates cleanly within a single microtask boundary. ```typescript import { untrack } from 'svelte'; let query = $state(''); let results = $state<string[]>([]); let loading = $state(false); let errorCount = $state(0); // PRODUCTION INVARIANT: Pure derivation for inputs, untracked writes, AbortController lifecycle $effect(() => { const currentQuery = query.trim(); if (!currentQuery) { results = []; loading = false; return; } const controller = new AbortController(); loading = true; fetch(`/api/search?q=${encodeURIComponent(currentQuery)}`, { signal: controller.signal }) .then(r => r.json()) .then(data => { // Untrack async mutations to isolate reactive graph execution untrack(() => { results = data; loading = false; if (data.length === 0) { errorCount = Math.min(errorCount + 1, 10); // Bounded mutation } }); }) .catch(err => { if (err.name !== 'AbortError') { untrack(() => { loading = false; }); } }); return () => { controller.abort(); }; }); ``` ### Eliminating State Synchronization Cycles via Pure Derivation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using chain-linked $effects to synchronize downstream state causes 3 sequential microtask reconciliation passes instead of 0. If any downstream value feeds back into items or subtotal, an infinite loop crashes the runtime. ```typescript let items = $state<Array<{ price: number; quantity: number }>>([]); let subtotal = $state(0); let tax = $state(0); let grandTotal = $state(0); // ANTI-PATTERN: Using multiple $effects to sync dependent states creates a deep reactive graph. // Each mutation triggers a separate microtask flush, cascading updates exponentially. $effect(() => { subtotal = items.reduce((acc, item) => acc + item.price * item.quantity, 0); }); $effect(() => { tax = subtotal * 0.08; }); $effect(() => { grandTotal = subtotal + tax; }); ``` #### Production Standard (Correct) > **Standard**: Replacing state-and-effect patterns with $derived and $derived.by establishes an acyclic directed graph evaluated pull-on-demand with zero microtask queue overhead and impossible cycle deadlocks. ```typescript let items = $state<Array<{ price: number; quantity: number }>>([]); // PRODUCTION INVARIANT: Use atomic, pure derivations instead of state sync effects. const subtotal = $derived.by(() => items.reduce((acc, item) => acc + item.price * item.quantity, 0) ); const tax = $derived(subtotal * 0.08); const grandTotal = $derived(subtotal + tax); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Graph Cycle & Depth Bounding Guardrail

Svelte 5 Runes Reactive Graph Cycle & Depth Bounding Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces static determinism and runtime cycle/depth bounding across Svelte 5 runes ($state, $derived, $effect) to eliminate cascading reactive microtask storms. Mandates untracked async dependency isolation, mutation-free derivations, and cancellation semantics across asynchronous boundaries. 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 Feedback Cascades and Untracked Async Re-entries in Svelte 5 Signal Graphs 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 Feedback Cascades and Untracked Async Re-entries in Svelte 5 Signal Graphs	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 NEVER mutate any `$state` or proxy target within a `$derived` or `$derived.by` expression

Engineers MUST NEVER mutate any `$state` or proxy target within a `$derived` or `$derived.by` expression; derivations MUST remain pure and deterministic projections of upstream signals.

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.