Svelte 5 Runes Async Boundary Isolation & Reactive Teardown Enforcement

--- description: Svelte 5 Runes Async Boundary Isolation & Reactive Teardown Enforcement - Strictly enforces that Svelte 5 signal derivations ($derived, $derived.by) remain purely synchronous to prevent tracking context detachment. Mandates that asynchronous microtasks and data fetches be isolated within $effect scopes with deterministic AbortController teardowns to eliminate memory leaks and stale mutations during rapid DOM unmounting. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js, src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-async-boundary-teardown" --- # Svelte 5 Runes Async Boundary Isolation & Reactive Teardown Enforcement > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Executing Async Microtasks Within Synchronous Derivations Causing Detached Signal Tracking and Post-Teardown Memory Leaks ## System Constraints You are a Principal Software Architect enforcing Svelte 5 reactive invariants. In Svelte 5, synchronous tracking contexts (active reactions) strictly power $derived and $derived.by. Awaiting promises or scheduling microtasks inside derivations breaks the reactive dependency tracking tree and retains unbounded references across component lifecycles. You must rigorously reject any asynchronous operations inside $derived runes, mandate synchronous derivation purity, and enforce isolated $effect boundaries equipped with synchronous cleanup routines (AbortController) to handle asynchronous lifecycles safely. ## Strict Guidelines - Engineers MUST ALWAYS keep $derived and $derived.by runes strictly synchronous and side-effect free. - Engineers MUST NOT supply an async callback or return a raw Promise within $derived.by. - Code MUST isolate asynchronous operations, network requests, and microtask pipelines inside an $effect rune. - Code MUST return a deterministic cleanup function from any $effect that launches asynchronous workflows, canceling in-flight work via AbortController. - Components NEVER mutate reactive $state after component destruction or teardown; in-flight promise handlers must verify or rely on signal aborts to avoid setting unmounted state. - Services and custom rune abstractions (.svelte.ts) MUST encapsulate async-to-state bridging using structured state objects containing status, data, and error signals rather than bare dangling promises. ## Bad vs Good Implementations ### Async Microtask in $derived.by vs Abortable $effect Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: In Svelte 5, reactive dependency tracking is synchronous. Awaiting inside $derived.by detaches the active tracking context at the first microtask boundary, rendering subsequent signal reads invisible. Furthermore, $derived.by evaluates to a Promise rather than resolved data, providing no teardown mechanism when userId changes rapidly or the component unmounts, causing race conditions and detached memory leaks. ```typescript import { state, derived } from 'svelte'; let userId = $state<number>(1); // ANTI-PATTERN: $derived.by with async executor detaches tracking at the first `await` // and yields an unresolved Promise<UserData>, leaking memory if unmounted rapidly. const userData = $derived.by(async () => { const response = await fetch(`/api/users/${userId}`); if (!response.ok) throw new Error('Fetch failed'); return await response.json(); }); ``` #### Production Standard (Correct) > **Standard**: Reactivity tracking runs synchronously on userId within the $effect scope. An AbortController is instantiated per execution run and aborted synchronously inside the returned teardown callback when userId changes or during component unmount, preventing detached effect updates and post-teardown state mutations. ```typescript import { state, effect } from 'svelte'; interface UserData { id: number; name: string; } let userId = $state<number>(1); let userData = $state<UserData | null>(null); let isLoading = $state<boolean>(false); let error = $state<Error | null>(null); // PRODUCTION FIX: Pure tracking inside $effect with explicit AbortController teardown $effect(() => { const currentId = userId; const controller = new AbortController(); isLoading = true; error = null; fetch(`/api/users/${currentId}`, { signal: controller.signal }) .then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json() as Promise<UserData>; }) .then((data) => { userData = data; isLoading = false; }) .catch((err: unknown) => { if (err instanceof Error && err.name === 'AbortError') return; error = err instanceof Error ? err : new Error(String(err)); isLoading = false; }); // Synchronous cleanup callback cancels microtasks upon dependency shift or DOM teardown return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Async Boundary Isolation & Reactive Teardown Enforcement

Svelte 5 Runes Async Boundary Isolation & Reactive Teardown Enforcement defines an industrial-grade behavioral standard for frontend engineering. Strictly enforces that Svelte 5 signal derivations ($derived, $derived.by) remain purely synchronous to prevent tracking context detachment. Mandates that asynchronous microtasks and data fetches be isolated within $effect scopes with deterministic AbortController teardowns to eliminate memory leaks and stale mutations during rapid DOM unmounting. 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: Executing Async Microtasks Within Synchronous Derivations Causing Detached Signal Tracking and Post-Teardown Memory Leaks 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	Executing Async Microtasks Within Synchronous Derivations Causing Detached Signal Tracking and Post-Teardown Memory Leaks	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 keep $derived and $derived.by runes strictly synchronous and side-effect free.

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.