Svelte 5 Runes Reactive Isolation Boundary Standard Across Micro-Frontends

--- description: Svelte 5 Runes Reactive Isolation Boundary Standard Across Micro-Frontends - Enforces strict isolation boundaries when exposing or consuming Svelte 5 reactive rune graphs across host-remote micro-frontend architectures. Prevents cross-instance signal retention leaks and unbounded cascading re-renders by mandating immutable snapshots ($state.snapshot) and untracked proxy adapters at federation seams. 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-reactive-isolation-boundary-standard" --- # Svelte 5 Runes Reactive Isolation Boundary Standard Across Micro-Frontends > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cross-Boundary Signal Leakage and Cascading Render Storms via Direct $state Proxy Exposure ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Reactive Isolation Boundary Standard. You must prohibit direct sharing of raw reactive rune proxies ($state, $derived) across Micro-Frontend (MFE) host-remote boundaries, Module Federation modules, and Web Component wrappers. Mandate strict snapshotting, untracked evaluation boundaries, and explicit teardown protocols to eliminate cross-runtime subscription memory leaks and cascading reactive cycles. ## Strict Guidelines - Engineers MUST ALWAYS isolate cross-boundary data transfers using `$state.snapshot(payload)` or `untrack(() => value)` to sever Svelte 5 signal dependency graphs. - Engineers MUST NOT pass raw `$state` proxy objects, `$state.raw` references with mutable properties, or active `$derived` runes directly to external host or remote micro-frontend consumers. - Code SHOULD implement an explicit `BoundaryProxy` contract that exposes unidirectional, event-driven synchronizers with unmount/disposal lifecycles rather than two-way reactive state bindings. - Services MUST ensure that cross-runtime micro-frontend events invoke downstream state mutations within an explicit boundary transaction to decouple host runtime batching from remote subscriber trees. - Components NEVER attach reactive `$effect` handlers directly to foreign micro-frontend observable proxies without registering an explicit cleanup callback (`return () => teardown()`). ## Bad vs Good Implementations ### Micro-Frontend Cross-Boundary State Synchronization #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly returning the raw `$state` proxy exposes the remote's reactive dependency graph to the host runtime. When the host accesses nested fields inside its own reactive effects, cross-runtime signal subscriptions are created that prevent garbage collection upon remote unmounting and trigger uncontrolled cascading re-renders across the boundary. ```typescript import { $state } from 'svelte'; // ANTI-PATTERN: Exposing raw $state proxy directly across micro-frontend boundaries export class RemoteUserProfileStore { profile = $state({ id: 'usr-123', name: 'Alice', preferences: { theme: 'dark' } }); // Host component receives raw reactive proxy; // Any host read registers host effects in remote's reactive graph. // When remote unmounts, host still retains signal references, leaking the remote runtime. public getReactiveProfile() { return this.profile; } } ``` #### Production Standard (Correct) > **Standard**: The isolation boundary returns deep, immutable structural clones via `$state.snapshot` inside `untrack()`. Subscriptions operate over plain data events with deterministic cleanup semantics, completely preventing signal graph entanglement and micro-frontend memory leaks. ```typescript import { $state, untrack } from 'svelte'; export interface UserProfile { id: string; name: string; preferences: { theme: 'dark' | 'light' }; } export interface IsolatedBoundary<T> { getSnapshot(): T; subscribe(subscriber: (data: T) => void): () => void; } // PRODUCTION STANDARD: Reactive Isolation Boundary using snapshots and untracked subscriptions export class RemoteUserProfileStore implements IsolatedBoundary<UserProfile> { #state = $state<UserProfile>({ id: 'usr-123', name: 'Alice', preferences: { theme: 'dark' } }); #subscribers = new Set<(data: UserProfile) => void>(); public getSnapshot(): UserProfile { return untrack(() => $state.snapshot(this.#state)); } public updatePreferences(preferences: UserProfile['preferences']): void { this.#state.preferences = preferences; const isolatedData = this.getSnapshot(); this.#subscribers.forEach((notify) => notify(isolatedData)); } public subscribe(subscriber: (data: UserProfile) => void): () => void { this.#subscribers.add(subscriber); subscriber(this.getSnapshot()); return () => { this.#subscribers.delete(subscriber); }; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Isolation Boundary Standard Across Micro-Frontends

Svelte 5 Runes Reactive Isolation Boundary Standard Across Micro-Frontends defines an industrial-grade behavioral standard for frontend engineering. Enforces strict isolation boundaries when exposing or consuming Svelte 5 reactive rune graphs across host-remote micro-frontend architectures. Prevents cross-instance signal retention leaks and unbounded cascading re-renders by mandating immutable snapshots ($state.snapshot) and untracked proxy adapters at federation seams. 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: Cross-Boundary Signal Leakage and Cascading Render Storms via Direct $state Proxy Exposure 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	Cross-Boundary Signal Leakage and Cascading Render Storms via Direct $state Proxy Exposure	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 isolate cross-boundary data transfers using `$state.snapshot(payload)` or `untrack(() => value)` to sever Svelte 5 signal dependency graphs.

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.