Svelte 5 Reactive Ownership Graph & Unidirectional Signal Invariant

--- description: Svelte 5 Reactive Ownership Graph & Unidirectional Signal Invariant - Enforces strict unidirectional dependency trees and explicit ownership bounds within Svelte 5 Runes architecture. Eliminates synchronous circular re-render loops ('effect_update_depth_exceeded') and cross-component signal race conditions by forbidding state-synchronization side-effects and unshielded bi-directional mutations. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-reactive-ownership-graph-invariant" --- # Svelte 5 Reactive Ownership Graph & Unidirectional Signal Invariant > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Mutation and Synchronous State Synchronization in Effects ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Fine-Grained Reactive Ownership Graph Invariants. Mandate strict unidirectional data flow and ownership graph isolation across all components and shared rune modules (.svelte.ts). Forbid synthetic synchronization effects, circular signal dependencies, and unisolated cross-boundary mutations. ## Strict Guidelines - Engineers MUST ALWAYS use `$derived` or `$derived.by` for values computed from other reactive state instead of synchronizing state inside an `$effect`. - Engineers MUST NOT write to any `$state` inside an `$effect` that reads from the same signal hierarchy without explicitly wrapping the read or write in `untrack()`. - Code SHOULD encapsulate shared reactive state within classes or factory functions using private `$state` fields exposed via read-only getters and explicit mutating methods. - Services MUST NOT expose mutable `$state` primitives directly across module boundaries; state mutations must occur via explicit command actions. - Components NEVER use `$effect` or `$effect.pre` to propagate changes upward to parent components; communicate intent upward exclusively via typed callback props or explicit `$bindable` contracts. ## Bad vs Good Implementations ### State Synchronization Anti-Pattern vs. Pure Derived Signals #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating reactive state inside an $effect creates secondary reactive invalidations within the same or subsequent tick. In Svelte 5's fine-grained graph, chaining effects that write to upstream dependencies causes 'ERR_SVELTE_TOO_MANY_UPDATES' (effect_update_depth_exceeded) and breaks deterministic ownership resolution. ```typescript // Anti-Pattern: Synchronizing dependent state via $effect creates circular re-renders and race conditions let count = $state(0); let double = $state(0); let status = $state('normal'); $effect(() => { // Bad: synchronous mutation of reactive state based on reactive dependencies double = count * 2; if (double > 10) { status = 'elevated'; } else { status = 'normal'; } }); $effect(() => { // Bad: cascaded write triggers effect_update_depth_exceeded when interacting across components if (status === 'elevated' && count < 20) { count += 1; } }); ``` #### Production Standard (Correct) > **Standard**: Replacing state-synchronizing effects with `$derived` expressions establishes a pure directed acyclic graph (DAG). The derived values update lazily on demand without triggering new reactive write cycles, fully preserving ownership graph stability. ```typescript // Invariant: Derived computation tree is pure, read-only, and deterministic let count = $state(0); // Pure fine-grained signals derived automatically without side-effects const double = $derived(count * 2); const status = $derived(double > 10 ? 'elevated' : 'normal'); // Explicit action handler handles state transitions without reactive cascades function incrementSafely() { if (status !== 'elevated' || count >= 20) { count += 1; } } // Side-effects are strictly reserved for external boundary interactions (DOM, logging, network) $effect(() => { console.info(`Telemetry: count is ${count}, status is ${status}`); }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Reactive Ownership Graph & Unidirectional Signal Invariant

Svelte 5 Reactive Ownership Graph & Unidirectional Signal Invariant defines an industrial-grade behavioral standard for frontend engineering. Enforces strict unidirectional dependency trees and explicit ownership bounds within Svelte 5 Runes architecture. Eliminates synchronous circular re-render loops ('effect_update_depth_exceeded') and cross-component signal race conditions by forbidding state-synchronization side-effects and unshielded bi-directional mutations. 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 Mutation and Synchronous State Synchronization in 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 Mutation and Synchronous State Synchronization in 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 use `$derived` or `$derived.by` for values computed from other reactive state instead of synchronizing state inside an `$effect`.

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.