Svelte 5 Deep Signal Runes Ownership & Detached Effect Cleanup Guardrail

--- description: Svelte 5 Deep Signal Runes Ownership & Detached Effect Cleanup Guardrail - Enforces strict reactive ownership boundaries and deterministic teardown for Svelte 5 runes ($state, $effect, $derived) instantiated across asynchronous boundaries or dynamic service scopes. Prevents runaway memory leaks and orphaned reactive computations in long-lived single-page applications by mandating explicit $effect.root scoping and deterministic lifecycle cleanup for unparented signals. 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-runes-ownership-detached-effect-cleanup" --- # Svelte 5 Deep Signal Runes Ownership & Detached Effect Cleanup Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Spawning un-scoped reactive effects and deep signal graphs across async boundaries without deterministic $effect.root disposal ## System Constraints You are a Principal Software Architect enforcing rigorous Svelte 5 reactivity invariants. Svelte 5 replaces runtime store subscriptions with compiler-orchestrated runes ($state, $effect, $derived). You must ensure that no reactive signals or effects are initialized in detached asynchronous execution paths (e.g., after an await boundary, inside setTimeout, or within event listeners) without explicit containment via $effect.root. You strictly prohibit deep dynamic signal allocation without explicit lifecycle-tied disposers. ## Strict Guidelines - Engineers MUST NOT instantiate $effect or reactive subscriptions inside asynchronous continuations (after an 'await' keyword, inside Promise callbacks, or in event emitters) without an encapsulating $effect.root scope. - Engineers MUST capture the teardown function returned by $effect.root() and invoke it deterministically when the consumer component unmounts or before re-instantiating the effect graph. - Engineers MUST prefer $state.raw for immutable, deeply nested, or externally synchronized payloads that do not require recursive fine-grained proxy tracking. - Services that manage dynamic reactive rune state outside the synchronous component initialization phase MUST expose an explicit destroy() or dispose() method that tears down all child effects. - Components NEVER store long-lived signal references across SPA page navigation boundaries in global singletons without an explicit unsubscription and garbage-collection mechanism. ## Bad vs Good Implementations ### Asynchronous Effect Creation and Teardown with $effect.root #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Calling $effect after an 'await' boundary or in an untracked class method leaves the reactive computation detached from the Svelte component tree. The effect cannot automatically register its cleanup callback to the component lifecycle, retaining memory and continuing to execute timers indefinitely. ```typescript // src/lib/stores/poller.svelte.ts import { $state, $effect } from 'svelte'; export class LiveMetricMonitor { data = $state({ count: 0, metrics: [] }); async startPolling(endpoint: string) { const response = await fetch(endpoint); const initialData = await response.json(); this.data.metrics = initialData; // ANTI-PATTERN: Calling $effect after async boundary or outside component context. // In Svelte 5, this effect becomes detached from any parent component lifecycle // and will leak indefinitely across route changes, never being collected. $effect(() => { console.log('Metrics updated:', this.data.metrics); const interval = setInterval(async () => { const res = await fetch(endpoint); this.data.metrics = await res.json(); }, 5000); return () => clearInterval(interval); }); } } ``` #### Production Standard (Correct) > **Standard**: The fix uses $effect.root to explicitly govern the lifetime of effects spawned after async boundaries. It stores the teardown function, cleans up prior iterations before re-polling, and exposes stopPolling() for deterministic teardown during component unmount. ```typescript // src/lib/stores/poller.svelte.ts import { $state, $effect } from 'svelte'; export class LiveMetricMonitor { data = $state.raw<{ count: number; metrics: unknown[] }>({ count: 0, metrics: [] }); private cleanupRoot: (() => void) | null = null; async startPolling(endpoint: string) { this.stopPolling(); const response = await fetch(endpoint); const initialData = await response.json(); this.data = { count: initialData.length, metrics: initialData }; // PRODUCTION FIX: Explicitly create an isolated reactive root to encapsulate post-async effects this.cleanupRoot = $effect.root(() => { $effect(() => { console.log('Metrics updated:', this.data.metrics); const interval = setInterval(async () => { const res = await fetch(endpoint); const nextData = await res.json(); this.data = { count: nextData.length, metrics: nextData }; }, 5000); return () => clearInterval(interval); }); }); } stopPolling() { if (this.cleanupRoot) { this.cleanupRoot(); this.cleanupRoot = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Deep Signal Runes Ownership & Detached Effect Cleanup Guardrail

Svelte 5 Deep Signal Runes Ownership & Detached Effect Cleanup Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict reactive ownership boundaries and deterministic teardown for Svelte 5 runes ($state, $effect, $derived) instantiated across asynchronous boundaries or dynamic service scopes. Prevents runaway memory leaks and orphaned reactive computations in long-lived single-page applications by mandating explicit $effect.root scoping and deterministic lifecycle cleanup for unparented signals. 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: Spawning un-scoped reactive effects and deep signal graphs across async boundaries without deterministic $effect.root disposal 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	Spawning un-scoped reactive effects and deep signal graphs across async boundaries without deterministic $effect.root disposal	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 NOT instantiate $effect or reactive subscriptions inside asynchronous continuations (after an 'await' keyword, inside Promise callbacks, or in event emitters) without an encapsulating $effect.root scope.

Engineers MUST NOT instantiate $effect or reactive subscriptions inside asynchronous continuations (after an 'await' keyword, inside Promise callbacks, or in event emitters) without an encapsulating $effect.root scope.

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.