Svelte 5 Runes Async Boundary & $effect.root Cleanup Invariant

--- description: Svelte 5 Runes Async Boundary & $effect.root Cleanup Invariant - Enforces deterministic lifecycle disposal for Svelte 5 reactive trees crossing asynchronous boundaries or instantiated outside component trees. Prevents zombie computations, uncollected signal subgraphs, and memory exhaustion in isomorphic streaming SSR and long-lived single-page applications. 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/svelte-5-runes-async-boundary-cleanup-standard" --- # Svelte 5 Runes Async Boundary & $effect.root Cleanup Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Instantiating Unmanaged $effect.root Subgraphs or Creating Reactive Effects Across Await Boundaries Without Explicit Teardown ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes ($effect.root / $state) Async Boundary Cleanup Standards. You must ensure that any reactive scope initialized outside of the synchronous component lifecycle or across asynchronous yield points (e.g., async/await, streaming chunks, setTimeout) is explicitly tracked and torn down. Never allow orphaned reactive signal graphs or uncollected $effect.root scopes that leak across requests in streaming SSR or persist indefinitely in client sessions. ## Strict Guidelines - Engineers MUST ALWAYS wrap reactive graphs created outside synchronous component setup (such as external stores, service workers, or post-await async branches) in an explicit '$effect.root' boundary. - Engineers MUST NEVER invoke Svelte 5 '$effect' or '$effect.pre' following an 'await' keyword in component scripts without an encapsulating '$effect.root', as Svelte loses its active component context across microtask ticks. - Services and stores exposing rune-based states ($state, $derived) instantiated per-request during isomorphic streaming SSR MUST register disposal callbacks tied to the request termination or abort signal to prevent cross-request graph retention. - Components MUST capture the cleanup closure returned by '$effect.root()' and trigger it synchronously within '$effect()' return cleanup functions or 'onDestroy' handlers. - Code SHOULD pass an AbortSignal to all asynchronous streaming pipelines that drive '$state' mutations, immediately invalidating detached execution graphs when an unmount or SSR abort occurs. - Engineers MUST NOT maintain module-level singleton '$state' instances that accumulate listener closures or nested roots across streaming SSR requests. ## Bad vs Good Implementations ### Async Stream Subscription with $effect.root Lifecycle Management #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Creating an $effect.root without storing and invoking its returned teardown callback permanently detaches the reactive graph from the garbage collector. Additionally, executing reactive setup post-await without boundary tracking causes signal graphs to leak across streaming SSR requests. ```typescript import { onDestroy } from 'svelte'; export class LiveMetricService { count = $state(0); async initialize(streamUrl: string) { const response = await fetch(streamUrl); const reader = response.body?.getReader(); // ANTI-PATTERN: Executing $effect or unbounded manual reactions post-await // loses component context. Creating an unmanaged root leaks memory on unmount. $effect.root(() => { // This effect root is never captured or disposed. // Subsequent re-runs or stream cycles create detached zombie graphs. }); } } ``` #### Production Standard (Correct) > **Standard**: Properly tracks the cleanup function returned by $effect.root, coordinates unmounting with an AbortController across async boundaries, and guarantees zero reactive memory leakage during streaming SSR or component teardown. ```typescript import { onDestroy } from 'svelte'; export class LiveMetricService { count = $state(0); private cleanupRoot: (() => void) | null = null; private abortController: AbortController | null = null; async initialize(streamUrl: string): Promise<void> { this.dispose(); this.abortController = new AbortController(); const { signal } = this.abortController; try { const response = await fetch(streamUrl, { signal }); if (!response.body || signal.aborted) return; // PRODUCTION INVARIANT: Encapsulate asynchronous reactive trees // in an explicit $effect.root and retain the disposer. this.cleanupRoot = $effect.root(() => { // Encapsulated reactive logic bound to deterministic lifecycle return () => { // Subgraph teardown }; }); } catch (err: unknown) { if ((err as Error).name !== 'AbortError') { throw err; } } } dispose(): void { if (this.abortController) { this.abortController.abort(); this.abortController = null; } if (this.cleanupRoot) { this.cleanupRoot(); this.cleanupRoot = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Async Boundary & $effect.root Cleanup Invariant

Svelte 5 Runes Async Boundary & $effect.root Cleanup Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic lifecycle disposal for Svelte 5 reactive trees crossing asynchronous boundaries or instantiated outside component trees. Prevents zombie computations, uncollected signal subgraphs, and memory exhaustion in isomorphic streaming SSR and long-lived single-page applications. 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: Instantiating Unmanaged $effect.root Subgraphs or Creating Reactive Effects Across Await Boundaries Without Explicit Teardown 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	Instantiating Unmanaged $effect.root Subgraphs or Creating Reactive Effects Across Await Boundaries Without Explicit Teardown	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 synchronous component setup (such as external stores, service workers, or post-await async branches) in an explicit '$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.