Svelte 5 Runes Effect Root Lifecycle Invariant in Micro-Frontends

--- description: Svelte 5 Runes Effect Root Lifecycle Invariant in Micro-Frontends - Enforces deterministic unmounting of Svelte 5 rune trees embedded in host shell micro-frontend architectures via explicit $effect.root cleanup invocations. Without wrapping imperative programmatic mount calls in $effect.root or retaining the disposal function for teardown, detached DOM trees, orphaned reactive signals, and memory leaks persist indefinitely across route switches. globs: src/**/*.{ts,js,svelte} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-effect-root-microfrontend-cleanup-invariant" --- # Svelte 5 Runes Effect Root Lifecycle Invariant in Micro-Frontends > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Uncontained Imperative Mount and Unmanaged Runes Scope in Micro-Frontend Wrappers ## System Constraints You are a Principal Software Architect enforcing runtime lifecycle invariants for Svelte 5 Micro-Frontends. Your directive is to guarantee that dynamic mount operations invoked outside of standard Svelte component templates execute strictly within explicit $effect.root contexts and expose complete disposal semantics on unmount cycles to eliminate reactive memory leaks. ## Strict Guidelines - Engineers MUST ALWAYS instantiate imperative Svelte 5 micro-frontend entry points inside an explicit '$effect.root(() => { ... })' scope. - Engineers MUST NOT discard or ignore the teardown function returned by '$effect.root()', and MUST expose it through the micro-frontend unmount contract. - Wrappers and adapter components MUST invoke both 'unmount(instance)' and the '$effect.root' disposal callback during host teardown cycles. - Dynamic host bridges MUST verify cleanup invocation in 'beforeUnmount' or 'disconnectedCallback' to avoid retaining detached DOM nodes and signal dependency graphs. - Engineers MUST NEVER instantiate reactive runes ($state, $effect) in an unmanaged global module scope without an active effect root supervisor. ## Bad vs Good Implementations ### Imperative Svelte 5 Micro-Frontend Mount and Teardown Lifecycle #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling mount() directly without $effect.root outside of an existing component tree creates ambient reactive scopes that are not guaranteed to release subscribers and internal signals upon component unmount, causing catastrophic memory leaks across repeated micro-frontend loads. ```typescript import { mount, unmount } from 'svelte'; import MicroFrontendApp from './MicroFrontendApp.svelte'; export class SvelteMfeBridge { private instance: ReturnType<typeof mount> | null = null; public mount(container: HTMLElement, props: Record<string, unknown>): void { // Anti-pattern: mounting imperatively outside $effect.root. // Reactive runes, nested $effect loops, and dynamic signals // created internally are not tracked by an isolated root scope. this.instance = mount(MicroFrontendApp, { target: container, props }); } public unmount(): void { if (this.instance) { unmount(this.instance); this.instance = null; // Detached DOM references and nested ambient reactive runes // leak into host context without root scope disposal. } } } ``` #### Production Standard (Correct) > **Standard**: Encapsulating the imperative mount call inside $effect.root captures all reactive subscribers, nested effects, and DOM elements in an isolated lifecycle context. Invoking the returned disposal function guarantees deterministic cleanup of both component instances and reactive graphs. ```typescript import { mount, unmount } from 'svelte'; import MicroFrontendApp from './MicroFrontendApp.svelte'; export interface MicroFrontendLifecycle { mount(container: HTMLElement, props: Record<string, unknown>): void; unmount(): void; } export class SvelteMfeBridge implements MicroFrontendLifecycle { private instance: ReturnType<typeof mount> | null = null; private cleanupRoot: (() => void) | null = null; public mount(container: HTMLElement, props: Record<string, unknown>): void { // Invariant: Wrap imperative mount in $effect.root to enforce isolated reactivity scope this.cleanupRoot = $effect.root(() => { this.instance = mount(MicroFrontendApp, { target: container, props }); return () => { if (this.instance) { unmount(this.instance); this.instance = null; } }; }); } public unmount(): void { // Invariant: Invoking cleanupRoot executes the inner disposal and tears down all runes if (this.cleanupRoot) { this.cleanupRoot(); this.cleanupRoot = null; this.instance = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Effect Root Lifecycle Invariant in Micro-Frontends

Svelte 5 Runes Effect Root Lifecycle Invariant in Micro-Frontends defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic unmounting of Svelte 5 rune trees embedded in host shell micro-frontend architectures via explicit $effect.root cleanup invocations. Without wrapping imperative programmatic mount calls in $effect.root or retaining the disposal function for teardown, detached DOM trees, orphaned reactive signals, and memory leaks persist indefinitely across route switches. 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: Uncontained Imperative Mount and Unmanaged Runes Scope in Micro-Frontend Wrappers 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	Uncontained Imperative Mount and Unmanaged Runes Scope in Micro-Frontend Wrappers	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 instantiate imperative Svelte 5 micro-frontend entry points inside an explicit '$effect.root(() => { ... })' scope.

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.