Svelte 5 Runes $effect.root Scope Disposal Invariant in Microfrontend Shells

--- description: Svelte 5 Runes $effect.root Scope Disposal Invariant in Microfrontend Shells - Microfrontend hosts and dynamic adapters initializing Svelte 5 runtimes outside standard component hierarchies MUST encapsulate all manual reactive contexts within `$effect.root` and bind the returned teardown closure directly to the shell's unmount lifecycle. Failing to invoke root disposal locks signal dependency graphs into memory, producing zombie reactive triggers, event loop bloat, and unbounded heap growth during rapid mount/unmount cycles. globs: src/**/orchestrator/**/*.{ts,js}, src/**/microfrontend/**/*.{ts,js,svelte}, src/**/adapters/**/*.{ts,js}, src/**/mounting/**/*.{ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-effect-root-microfrontend-disposal-invariant" --- # Svelte 5 Runes $effect.root Scope Disposal Invariant in Microfrontend Shells > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling $effect.root Allocations and Uncollected Reactive Contexts in Dynamic Shell Adapters ## System Constraints You are a Principal Software Architect enforcing deterministic reactive lifecycle boundaries in Svelte 5 microfrontend architectures. Svelte 5 replaces legacy component instances with granular runes-based reactive graphs. When orchestrating dynamic micro-apps or decoupled state bridges outside standard Svelte component trees, engineers MUST wrap non-component reactive logic in `$effect.root()` and strictly capture, preserve, and invoke the returned teardown function upon micro-app unmount. ## Strict Guidelines - Engineers MUST ALWAYS capture the teardown callback returned by `$effect.root()` into an explicit lifecycle registry or composite disposables token. - Engineers MUST synchronously invoke the captured `$effect.root` disposal closure before or during the micro-app's unmount phase. - Components and orchestrators NEVER instantiate bare `$effect` runes inside ambient or imperative utility functions without an enclosing `$effect.root` or active component initialization context. - Adapters MUST ensure that `unmount(appInstance)` and the associated `$effect.root()` teardowns are wrapped in strict `try...finally` blocks to guarantee cleanup even if DOM removal fails. - State bridges and cross-app communication buses MUST NOT retain references to reactive signal getters across mount/unmount boundaries. - Microfrontend shells SHOULD verify the disposal of `$effect.root` instances via unit/integration tests asserting zero active subscriber leaks on synthetic re-mount bursts. ## Bad vs Good Implementations ### Decoupled Shell State Bridge Mounting and Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The `$effect.root` return value (the teardown function) is completely ignored. When `destroy()` is called, only the Svelte component tree is unmounted, leaving the root effect scope alive in the global runtime graph. This results in zombie subscriptions, duplicate side-effects on subsequent mounts, and a persistent DOM memory leak. ```typescript import { mount, unmount } from 'svelte'; import MicroApp from './MicroApp.svelte'; import { shellEventBus } from './bus'; export function mountMicrofrontend(target: HTMLElement) { // Anti-pattern: Bare $effect.root without teardown capture $effect.root(() => { $effect(() => { const unsubscribe = shellEventBus.subscribe('theme-change', (theme) => { target.dataset.theme = theme; }); return () => unsubscribe(); }); }); const app = mount(MicroApp, { target }); return { destroy() { // FATAL: The $effect.root is orphaned and continues listening to shellEventBus, // causing phantom reactivity and preventing target element GC. unmount(app); } }; } ``` #### Production Standard (Correct) > **Standard**: The teardown function returned by `$effect.root` is explicitly captured in `disposeRoot` and executed inside a `finally` block during `destroy()`. This completely detaches all signal subscriptions, terminates inner `$effect` executions, and ensures garbage collection across dynamic microfrontend mount cycles. ```typescript import { mount, unmount } from 'svelte'; import MicroApp from './MicroApp.svelte'; import { shellEventBus } from './bus'; export interface MicrofrontendHandle { destroy: () => void; } export function mountMicrofrontend(target: HTMLElement): MicrofrontendHandle { let disposeRoot: (() => void) | null = null; // Invariant: Capture teardown handle returned by $effect.root disposeRoot = $effect.root(() => { $effect(() => { const unsubscribe = shellEventBus.subscribe('theme-change', (theme) => { target.dataset.theme = theme; }); return () => unsubscribe(); }); }); const app = mount(MicroApp, { target }); return { destroy: () => { try { unmount(app); } finally { // Invariant: Guaranteed deterministic cleanup in finally block if (disposeRoot) { disposeRoot(); disposeRoot = null; } } } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes $effect.root Scope Disposal Invariant in Microfrontend Shells

Svelte 5 Runes $effect.root Scope Disposal Invariant in Microfrontend Shells defines an industrial-grade behavioral standard for frontend engineering. Microfrontend hosts and dynamic adapters initializing Svelte 5 runtimes outside standard component hierarchies MUST encapsulate all manual reactive contexts within `$effect.root` and bind the returned teardown closure directly to the shell's unmount lifecycle. Failing to invoke root disposal locks signal dependency graphs into memory, producing zombie reactive triggers, event loop bloat, and unbounded heap growth during rapid mount/unmount cycles. 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 $effect.root Allocations and Uncollected Reactive Contexts in Dynamic Shell Adapters 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 $effect.root Allocations and Uncollected Reactive Contexts in Dynamic Shell Adapters	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 the teardown callback returned by `$effect.root()` into an explicit lifecycle registry or composite disposables token.

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.