Svelte 5 Universal Runes Boundary & Signal Leakage Prevention

--- description: Svelte 5 Universal Runes Boundary & Signal Leakage Prevention - Enforces strict boundary encapsulation between Svelte 5 fine-grained reactive signals ($state, $derived, $effect) and external un-tracked DOM cycles or universal runtime singletons. Eliminates memory leaks and uncollected component subtrees caused by escaped reactive closures and unmanaged effect roots. 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-boundary-signal-leakage-prevention" --- # Svelte 5 Universal Runes Boundary & Signal Leakage Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Escaping Reactive Signal Graphs into Long-Lived DOM Handlers and Uncontained Universal Modules ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Universal Runes Boundary & Signal Leakage Prevention. Mandate strict boundary isolation between Svelte 5 fine-grained reactivity and unmanaged external scopes (DOM listeners, WebSockets, external instances, global caches). Ensure signal reads in non-reactive bridges are isolated with untrack(), universal module effects are gated via $effect.root(), and all event-driven signal updates strictly manage tear-down lifecycles to prevent cross-component memory pinholes. ## Strict Guidelines - Engineers MUST ALWAYS isolate external non-reactive reads from signal graphs using untrack() when reading reactive state inside side-effect bridges or third-party mutation listeners. - Engineers MUST ALWAYS return a teardown function from $effect blocks when registering DOM event listeners, MutationObservers, or WebSocket subscribers. - Universal reactive modules (.svelte.ts) that instantiate effects outside a component mounting tree MUST ALWAYS wrap those effects within an explicit $effect.root() and export a disposal lifecycle hook. - Engineers MUST NOT leak $state proxies directly into unmanaged third-party libraries; pass plain snapshot clones using $state.snapshot() when interfacing with external mutable APIs. - Components NEVER attach window, document, or global event handlers directly modifying fine-grained signals without binding teardown hooks inside onDestroy or returning disposers from $effect. ## Bad vs Good Implementations ### Universal Window Viewport Observer in .svelte.ts #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Attaching raw signal updates directly to global event listeners inside universal classes without an explicit teardown mechanism or effect boundary causes instances to remain retained in the window event listener table permanently, preventing garbage collection across client-side page transitions. ```typescript // Bad: Unmanaged signal attachment and missing effect root in universal module // Creates permanent memory leaks and retains component references across navigations export class ViewportTracker { width = $state(typeof window !== 'undefined' ? window.innerWidth : 0); constructor() { if (typeof window !== 'undefined') { // Leak: Global event listener retains this instance permanently // No teardown or boundary isolation provided window.addEventListener('resize', () => { this.width = window.innerWidth; }); } } } ``` #### Production Standard (Correct) > **Standard**: Wraps the reactive effect inside an explicit $effect.root() container and exposes a deterministic destroy() method. The inner $effect provides immediate teardown of the DOM listener upon disposal, completely severing the link to the global window object. ```typescript // Good: Encapsulated effect root with explicit disposal and boundary isolation export class ViewportTracker { width = $state(0); #cleanup: (() => void) | null = null; constructor() { if (typeof window === 'undefined') return; this.#cleanup = $effect.root(() => { $effect(() => { const onResize = () => { this.width = window.innerWidth; }; window.addEventListener('resize', onResize, { passive: true }); return () => { window.removeEventListener('resize', onResize); }; }); }); } destroy(): void { if (this.#cleanup) { this.#cleanup(); this.#cleanup = null; } } } ``` ### Passing Fine-Grained Signals to Imperative Third-Party DOM Libraries #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing the raw $state proxy directly into a non-reactive imperative library exposes Svelte's reactive graph to external un-tracked mutation, causing unpredictable reactive loops and retaining internal signal nodes inside external caches. ```typescript // Bad: Passing raw reactive state directly into third-party mutating DOM charting library // Leads to signal leakage and unintended proxy mutations outside Svelte runtime tracking import Chart from 'external-chart-library'; let config = $state({ labels: ['A', 'B'], data: [10, 20] }); let chartInstance: Chart | null = null; $effect(() => { if (!chartInstance) { chartInstance = new Chart('#canvas', config); // Leaks reactive proxy into external mutator } else { chartInstance.update(config); } }); ``` #### Production Standard (Correct) > **Standard**: Using $state.snapshot() extracts pure non-reactive primitive data, untrack() prevents downstream library operations from triggering reactive dependencies, and the returned teardown callback guarantees deterministic resource cleanup. ```typescript // Good: Decoupling signals via $state.snapshot and untrack boundary import Chart from 'external-chart-library'; import { untrack } from 'svelte'; let config = $state({ labels: ['A', 'B'], data: [10, 20] }); let chartInstance: Chart | null = null; $effect(() => { // Create an immutable, plain JavaScript clone free of reactive signal proxies const serializedConfig = $state.snapshot(config); untrack(() => { if (!chartInstance) { chartInstance = new Chart('#canvas', serializedConfig); } else { chartInstance.update(serializedConfig); } }); return () => { if (chartInstance) { chartInstance.destroy(); chartInstance = null; } }; }); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Universal Runes Boundary & Signal Leakage Prevention

Svelte 5 Universal Runes Boundary & Signal Leakage Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary encapsulation between Svelte 5 fine-grained reactive signals ($state, $derived, $effect) and external un-tracked DOM cycles or universal runtime singletons. Eliminates memory leaks and uncollected component subtrees caused by escaped reactive closures and unmanaged effect roots. 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: Escaping Reactive Signal Graphs into Long-Lived DOM Handlers and Uncontained Universal Modules 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	Escaping Reactive Signal Graphs into Long-Lived DOM Handlers and Uncontained Universal Modules	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 external non-reactive reads from signal graphs using untrack() when reading reactive state inside side-effect bridges or third-party mutation listeners.

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.