Svelte 5 Runes Asynchronous Effect Boundary & Micro-task Isolation Standard

--- description: Svelte 5 Runes Asynchronous Effect Boundary & Micro-task Isolation Standard - Enforces strict synchronous dependency boundaries and deterministic lifecycle cancellations inside Svelte 5 $effect runes. Prevents silent dependency drop-offs across micro-task queues, state corruption from out-of-order promise resolutions, and memory leaks across dynamic island unmounts. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-async-effect-boundary-guardrail" --- # Svelte 5 Runes Asynchronous Effect Boundary & Micro-task Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating state or consuming signals past asynchronous ticks without explicit untrack boundaries and cancellation teardowns in Svelte 5 runes. ## System Constraints You are a Principal Software Architect enforcing production-grade Svelte 5 Rune invariants. Svelte 5 signals track dependencies synchronously during the execution turn of $effect. Any signal read after an 'await' keyword is untracked and dead to the reactive graph. Furthermore, un-aborted micro-tasks writing back to state across dynamic island unmounts cause zombie updates and memory leaks. Enforce synchronous signal extraction, explicit untrack() wrappers for asynchronous state mutations, and mandatory AbortController cleanup in all asynchronous $effect blocks. ## Strict Guidelines - Engineers MUST ALWAYS extract all reactive signal dependencies synchronously at the top level of the $effect block before any asynchronous boundary (await, queueMicrotask, setTimeout). - Engineers MUST NOT read signals after an 'await' expression inside an $effect expecting reactive tracking; Svelte 5 tracking ceases immediately upon encountering a suspension point. - Engineers MUST ALWAYS return a deterministic cleanup/teardown function from an $effect containing asynchronous operations, using an AbortController or token to invalidate pending micro-tasks. - Code MUST wrap state mutations occurring within resolved micro-tasks or promises in untrack() if the mutation would otherwise inadvertently couple with downstream runtime subscriber flushes. - Components NEVER allow inflight network or timer callbacks initiated inside an $effect to write to $state if the dynamic island component has already been destroyed. ## Bad vs Good Implementations ### Async Data Synchronization in $effect with Island Boundary Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing an async function directly into $effect causes Svelte 5 to lose dependency tracking after the first 'await'. Signals read post-await are completely untracked. Additionally, without an AbortController teardown, rapid prop updates cause out-of-order race conditions that corrupt the component state. ```typescript import { untrack } from 'svelte'; let { resourceId } = $props<{ resourceId: string }>(); let data = $state<Record<string, unknown> | null>(null); let error = $state<string | null>(null); let loading = $state(false); // ANTI-PATTERN: Async signal tracking loss and missing cancellation $effect(async () => { loading = true; // Triggers potential re-flush loop // Any signal read after await resourceId will NOT be registered as dependency const response = await fetch(`/api/resources/${resourceId}`); // Untracked signal read and unhandled unmount race condition if (resourceId.startsWith('secure_')) { const auth = await fetch('/api/auth/verify'); } // Race condition: if resourceId changes rapidly, old requests overwrite newer state data = await response.json(); loading = false; }); ``` #### Production Standard (Correct) > **Standard**: Dependencies are read synchronously before any asynchronous turn. The async workflow is housed within a scoped pipeline managed via an AbortController. Inflight fetches are aborted upon reactive dependency re-runs or component destruction, eliminating state corruption and race hazards. ```typescript import { untrack } from 'svelte'; interface ResourceProps { resourceId: string; onSyncComplete?: (id: string) => void; } let { resourceId, onSyncComplete } = $props<ResourceProps>(); let data = $state<Record<string, unknown> | null>(null); let error = $state<string | null>(null); let isLoading = $state(false); $effect(() => { // 1. Capture reactive dependencies synchronously at the boundary const currentId = resourceId; const controller = new AbortController(); const { signal } = controller; async function executePipeline(): Promise<void> { untrack(() => { isLoading = true; error = null; }); try { const response = await fetch(`/api/resources/${currentId}`, { signal }); if (!response.ok) throw new Error(`HTTP ${response.status}`); const payload = await response.json(); if (signal.aborted) return; // 2. Safely mutate state inside micro-task data = payload; onSyncComplete?.(currentId); } catch (err: unknown) { if (signal.aborted) return; error = err instanceof Error ? err.message : 'Unknown synchronization failure'; } finally { if (!signal.aborted) { isLoading = false; } } } executePipeline(); // 3. Mandatory teardown callback to terminate inflight execution across island boundaries return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Asynchronous Effect Boundary & Micro-task Isolation Standard

Svelte 5 Runes Asynchronous Effect Boundary & Micro-task Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict synchronous dependency boundaries and deterministic lifecycle cancellations inside Svelte 5 $effect runes. Prevents silent dependency drop-offs across micro-task queues, state corruption from out-of-order promise resolutions, and memory leaks across dynamic island unmounts. 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: Mutating state or consuming signals past asynchronous ticks without explicit untrack boundaries and cancellation teardowns in Svelte 5 runes. 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	Mutating state or consuming signals past asynchronous ticks without explicit untrack boundaries and cancellation teardowns in Svelte 5 runes.	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 extract all reactive signal dependencies synchronously at the top level of the $effect block before any asynchronous boundary (await, queueMicrotask, setTimeout).

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.