Strict AbortController Signal Cancellation in Svelte 5 Runes Async Effects

--- description: Strict AbortController Signal Cancellation in Svelte 5 Runes Async Effects - Enforces synchronous cleanup contract adherence and mandatory AbortController propagation inside Svelte 5 $effect and $effect.pre rune boundaries. Prevents stale closure race conditions, out-of-order state mutations, and orphaned async microtasks when reactive dependencies cycle rapidly. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-async-effect-signal-cancellation" --- # Strict AbortController Signal Cancellation in Svelte 5 Runes Async Effects > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Uncontrolled Async Microtasks and Return of Promises in Svelte 5 $effect Rune Closures ## System Constraints You are a Principal Software Architect enforcing production-grade concurrency safety in Svelte 5 Runes. Svelte 5 $effect runes require synchronous teardown return values (type `() => void`). Passing an async function directly into $effect converts the return value into a Promise, silently stripping the runtime cleanup phase and triggering race conditions across asynchronous microtasks. You must strictly mandate localized AbortController instantiation, AbortSignal propagation to fetch and async primitives, synchronous cleanup delegation, and signal.aborted assertion before committing any $state rune mutation. ## Strict Guidelines - Engineers MUST NEVER pass an async function directly as the callback to `$effect` or `$effect.pre`; the effect callback MUST remain synchronous and explicitly return a cleanup function `() => void`. - Engineers MUST instantiate a dedicated `AbortController` at the top of the synchronous `$effect` boundary whenever dispatching asynchronous workflows. - Engineers MUST return a synchronous cleanup function from `$effect` that invokes `controller.abort()` to terminate pending network requests and asynchronous chains. - Engineers MUST propagate `controller.signal` to all underlying asynchronous APIs (e.g., `fetch(url, { signal })`, third-party clients, custom timers, and promise wrappers). - Engineers MUST check `if (controller.signal.aborted) return;` immediately following every `await` boundary before mutating any reactive `$state` variables. - Code SHOULD catch `DOMException` with `name === 'AbortError'` or use standard cancellation patterns without bubbling cancellation noise into application error boundaries. - Components NEVER mutate reactive `$state` runes across asynchronous microtask boundaries if the hosting effect scope has been invalidated or destroyed. ## Bad vs Good Implementations ### Async Rune Effect with AbortController vs Naked Async Callback #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing an async function to $effect returns a Promise instead of a teardown function. Svelte 5 cannot execute a cleanup callback returned as a resolved promise. When 'userId' mutates rapidly, multiple fetch requests execute concurrently without cancellation; earlier slow requests resolve after newer ones, causing stale data corruptions and race conditions. ```typescript import { untrack } from 'svelte'; let userId = $state('usr_123'); let userData = $state<UserData | null>(null); let isLoading = $state(false); // ANTI-PATTERN: Direct async callback to $effect strips cleanup return type // and triggers out-of-order state overwrites if userId changes rapidly. $effect(async () => { isLoading = true; const response = await fetch(`/api/users/${userId}`); // Stale response resolution overrides newer request userData = await response.json(); isLoading = false; }); ``` #### Production Standard (Correct) > **Standard**: The effect callback remains synchronous, correctly returning a cleanup closure that calls controller.abort(). The signal is propagated to the fetch request, cancelling in-flight TCP/HTTP streams on dependency re-evaluation. All state rune assignments verify signal.aborted post-await, eliminating stale microtask race conditions. ```typescript import { untrack } from 'svelte'; let userId = $state('usr_123'); let userData = $state<UserData | null>(null); let isLoading = $state(false); // PRODUCTION INVARIANT: Synchronous boundary, explicit AbortController, guarded state mutations $effect(() => { const currentUserId = userId; const controller = new AbortController(); const { signal } = controller; async function synchronizeUserData(): Promise<void> { isLoading = true; try { const response = await fetch(`/api/users/${currentUserId}`, { signal }); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); } const data = (await response.json()) as UserData; if (signal.aborted) return; userData = data; } catch (error: unknown) { if (error instanceof DOMException && error.name === 'AbortError') { return; } console.error('Failed to synchronize user data:', error); } finally { if (!signal.aborted) { isLoading = false; } } } void synchronizeUserData(); return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Strict AbortController Signal Cancellation in Svelte 5 Runes Async Effects

Strict AbortController Signal Cancellation in Svelte 5 Runes Async Effects defines an industrial-grade behavioral standard for frontend engineering. Enforces synchronous cleanup contract adherence and mandatory AbortController propagation inside Svelte 5 $effect and $effect.pre rune boundaries. Prevents stale closure race conditions, out-of-order state mutations, and orphaned async microtasks when reactive dependencies cycle rapidly. 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: Uncontrolled Async Microtasks and Return of Promises in Svelte 5 $effect Rune 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	Uncontrolled Async Microtasks and Return of Promises in Svelte 5 $effect Rune 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 NEVER pass an async function directly as the callback to `$effect` or `$effect.pre`

Engineers MUST NEVER pass an async function directly as the callback to `$effect` or `$effect.pre`; the effect callback MUST remain synchronous and explicitly return a cleanup function `() => void`.

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.