Svelte 5 High-Frequency Telemetry Isolation via $state.raw

--- description: Svelte 5 High-Frequency Telemetry Isolation via $state.raw - Mandates the use of $state.raw for high-frequency streaming data, binary buffers, and large collections in Svelte 5. By bypassing recursive reactive proxy tree synthesis, applications eliminate massive memory allocation overhead, micro-tick thrashing, and garbage collection stutter during sustained telemetry ingestion. Deep reactivity must be explicitly decoupled from raw ingest buffers and reserved exclusively for leaf presentation primitives. 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-rune-state-proxy-isolation-standard" --- # Svelte 5 High-Frequency Telemetry Isolation via $state.raw > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Wrapping high-frequency telemetry payloads in standard $state runes causing recursive proxy thrashing and frame drops ## System Constraints You are a Principal Frontend Architect enforcing the Svelte 5 Rune State Proxy Isolation Standard. Svelte 5 converts standard `$state(...)` complex objects and arrays into deep reactive proxies. In high-frequency telemetry, WebSocket streams, WebRTC data channels, or continuous sensor feeds (10Hz+), wrapping payloads in `$state` triggers recursive proxy traversal on every frame, generating thousands of short-lived proxy objects, degrading V8 inline caches, and causing severe garbage collection jank. You must strictly mandate `$state.raw(...)` for raw telemetry pipelines, enforcing explicit reassignment or isolated slice extraction. ## Strict Guidelines - Engineers MUST ALWAYS use `$state.raw()` for data streams updated more frequently than 10Hz (WebSockets, Canvas render loops, audio worklets, sensor telemetry). - Engineers MUST NOT mutate inner properties of objects held inside a `$state.raw()` container; trigger reactivity by full reference reassignment (`telemetry = nextPacket`). - Components NEVER store large arrays or un-normalized API feeds in standard `$state()` if individual elements do not need granular field-level reactivity. - Engineers SHOULD use `$derived.by()` to project isolated, low-frequency scalar representations from a `$state.raw` source to minimize downstream component re-renders. - Services MUST isolate internal high-frequency ring buffers within plain TypeScript/JavaScript classes or closures, exposing only throttled snapshots via `$state.raw`. ## Bad vs Good Implementations ### Ingesting High-Frequency Telemetry Stream in Svelte 5 #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using standard `$state` on rapidly expanding collections or nested telemetry payloads creates deep reactive proxies on every item, property, and array index. Pushing new items forces recursive proxy allocation that overburdens the garbage collector. ```typescript import { untrack } from 'svelte'; interface MetricPayload { timestamp: number; metrics: Record<string, number[]>; metadata: { host: string; tags: string[] }; } // ANTI-PATTERN: Standard $state recursively wraps every nested object and array in a proxy. // When updated at 60Hz, this generates tens of thousands of proxy wrappers per second, // causing GC pressure, major frame stutter, and V8 IC deoptimizations. export class TelemetryMonitor { data = $state<MetricPayload[]>([]); pushPacket(packet: MetricPayload): void { this.data.push(packet); if (this.data.length > 500) { this.data.shift(); } } } ``` #### Production Standard (Correct) > **Standard**: Using `$state.raw` preserves raw object references without attaching proxy handlers. The memory footprint remains minimal and predictable, zero GC pressure occurs from proxy wrappers, and downstream consumers only re-evaluate when `snapshot` is reassigned. ```typescript interface MetricPayload { timestamp: number; metrics: Record<string, number[]>; metadata: { host: string; tags: string[] }; } // PRODUCTION FIX: $state.raw creates a shallow reactive reference. // Inner objects remain pristine plain JavaScript primitives, eliminating proxy creation overhead. // Reactivity fires strictly upon pointer reassignment. export class TelemetryMonitor { #rawBuffer: MetricPayload[] = []; snapshot = $state.raw<readonly MetricPayload[]>([]); pushPacket(packet: MetricPayload): void { this.#rawBuffer.push(packet); if (this.#rawBuffer.length > 500) { this.#rawBuffer.shift(); } // Explicit shallow reassignment to notify Svelte subscribers without proxy traversal this.snapshot = [...this.#rawBuffer]; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 High-Frequency Telemetry Isolation via $state.raw

Svelte 5 High-Frequency Telemetry Isolation via $state.raw defines an industrial-grade behavioral standard for frontend engineering. Mandates the use of $state.raw for high-frequency streaming data, binary buffers, and large collections in Svelte 5. By bypassing recursive reactive proxy tree synthesis, applications eliminate massive memory allocation overhead, micro-tick thrashing, and garbage collection stutter during sustained telemetry ingestion. Deep reactivity must be explicitly decoupled from raw ingest buffers and reserved exclusively for leaf presentation primitives. 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: Wrapping high-frequency telemetry payloads in standard $state runes causing recursive proxy thrashing 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	Wrapping high-frequency telemetry payloads in standard $state runes causing recursive proxy thrashing 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 use `$state.raw()` for data streams updated more frequently than 10Hz (WebSockets, Canvas render loops, audio worklets, sensor telemetry).

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.