Svelte 5 Runes: Universal Reactivity Isolation & Cross-Request SSR Leak Prevention

--- description: Svelte 5 Runes: Universal Reactivity Isolation & Cross-Request SSR Leak Prevention - Enforces strict encapsulation of Svelte 5 rune primitives ($state, $derived) and explicit lifecycle termination ($effect.root) inside per-request contexts. Prevents catastrophic multi-tenant state bleed and memory retention hazards across concurrent requests in long-lived Node.js and Edge SSR runtimes. 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/svelte5-runes-universal-reactivity-isolation" --- # Svelte 5 Runes: Universal Reactivity Isolation & Cross-Request SSR Leak Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Module-Scoped $state Singletons Leaking User Data Across Concurrent SSR Sessions ## System Constraints You are a Principal Software Architect enforcing Svelte 5 Runes Universal Reactivity Isolation. Svelte 5 enables reactive primitives ($state, $derived, $effect) outside of components in *.svelte.ts modules. You must prevent module-level reactive declarations that persist in memory across concurrent server requests, which causes critical cross-tenant data leaks and memory degradation in SSR and Edge worker environments. Ensure all reactive instances are bound strictly to component lifecycles or per-request context boundaries. ## Strict Guidelines - Engineers MUST NEVER declare top-level or module-scoped '$state', '$state.raw', or '$derived' instances in shared modules (.svelte.ts / .svelte.js). - Engineers MUST encapsulate shared reactive logic within factory functions or instanced classes that are explicitly bound to per-request lifecycles via 'setContext' and 'getContext'. - Engineers MUST ALWAYS store and execute the cleanup return value of '$effect.root()' when instantiating reactive trees outside component contexts. - Engineers MUST NEVER invoke reactive writes or subscribe to '$effect' during SSR execution passes where cleanup cannot be guaranteed. - Components and server hooks MUST instantiate domain stores inside load functions or component setup scopes, never importing static mutable singletons across module boundaries. ## Bad vs Good Implementations ### Global Module-Level State vs. Request-Scoped Context Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Module-level $state creates a single global variable in the JavaScript execution context. Under Node.js or Edge runtimes (Vercel, Cloudflare Workers), module scope is shared across concurrent and sequential HTTP requests, leading to severe cross-tenant session leaks and race conditions. ```typescript // src/lib/stores/session.svelte.ts // FATAL: In SSR/Edge environments, this module-level singleton persists across requests. // User A's session data leaks to User B on subsequent requests to the same worker instance. export const sessionState = $state({ userId: null as string | null, role: 'guest', permissions: [] as string[] }); export function setSession(userId: string, role: string) { sessionState.userId = userId; sessionState.role = role; } ``` #### Production Standard (Correct) > **Standard**: Encapsulating state inside a class and binding it via Svelte's context API ensures that the instance is isolated to the specific component hierarchy executed for a single request, preventing multi-tenant data contamination. ```typescript // src/lib/stores/session.svelte.ts import { getContext, setContext } from 'svelte'; const SESSION_KEY = Symbol('SESSION_CONTEXT'); export class SessionStore { #userId = $state<string | null>(null); #role = $state<string>('guest'); #permissions = $state<string[]>([]); constructor(initialUser: string | null = null, initialRole: string = 'guest') { this.#userId = initialUser; this.#role = initialRole; } get userId() { return this.#userId; } get role() { return this.#role; } update(userId: string, role: string) { this.#userId = userId; this.#role = role; } } export function initSessionContext(initialUser?: string | null, initialRole?: string): SessionStore { const store = new SessionStore(initialUser, initialRole); return setContext(SESSION_KEY, store); } export function getSessionContext(): SessionStore { const store = getContext<SessionStore>(SESSION_KEY); if (!store) { throw new Error('SessionContext accessed outside per-request component lifecycle'); } return store; } ``` ### Unmanaged $effect.root vs. Managed Lifecycle Teardown #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Instantiating an unmanaged $effect.root leaks computation nodes in memory. If invoked in server hooks or transient services, the effect graph continues to run indefinitely, exhausting memory and producing duplicate trigger callbacks. ```typescript // src/lib/services/analytics-tracker.svelte.ts export function startUniversalTracking(source: () => string) { // Anti-Pattern: $effect.root instantiated without capturing teardown handles $effect.root(() => { $effect(() => { console.log(`Tracking state transition: ${source()}`); }); }); } ``` #### Production Standard (Correct) > **Standard**: Explicitly returning the disposal function from $effect.root allows the parent context or server-side hook to tear down reactive graph dependencies immediately upon request completion or component unmount. ```typescript // src/lib/services/analytics-tracker.svelte.ts export interface ScopedTracker { destroy: () => void; } export function createScopedTracker(source: () => string): ScopedTracker { // Invariant: Capture the disposal function returned by $effect.root const cleanup = $effect.root(() => { $effect(() => { console.log(`Tracking state transition: ${source()}`); }); }); return { destroy: () => { cleanup(); } }; } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes: Universal Reactivity Isolation & Cross-Request SSR Leak Prevention

Svelte 5 Runes: Universal Reactivity Isolation & Cross-Request SSR Leak Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict encapsulation of Svelte 5 rune primitives ($state, $derived) and explicit lifecycle termination ($effect.root) inside per-request contexts. Prevents catastrophic multi-tenant state bleed and memory retention hazards across concurrent requests in long-lived Node.js and Edge SSR runtimes. 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: Module-Scoped $state Singletons Leaking User Data Across Concurrent SSR Sessions 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	Module-Scoped $state Singletons Leaking User Data Across Concurrent SSR Sessions	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 NEVER declare top-level or module-scoped '$state', '$state.raw', or '$derived' instances in shared modules (.svelte.ts / .svelte.js).

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.