Svelte 5 Runes Memory Boundary & Proxy Graph Isolation Invariant

--- description: Svelte 5 Runes Memory Boundary & Proxy Graph Isolation Invariant - Enforces strict memory boundary hygiene between Svelte 5 fine-grained reactive proxy graphs ($state) and long-lived outer micro-frontend (MFE) contexts. Unsanitized sharing of deep reactive state creates implicit signal dependency retain-cycles that prevent garbage collection of detached MFE DOM nodes, component trees, and reactive effects. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-memory-boundary-invariant" --- # Svelte 5 Runes Memory Boundary & Proxy Graph Isolation Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Exposing Raw Svelte 5 Reactive Proxies Across Long-Lived Micro-Frontend Shells and Event Buses ## System Constraints You are a Principal Frontend Architect enforcing the Svelte 5 Runes Memory Boundary Invariant. Svelte 5 creates deep reactive proxies via `$state` that link mutable objects to runtime signal dependency trees. Passing these proxied objects to global scopes, window event buses, or foreign micro-frontends creates permanent retain cycles. You must strictly mandate that all data crossing boundary layers is decoupled via `$state.snapshot()` or held in `$state.raw()`, and all dynamic reactive roots spawned via `$effect.root` are explicitly destroyed upon unmount. ## Strict Guidelines - Engineers MUST ALWAYS invoke `$state.snapshot()` when transmitting state across micro-frontend boundaries, window events, or external state containers. - Engineers MUST NOT store mutable references originating from the host container or sibling micro-frontends directly inside deep `$state` runes. - Code MUST use `$state.raw()` for large immutable payloads, external third-party instances, or cross-boundary event stream buffers to bypass reactive proxy graph instantiation. - Services that invoke `$effect.root()` outside of a component lifecycle MUST capture and execute the returned teardown function upon micro-frontend teardown/unmount. - Components NEVER attach reactive runes or derived closures directly to global window listeners or shell event targets without explicit unmount cleanup via `$effect` teardowns. ## Bad vs Good Implementations ### Passing Reactive State Across Micro-Frontend Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing `$state` directly to an external or global entity leaks Svelte 5 internal reactive proxy signals. The shell retains a reference to the proxy, preventing garbage collection of the entire MFE session. ```typescript // Shared MFE bridge holding reference to internal proxy import { hostEventBus } from '@mfe/shell-bridge'; class UserSessionManager { user = $state({ profile: { id: 'usr-123', settings: { theme: 'dark' } } }); constructor() { // ANTI-PATTERN: Passes deep reactive proxy graph directly to long-lived shell bus. // The shell bus retains the proxy, pinning the entire Svelte 5 signal dependency // graph and component tree in memory even after the micro-frontend unmounts. hostEventBus.emit('session:update', this.user); } } ``` #### Production Standard (Correct) > **Standard**: Using `$state.snapshot(this.user)` generates a deep non-reactive clone, completely severing the link to Svelte's reactive runtime graph and preventing micro-frontend retain cycles. ```typescript // Shared MFE bridge using snapshot isolation and lifecycle destruction import { hostEventBus } from '@mfe/shell-bridge'; import { $state } from 'svelte'; class UserSessionManager { user = $state({ profile: { id: 'usr-123', settings: { theme: 'dark' } } }); private unsubscribe?: () => void; constructor() { // INVARIANT: Snapshot the proxy state into a pristine, unproxied POJO // before exposing it beyond the micro-frontend boundary. const staticPayload = $state.snapshot(this.user); hostEventBus.emit('session:update', staticPayload); } public dispose(): void { this.unsubscribe?.(); } } ``` ### Handling Foreign Large Data Buffers with $state.raw #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Creating deep reactive proxies on arrays of external records creates massive allocation overhead and retains foreign prototype references across the micro-frontend barrier. ```typescript // Consuming large telemetry/analytics feeds from the host shell class TelemetryStore { // ANTI-PATTERN: Wraps high-frequency external feed in deep reactive proxy. // Generates thousands of reactive proxies and retains stale host references. records = $state<Array<{ event: string; timestamp: number }>>([]); ingest(externalRecords: Array<{ event: string; timestamp: number }>) { this.records.push(...externalRecords); } } ``` #### Production Standard (Correct) > **Standard**: `$state.raw` ensures that elements inside the array remain unmodified, unproxied objects, safeguarding memory boundaries and significantly reducing garbage collection pressure. ```typescript // Consuming foreign feeds with shallow reactivity class TelemetryStore { // INVARIANT: Use $state.raw for external payload collections. // Mutate by reassigning reference, avoiding deep proxy graph instantiation. records = $state.raw<Array<{ event: string; timestamp: number }>>([]); ingest(externalRecords: Array<{ event: string; timestamp: number }>) { // Reassignment triggers shallow updates without wrapping items in reactive proxies this.records = [...this.records, ...externalRecords]; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Memory Boundary & Proxy Graph Isolation Invariant

Svelte 5 Runes Memory Boundary & Proxy Graph Isolation Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces strict memory boundary hygiene between Svelte 5 fine-grained reactive proxy graphs ($state) and long-lived outer micro-frontend (MFE) contexts. Unsanitized sharing of deep reactive state creates implicit signal dependency retain-cycles that prevent garbage collection of detached MFE DOM nodes, component trees, and reactive effects. 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: Exposing Raw Svelte 5 Reactive Proxies Across Long-Lived Micro-Frontend Shells and Event Buses 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	Exposing Raw Svelte 5 Reactive Proxies Across Long-Lived Micro-Frontend Shells and Event Buses	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 invoke `$state.snapshot()` when transmitting state across micro-frontend boundaries, window events, or external state containers.

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.