Svelte 5 Runes Reactive Effect Scope Lifecycle and Cleanup Invariant

--- description: Svelte 5 Runes Reactive Effect Scope Lifecycle and Cleanup Invariant - Enforces strict scope boundaries and deterministic teardown for Svelte 5 $effect and $effect.root runes in long-lived client microfrontends. Guarantees that asynchronous operations, streaming subscriptions, and fine-grained signal dependencies register synchronous cleanup routines to prevent memory retention and detached subtree execution. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-runes-effect-scope-lifecycle-invariant" --- # Svelte 5 Runes Reactive Effect Scope Lifecycle and Cleanup Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Asynchronous Event Subscriptions and Unbounded Memory Leaks via Implicit Effect Context Loss ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes lifecycle safety and fine-grained reactive scope invariants. In Svelte 5, effects ($effect, $effect.pre, $effect.root) track dependencies synchronously and require immediate synchronous return of teardown functions. You must prevent memory leaks, race conditions, and unmanaged signal subscriptions in long-lived client applications and microfrontends. ## Strict Guidelines - Engineers MUST ALWAYS return cleanup teardown functions synchronously from `$effect` bodies rather than returning a Promise or registering cleanup after an `await` statement. - Engineers MUST NOT mark `$effect` callback closures as `async`; asynchronous workflows must be decoupled into an inner async IIFE or helper with explicit cancellation tokens or `AbortController`. - Code MUST pass an `AbortSignal` derived from a locally instantiated `AbortController` to all asynchronous operations, fetch calls, and event listeners within `$effect`, aborting it in the synchronous teardown return. - Services MUST manage manual reactive roots using `$effect.root()` when instantiating reactive signals outside the component lifecycle (e.g., in microfrontend shells or module-level singletons), ensuring the returned cleanup function is invoked on microfrontend unmount. - Components NEVER capture out-of-scope mutable signal references across asynchronous intervals or web socket listeners without validating whether the current effect instance has been destroyed or invalidated. ## Bad vs Good Implementations ### Asynchronous Effect Cleanup with AbortController vs Async Effect Leak #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring an `$effect` callback as `async` causes Svelte to receive a Promise instead of a teardown function. Svelte 5 ignores returned Promises for cleanup, leading to detached EventSource connections and zombie signal updates in long-lived microfrontends. ```typescript // Anti-pattern: Async effect function loses cleanup tracking after await; // cleanup is not returned synchronously, leaking EventSource and signal subscriptions. import { telemetryTopic } from './telemetry.svelte'; $effect(async () => { const topic = telemetryTopic.current; const stream = new EventSource(`/api/stream?topic=${encodeURIComponent(topic)}`); stream.onmessage = (event) => { telemetryTopic.process(event.data); }; await fetch(`/api/ack?topic=${encodeURIComponent(topic)}`); // BUG: This cleanup function is wrapped in a Promise and will NEVER be invoked by Svelte return () => { stream.close(); }; }); ``` #### Production Standard (Correct) > **Standard**: The `$effect` body remains strictly synchronous, registering an AbortController and immediately returning a deterministic cleanup function that terminates both the persistent EventSource connection and inflight HTTP requests upon dependency change or unmount. ```typescript // Production Invariant: Synchronous effect body establishing AbortController // and immediately returning a synchronous cleanup callback. import { telemetryTopic } from './telemetry.svelte'; $effect(() => { const topic = telemetryTopic.current; const controller = new AbortController(); const { signal } = controller; const stream = new EventSource(`/api/stream?topic=${encodeURIComponent(topic)}`); stream.onmessage = (event) => { if (signal.aborted) return; telemetryTopic.process(event.data); }; (async () => { try { await fetch(`/api/ack?topic=${encodeURIComponent(topic)}`, { signal }); } catch (err: unknown) { if (err instanceof DOMException && err.name === 'AbortError') return; console.error('Failed to acknowledge telemetry topic:', err); } })(); return () => { controller.abort(); stream.close(); }; }); ``` ### Manual Lifecycle Containment via $effect.root in Module-Level Microfrontend Stores #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling `$effect` inside a standalone function captures the ambient reactive lifecycle of whichever component invokes it. When that host component unmounts, the effect is prematurely destroyed; or if invoked outside component init, Svelte throws an error or retains the scope indefinitely. ```typescript // Anti-pattern: Creating untracked module-level signals and effects that attach to // whichever component happens to import or initialize the singleton first. let activeChannel = $state('default'); export function initializeTelemetryStore() { // Leaks if the originating component unmounts; effect context becomes orphan or destroyed $effect(() => { console.log('Channel active:', activeChannel); }); return { setChannel: (c: string) => { activeChannel = c; } }; } ``` #### Production Standard (Correct) > **Standard**: Using `$effect.root` decouples the reactive computation from the ambient component tree, isolating microfrontend reactive signal topologies into explicitly disposable roots that guarantee complete garbage collection on microfrontend unmount. ```typescript // Production Invariant: Encapsulate standalone non-component reactive lifecycles inside $effect.root // and expose explicit teardown handles for microfrontend boundary disposal. export interface TelemetryStoreHandle { setChannel: (channel: string) => void; dispose: () => void; } export function createTelemetryStore(): TelemetryStoreHandle { let cleanupRoot: (() => void) | undefined; let setChannelFn: (channel: string) => void = () => {}; cleanupRoot = $effect.root(() => { let activeChannel = $state('default'); $effect(() => { const controller = new AbortController(); // Synchronous subscription logic bound to this managed root return () => controller.abort(); }); setChannelFn = (next: string) => { activeChannel = next; }; }); return { setChannel: (c: string) => setChannelFn(c), dispose: () => { if (cleanupRoot) { cleanupRoot(); cleanupRoot = undefined; } } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Effect Scope Lifecycle and Cleanup Invariant

Svelte 5 Runes Reactive Effect Scope Lifecycle and Cleanup Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces strict scope boundaries and deterministic teardown for Svelte 5 $effect and $effect.root runes in long-lived client microfrontends. Guarantees that asynchronous operations, streaming subscriptions, and fine-grained signal dependencies register synchronous cleanup routines to prevent memory retention and detached subtree execution. 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 Asynchronous Event Subscriptions and Unbounded Memory Leaks via Implicit Effect Context Loss 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 Asynchronous Event Subscriptions and Unbounded Memory Leaks via Implicit Effect Context Loss	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 cleanup teardown functions synchronously from `$effect` bodies rather than returning a Promise or registering cleanup after an `await` statement.

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.