Svelte 5 Runes Cross-Microfrontend Reactive Graph Boundary Isolation

--- description: Svelte 5 Runes Cross-Microfrontend Reactive Graph Boundary Isolation - Enforces isolated signal graph destruction across micro-frontend boundaries using Svelte 5's $effect.root() and explicit teardown contracts. Prevents zombie subscriptions and detached DOM tree retention when reactive proxies bridge isolated runtime realms into a long-lived host shell. globs: src/**/*.{svelte,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-cross-mfe-reactivity-bridge" --- # Svelte 5 Runes Cross-Microfrontend Reactive Graph Boundary Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Cross-Boundary Svelte 5 Runes via Raw Proxies and Missing $effect.root Teardown ## System Constraints You are a Principal Software Architect enforcing production reliability across Micro-Frontend (MFE) architectures using Svelte 5. You must reject any cross-MFE reactive bridges that expose raw runes ($state, $derived) across execution boundaries or fail to encapsulate out-of-component effects inside $effect.root(). Mandate explicit, deterministically disposed subscriptions and decoupled value snapshots to prevent memory leaks in long-lived container shells. ## Strict Guidelines - Engineers MUST ALWAYS wrap out-of-component cross-MFE reactive subscriptions in an explicit $effect.root() scope. - Engineers MUST expose and invoke a deterministic cleanup/destroy method that executes the root disposal callback upon MFE unmount. - Engineers MUST NOT leak raw Svelte 5 $state reactive proxies directly to window singletons, external stores, or other micro-frontend instances. - Code MUST serialize cross-boundary state using $state.snapshot() or immutable CustomEvents to decouple the internal signal graph from host realms. - Components and bridge services NEVER execute bare $effect calls in non-component singleton modules without an active $effect.root lifecycle. ## Bad vs Good Implementations ### Cross-MFE State Bridge Lifecycle #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Exposing raw runes ($state) across realms leaks the internal signal dependency tree into the host shell. Running bare $effect blocks outside a component tree without $effect.root prevents Svelte from tracking dependencies cleanly and leaves active subscriptions permanently pinned in memory after the MFE unmounts. ```typescript import { localState } from './state.svelte.js'; export function mountMfe(container: HTMLElement, hostBus: EventTarget) { // Anti-pattern: Exposing raw $state proxy to host realm (window as unknown as { __MFE_SHARED_STATE__: typeof localState }).__MFE_SHARED_STATE__ = localState; // Anti-pattern: $effect outside component tree without $effect.root triggers runtime warnings // and creates orphaned subscribers that never get garbage collected on unmount. $effect(() => { hostBus.dispatchEvent(new CustomEvent('state:sync', { detail: localState.payload })); }); return { unmount() { container.innerHTML = ''; // Leaks reactive graph and signal listeners in host realm } }; } ``` #### Production Standard (Correct) > **Standard**: Wrapping the bridge within $effect.root() provides a synchronous disposal handle (cleanupRoot) that cancels all internal effects and signals. Using $state.snapshot() ensures that values emitted across the host bus are plain, disconnected JavaScript objects rather than reactive proxy traps that prevent garbage collection. ```typescript import { createLocalStore } from './state.svelte.js'; export interface MfeBridge { unmount: () => void; } export function mountMfe(container: HTMLElement, hostBus: EventTarget): MfeBridge { const store = createLocalStore(); // Explicitly allocate an isolated reactivity root for lifecycle teardown const cleanupRoot = $effect.root(() => { $effect(() => { // Read reactive properties, then snapshot to detach from Svelte's reactive proxy graph const serializedData = $state.snapshot(store.payload); hostBus.dispatchEvent(new CustomEvent('state:sync', { detail: serializedData })); }); }); return { unmount() { // Deterministically tear down the signal graph and detach cross-MFE observers cleanupRoot(); container.replaceChildren(); } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Cross-Microfrontend Reactive Graph Boundary Isolation

Svelte 5 Runes Cross-Microfrontend Reactive Graph Boundary Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces isolated signal graph destruction across micro-frontend boundaries using Svelte 5's $effect.root() and explicit teardown contracts. Prevents zombie subscriptions and detached DOM tree retention when reactive proxies bridge isolated runtime realms into a long-lived host shell. 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: Leaking Cross-Boundary Svelte 5 Runes via Raw Proxies and Missing $effect.root Teardown 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	Leaking Cross-Boundary Svelte 5 Runes via Raw Proxies and Missing $effect.root Teardown	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 wrap out-of-component cross-MFE reactive subscriptions in an explicit $effect.root() scope.

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.