Svelte 5 Runes Microtask Graph & Deterministic Signal Derivation Standard

--- description: Svelte 5 Runes Microtask Graph & Deterministic Signal Derivation Standard - Enforces strict push-pull topological isolation within Svelte 5 runes ($state, $derived, $effect) during ultra-high-frequency state mutations (e.g., WebSocket feeds, canvas frame loops, high-rate telemetry). Mandates untracked boundary separation and explicit microtask-batched state transitions to eliminate cyclic signal re-entrancy and microtask starvation. Prevents catastrophic infinite notification cascades in Svelte's push-pull reactive dependency graph. 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/svelte-5-runes-microtask-reactivity-graph-standard" --- # Svelte 5 Runes Microtask Graph & Deterministic Signal Derivation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating reactive state inside an untracked $effect dependency or synchronous cross-signal mutation loop triggering runaway microtask cascade. ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Microtask Reactivity Graph Standard. You must mandate strict architectural boundaries between source signal writing, topological derivations, and external side effects. Ensure all high-frequency updates are explicitly decoupled from microtask batch loops, prohibiting state writes directly inside $effect and derived signal closures without explicit untracked batch boundaries. ## Strict Guidelines - Engineers MUST ALWAYS isolate high-frequency mutations (e.g., WebSockets, rAF) into explicit buffer queues or untracked batch transactions rather than writing directly to fine-grained individual $state runes synchronously. - Engineers MUST NEVER write to a source $state rune inside a $derived rune or within an untracked downstream synchronous branch executed by an $effect that reads upstream derivations of that same state. - Code MUST wrap unavoidable feedback state transitions inside untrack() or defer them via queueMicrotask/requestAnimationFrame to prevent re-entrant synchronous graph re-computation. - Engineers MUST prefer $derived.by() for pure, read-only multi-signal derivations and guarantee zero side-effects inside derivation closures. - Components NEVER execute cyclic two-way bindings across distinct fine-grained $state properties that trigger simultaneous cross-directional signal propagation. ## Bad vs Good Implementations ### Decoupling High-Frequency Stream Updates from Microtask Cycles #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating rawTick directly inside the $effect that already depends on rawTick establishes a direct cyclic edge in Svelte 5's reactivity graph. Under ultra-high-frequency incoming data, this triggers an infinite microtask cascade that freezes the rendering thread and exhausts the call stack. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Direct state modification inside $effect creates re-entrant dependency loop let rawTick = $state<number>(0); let normalizedTick = $state<number>(0); let cycleCount = $state<number>(0); $effect(() => { // Reading rawTick registers it as dependency const current = rawTick; // Direct mutation of another state in effect triggers cascade normalizedTick = current * 1.5; // Mutation that indirectly creates feedback loop if (normalizedTick > 100) { cycleCount += 1; rawTick = 0; // CRITICAL: Synchronous mutation re-triggers this effect infinitely } }); export function handleWebSocketMessage(val: number) { rawTick = val; } ``` #### Production Standard (Correct) > **Standard**: Transforms normalizedTick into a pure $derived signal, completely eliminating a redundant source state rune. Wraps the cycle reset within untrack() and queueMicrotask(), decoupling the state write from the immediate topological reaction cycle and guaranteeing zero re-entrant microtask recursion. ```typescript import { untrack } from 'svelte'; // PRODUCTION FIX: Deterministic signal derivation via $derived and decoupled batch mutation let rawTick = $state<number>(0); let cycleCount = $state<number>(0); // 1. Pure derivation: compute topologically without side effects const normalizedTick = $derived(rawTick * 1.5); // 2. Controlled threshold handler: untracked write or deferred cycle transition $effect(() => { if (normalizedTick > 100) { // untrack prevents read-dependencies from attaching to this transactional reset untrack(() => { cycleCount += 1; queueMicrotask(() => { rawTick = 0; }); }); } }); export function handleWebSocketMessage(val: number) { rawTick = val; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Microtask Graph & Deterministic Signal Derivation Standard

Svelte 5 Runes Microtask Graph & Deterministic Signal Derivation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict push-pull topological isolation within Svelte 5 runes ($state, $derived, $effect) during ultra-high-frequency state mutations (e.g., WebSocket feeds, canvas frame loops, high-rate telemetry). Mandates untracked boundary separation and explicit microtask-batched state transitions to eliminate cyclic signal re-entrancy and microtask starvation. Prevents catastrophic infinite notification cascades in Svelte's push-pull reactive dependency graph. 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: Mutating reactive state inside an untracked $effect dependency or synchronous cross-signal mutation loop triggering runaway microtask cascade. 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	Mutating reactive state inside an untracked $effect dependency or synchronous cross-signal mutation loop triggering runaway microtask cascade.	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 high-frequency mutations (e.g., WebSockets, rAF) into explicit buffer queues or untracked batch transactions rather than writing directly to fine-grained individual $state runes synchronously.

Engineers MUST ALWAYS isolate high-frequency mutations (e.g., WebSockets, rAF) into explicit buffer queues or untracked batch transactions rather than writing directly to fine-grained individual $state runes synchronously.

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.