Svelte 5 Runes Deep Effect Resource Disposal Pattern

--- description: Svelte 5 Runes Deep Effect Resource Disposal Pattern - Enforces synchronous return-based cleanup contracts and AbortController scoping inside Svelte 5 `$effect` and `$effect.root` runes. Eliminates orphaned subscriptions, memory leaks, and cross-boundary event pollutions in long-lived isomorphic micro-frontends undergoing dynamic mounting cycles. Prevents asynchronous unhandled teardowns across complex signal trees. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-deep-effect-resource-disposal-pattern" --- # Svelte 5 Runes Deep Effect Resource Disposal Pattern > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Subscriptions and Asynchronous Void Cleanup in Svelte 5 $effect Blocks ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Runes Deep Effect Resource Disposal Pattern. In Svelte 5, effects (`$effect`, `$effect.pre`, `$effect.root`) establish execution boundaries whose teardowns must execute synchronously via returned cleanup functions. You must strictly forbid passing async functions directly to `$effect`, mandate `AbortController` signals for all external event streams/promises, and ensure non-Svelte external subscriptions instantiated within effect boundaries are completely dereferenced and destroyed upon component unmount or signal invalidation. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous teardown function `() => void` directly from `$effect` and `$effect.pre` whenever asynchronous tasks, event listeners, or reactive subscriptions are established. - Engineers MUST NOT pass an async arrow function directly to `$effect(() => { ... })` because Svelte expects a synchronous cleanup function return value, not a Promise. - Engineers MUST instantiate an `AbortController` at the top of the effect scope to signal cancellation to all fetch calls, intervals, and observers inside asynchronous child closures. - Engineers MUST encapsulate external or dynamic effect hierarchies created outside standard component lifecycle bounds inside `$effect.root` and manually invoke its returned cleanup function during boundary disposal. - Code SHOULD prefer deriving state using `$derived` or `$derived.by` instead of instantiating state synchronizations inside `$effect` with manual teardowns. - Components NEVER store external unsubscribe functions in unbound outer variables without pairing them with deterministic invocation in the effect teardown or `onDestroy` equivalent. ## Bad vs Good Implementations ### Async Task and Event Listener Teardown inside $effect #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring `$effect(async () => ...)` returns a Promise that resolves to the teardown function instead of returning the teardown function synchronously. Svelte 5 runtime drops the returned cleanup function, causing orphaned WebSocket connections and memory leaks during route changes or prop updates in micro-frontends. ```typescript import { untrack } from 'svelte'; interface StreamProps { endpoint: string; onData: (payload: unknown) => void; } // ANTI-PATTERN: Passing async callback directly into $effect loses the teardown contract export function setupTelemetryStream(props: StreamProps) { $effect(async () => { const ws = new WebSocket(props.endpoint); ws.onmessage = (event) => { props.onData(JSON.parse(event.data)); }; // Returning a cleanup inside an async function returns a Promise<() => void>, // which Svelte ignores completely, causing a perpetual leak. return () => { ws.close(); }; }); } ``` #### Production Standard (Correct) > **Standard**: The effect callback is strictly synchronous and returns a teardown function directly to the runtime. It binds WebSocket teardown and an AbortController to cleanly cancel async actions and detach event listeners immediately when dependencies change or the component unmounts. ```typescript import { untrack } from 'svelte'; interface StreamProps { endpoint: string; onData: (payload: unknown) => void; } // PRODUCTION INVARIANT: Synchronous effect body with scoped AbortController teardown export function setupTelemetryStream(props: StreamProps) { $effect(() => { const controller = new AbortController(); const { signal } = controller; const ws = new WebSocket(props.endpoint); const handleMessage = (event: MessageEvent) => { if (!signal.aborted) { props.onData(JSON.parse(event.data)); } }; ws.addEventListener('message', handleMessage, { signal }); // Synchronous deterministic disposal returned directly to Svelte runtime return () => { controller.abort(); ws.removeEventListener('message', handleMessage); if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) { ws.close(); } }; }); } ``` ### Manual Boundary Isolation using $effect.root #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling `$effect` inside arbitrary classes or outside the component initialization lifecycle without `$effect.root` will attach to the parent component context (if active) or fail, resulting in uncontrolled lifecycles and orphaned subscriptions when the class instance is destroyed. ```typescript // ANTI-PATTERN: Instantiating nested untracked effect in shared service without root disposal boundary import { customStore } from './external-store'; export class DynamicPluginManager { private state = $state({ active: false }); public mountPlugin() { // $effect called outside component tree without root wrapper leaks when plugin unloads $effect(() => { const unsubscribe = customStore.subscribe((val) => { this.state.active = val.isActive; }); return () => unsubscribe(); }); } } ``` #### Production Standard (Correct) > **Standard**: Wrapping external lifecycle effect declarations in `$effect.root` provides a manual dispose function (`teardownRoot`). Calling this function guarantees all inner runes effects and their teardown functions are executed, preventing memory leaks in non-component class lifecycles. ```typescript // PRODUCTION INVARIANT: Explicit $effect.root isolation and manual cleanup hook import { customStore } from './external-store'; export class DynamicPluginManager { public state = $state({ active: false }); private teardownRoot: (() => void) | null = null; public mountPlugin(): void { this.unmountPlugin(); // Ensure idempotency this.teardownRoot = $effect.root(() => { $effect(() => { const unsubscribe = customStore.subscribe((val) => { this.state.active = val.isActive; }); return () => { unsubscribe(); }; }); }); } public unmountPlugin(): void { if (this.teardownRoot) { this.teardownRoot(); this.teardownRoot = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Deep Effect Resource Disposal Pattern

Svelte 5 Runes Deep Effect Resource Disposal Pattern defines an industrial-grade behavioral standard for frontend engineering. Enforces synchronous return-based cleanup contracts and AbortController scoping inside Svelte 5 `$effect` and `$effect.root` runes. Eliminates orphaned subscriptions, memory leaks, and cross-boundary event pollutions in long-lived isomorphic micro-frontends undergoing dynamic mounting cycles. Prevents asynchronous unhandled teardowns across complex signal trees. 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 Subscriptions and Asynchronous Void Cleanup in Svelte 5 $effect Blocks 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 Subscriptions and Asynchronous Void Cleanup in Svelte 5 $effect Blocks	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 a synchronous teardown function `() => void` directly from `$effect` and `$effect.pre` whenever asynchronous tasks, event listeners, or reactive subscriptions are established.

Engineers MUST ALWAYS return a synchronous teardown function `() => void` directly from `$effect` and `$effect.pre` whenever asynchronous tasks, event listeners, or reactive subscriptions are established.

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.