Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard

--- description: Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard - Mandates deterministic lifecycle cleanup and boundary isolation for deep reactive $state and $derived dependency graphs in Svelte 5. Prevents orphan signal nodes, retained subscriber closures, and micro-memory leaks during high-frequency telemetry streaming across dynamic route transitions. globs: src/**/*.{svelte,svelte.ts,svelte.js,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-signal-tree-teardown-and-boundary-isolation" --- # Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking Signal Trees via Unbounded Global Subscriptions and Dangling Derived Effects During Route Transitions ## System Constraints You are a Principal Software Architect enforcing the Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard. In Svelte 5, runes ($state, $derived, $effect) build fine-grained dependency graphs compiled into reactive signal primitives. In high-frequency analytical dashboards (such as WebSocket streaming feeds, trade blotters, and time-series telemetry), instantiating reactive signals outside isolated component lifecycles or failing to unlink signal roots leads to progressive micro-memory retention and catastrophic browser thread degradation. You must enforce deterministic lifecycle encapsulation, explicit $effect.root cleanup, and strictly bounded streaming adapters across all dynamic route boundaries. ## Strict Guidelines - Engineers MUST ALWAYS encapsulate streaming telemetry signal graphs within explicit lifecycle scopes or class instances implementing an idempotent destroy/dispose teardown method. - Engineers MUST ALWAYS wrap non-component reactive signal trees (instantiated in shared services or utility modules) in Svelte 5's $effect.root and invoke the returned teardown closure on route unmount. - Engineers MUST NOT attach global event buses, WebSockets, or Worker message listeners directly to module-scoped $state singletons without dynamic subscriber reference counting and unsubscription. - Engineers MUST NEVER allow high-frequency $derived or $derived.by graphs to retain references to unmounted component contexts or stale closure variables. - Services MUST decouple raw streaming ingestion buffers from the reactive signal tree by batching updates through requestAnimationFrame or microtask schedulers to prevent signal graph thrashing. - Components NEVER capture un-isolated signal references in persistent external singletons, global maps, or window-level diagnostic hooks without explicit boundary cleanup. ## Bad vs Good Implementations ### High-Frequency Dashboard Signal Ingestion and Boundary Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: MetricsBuffer is retained at the module scope with a dangling WebSocket listener. As users navigate across analytical dashboards, each mount triggers a new socket while maintaining retained reactive edges in the signal graph, causing orphan calculations and cumulative micro-memory leaks. ```typescript // TelemetryFeed.svelte.ts - Anti-Pattern: Global module state leaking signal dependencies across routes let metricsBuffer = $state<Record<string, number>>({}); export const dashboardMetrics = $derived.by(() => { return Object.entries(metricsBuffer).map(([key, value]) => ({ metric: key, normalized: value * 100 })); }); export function connectTelemetry(socketUrl: string) { const ws = new WebSocket(socketUrl); ws.onmessage = (event) => { const payload = JSON.parse(event.data); // Unbounded mutation of global signal retaining dependency references metricsBuffer[payload.id] = payload.value; }; // Missing disconnection and teardown: socket and signal remain alive // after component unmount, leaking memory on every route navigation. } ``` #### Production Standard (Correct) > **Standard**: The session encapsulates $state within an isolated instance, manages WebSocket binding within an explicit $effect.root lifecycle, and provides an idempotent destroy() method that severs all signal dependencies, closes sockets, and unlinks the reactive graph upon route departure. ```typescript // TelemetryFeed.svelte.ts - Production Invariant: Encapsulated lifecycle with $effect.root isolation import { untrack } from 'svelte'; export interface TelemetrySnapshot { metric: string; normalized: number; } export class TelemetrySession { #socket: WebSocket | null = null; #metrics = $state<Record<string, number>>({}); #cleanupRoot: (() => void) | null = null; // Derived signals isolated to this instance public readonly metricsView = $derived.by<TelemetrySnapshot[]>(() => { return Object.entries(this.#metrics).map(([metric, value]) => ({ metric, normalized: value * 100 })); }); constructor(private readonly socketUrl: string) {} public init(): void { // Isolate signal computations outside of standard component templates this.#cleanupRoot = $effect.root(() => { this.#socket = new WebSocket(this.socketUrl); this.#socket.onmessage = (event: MessageEvent<string>) => { const payload = JSON.parse(event.data) as { id: string; value: number }; // Untrack to avoid capturing ambient reactive contexts untrack(() => { this.#metrics[payload.id] = payload.value; }); }; return () => { if (this.#socket) { this.#socket.onmessage = null; this.#socket.close(); this.#socket = null; } }; }); } public destroy(): void { if (this.#cleanupRoot) { this.#cleanupRoot(); this.#cleanupRoot = null; } this.#metrics = {}; } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard

Svelte 5 Signal-Tree Teardown and Boundary Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Mandates deterministic lifecycle cleanup and boundary isolation for deep reactive $state and $derived dependency graphs in Svelte 5. Prevents orphan signal nodes, retained subscriber closures, and micro-memory leaks during high-frequency telemetry streaming across dynamic 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: Leaking Signal Trees via Unbounded Global Subscriptions and Dangling Derived Effects During Route Transitions 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	Leaking Signal Trees via Unbounded Global Subscriptions and Dangling Derived Effects During Route Transitions	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 encapsulate streaming telemetry signal graphs within explicit lifecycle scopes or class instances implementing an idempotent destroy/dispose teardown method.

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.