Svelte 5 $effect.root Scope Cleanup Invariant in SSR Streaming

--- description: Svelte 5 $effect.root Scope Cleanup Invariant in SSR Streaming - Enforces mandatory deterministic teardown of universal $effect.root scopes within server-side rendering (SSR) and streaming pipelines. Svelte 5 reactive scopes instantiated outside standard component hierarchies persist in the node process memory unless their teardown callback is invoked, causing cross-request data leaks and signal graph memory bloat. 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-scope-cleanup-boundary" --- # Svelte 5 $effect.root Scope Cleanup Invariant in SSR Streaming > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Instantiating unbounded $effect.root reactive scopes during SSR without lifecycle-bound teardown handlers. ## System Constraints You are a Principal Software Architect enforcing rigorous memory hygiene and signal graph isolation in Svelte 5 applications. You must ensure that every universal or server-side invocation of $effect.root is paired with an uncompromising teardown execution path, preventing cross-request signal retention and memory leaks during SSR streaming. ## Strict Guidelines - Engineers MUST ALWAYS capture and invoke the cleanup disposer returned by $effect.root() when executing reactive logic in request lifecycles. - Engineers MUST NOT instantiate global, module-level $effect.root instances that retain state across concurrent server-side requests. - Code SHOULD bind $effect.root teardown routines directly to SvelteKit request events or streaming stream.on('close') / transform flush handlers. - Services MUST isolate reactive stores to Svelte context (setContext/getContext) or per-request instantiations rather than universal module-level singletons. - Components NEVER execute bare $effect.root blocks within server load functions or universal layout loaders without explicit try/finally cleanup guarantees. ## Bad vs Good Implementations ### Universal Reactive Store with $effect.root Lifecycle Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: $effect.root creates an independent reactive boundary that is detached from the component tree. When executed on the server or during SSR streaming without capturing and calling the returned disposer, signal nodes, dependencies, and closures remain active in memory forever, leading to cross-request context leakage and Node.js process Out-Of-Memory (OOM) crashes. ```typescript import { $state, $effect } from 'svelte'; // ANTI-PATTERN: Global reactive runner retains signal dependencies // across distinct SSR requests, leaking subscriber closures. export function createStreamingSubscriber(sourceStream: ReadableStream) { let data = $state<string>(''); // Unbounded effect root without teardown reference $effect.root(() => { $effect(() => { console.log('Stream chunk processed:', data); }); }); return { read: () => data, update: (chunk: string) => { data = chunk; } }; } ``` #### Production Standard (Correct) > **Standard**: Capturing the cleanup function returned by $effect.root() enables deterministic destruction of the signal sub-tree. The `destroy()` method can be wired directly into SvelteKit request handlers, server streaming transforms, or onDestroy hooks, preventing unbounded signal retention. ```typescript import { $state, $effect } from 'svelte'; // PRODUCTION FIX: Explicit lifecycle teardown boundary returned and tracked export interface ScopedSubscriber { read: () => string; update: (chunk: string) => void; destroy: () => void; } export function createStreamingSubscriber(onCleanup?: () => void): ScopedSubscriber { let data = $state<string>(''); // Capture the scope disposal callback explicitly const cleanup = $effect.root(() => { $effect(() => { // Synchronized effect tied directly to this root's lifecycle if (data) { // Process streaming state securely } }); }); let isDestroyed = false; const destroy = () => { if (isDestroyed) return; isDestroyed = true; cleanup(); // Dismantle signal graph node immediately onCleanup?.(); }; return { read: () => data, update: (chunk: string) => { if (isDestroyed) throw new Error('Cannot update destroyed reactive scope'); data = chunk; }, destroy }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 $effect.root Scope Cleanup Invariant in SSR Streaming

Svelte 5 $effect.root Scope Cleanup Invariant in SSR Streaming defines an industrial-grade behavioral standard for frontend engineering. Enforces mandatory deterministic teardown of universal $effect.root scopes within server-side rendering (SSR) and streaming pipelines. Svelte 5 reactive scopes instantiated outside standard component hierarchies persist in the node process memory unless their teardown callback is invoked, causing cross-request data leaks and signal graph memory bloat. 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: Instantiating unbounded $effect.root reactive scopes during SSR without lifecycle-bound teardown handlers. 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	Instantiating unbounded $effect.root reactive scopes during SSR without lifecycle-bound teardown handlers.	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 capture and invoke the cleanup disposer returned by $effect.root() when executing reactive logic in request lifecycles.

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.