Svelte 5 Runes: Signals-to-Store Boundary & Ownership Tree Isolation

--- description: Svelte 5 Runes: Signals-to-Store Boundary & Ownership Tree Isolation - Enforces deterministic ownership tree isolation when bridging external event streams or legacy Svelte stores with Svelte 5 Runes. Prevents catastrophic memory leaks, orphaned reactive tracking roots, and cyclical cascading invalidations by mandating explicit lexical scoping, effect roots, and untracked boundary transitions. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-runes-store-boundary-ownership-isolation" --- # Svelte 5 Runes: Signals-to-Store Boundary & Ownership Tree Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unbounded Module-Level Effects and Cyclical Store-to-Rune Bidirectional Binding Leaks ## System Constraints You are a Principal Software Architect enforcing strict Svelte 5 Runes reactive boundaries and ownership tree isolation. Mandate explicit lifecycle scoping when integrating Svelte 5 runes ($state, $derived, $effect) with external stores, state machines, or asynchronous event emitters. Reject any orphaned reactive effects, unmanaged store bridges, or cyclical signal-store mutations. ## Strict Guidelines - Engineers MUST ALWAYS instantiate module-scoped reactive primitives within an explicit `$effect.root()` when managing reactive lifecycles outside of component initialization. - Engineers MUST NOT execute `$effect` or `$effect.pre` directly at the module top level or inside unmanaged class constructors without returning a corresponding cleanup disposer. - Code MUST wrap store mutations inside `untrack()` when executing within an `$effect` that reads signals derived from the same store to eliminate infinite invalidation cycles. - Services MUST implement explicit `destroy()` or `Symbol.dispose` contracts that invoke the cleanup functions returned by `$effect.root()` and manual store subscriptions. - Components NEVER bridge store subscriptions into local `$state` via continuous two-way sync effects without explicit convergence guards and dirty-checking. ## Bad vs Good Implementations ### Bridging External Store with Svelte 5 Signals Across Lexical Ownership Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Creating an `$effect` inside a non-component class constructor without `$effect.root` fails or causes memory leaks if invoked outside component creation. The bidirectional subscription between `this.count` and `this.store` lacks `untrack()` and convergence checking, generating an infinite reactive feedback loop (`ERR_SVELTE_TOO_MANY_UPDATES`). ```typescript import { writable, type Writable } from 'svelte/store'; // ANTI-PATTERN: Module-level state machine bridging stores and runes without ownership boundaries export class StoreBridgeMachine { public count = $state(0); private store: Writable<number>; constructor(legacyStore: Writable<number>) { this.store = legacyStore; // CRITICAL BUG: Module/class instantiated effect creates an orphaned reactive context. // Reading this.count and updating this.store without untrack causes infinite loops. // Subscribing to store and mutating this.count directly creates circular re-entrancy // and leaks memory when the referencing component unmounts. $effect(() => { this.store.set(this.count); }); this.store.subscribe((val) => { this.count = val; }); } } ``` #### Production Standard (Correct) > **Standard**: Wraps reactive effects in `$effect.root()` to ensure module/service level isolation, uses `untrack()` to prevent the effect from re-triggering itself when writing to the store, enforces dirty-checking before mutation, and provides an explicit teardown interface (`destroy` and `Symbol.dispose`) to prevent memory leaks. ```typescript import { untrack } from 'svelte'; import type { Writable, Unsubscriber } from 'svelte/store'; // PRODUCTION FIX: Explicit $effect.root isolation, untracked mutations, and deterministic disposal export class StoreBridgeMachine { public count = $state(0); private store: Writable<number>; private cleanupRoot: () => void; private storeUnsub: Unsubscriber; constructor(legacyStore: Writable<number>) { this.store = legacyStore; // 1. Establish an isolated reactive ownership tree outside component bounds this.cleanupRoot = $effect.root(() => { $effect(() => { const current = this.count; // 2. Break dependency cycle using untrack when pushing rune updates to external store untrack(() => { this.store.update((val) => (val !== current ? current : val)); }); }); }); // 3. Mirror store updates to signal with dirty-checking convergence guard this.storeUnsub = this.store.subscribe((val) => { if (this.count !== val) { this.count = val; } }); } public [Symbol.dispose](): void { this.destroy(); } public destroy(): void { this.cleanupRoot(); this.storeUnsub(); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes: Signals-to-Store Boundary & Ownership Tree Isolation

Svelte 5 Runes: Signals-to-Store Boundary & Ownership Tree Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic ownership tree isolation when bridging external event streams or legacy Svelte stores with Svelte 5 Runes. Prevents catastrophic memory leaks, orphaned reactive tracking roots, and cyclical cascading invalidations by mandating explicit lexical scoping, effect roots, and untracked boundary 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: Unbounded Module-Level Effects and Cyclical Store-to-Rune Bidirectional Binding Leaks 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	Unbounded Module-Level Effects and Cyclical Store-to-Rune Bidirectional Binding Leaks	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 instantiate module-scoped reactive primitives within an explicit `$effect.root()` when managing reactive lifecycles outside of component initialization.

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.