Svelte 5 Runes Signal Graph Disposal Standard

--- description: Svelte 5 Runes Signal Graph Disposal Standard - Enforces strict lifecycle-bound cleanup for Svelte 5 runes effects and untracked external event subscriptions within high-frequency client transitions. Prevents detached component DOM subtrees from retaining stale reactive dependencies and inducing catastrophic memory leaks across SPA navigation cycles. 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-signal-graph-disposal-standard" --- # Svelte 5 Runes Signal Graph Disposal Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Escaping Effect Roots and Uncleaned External Event Listeners Retaining Detached Svelte 5 Signal Subgraphs ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Signal Graph Disposal Standard. In Svelte 5, reactive state is powered by fine-grained signals. $effect blocks instantiate signal listeners directly tied to the current component hierarchy. Instantiating effects via $effect.root or binding long-lived observers (window, document, WebSocket, ResizeObserver) inside $effect without returning an explicit teardown function causes the runtime signal graph to hold permanent heap references to unmounted DOM subtrees. You must mandate strict teardown semantics, prevent raw root-level signal leaks outside component scopes, and guarantee deterministic graph disposal. ## Strict Guidelines - Engineers MUST ALWAYS return an explicit teardown/cleanup function from any $effect rune that establishes listeners, timers, sockets, or DOM observers. - Engineers MUST ALWAYS explicitly invoke the cleanup disposer returned by $effect.root() when managing signals outside of component rendering lifecycles (e.g., custom state classes, service singletons). - Engineers MUST NOT execute side-effectful external subscriptions directly inside $derived expressions or standard module-level state initialization. - Components NEVER store direct, un-isolated window/document event listeners without scoping them within $effect returns or Svelte's <svelte:window> declarative bindings. - Code SHOULD leverage $effect.pre exclusively for pre-DOM-render mutations and avoid long-lived reactive listeners within pre-render lifecycles. ## Bad vs Good Implementations ### Unbounded Event Listener and Window Subscription Inside Component $effect #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Without returning a teardown closure, the global window holds a live reference to `handleResize`, which retains the enclosing component scope and prevents garbage collection of the fine-grained signal nodes upon SPA route transitions. ```typescript // Bad: Effect attaches external DOM listeners without a disposal return. // When the component unmounts, the closure over `telemetryState` keeps the entire component instance // and its signal subgraph pinned in memory. import { telemetryState } from './telemetry.svelte'; $effect(() => { const handleResize = () => { telemetryState.viewportWidth = window.innerWidth; }; window.addEventListener('resize', handleResize); // MISSING: Return cleanup callback }); ``` #### Production Standard (Correct) > **Standard**: Returning the cleanup function ensures Svelte 5 executes the teardown whenever dependencies re-evaluate or the component unmounts, severing the link between the external event target and the signal graph. ```typescript // Good: Returns an idempotent teardown callback and encapsulates dynamic binding. import { telemetryState } from './telemetry.svelte'; $effect(() => { const handleResize = () => { telemetryState.viewportWidth = window.innerWidth; }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }); ``` ### Managing Signal Lifecycles in Global / Shared Service Classes via $effect.root #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The disposer returned by $effect.root() is discarded. Any inner effects remain active in the signal registry indefinitely, leaking CPU and memory whenever instances of ViewportTracker are instantiated dynamically. ```typescript // Bad: Creating an unbounded effect root in a shared service without retaining the disposer. import { untrack } from 'svelte'; export class ViewportTracker { width = $state(0); constructor() { // $effect.root creates an isolated reactive tree that outlives component lifecycles $effect.root(() => { $effect(() => { // Unmanaged long-lived subscription this.width = window.innerWidth; }); }); } } ``` #### Production Standard (Correct) > **Standard**: Retaining the disposal callback from $effect.root allows consumers to explicitly destroy the reactive context, cleanly severing all child signals and observers when the service reaches the end of its lifecycle. ```typescript // Good: Capturing and exposing the teardown handle for deterministic graph disposal. export class ViewportTracker { width = $state(0); private cleanup: () => void; constructor() { this.cleanup = $effect.root(() => { $effect(() => { const onResize = () => { this.width = window.innerWidth; }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); }); } public destroy(): void { this.cleanup(); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Signal Graph Disposal Standard

Svelte 5 Runes Signal Graph Disposal Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict lifecycle-bound cleanup for Svelte 5 runes effects and untracked external event subscriptions within high-frequency client transitions. Prevents detached component DOM subtrees from retaining stale reactive dependencies and inducing catastrophic memory leaks across SPA navigation 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: Escaping Effect Roots and Uncleaned External Event Listeners Retaining Detached Svelte 5 Signal Subgraphs 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	Escaping Effect Roots and Uncleaned External Event Listeners Retaining Detached Svelte 5 Signal Subgraphs	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 teardown/cleanup function from any $effect rune that establishes listeners, timers, sockets, or DOM observers.

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.