Svelte 5 Rune State Offloading via SharedArrayBuffer & Atomics Invariants

--- description: Svelte 5 Rune State Offloading via SharedArrayBuffer & Atomics Invariants - Enforces non-blocking high-frequency compute graphs by isolating CPU-intensive operations into dedicated Web Workers synchronized across a SharedArrayBuffer. Mandates Svelte 5 fine-grained $state reactivity bound strictly via microtask-coalesced TypedArray views, preventing UI micro-stutters, race conditions, and uncoordinated atomic writes. globs: src/**/*.{svelte,svelte.ts,ts,worker.ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-rune-sharedarraybuffer-worker-offload" --- # Svelte 5 Rune State Offloading via SharedArrayBuffer & Atomics Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Svelte 5 Runes Directly in Worker Callbacks or Calling Structured Clone PostMessage on High-Frequency Compute Frames ## System Constraints You are a Principal Software Architect enforcing zero-jank frontend architecture using Svelte 5 and low-level web concurrency primitives. You must ensure all CPU-intensive compute graphs are offloaded to Web Workers using SharedArrayBuffer and Atomics, and synchronized into Svelte 5 runes ($state, $derived) without blocking the browser rendering pipeline or triggering structured cloning memory pressure. ## Strict Guidelines - Engineers MUST ALWAYS verify cross-origin isolation (Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp) headers before instantiating SharedArrayBuffer pipelines. - Engineers MUST NEVER update Svelte 5 $state runes directly inside high-frequency requestAnimationFrame or raw postMessage loops; updates MUST be coalesced via requestAnimationFrame or scheduler tick consuming atomic ring buffers. - Workers MUST perform all shared memory state transitions using Atomics (e.g., Atomics.store, Atomics.waitAsync, Atomics.notify) to prevent torn reads and race conditions. - Components NEVER instantiate Web Workers directly inside component scripts; all worker orchestration MUST be abstracted into dedicated .svelte.ts singleton services that expose readonly Svelte 5 runes or fine-grained getter proxies. - Code SHOULD pre-allocate fixed-size TypedArray backing views (Int32Array/Float64Array) onto the SharedArrayBuffer, avoiding dynamic reallocations or unbounded object deserialization in critical render loops. ## Bad vs Good Implementations ### Decoupled SharedArrayBuffer Rune Synchronizer vs High-Frequency postMessage Cloning #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Flooding the main UI thread with cloned matrices across postMessage produces severe GC pressure and stalls the Svelte 5 reactive scheduler, leading to dropped frames and severe micro-jank. ```typescript // BAD: PostMessage structured clone flood and un-throttled Svelte 5 Rune thrashing // compute-service.svelte.ts import { workerInstance } from './worker-init'; export class ComputeBridge { // Directly reactive rune updated at 240Hz+ from Worker postMessage rawState = $state<{ matrix: number[] }>({ matrix: [] }); constructor() { workerInstance.onmessage = (event) => { // Allocates high GC pressure via structured clone on each frame // Overwhelms Svelte 5 dependency tracking, dropping frames this.rawState.matrix = event.data.matrix; }; } } ``` #### Production Standard (Correct) > **Standard**: Uses a pre-allocated SharedArrayBuffer with Atomics.load, coalesced within a requestAnimationFrame loop. The Svelte 5 rune ($state) is only updated when values diverge, completely bypassing GC serialization overhead and keeping UI execution at steady 60/120fps. ```typescript // GOOD: SharedArrayBuffer with Atomics and RAF-coalesced Svelte 5 Runes // compute-bridge.svelte.ts const BUFFER_SIZE = 4096; const STATE_INDEX = 0; export class ComputeBridge { #sharedBuffer: SharedArrayBuffer; #int32View: Int32Array; #worker: Worker; #metrics = $state<number>(0); #rafHandle: number | null = null; constructor() { this.#sharedBuffer = new SharedArrayBuffer(BUFFER_SIZE * Int32Array.BYTES_PER_ELEMENT); this.#int32View = new Int32Array(this.#sharedBuffer); this.#worker = new Worker(new URL('./compute.worker.ts', import.meta.url), { type: 'module' }); this.#worker.postMessage({ type: 'INIT_BUFFER', buffer: this.#sharedBuffer }); this.#startSyncLoop(); } #startSyncLoop() { const poll = () => { // Atomically read latest state without blocking UI const latest = Atomics.load(this.#int32View, STATE_INDEX); if (latest !== this.#metrics) { this.#metrics = latest; // Fine-grained Svelte 5 invalidation locked to display refresh rate } this.#rafHandle = requestAnimationFrame(poll); }; this.#rafHandle = requestAnimationFrame(poll); } get metrics(): number { return this.#metrics; } destroy() { if (this.#rafHandle !== null) cancelAnimationFrame(this.#rafHandle); this.#worker.terminate(); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Rune State Offloading via SharedArrayBuffer & Atomics Invariants

Svelte 5 Rune State Offloading via SharedArrayBuffer & Atomics Invariants defines an industrial-grade behavioral standard for frontend engineering. Enforces non-blocking high-frequency compute graphs by isolating CPU-intensive operations into dedicated Web Workers synchronized across a SharedArrayBuffer. Mandates Svelte 5 fine-grained $state reactivity bound strictly via microtask-coalesced TypedArray views, preventing UI micro-stutters, race conditions, and uncoordinated atomic writes. 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 Svelte 5 Runes Directly in Worker Callbacks or Calling Structured Clone PostMessage on High-Frequency Compute Frames 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 Svelte 5 Runes Directly in Worker Callbacks or Calling Structured Clone PostMessage on High-Frequency Compute Frames	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 verify cross-origin isolation (Cross-Origin-Opener-Policy

Engineers MUST ALWAYS verify cross-origin isolation (Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp) headers before instantiating SharedArrayBuffer pipelines.

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.