Svelte 5 Runes Reactive Engine: Untracked Boundaries & Derivation Determinism

--- description: Svelte 5 Runes Reactive Engine: Untracked Boundaries & Derivation Determinism - Enforces deterministic signal derivation ordering and prevents microtask queue deadlocks in Svelte 5 fine-grained reactive runtime. Mandates explicit untracked boundary isolation via untrack() for cross-component writes and strictly forbids state mutations within derived signal computations. 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-untracked-signal-boundaries" --- # Svelte 5 Runes Reactive Engine: Untracked Boundaries & Derivation Determinism > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Graph Cascades and Microtask Starvation via Implicit Dependency Capture in Runes Effects ## System Constraints You are a Principal Software Architect specializing in Svelte 5's fine-grained reactive signals runtime. Mandate strict execution boundary isolation for runes. Enforce untrack() usage across non-owned signal writes, ensure derived state purity, and prevent recursive microtask deadlocks caused by bidirectional reactive loops. ## Strict Guidelines - Engineers MUST ALWAYS isolate external or cross-component state updates inside untrack() when executed within $effect or $effect.pre blocks to prevent accidental subscription cycles. - Engineers MUST NOT execute synchronous state writes inside $derived or $derived.by expressions; derivations must remain referentially transparent and pure projections of upstream signals. - Engineers MUST NOT use $effect to synchronize dependent state across components when a pure $derived or $derived.by rune can resolve the value synchronously. - Code MUST explicitly wrap non-trigger dependencies with untrack(() => ...) inside $effect when reading ancillary signals that should not register in the active effect's subscriber graph. - Components NEVER bridge reactive state transitions across disconnected contexts without bounding the propagation phase using an explicit action or untracked boundary. ## Bad vs Good Implementations ### Cross-Component Synchronization in Svelte 5 Reactive Domain Store #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The $effect implicitly registers all accessed state (userContext.auditLog and navigationStore.history) into its fine-grained dependency set. Synchronously writing to transitionCount invalidates the dependency set within the same microtask frame, triggering catastrophic reactive cycles and state thrashing. ```typescript import { userContext } from './userContext.svelte'; import { navigationStore } from './navigationStore.svelte'; export class SyncService { activePath = $state('/'); constructor() { // ANTI-PATTERN: Captures both activePath and navigationStore.history as reactive dependencies. // Mutating navigationStore.history triggers re-evaluation, causing microtask deadlock // and maximum depth exceeded errors across component boundaries. $effect(() => { if (this.activePath !== '/') { navigationStore.history.push(this.activePath); userContext.auditLog.lastRoute = this.activePath; userContext.auditLog.transitionCount++; // Reactive loop: reads & writes in same tracking context } }); } } ``` #### Production Standard (Correct) > **Standard**: By scoping cross-component mutations inside untrack(), only this.activePath is established as an upstream trigger signal. The downstream stores and audit logs are safely updated without contaminating the caller's reactive dependency graph, guaranteeing bounded execution order. ```typescript import { untrack } from 'svelte'; import { userContext } from './userContext.svelte'; import { navigationStore } from './navigationStore.svelte'; export class SyncService { activePath = $state('/'); constructor() { // PRODUCTION INVARIANT: Only activePath is tracked. External mutations and secondary // signal reads are isolated inside an untracked execution boundary. $effect(() => { const currentPath = this.activePath; if (currentPath === '/') return; untrack(() => { navigationStore.recordHistory(currentPath); userContext.recordTransition(currentPath); }); }); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Engine: Untracked Boundaries & Derivation Determinism

Svelte 5 Runes Reactive Engine: Untracked Boundaries & Derivation Determinism defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic signal derivation ordering and prevents microtask queue deadlocks in Svelte 5 fine-grained reactive runtime. Mandates explicit untracked boundary isolation via untrack() for cross-component writes and strictly forbids state mutations within derived signal computations. 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: Cyclic Signal Graph Cascades and Microtask Starvation via Implicit Dependency Capture in Runes Effects 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	Cyclic Signal Graph Cascades and Microtask Starvation via Implicit Dependency Capture in Runes Effects	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 isolate external or cross-component state updates inside untrack() when executed within $effect or $effect.pre blocks to prevent accidental subscription cycles.

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.