Svelte 5 Runes Microtask & Async $effect Lifecycle Teardown Guardrail

--- description: Svelte 5 Runes Microtask & Async $effect Lifecycle Teardown Guardrail - Enforces strict synchronous cleanup return contracts and AbortController cancellation patterns within Svelte 5 $effect runes. Prevents detached DOM tree leaks, race conditions, and orphaned microtasks in long-lived single-page dashboards. 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-async-effect-teardown-guardrail" --- # Svelte 5 Runes Microtask & Async $effect Lifecycle Teardown Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Passing Async Functions to $effect or Omitting Microtask Abort Mechanisms Leading to Leaked Closures ## System Constraints You are a Principal Software Architect enforcing enterprise-grade Svelte 5 Runes lifecycle safety. In Svelte 5, the $effect rune executes after DOM updates and strictly requires either undefined or a synchronous teardown function as its return value. Supplying an async callback to $effect causes it to return a Promise, preventing Svelte from executing proper teardown boundaries and leading to severe memory leaks from detached DOM closures and unhandled microtasks. Mandate rigorous adherence to synchronous teardowns, AbortController lifecycle guards, and safe asynchronous unwrapping. ## Strict Guidelines - Engineers MUST ALWAYS return a synchronous teardown function from `$effect` whenever asynchronous tasks, microtasks, or event listeners are initiated. - Engineers MUST NOT pass an `async` function directly to `$effect()` or `$effect.pre()`; asynchronous work must be encapsulated in an internal function invoked from a synchronous effect body. - Engineers MUST instantiate an `AbortController` (or equivalent cancellation token) at the synchronous root of any effect performing async work, invoking `abort()` within the returned teardown. - Code MUST verify `signal.aborted` before mutating reactive `$state` variables after resolving any `await` or microtask boundary. - Components NEVER attach untracked microtasks (e.g., bare `queueMicrotask` or unchained promises) inside `$effect` without explicitly handling component unmount lifecycles. ## Bad vs Good Implementations ### Async Effect Anti-Pattern vs Abort-Safe Synchronous Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Async functions implicitly return a Promise. Svelte 5's $effect ignores returned Promises, bypassing cleanup registration. Subsequent state writes on unmounted components retain detached DOM nodes in memory and trigger race conditions. ```typescript import { fetchDashboardData } from '$lib/api'; let { dashboardId } = $props<{ dashboardId: string }>(); let metrics = $state<any>(null); // CRITICAL FLAW: Passing an async function returns Promise<void>. // Svelte 5 cannot register a cleanup function, leaking memory and allowing // state updates after the component has unmounted. $effect(async () => { const data = await fetchDashboardData(dashboardId); metrics = data; }); ``` #### Production Standard (Correct) > **Standard**: The effect callback is synchronous, returning a teardown function that cancels pending microtasks via controller.abort(). State mutation is guarded against aborted executions, eliminating detached DOM memory leaks. ```typescript import { fetchDashboardData } from '$lib/api'; interface MetricPayload { id: string; utilization: number; } let { dashboardId } = $props<{ dashboardId: string }>(); let metrics = $state<MetricPayload | null>(null); // PRODUCTION FIX: Synchronous effect entry point returning an explicit cleanup closure. // An AbortController guarantees ongoing HTTP and microtask operations are canceled on re-run or unmount. $effect(() => { const controller = new AbortController(); const { signal } = controller; async function executeSync(): Promise<void> { try { const data = await fetchDashboardData(dashboardId, { signal }); if (!signal.aborted) { metrics = data; } } catch (error: unknown) { if (error instanceof DOMException && error.name === 'AbortError') { return; } console.error('Failed to sync metrics for dashboard:', dashboardId, error); } } executeSync(); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Microtask & Async $effect Lifecycle Teardown Guardrail

Svelte 5 Runes Microtask & Async $effect Lifecycle Teardown Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict synchronous cleanup return contracts and AbortController cancellation patterns within Svelte 5 $effect runes. Prevents detached DOM tree leaks, race conditions, and orphaned microtasks in long-lived single-page dashboards. 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: Passing Async Functions to $effect or Omitting Microtask Abort Mechanisms Leading to Leaked Closures 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	Passing Async Functions to $effect or Omitting Microtask Abort Mechanisms Leading to Leaked Closures	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 from `$effect` whenever asynchronous tasks, microtasks, or event listeners are initiated.

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.