Svelte 5 Runes Deterministic Reactivity and Microtask Flusher Guardrail

--- description: Svelte 5 Runes Deterministic Reactivity and Microtask Flusher Guardrail - Enforces bounded execution depth and deterministic signal evaluation across nested Svelte 5 rune graphs ($state, $derived, $effect). Prevents cascading microtask churn, cyclical flusher invalidation, and state tearing under heavy concurrent event dispatch through pure derivation trees, explicit untracking, and transactional state synchronization. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-microtask-flusher-standard" --- # Svelte 5 Runes Deterministic Reactivity and Microtask Flusher Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating $state inside $effect chains causing cyclic microtask flushes and frame drops ## System Constraints You are a Principal Frontend Architect enforcing the Svelte 5 Runes Reactivity Microtask Flusher Standard. Svelte 5 replaces legacy store subscriptions and Svelte 4 invalidation with fine-grained push-pull signal reactivity managed by an internal microtask flusher. Your mandate is to prevent cascading reaction cycles, enforce pure derivation graphs via $derived/$derived.by, prohibit $state mutation within $effect/$effect.pre, and guarantee deterministic state transitions under high-throughput event processing. ## Strict Guidelines - Engineers MUST ALWAYS compute dependent state using $derived or $derived.by instead of synchronizing state across multiple $state variables inside $effect. - Engineers MUST NOT mutate any $state variable inside an $effect, $effect.pre, or untracked asynchronous microtask spawned by an effect, preventing 'ERR_SVELTE_TOO_MANY_UPDATES' and microtask scheduler saturation. - Code SHOULD wrap non-reactive dependencies and peripheral telemetry/logging inside untrack(() => ...) to prune unwanted edges from the active signal subscriber graph. - Services MUST batch high-frequency external events (e.g., WebSocket bursts, pointermove streams) into atomic state reconciliations rather than dispatching discrete mutations that trigger multiple microtask flush cycles within the same frame. - Components NEVER use tick() in render loops or rapid event handlers to force microtask flushes for derived synchronization; reliance on tick() to read updated derivations indicates a broken push-pull signal dependency graph. - Engineers MUST ALWAYS isolate mutations to the state owner class or module boundary using strict method APIs, forbidding direct nested member reassignment from consumer components. ## Bad vs Good Implementations ### Signal Churn vs. Pure Derived Computation in High-Throughput Streams #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating $state (`total`, `average`, `isAnomaly`) inside `$effect` blocks creates a cascade of reactive cycles. Svelte's microtask flusher must continuously re-run scheduled effects within the microtask queue, causing frame drops, latency spikes, and potential 'too many updates' runtime exceptions during burst events. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Cascading reactive mutations inside $effect // Under rapid event dispatch, this triggers cyclic flusher passes and microtask queue blowout. export class TelemetryMonitor { samples = $state<number[]>([]); total = $state<number>(0); average = $state<number>(0); isAnomaly = $state<boolean>(false); constructor() { // Mutating $state inside $effect triggers additional microtask cycles $effect(() => { this.total = this.samples.reduce((acc, val) => acc + val, 0); this.average = this.samples.length > 0 ? this.total / this.samples.length : 0; }); $effect(() => { // Cascading dependency: depends on this.average mutated by prior effect if (this.average > 100) { this.isAnomaly = true; } else { this.isAnomaly = false; } }); } pushSample(val: number): void { this.samples.push(val); } } ``` #### Production Standard (Correct) > **Standard**: Eliminates cascading state mutations by converting `total`, `average`, and `isAnomaly` into pure `$derived` expressions. Derived runes do not schedule microtask passes; they calculate synchronously via topological signal sorting. Batch updates and `untrack` prevent downstream microtask flusher churn. ```typescript import { untrack } from 'svelte'; // PRODUCTION STANDARD: Pure push-pull derivation graph with atomic updates export class TelemetryMonitor { // Single source of truth for dynamic inputs #samples = $state<number[]>([]); // Deterministic derivations: evaluated lazily on demand without flusher queue pollution readonly total = $derived(this.#samples.reduce((acc, val) => acc + val, 0)); readonly average = $derived(this.#samples.length > 0 ? this.total / this.#samples.length : 0); readonly isAnomaly = $derived(this.average > 100); // External side effects isolate non-reactive logging with untrack constructor(onAnomalyDetected?: (avg: number) => void) { $effect(() => { if (this.isAnomaly && onAnomalyDetected) { const currentAvg = this.average; untrack(() => { onAnomalyDetected(currentAvg); }); } }); } // Atomic ingestion: Replaces array reference in one atomic step to preserve graph integrity pushBatch(incoming: number[]): void { if (incoming.length === 0) return; this.#samples = [...this.#samples, ...incoming]; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Deterministic Reactivity and Microtask Flusher Guardrail

Svelte 5 Runes Deterministic Reactivity and Microtask Flusher Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces bounded execution depth and deterministic signal evaluation across nested Svelte 5 rune graphs ($state, $derived, $effect). Prevents cascading microtask churn, cyclical flusher invalidation, and state tearing under heavy concurrent event dispatch through pure derivation trees, explicit untracking, and transactional state synchronization. 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 $state inside $effect chains causing cyclic microtask flushes and frame drops 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 $state inside $effect chains causing cyclic microtask flushes and frame drops	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 compute dependent state using $derived or $derived.by instead of synchronizing state across multiple $state variables 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.