Svelte 5 Runes Reactive Scope Isolation Standard

--- description: Svelte 5 Runes Reactive Scope Isolation Standard - Enforces strict lifecycle boundaries and reactive scope containment for Svelte 5 runes ($state, $derived, $effect) instantiated in long-lived non-component contexts and external stores. Prevents memory leaks and untracked microtask state desynchronization caused by uncontained $effect.root scopes and asynchronous state mutations across route transitions. 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-reactive-scope-isolation-standard" --- # Svelte 5 Runes Reactive Scope Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dangling Root Runes and Orphaned $effect Subscriptions Leaking Memory Across Route Navigation ## System Constraints You are a Principal Engineer enforcing the Svelte 5 Runes Reactive Scope Isolation Standard. You must rigorously inspect and prevent un-encapsulated reactive runes outside active component lifecycles. Ensure every non-component $effect or $derived pipeline outside component boundaries is wrapped in an explicit $effect.root with a strictly tracked disposal callback. Prevent race conditions and unhandled microtask updates in asynchronous workflows. ## Strict Guidelines - Engineers MUST ALWAYS wrap non-component reactive effects instantiated in `.svelte.ts` utility files or singleton services within an explicit `$effect.root()` closure. - Engineers MUST ALWAYS capture and invoke the returned teardown function from `$effect.root()` during module unmount, page transitions, or service cleanup. - Engineers MUST NOT instantiate naked `$effect()` calls in standalone TypeScript modules outside of an active reactive tracking boundary or component scope. - Services MUST isolate reactive mutation batches using `untrack()` when querying reactive values within asynchronous callbacks to prevent unintended dependency recalculation across microtasks. - Components NEVER capture global `$state` proxies across asynchronous boundaries without guarding against post-teardown execution using explicit abort controllers or cancellation flags. ## Bad vs Good Implementations ### Module-Level Effect Lifecycle Isolation via $effect.root #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Creating an $effect in a standalone class without $effect.root causes Svelte 5 runtime warnings or uncollected reactive subscriptions. In long-lived single-page sessions, multiple service instances create dangling graph nodes that leak memory and repeatedly fire flush operations after the associated UI unmounts. ```typescript // src/lib/stores/telemetry.svelte.ts import { $state, $effect } from 'svelte/runes'; export class TelemetrySession { status = $state<'idle' | 'recording'>('idle'); buffer = $state<string[]>([]); constructor() { // ANTI-PATTERN: Naked $effect outside component or root boundary causes memory leaks // and retains entire class instance indefinitely in global reactive graph. $effect(() => { console.log(`Buffer changed: ${this.buffer.length}`); if (this.buffer.length > 50) { this.flush(); } }); } flush(): void { this.buffer = []; } } ``` #### Production Standard (Correct) > **Standard**: Wrapping effects in $effect.root allows manual lifecycle management in non-component TypeScript classes. Providing an explicit destroy() hook ensures that reactive graph connections are torn down cleanly, while untrack() avoids cascading dependency captures during mutation flushes. ```typescript // src/lib/stores/telemetry.svelte.ts import { untrack } from 'svelte'; export class TelemetrySession { status = $state<'idle' | 'recording'>('idle'); buffer = $state<string[]>([]); private teardown: (() => void) | null = null; constructor() { // PRODUCTION FIX: Explicit $effect.root establishes bound lifecycle and disposal this.teardown = $effect.root(() => { $effect(() => { const currentCount = this.buffer.length; if (currentCount > 50) { untrack(() => this.flush()); } }); }); } flush(): void { this.buffer = []; } destroy(): void { if (this.teardown) { this.teardown(); this.teardown = null; } } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive Scope Isolation Standard

Svelte 5 Runes Reactive Scope Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict lifecycle boundaries and reactive scope containment for Svelte 5 runes ($state, $derived, $effect) instantiated in long-lived non-component contexts and external stores. Prevents memory leaks and untracked microtask state desynchronization caused by uncontained $effect.root scopes and asynchronous state mutations across route 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: Dangling Root Runes and Orphaned $effect Subscriptions Leaking Memory Across Route Navigation 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	Dangling Root Runes and Orphaned $effect Subscriptions Leaking Memory Across Route Navigation	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 wrap non-component reactive effects instantiated in `.svelte.ts` utility files or singleton services within an explicit `$effect.root()` closure.

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.