Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor

--- description: Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor - Prevents infinite signal evaluation cascades and main-thread microtask exhaustion by establishing deterministic recursion depth budgeting across nested Svelte 5 $derived signals, $state proxies, and $effect boundaries. Enforces explicit separation between pure signal derivations and state mutations to prevent cyclic microtask starvation. 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-rune-cycle-interceptor" --- # Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic $state Mutation Inside $effect or Eager $derived Invocation Causing Browser Thread Lockup ## System Constraints You are a Principal Engineer enforcing Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor standards. You must strictly prevent cyclic dependencies, non-terminating reactive graph evaluations, and unbounded microtask recursion in Svelte 5 codebases. Every reactive graph must be an acyclic directed graph (DAG). Invalidate any pattern that mutates a reactive proxy synchronously within an effect that reads that proxy without a strictly bounded recursion limiter or untracked read guard. ## Strict Guidelines - Engineers MUST ALWAYS isolate state mutations from derived computations: $derived and $derived.by MUST remain pure functions with zero observable side effects. - Engineers MUST NOT synchronously mutate a $state proxy inside an $effect or $effect.pre if that same effect synchronously subscribes to the mutated signal without untrack() or a guard condition. - Code MUST use untrack(() => ...) when reading dependencies inside an $effect if those reads should not re-trigger the effect upon downstream updates. - Engineers MUST wrap potentially recursive self-updating signal sequences with an explicit recursion depth token (budget pattern) that throws or logs when MAX_RECURSION_DEPTH (e.g., 25 iterations) is exceeded. - Components NEVER use $effect to synchronize bidirectional state between parent and child; bidirectional flows must use controlled callbacks or single-source-of-truth $state stores. - Code SHOULD leverage immutable transition helpers (e.g., pure state transitions) rather than mutating deep properties inside reactive proxy subscribers directly. ## Bad vs Good Implementations ### Cyclic Mutation Loop in $effect vs. Pure Bounded State Machine #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Reading `this.page` sets up a reactive subscription. Mutating `this.page` marks the signal dirty, queuing a microtask that re-evaluates the effect immediately, generating an uncontrolled infinite cycle that starves the main browser thread. ```typescript import { untrack } from 'svelte'; export class PaginationModel { page = $state(1); totalItems = $state(100); pageSize = $state(10); constructor() { // ANTI-PATTERN: Mutating state read directly in the effect triggers infinite reactive loops $effect(() => { const maxPage = Math.ceil(this.totalItems / this.pageSize); if (this.page > maxPage) { this.page = maxPage; // Mutates this.page, re-triggering this effect recursively } else if (this.page < 1) { this.page = 1; } }); } } ``` #### Production Standard (Correct) > **Standard**: Separates the raw target `#page` from the normalized pure `$derived` value `page`, removing the need for an effect-driven state-mutation loop. Where an effect loop is strictly required, `untrack` eliminates cyclic dependency subscriptions and an iteration budget halts recursion before browser thread lockup. ```typescript import { untrack } from 'svelte'; const MAX_RECURSIVE_BUDGET = 10; export class PaginationModel { #page = $state(1); totalItems = $state(100); pageSize = $state(10); maxPage = $derived(Math.max(1, Math.ceil(this.totalItems / this.pageSize))); // Deterministic clamped read avoids side-effecting normalizations entirely page = $derived(Math.min(Math.max(1, this.#page), this.maxPage)); setPage(target: number): void { // State transitions occur strictly within deterministic transactional boundaries this.#page = target; } normalizeWithBudget(): void { let iterations = 0; $effect(() => { const max = this.maxPage; const current = untrack(() => this.#page); if (current > max) { if (++iterations > MAX_RECURSIVE_BUDGET) { throw new RangeError('Reactive cycle budget exhausted in PaginationModel'); } this.#page = max; } else { iterations = 0; } }); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor

Svelte 5 Runes Fine-Grained Reactive Proxy Cycle Interceptor defines an industrial-grade behavioral standard for frontend engineering. Prevents infinite signal evaluation cascades and main-thread microtask exhaustion by establishing deterministic recursion depth budgeting across nested Svelte 5 $derived signals, $state proxies, and $effect boundaries. Enforces explicit separation between pure signal derivations and state mutations to prevent cyclic microtask starvation. 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 $state Mutation Inside $effect or Eager $derived Invocation Causing Browser Thread Lockup 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 $state Mutation Inside $effect or Eager $derived Invocation Causing Browser Thread Lockup	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 state mutations from derived computations

Engineers MUST ALWAYS isolate state mutations from derived computations: $derived and $derived.by MUST remain pure functions with zero observable side effects.

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.