Svelte 5 Runes Reactive Effect Teardown and Boundary Invariant

Enforces strict disposal mechanics and teardown callbacks for root-level and asynchronous $effect executions within dynamic microfrontend architectures. In dynamically unmounted host boundaries, unhandled $effect triggers and nested asynchronous subscriptions bypass automatic component garbage collection, causing catastrophic heap leaks and detached DOM node retention. All asynchronous observables, EventTarget listeners, and polling loops initialized inside $effect blocks must return synchronous teardown functions or execute inside explicit $effect.root wrappers.

--- description: Svelte 5 Runes Reactive Effect Teardown and Boundary Invariant - Enforces strict disposal mechanics and teardown callbacks for root-level and asynchronous $effect executions within dynamic microfrontend architectures. In dynamically unmounted host boundaries, unhandled $effect triggers and nested asynchronous subscriptions bypass automatic component garbage collection, causing catastrophic heap leaks and detached DOM node retention. All asynchronous observables, EventTarget listeners, and polling loops initialized inside $effect blocks must return synchronous teardown functions or execute inside explicit $effect.root wrappers. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-effect-teardown-standard" --- # Svelte 5 Runes Reactive Effect Teardown and Boundary Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Root $effect Subscriptions and Missing Synchronous Teardowns in Dynamic Mounts ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Reactive Effect Teardown Standard. You must mandate strict cleanup invariants for $effect, $effect.pre, and $effect.root orchestrations within microfrontends, SPA micro-apps, and dynamically loaded component boundaries. In Svelte 5, $effect creates reactive tracking contexts that bind to the current component lifecycle or surrounding effect root; failure to supply a cleanup function or properly manage async effect scopes creates uncollectible closure graphs and zombie event listeners when host applications destroy DOM nodes. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous teardown function from any `$effect` or `$effect.pre` block that registers global listeners, message buses, observers, or long-lived intervals. - Engineers MUST NOT invoke asynchronous operations inside `$effect` without binding the resolution to an active, cancellable state flag (e.g., `AbortController` or cancellation token) that aborts on teardown. - Engineers MUST wrap non-component ambient reactive effects with `$effect.root()` when instantiating reactive state outside standard Svelte component lifecycles (e.g., external state stores, microfrontend bridges). - Services MUST manually execute the disposal function returned by `$effect.root()` during microfrontend unmount or module lifecycle deactivation hooks. - Components NEVER rely on Svelte's automatic component teardown to cancel detached asynchronous promises or external global EventTarget subscriptions initiated inside an `$effect` block. ## Bad vs Good Implementations ### Global Event Subscription and Async Data Fetching in Svelte 5 Effect #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The $effect fails to return a teardown function to remove the 'mfe-channel-broadcast' listener from the global window object. Furthermore, the fetch promise resolves after potential component unmount, retaining closures over component reactive scope and writing state to detached component instances. ```typescript // Anti-pattern: Missing return teardown and unhandled async completion leads to heap leak on unmount import { onMount } from 'svelte'; interface MicrofrontendProps { channelId: string; } let { channelId }: MicrofrontendProps = $props(); let payload = $state<string | null>(null); $effect(() => { // Anti-pattern: Global listener without cleanup return window.addEventListener('mfe-channel-broadcast', (event: Event) => { const customEvent = event as CustomEvent<string>; payload = customEvent.detail; }); // Anti-pattern: Async race without AbortController teardown fetch(`/api/channels/${channelId}`) .then(res => res.json()) .then(data => { payload = data.initial; }); }); ``` #### Production Standard (Correct) > **Standard**: The effect leverages AbortController both as a fetch cancellation token and as the listener cleanup vehicle, while returning an explicit synchronous teardown callback that aborts in-flight network calls and removes event listeners immediately upon component destruction. ```typescript // Production-grade: Synchronous teardown paired with AbortController lifecycle cancellation interface MicrofrontendProps { channelId: string; } let { channelId }: MicrofrontendProps = $props(); let payload = $state<string | null>(null); $effect(() => { const controller = new AbortController(); const { signal } = controller; const handleBroadcast = (event: Event): void => { const customEvent = event as CustomEvent<string>; payload = customEvent.detail; }; window.addEventListener('mfe-channel-broadcast', handleBroadcast, { signal }); fetch(`/api/channels/${channelId}`, { signal }) .then(res => res.json()) .then((data: { initial: string }) => { payload = data.initial; }) .catch((err: unknown) => { if (err instanceof DOMException && err.name === 'AbortError') return; console.error('Channel fetch failed', err); }); return () => { controller.abort(); }; }); ``` ### Root-Level Reactive Module Lifecycle in Microfrontend Bridge #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: $effect executed outside component instantiation without $effect.root will throw a runtime error in Svelte 5, or if instantiated during a synthetic context, it escapes lifecycle tracking entirely, resulting in uncollectible DOM references. ```typescript // Anti-pattern: Instantiating ambient $effect outside component tree without $effect.root boundary import { sourceState } from './store.svelte'; export function registerRemoteBridge(domTarget: HTMLElement) { // In Svelte 5, invoking $effect outside component initialization throws or leaks permanently $effect(() => { domTarget.dataset.sync = sourceState.value; }); } ``` #### Production Standard (Correct) > **Standard**: $effect.root explicitly creates a non-component reactive scope. The function returns a BridgeHandle exposing the cleanupRoot teardown, permitting the host microfrontend container to deterministically purge the effect tree upon unmount. ```typescript // Production-grade: Explicit $effect.root isolation and deterministic disposal export import { sourceState } from './store.svelte'; export interface BridgeHandle { dispose: () => void; } export function registerRemoteBridge(domTarget: HTMLElement): BridgeHandle { const cleanupRoot = $effect.root(() => { $effect(() => { const currentValue = sourceState.value; domTarget.dataset.sync = currentValue; return () => { delete domTarget.dataset.sync; }; }); }); return { dispose: () => { cleanupRoot(); } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Effect Teardown and Boundary Invariant

Svelte 5 Runes Reactive Effect Teardown and Boundary Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces strict disposal mechanics and teardown callbacks for root-level and asynchronous $effect executions within dynamic microfrontend architectures. In dynamically unmounted host boundaries, unhandled $effect triggers and nested asynchronous subscriptions bypass automatic component garbage collection, causing catastrophic heap leaks and detached DOM node retention. All asynchronous observables, EventTarget listeners, and polling loops initialized inside $effect blocks must return synchronous teardown functions or execute inside explicit $effect.root wrappers. 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: Dangling Root $effect Subscriptions and Missing Synchronous Teardowns in Dynamic Mounts 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	Dangling Root $effect Subscriptions and Missing Synchronous Teardowns in Dynamic Mounts	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 return a synchronous teardown function from any `$effect` or `$effect.pre` block that registers global listeners, message buses, observers, or long-lived intervals.

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.