Svelte 5 Runes Cross-Island Signal Boundary & Teardown Enforcement

--- description: Svelte 5 Runes Cross-Island Signal Boundary & Teardown Enforcement - Enforces deterministic lifecycle and memory boundary isolation when sharing Svelte 5 runes ($state, $derived, $effect.root) across heterogeneous micro-frontend islands. Guarantees that fine-grained reactive subscriptions and detached signal dependency graphs are explicitly disposed during island unmounting to prevent cross-framework 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-cross-island-signal-boundary-enforcement" --- # Svelte 5 Runes Cross-Island Signal Boundary & Teardown Enforcement > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Cross-Island Signal Subscriptions via Undisposed $effect.root Trees ## System Constraints You are a Principal Software Architect enforcing rigorous memory safety and lifecycle boundaries for Svelte 5 Runes in cross-island and micro-frontend architectures. Svelte 5's reactivity is push-pull and graph-based; creating signal subscriptions outside component lifecycles or passing reactive primitives across island boundaries without an explicit root disposal mechanism causes permanent references in the global signal tree. Mandate deterministic teardown with $effect.root, strict subscriber detachment upon micro-frontend dismount, and encapsulated unsubscription tokens. ## Strict Guidelines - Engineers MUST ALWAYS capture and return the disposal function of `$effect.root()` when managing cross-island reactive synchronizers in `.svelte.ts` modules. - Engineers MUST NOT expose raw Svelte 5 `$state` proxies or signal-dependent accessor closures directly to foreign micro-frontend consumers without a disposal contract. - Micro-frontend mount functions MUST register all `$effect.root` teardown callbacks with the host application's unmount/dismount lifecycle hook. - Code SHOULD implement `Symbol.dispose` (or explicit `dispose()`/`destroy()` methods) on any cross-island reactive adapter to integrate with ES explicit resource management. - Services MUST ensure that cross-island communication bridges converting DOM events, CustomEvents, or global bus payloads to Svelte runes sever all listeners upon island destruction. ## Bad vs Good Implementations ### Cross-Island Signal Bridge with Effect Root Lifecycle Management #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: This pattern creates an unmanaged reactive link between the host store and the Svelte 5 signal. When the micro-frontend island unmounts, the external store maintains an active reference to the signal setter callback, preventing the island's memory space and signal graph from being garbage-collected. ```typescript // In leak-prone bridge: src/bridges/islandBridge.svelte.ts import { $state, $effect } from 'svelte/runes'; // Leaks: Exposed raw signal state across micro-frontend boundaries // Without effect root, subscribers remain attached permanently to the host event target export function createIslandBridge(externalStore: { subscribe: (cb: (v: any) => void) => () => void }) { let sharedData = $state({ value: null }); // BUG: Leaked global subscription, no disposal mechanism returned to host MFE externalStore.subscribe((val) => { sharedData.value = val; }); return { get data() { return sharedData.value; } }; } ``` #### Production Standard (Correct) > **Standard**: The compliant implementation encapsulates reactive signal synchronization within `$effect.root()`, combines both the external store unsubscribe and the Svelte signal graph root disposal into a deterministic teardown function, and exposes both `Symbol.dispose` and `destroy()` for the micro-frontend host unmount lifecycle. ```typescript // In robust bridge: src/bridges/islandBridge.svelte.ts export interface IslandBridge<T> { readonly data: T | null; [Symbol.dispose](): void; destroy(): void; } export function createIslandBridge<T>( externalStore: { subscribe: (cb: (v: T) => void) => () => void } ): IslandBridge<T> { let cleanup: (() => void) | null = null; let sharedData = $state<{ value: T | null }>({ value: null }); // Isolate signal tracking within an explicit root const disposeRoot = $effect.root(() => { const unsubscribeExternal = externalStore.subscribe((val) => { sharedData.value = val; }); cleanup = () => { unsubscribeExternal(); }; }); const teardown = () => { if (cleanup) { cleanup(); cleanup = null; } disposeRoot(); }; return { get data() { return sharedData.value; }, [Symbol.dispose]() { teardown(); }, destroy() { teardown(); } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Cross-Island Signal Boundary & Teardown Enforcement

Svelte 5 Runes Cross-Island Signal Boundary & Teardown Enforcement defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic lifecycle and memory boundary isolation when sharing Svelte 5 runes ($state, $derived, $effect.root) across heterogeneous micro-frontend islands. Guarantees that fine-grained reactive subscriptions and detached signal dependency graphs are explicitly disposed during island unmounting to prevent cross-framework 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: Unbounded Cross-Island Signal Subscriptions via Undisposed $effect.root Trees 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	Unbounded Cross-Island Signal Subscriptions via Undisposed $effect.root Trees	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 capture and return the disposal function of `$effect.root()` when managing cross-island reactive synchronizers in `.svelte.ts` modules.

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.