Svelte 5 Runes Signal-DOM Deterministic Teardown & Lifecycle Reconciliation

--- description: Svelte 5 Runes Signal-DOM Deterministic Teardown & Lifecycle Reconciliation - Enforces deterministic teardown of fine-grained reactive $effect graphs and asynchronous execution chains during rapid client-side transitions in Svelte 5. Prevents detached DOM nodes, stale signal emissions, and catastrophic memory leaks caused by lingering async closures capturing component runes across route unmount boundaries. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-effect-teardown-reconciliation" --- # Svelte 5 Runes Signal-DOM Deterministic Teardown & Lifecycle Reconciliation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Async Runes Closures Retaining Detached DOM and Uncollected Reactive Graphs ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Signal-DOM State Reconciliation Standard. You must mandate that fine-grained reactive signals ($state, $derived, $effect) adhere to strict deterministic teardown lifecycles. Ensure that no asynchronous operation, DOM subscription, or dynamic effect root outlives its owning component lifecycle, preventing retained memory contexts and invalid post-unmount signal updates. ## Strict Guidelines - Engineers MUST ALWAYS return an explicit cleanup function from `$effect` whenever setting up event listeners, timers, external subscriptions, or active DOM mutations. - Engineers MUST ALWAYS wire an `AbortController` signal to asynchronous invocations inside `$effect` to abort unresolved promises upon component destruction or re-execution. - Engineers MUST NOT execute state mutations or side effects inside `$derived` or `$derived.by` runes; derived expressions must remain strictly pure signal projections. - Engineers MUST NOT mutate `$state` runes across an un-awaited asynchronous boundary without verifying whether the enclosing component context remains mounted. - Components NEVER instantiate detached subgraphs via `$effect.root` without capturing and invoking its disposal callback in an enclosing lifecycle handler (e.g., `onDestroy` or parent `$effect` teardown). - Code SHOULD leverage `untrack` when reading dynamic signals inside an `$effect` if changes to those specific signals should not trigger effect invalidation and execution. ## Bad vs Good Implementations ### Asynchronous Effect Reconciliation with AbortController #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The asynchronous fetch does not cancel when `userId` changes rapidly or when the component unmounts. The completed promise captures the signal and component context in its closure, attempting state mutations on detached nodes and retaining the full component memory graph. ```typescript // Bad: Unmanaged async closure inside $effect // Retains stale closure, updates state after unmount, leaks detached DOM let userId = $state('user-1'); let profile = $state<Profile | null>(null); $effect(() => { fetch(`/api/users/${userId}`) .then(res => res.json()) .then(data => { // Post-unmount write to signal causes memory leak and state desync profile = data; }); }); ``` #### Production Standard (Correct) > **Standard**: Returning an explicit teardown callback reliably aborts the in-flight network request when the rune dependencies invalidate or when the component unmounts. Stale responses are discarded without mutating signal states or retaining the component memory context. ```typescript // Good: Deterministic teardown with AbortController and cleanup function let userId = $state('user-1'); let profile = $state<Profile | null>(null); $effect(() => { const controller = new AbortController(); const { signal } = controller; async function loadProfile() { try { const res = await fetch(`/api/users/${userId}`, { signal }); if (!signal.aborted) { profile = await res.json(); } } catch (err: unknown) { if ((err as Error).name !== 'AbortError') { throw err; } } } loadProfile(); return () => { controller.abort(); }; }); ``` ### Scoped Reactive Root Lifecycle Management in Shared Stores #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling `$effect.root` without retaining and exposing the teardown function permanently detaches the reactive graph from the Svelte component tree. Instances created during client route transitions will leak indefinitely in the global signal registry. ```typescript // Bad: Creating an unmanaged dynamic effect root // Leads to unbounded signal listener accumulation across route transitions import { $effect } from 'svelte'; export class ViewportTracker { width = $state(0); constructor() { $effect.root(() => { $effect(() => { const handleResize = () => { this.width = window.innerWidth; }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }); }); } } ``` #### Production Standard (Correct) > **Standard**: The dynamic effect graph's disposal handle is stored and explicitly invoked via `destroy()`, ensuring that all internal signal dependencies and window event listeners are completely dereferenced and garbage collected. ```typescript // Good: Deterministic lifecycle-bound $effect.root disposal import { onDestroy } from 'svelte'; export class ViewportTracker { width = $state(0); private cleanup: () => void; constructor() { this.cleanup = $effect.root(() => { $effect(() => { const handleResize = () => { this.width = window.innerWidth; }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }); }); } destroy() { this.cleanup(); } } // Consuming Svelte 5 component const tracker = new ViewportTracker(); onDestroy(() => tracker.destroy()); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Signal-DOM Deterministic Teardown & Lifecycle Reconciliation

Svelte 5 Runes Signal-DOM Deterministic Teardown & Lifecycle Reconciliation defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic teardown of fine-grained reactive $effect graphs and asynchronous execution chains during rapid client-side transitions in Svelte 5. Prevents detached DOM nodes, stale signal emissions, and catastrophic memory leaks caused by lingering async closures capturing component runes across route unmount boundaries. 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 Async Runes Closures Retaining Detached DOM and Uncollected Reactive 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	Dangling Async Runes Closures Retaining Detached DOM and Uncollected Reactive 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 return an explicit cleanup function from `$effect` whenever setting up event listeners, timers, external subscriptions, or active DOM mutations.

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.