Svelte 5 Runes Universal Reactivity Isolation and Microtask Decoupling

--- description: Svelte 5 Runes Universal Reactivity Isolation and Microtask Decoupling - Enforces strict boundary isolation between fine-grained Svelte 5 runes ($state, $derived, $effect) and asynchronous microtask/streaming event sources. Prevents UI thread starvation and infinite microtask re-render cycles by decoupling high-frequency ingestion pipelines into staging buffers before synchronizing with reactive signal graphs. 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-async-reactivity-isolation-standard" --- # Svelte 5 Runes Universal Reactivity Isolation and Microtask Decoupling > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Direct asynchronous signal mutation inside high-frequency microtask loops and unthrottled WebSocket callbacks triggering reactive dependency thrashing ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Universal Reactivity Isolation Standard. In Svelte 5, runes operate on synchronous signal-graph propagation. In high-frequency data ingestion (WebSockets, SSE, Web Workers, Animation Frames), directly mutating `$state` or reading signals inside asynchronous microtasks creates pathological microtask queues, recursive `$effect` re-evaluations, and frame drops. You must enforce explicit boundary separation: high-frequency streams must ingest into non-reactive ring buffers or transient variables and synchronize to `$state` strictly via scheduled batch flushes using `requestAnimationFrame` or deterministic intervals wrapped in `untrack()`. ## Strict Guidelines - Engineers MUST NEVER mutate `$state` proxies directly within high-frequency streaming callbacks (e.g., WebSocket `onmessage`, SSE `onmessage`, Canvas render ticks, or `requestAnimationFrame` loops). - Engineers MUST buffer inbound streaming payloads in non-reactive data structures (e.g., typed arrays, raw objects, or circular ring buffers) outside Svelte's reactive graph. - Engineers MUST synchronize buffered data into reactive `$state` using a scheduled batching mechanism (e.g., RAF loop or throttled interval) rather than per-message microtasks. - Engineers MUST wrap signal reads inside `$effect` with `untrack()` whenever inspecting current signal state during side-effect dispatching to prevent circular dependency registration. - Engineers MUST NOT call asynchronous functions directly within `$derived` or `$derived.by` expressions; derived runes MUST remain pure, synchronous, and side-effect-free. - Components NEVER instantiate long-lived event stream subscriptions inside unkeyed `$effect` blocks without explicit cleanup teardown functions returned to avoid memory leaks and ghost signal updates. ## Bad vs Good Implementations ### Decoupling High-Frequency WebSocket Streaming from Svelte 5 Runes #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating `$state` variables directly inside the WebSocket `onmessage` callback forces Svelte's fine-grained reactivity engine to trigger signal dependency updates for every packet. Under high-frequency burst conditions (e.g., market data feeds at 200+ msgs/sec), this exhausts microtask scheduling budgets, creating severe jank and rendering starvation. ```typescript import { untrack } from 'svelte'; // ANTI-PATTERN: Mutating $state directly on each microtask tick // Causes catastrophic re-render cascades and UI thread freezing at >60Hz export class MarketFeedModel { ticks = $state<number[]>([]); latestPrice = $state<number>(0); private ws: WebSocket; constructor(endpoint: string) { this.ws = new WebSocket(endpoint); this.ws.onmessage = (event: MessageEvent) => { const payload = JSON.parse(event.data); // Directly pushing to $state triggers microtask scheduling on every single packet this.ticks.push(payload.price); this.latestPrice = payload.price; }; } } ``` #### Production Standard (Correct) > **Standard**: Inbound streaming ticks are ingested into a non-reactive array buffer (`this.buffer`), completely isolated from Svelte 5's signal graph. State synchronization occurs strictly once per animation frame via `requestAnimationFrame` wrapped in `untrack()`, batching hundreds of potential microtasks into a single deterministic state transition. ```typescript import { untrack } from 'svelte'; export class MarketFeedModel { ticks = $state<number[]>([]); latestPrice = $state<number>(0); // Isolated non-reactive ingestion buffer private buffer: number[] = []; private rafId: number | null = null; private ws: WebSocket; constructor(endpoint: string) { this.ws = new WebSocket(endpoint); this.ws.onmessage = (event: MessageEvent) => { const payload = JSON.parse(event.data); // Ingest into plain, non-reactive buffer this.buffer.push(payload.price); this.scheduleFlush(); }; } private scheduleFlush(): void { if (this.rafId !== null) return; this.rafId = requestAnimationFrame(() => { this.rafId = null; if (this.buffer.length === 0) return; // Batch mutate reactive state once per display frame inside untrack untrack(() => { const currentTicks = this.ticks; const newTicks = [...currentTicks, ...this.buffer]; // Retain rolling window to prevent memory leaks this.ticks = newTicks.slice(-1000); this.latestPrice = this.buffer[this.buffer.length - 1]; this.buffer = []; }); }); } public destroy(): void { if (this.rafId !== null) { cancelAnimationFrame(this.rafId); } this.ws.close(); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Universal Reactivity Isolation and Microtask Decoupling

Svelte 5 Runes Universal Reactivity Isolation and Microtask Decoupling defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary isolation between fine-grained Svelte 5 runes ($state, $derived, $effect) and asynchronous microtask/streaming event sources. Prevents UI thread starvation and infinite microtask re-render cycles by decoupling high-frequency ingestion pipelines into staging buffers before synchronizing with reactive signal graphs. 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: Direct asynchronous signal mutation inside high-frequency microtask loops and unthrottled WebSocket callbacks triggering reactive dependency thrashing 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	Direct asynchronous signal mutation inside high-frequency microtask loops and unthrottled WebSocket callbacks triggering reactive dependency thrashing	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 `$state` proxies directly within high-frequency streaming callbacks (e.g., WebSocket `onmessage`, SSE `onmessage`, Canvas render ticks, or `requestAnimationFrame` loops).

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.