Svelte 5 Runes Fine-Grained Reactivity Signal Isolation Guardrail

--- description: Svelte 5 Runes Fine-Grained Reactivity Signal Isolation Guardrail - Enforces strict signal boundary encapsulation for Svelte 5 $state and $derived runes across microfrontend (MFE) and multi-root boundaries. Prohibits leaking reactive proxy references and cross-root signal subscriptions that cause orphan dependency nodes, broken lifecycle garbage collection, and silent memory leaks. 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-runes-signal-isolation-guardrail" --- # Svelte 5 Runes Fine-Grained Reactivity Signal Isolation Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Exposing Raw Svelte 5 Reactive Proxies Across Microfrontend Roots Causing Retained Memory Graph Leaks ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Fine-Grained Reactivity Signal Isolation. In multi-root and microfrontend architectures, raw Svelte 5 signals ($state, $derived) must never cross isolation boundaries. You must enforce that cross-root communication uses serializable snapshots, explicit immutable event channels, or strictly disposed subscription contracts, preventing cross-root reactivity graphs from retaining unmounted microfrontend instances in memory. ## Strict Guidelines - Engineers MUST ALWAYS serialize or snapshot reactive state using $state.snapshot() before exposing data across microfrontend, Web Component, or multi-root host boundaries. - Engineers MUST NOT pass raw $state proxies or $derived signals through global state bridges, CustomEvent detail payloads, or cross-root props. - Engineers MUST NOT establish direct Svelte 5 signal derivations ($derived) against raw signals originating from a separate microfrontend instance or external application root. - Cross-boundary communication MUST utilize decoupled pub/sub primitives (e.g., standard EventTarget, CustomEvents, or serializable message buses) with explicit unmount teardown. - When dynamic signal lifecycles must be created outside standard component trees, engineers MUST wrap them in $effect.root() and invoke the returned cleanup function upon unmounting or boundary destruction. ## Bad vs Good Implementations ### Cross-Boundary State Sharing in Microfrontends #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing the live $state proxy directly creates an uncollected link between the host's reactivity graph and the remote MFE's signal tree. When the remote microfrontend unmounts, the host signal's subscriber set retains references to the remote runtime closures, preventing garbage collection of the entire remote app tree. ```typescript // BAD: Exporting raw reactive proxy to global boundary and deriving across roots // host-store.svelte.ts export const hostSession = $state({ user: { id: 'u123', token: 'secret' } }); // Exposed directly to window or foreign microfrontend (window as any).__SHARED_HOST_SESSION__ = hostSession; // In remote microfrontend component (RemoteApp.svelte) // <script lang="ts"> // const foreignState = (window as any).__SHARED_HOST_SESSION__; // const userName = $derived(foreignState.user.id); // LEAK: foreign signal graph anchors remote root // </script> ``` #### Production Standard (Correct) > **Standard**: The host boundary creates static deep clones using $state.snapshot() and publishes them via an explicit pub/sub mechanism with explicit unsubscription. The remote MFE manages its own local signals, fully decoupling the two reactivity graphs and ensuring complete garbage collection on unmount. ```typescript // GOOD: Encapsulating state with $state.snapshot and an explicit decoupled event contract // host-store.svelte.ts const hostSession = $state({ user: { id: 'u123', token: 'secret' } }); export interface SessionBridge { getSnapshot: () => { user: { id: string; token: string } }; subscribe: (callback: (snapshot: { user: { id: string; token: string } }) => void) => () => void; } const subscribers = new Set<(snapshot: any) => void>(); $effect.root(() => { $effect(() => { const snapshot = $state.snapshot(hostSession); subscribers.forEach((cb) => cb(snapshot)); }); }); export const sessionBridge: SessionBridge = { getSnapshot: () => $state.snapshot(hostSession), subscribe: (cb) => { subscribers.add(cb); return () => subscribers.delete(cb); } }; // In remote microfrontend component (RemoteApp.svelte) // <script lang="ts"> // import { onMount } from 'svelte'; // let remoteSession = $state(sessionBridge.getSnapshot()); // onMount(() => sessionBridge.subscribe((next) => { remoteSession = next; })); // const userName = $derived(remoteSession.user.id); // </script> ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Fine-Grained Reactivity Signal Isolation Guardrail

Svelte 5 Runes Fine-Grained Reactivity Signal Isolation Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict signal boundary encapsulation for Svelte 5 $state and $derived runes across microfrontend (MFE) and multi-root boundaries. Prohibits leaking reactive proxy references and cross-root signal subscriptions that cause orphan dependency nodes, broken lifecycle garbage collection, and silent memory leaks. 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 Microfrontend Roots Causing Retained Memory Graph Leaks 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 Microfrontend Roots Causing Retained Memory Graph Leaks	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 serialize or snapshot reactive state using $state.snapshot() before exposing data across microfrontend, Web Component, or multi-root host boundaries.

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.