Svelte 5 Runes Asynchronous State Transition and Signal Dependency Guardrail

--- description: Svelte 5 Runes Asynchronous State Transition and Signal Dependency Guardrail - Enforces rigid synchronous tracking boundaries on Svelte 5 reactive runes ($state, $derived, $effect) to eliminate microtask dependency drops. Prevents unhandled teardown cascades, stale state overwrites, and memory leaks during concurrent asynchronous UI transitions. 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-state-guardrail" --- # Svelte 5 Runes Asynchronous State Transition and Signal Dependency Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Naked Async $effect Callbacks Reading Signals Post-Await with Untracked Dependencies and Out-of-Order Teardowns ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Asynchronous State Transition Guardrails. Svelte 5 relies on synchronous execution to trace fine-grained signal dependencies in the reactivity graph. You must mandate that all dependencies in `$effect` or `$derived` blocks are evaluated synchronously before the first microtask tick (`await`). You must reject naked async effects, unhandled promise races, and mutations to `$state` signals without abort or staleness checks across asynchronous boundaries. ## Strict Guidelines - Engineers MUST ALWAYS capture all `$state` and `$derived` signal dependencies synchronously at the top of an `$effect` block prior to any asynchronous boundary or microtask deferral. - Engineers MUST NOT mark `$effect` root closures as `async` without returning a synchronous cleanup function or passing an `AbortController` signal to the underlying asynchronous task. - Code MUST verify staleness or generation tokens before mutating `$state` signals following an `await` operation to prevent out-of-order resolution overwriting newer state. - Services and composables MUST leverage explicit cancellation mechanisms (`AbortController`, task cancellation) during effect teardown to eliminate zombie microtasks and memory leaks. - Components NEVER execute asynchronous mutations within `$derived.by` runes; `$derived` computation MUST remain pure, synchronous, and side-effect free. ## Bad vs Good Implementations ### Asynchronous Data Fetching inside $effect with AbortController #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Async functions return a Promise immediately; Svelte 5 stops signal dependency collection at the first microtask boundary (`await`). Rapid mutations of `userId` trigger multiple concurrent executions without cancelling previous requests, resulting in race conditions and stale state overwrites. ```typescript import { untrack } from 'svelte'; let userId = $state('user-1'); let userData = $state<any>(null); let isLoading = $state(false); // ANTI-PATTERN: Root async effect loses reactive dependency tracking // after the first await tick and lacks teardown cancellation on rapid userId changes. $effect(async () => { isLoading = true; const response = await fetch(`/api/users/${userId}`); // Any signal read here (e.g. tracking tenantId) will NOT register as a dependency. // Stale requests can resolve out-of-order and overwrite newer user data. userData = await response.json(); isLoading = false; }); ``` #### Production Standard (Correct) > **Standard**: Explicit synchronous signal dereferencing guarantees dependency tracking. Instantiating and returning an `AbortController` teardown guarantees cancellation of in-flight network requests before the effect re-runs, eliminating microtask race conditions and stale signal state mutation. ```typescript let userId = $state('user-1'); let userData = $state<any>(null); let isLoading = $state(false); let error = $state<Error | null>(null); // PRODUCTION INVARIANT: Synchronous dependency capture, deterministic AbortController teardown, // and guarded state transitions across microtask boundaries. $effect(() => { // 1. Synchronously track the dependency const currentUserId = userId; const controller = new AbortController(); const { signal } = controller; isLoading = true; error = null; async function executeFetch(): Promise<void> { try { const response = await fetch(`/api/users/${currentUserId}`, { signal }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); if (!signal.aborted) { userData = data; isLoading = false; } } catch (err: unknown) { if (!signal.aborted) { error = err instanceof Error ? err : new Error(String(err)); isLoading = false; } } } void executeFetch(); // 2. Synchronous teardown ensures stale requests are canceled prior to re-execution return () => { controller.abort(); }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Asynchronous State Transition and Signal Dependency Guardrail

Svelte 5 Runes Asynchronous State Transition and Signal Dependency Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces rigid synchronous tracking boundaries on Svelte 5 reactive runes ($state, $derived, $effect) to eliminate microtask dependency drops. Prevents unhandled teardown cascades, stale state overwrites, and memory leaks during concurrent asynchronous UI transitions. 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: Naked Async $effect Callbacks Reading Signals Post-Await with Untracked Dependencies and Out-of-Order Teardowns 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	Naked Async $effect Callbacks Reading Signals Post-Await with Untracked Dependencies and Out-of-Order Teardowns	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 capture all `$state` and `$derived` signal dependencies synchronously at the top of an `$effect` block prior to any asynchronous boundary or microtask deferral.

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.