Svelte 5 Runes Dynamic Graph Teardown and Root Boundary Standard

--- description: Svelte 5 Runes Dynamic Graph Teardown and Root Boundary Standard - Mandates deterministic lifecycle boundary isolation and teardown functions for nested $effect, $derived, and dynamic signal graphs in long-lived single-page applications and microfrontends. Prevents subscriber retention leaks across microfrontend boundaries by enforcing $effect.root encapsulation, explicit signal detachment, and disciplined use of untrack(). globs: src/**/*.{svelte,svelte.ts,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-lifecycle-teardown-standard" --- # Svelte 5 Runes Dynamic Graph Teardown and Root Boundary Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Svelte 5 Reactive Subscriptions Across Microfrontend Mounts via Orphaned $effect Graphs ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Dynamic Reactive Graph Lifecycle Teardown Standard. Svelte 5 replaces stores with signal-based runes ($state, $derived, $effect). In long-lived single-page microfrontends, reactive computations instantiated outside component lifecycles or inside asynchronous/dynamic orchestrators do not automatically collect garbage when host nodes detach. You must mandate strict $effect.root wrappers, explicit teardown registrations, and deliberate untrack() usage to ensure zero memory accumulation across microfrontend mount and unmount cycles. ## Strict Guidelines - Engineers MUST ALWAYS wrap reactive graphs created outside a component initialization tree (e.g., services, external controllers, microfrontend bootstrap scripts) in an `$effect.root()` boundary. - Engineers MUST ALWAYS invoke and clean up the disposal callback returned by `$effect.root()` during microfrontend unmount or service destruction. - Engineers MUST NOT invoke asynchronous mutations that spawn untracked effects without capturing explicit disposal handles. - Code MUST ALWAYS return a deterministic cleanup function from any `$effect` that attaches event listeners, creates DOM observers, starts timers, or subscribes to external event buses. - Code MUST use `untrack()` whenever reading dynamic reactive dependencies inside an `$effect` or `$derived` that should not establish a continuous dependency edge. - Services MUST NEVER maintain active references to reactive state instances ($state) of unmounted microfrontends within host-level singleton registries. - Components NEVER use `$effect.pre` to execute external mutations or side-effects that require asynchronous cleanup, as unmount during pre-render can leak pending microtasks. ## Bad vs Good Implementations ### Microfrontend Dynamic Service Boundary with $effect.root Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Instantiating an `$effect` inside a service constructor without an `$effect.root` boundary binds the effect to whatever ambient reactive context exists (or fails completely outside components). Furthermore, failing to return a teardown function from `$effect` leaks the `metric-tick` listener, preventing the `MetricStreamBridge` and all its captured reactive graph nodes from being garbage collected when the microfrontend is dismantled. ```typescript import { $state, $effect } from 'svelte'; // Leaks: Singleton/Host-level service spawns $effect outside component tree without cleanup boundary export class MetricStreamBridge { private count = $state(0); constructor(private eventBus: EventTarget) { // Anti-pattern: Naked effect created inside dynamic service // Will never be garbage collected when microfrontend unmounts $effect(() => { const handler = (e: Event) => { this.count = (e as CustomEvent).detail.value; }; this.eventBus.addEventListener('metric-tick', handler); // Leaked listener: returns no cleanup callback, stays alive forever }); } public increment(): void { this.count++; } } ``` #### Production Standard (Correct) > **Standard**: Wraps the service's reactive logic inside `$effect.root()`, which tracks all nested signals and effects. It returns an explicit teardown function that deregisters the DOM event listener. Exposing a public `destroy()` method allows the host microfrontend orchestrator to cleanly dispose of the entire reactive subgraph upon unmounting, preventing memory leaks. ```typescript import { untrack } from 'svelte'; export class MetricStreamBridge { public count = $state(0); private cleanupRoot: (() => void) | null = null; constructor(private eventBus: EventTarget) { // Encapsulate graph lifecycle inside an isolated effect root this.cleanupRoot = $effect.root(() => { $effect(() => { const handler = (e: Event) => { // State mutation isolated within effect boundary this.count = (e as CustomEvent).detail.value; }; this.eventBus.addEventListener('metric-tick', handler); // Explicit teardown returned from inner effect return () => { this.eventBus.removeEventListener('metric-tick', handler); }; }); // Additional derived calculations decoupled via untrack when reading non-dependent metrics $effect(() => { const current = this.count; const initialRef = untrack(() => document.title); console.debug(`[MetricStream] Count: ${current}, Initial Host: ${initialRef}`); }); }); } public destroy(): void { // Deterministic un-tracking and teardown of the entire reactive graph if (this.cleanupRoot) { this.cleanupRoot(); this.cleanupRoot = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Dynamic Graph Teardown and Root Boundary Standard

Svelte 5 Runes Dynamic Graph Teardown and Root Boundary Standard defines an industrial-grade behavioral standard for frontend engineering. Mandates deterministic lifecycle boundary isolation and teardown functions for nested $effect, $derived, and dynamic signal graphs in long-lived single-page applications and microfrontends. Prevents subscriber retention leaks across microfrontend boundaries by enforcing $effect.root encapsulation, explicit signal detachment, and disciplined use of untrack(). 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 Svelte 5 Reactive Subscriptions Across Microfrontend Mounts via Orphaned $effect Graphs 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 Svelte 5 Reactive Subscriptions Across Microfrontend Mounts via Orphaned $effect Graphs	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 wrap reactive graphs created outside a component initialization tree (e.g., services, external controllers, microfrontend bootstrap scripts) in an `$effect.root()` boundary.

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.