Svelte 5 Universal Signal Microfrontend State Federation Standard

--- description: Svelte 5 Universal Signal Microfrontend State Federation Standard - Enforces strict signal boundaries and lifecycle synchronization across federated microfrontend remotes using Svelte 5 universal reactivity ($state, $derived, $effect.root). Prevents cross-runtime signal capture, cyclical batching cascades, and detached DOM memory leaks when microfrontends mount and unmount independently. 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-universal-signal-microfrontend-federation-standard" --- # Svelte 5 Universal Signal Microfrontend State Federation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Raw Svelte 5 Runes Across MFE Host-Remote Boundaries and Capturing Un-isolated Effects ## System Constraints You are a Principal Frontend Architect enforcing industrial-grade microfrontend isolation and cross-boundary signal synchronization using Svelte 5. You must reject any direct cross-MFE binding to raw Svelte 5 runes ($state, $derived) and enforce event-driven or proxy-isolated reactive adapters managed via explicit lifecycle telematic disposers ($effect.root). You must prevent shared mutable signal references across independent runtime bundles, eliminate detached DOM graph references, and prohibit un-batched cross-remote signal broadcast loops. ## Strict Guidelines - Engineers MUST ALWAYS encapsulate cross-MFE shared state behind an explicit event-driven broker (e.g., CustomEvent Bus, Actor Protocol, or Proxy-isolated Federated Signal Bridge) rather than sharing raw $state proxies across module federation boundaries. - Engineers MUST ALWAYS wrap external bridge subscription handlers and cross-boundary reactive tracking inside an explicit `$effect.root` scope within the microfrontend orchestrator to guarantee deterministic disposal upon microfrontend unmounting. - Engineers MUST NOT leak reactive proxy wrappers ($state.raw or deep $state) into shared global objects (e.g., `window.__FEDERATED_STORE__`) that outlive the lifecycle of the host or remote component hierarchy. - Code SHOULD sanitize and clone incoming state snapshots (via structuredClone or JSON serializable DTOs) prior to assigning them to a remote's local Svelte 5 `$state` variable to prevent cross-realm prototype chain pollution. - Services MUST implement transactional deduplication keys or sequence monotonic identifiers on shared signals to prevent bidirectional microfrontend synchronization echo loops. - Components NEVER attach direct `$effect` subscribers to unmanaged host signals without returning a disposal cleanup function that explicitly tears down external boundary event listeners. ## Bad vs Good Implementations ### Cross-MFE State Synchronization Bridge #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Exporting raw $state rune proxies onto the global object allows disparate MFE bundles with potentially different Svelte runtime runtimes to mutate reactive proxies directly. Running untracked effects outside $effect.root causes leaked reactive graph observers and prevents garbage collection when remote containers unmount. ```typescript // BAD: Exposing raw Svelte 5 rune proxy to global window and running top-level side effects without effect root teardown import { $state, $effect } from 'svelte'; interface SharedState { tenantId: string; sessionToken: string; } // Leaking reactive rune instance into global scope across isolated MFE bundles window.__FEDERATED_STATE__ = $state<SharedState>({ tenantId: 'tenant-123', sessionToken: 'xyz-token' }); // Top-level effect causes detached DOM reference retention when remote is unmounted $effect(() => { console.log('Host state mutated:', window.__FEDERATED_STATE__.sessionToken); window.dispatchEvent(new CustomEvent('mfe:sync', { detail: window.__FEDERATED_STATE__ })); }); ``` #### Production Standard (Correct) > **Standard**: The good pattern bounds the reactivity inside the remote microfrontend using $effect.root, clones cross-boundary data transfers to avoid leaking runtime-bound proxy instances, and tracks sequence identifiers to eliminate cyclical echo-storms between remotes. ```typescript // GOOD: Immutable DTO exchange, transactional sequence tracking, and $effect.root lifecycle management import { untrack } from 'svelte'; interface SessionDTO { readonly tenantId: string; readonly sessionToken: string; readonly seq: number; } export class FederatedSignalBridge { private state = $state<SessionDTO>({ tenantId: '', sessionToken: '', seq: 0 }); private teardownRoot: (() => void) | null = null; constructor(private readonly channelName: string) {} public mount(initial: SessionDTO): void { this.state = { ...initial }; // Establish explicit lifecycle root isolated from host reactivity graph this.teardownRoot = $effect.root(() => { const handleRemoteUpdate = (event: Event) => { const customEvent = event as CustomEvent<SessionDTO>; const incoming = customEvent.detail; // Loop prevention via monotonic sequence evaluation if (incoming.seq > untrack(() => this.state.seq)) { this.state = structuredClone(incoming); } }; window.addEventListener(this.channelName, handleRemoteUpdate); return () => { window.removeEventListener(this.channelName, handleRemoteUpdate); }; }); } public get current(): SessionDTO { return this.state; } public publish(next: Omit<SessionDTO, 'seq'>): void { const payload: SessionDTO = { ...structuredClone(next), seq: this.state.seq + 1 }; this.state = payload; window.dispatchEvent(new CustomEvent<SessionDTO>(this.channelName, { detail: payload })); } public unmount(): void { if (this.teardownRoot) { this.teardownRoot(); this.teardownRoot = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Universal Signal Microfrontend State Federation Standard

Svelte 5 Universal Signal Microfrontend State Federation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict signal boundaries and lifecycle synchronization across federated microfrontend remotes using Svelte 5 universal reactivity ($state, $derived, $effect.root). Prevents cross-runtime signal capture, cyclical batching cascades, and detached DOM memory leaks when microfrontends mount and unmount independently. 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 Raw Svelte 5 Runes Across MFE Host-Remote Boundaries and Capturing Un-isolated Effects 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 Raw Svelte 5 Runes Across MFE Host-Remote Boundaries and Capturing Un-isolated Effects	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 encapsulate cross-MFE shared state behind an explicit event-driven broker (e.g., CustomEvent Bus, Actor Protocol, or Proxy-isolated Federated Signal Bridge) rather than sharing raw $state proxies across module federation boundaries.

Engineers MUST ALWAYS encapsulate cross-MFE shared state behind an explicit event-driven broker (e.g., CustomEvent Bus, Actor Protocol, or Proxy-isolated Federated Signal Bridge) rather than sharing raw $state proxies across module federation 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.