Svelte 5 Snippet Context Scoping and Memory Leak Prevention

--- description: Svelte 5 Snippet Context Scoping and Memory Leak Prevention - Enforces strict lexical and reactive scoping rules for Svelte 5 snippets passed across recursive component boundaries. Prevents implicit closure over parent component runes ($state, $derived) and context lookups (getContext) that trigger unintended reactive context bleeding and cyclic memory retention across unmounted tree segments. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-snippet-template-scoping-guardrail" --- # Svelte 5 Snippet Context Scoping and Memory Leak Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Implicit Parent Lexical Closure and Context Bleed Inside Recursive Snippet Invocations ## System Constraints You are a Principal Software Architect enforcing Svelte 5 runtime safety. You must prevent memory leaks, unbounded closure capture, and stale reactive context bleed when passing Svelte 5 snippets (#snippet) through recursive tree structures and across slot boundaries. ## Strict Guidelines - Engineers MUST ALWAYS pass required reactive state as explicit arguments to `#snippet` definitions rather than implicitly closing over parent component scope runes. - Engineers MUST NOT invoke `getContext()` or read ancestor component-level `$state` inside snippets designed to be rendered by decoupled or recursive child components. - Snippets passed down recursive component trees MUST be pure with respect to their input arguments, operating strictly on parameter payloads rather than outer scope state references. - Components rendering recursive structures MUST pass explicitly derived iteration state into `{@render snippet(payload)}` to ensure teardown handles correctly isolate reactive graphs. - Components NEVER attach persistent event listeners or create long-lived subscriptions inside snippets without linking them directly to the rendering component's `$effect` lifecycle. ## Bad vs Good Implementations ### Recursive Tree Node Snippet Scoping #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The snippet `renderNode` captures `node` and `selectedId` from its outer component's lexical scope. When passed to child `TreeView` components recursively, every recursion level retains references to the root component's reactive state and fails to bind child-specific node properties accurately, leading to cross-node reactive crosstalk and memory leaks on partial tree unmounts. ```svelte <script lang="ts"> import type { TreeNode } from './types'; import TreeView from './TreeView.svelte'; let { node } = $props<{ node: TreeNode }>(); let selectedId = $state<string | null>(null); </script> {#snippet renderNode()}   <div class:active={selectedId === node.id}> <span>{node.label}</span> {#if node.children} {#each node.children as child (child.id)} <TreeView node={child} {renderNode} /> {/each} {/if} </div> {/snippet} {@render renderNode()} ``` #### Production Standard (Correct) > **Standard**: The snippet explicitly parameterizes all reactive bindings (`node`, `isSelected`, `onSelect`). Recursive child invocations receive isolated contexts through argument application, completely avoiding lexical scope leaks and ensuring memory reclamation when subtrees are removed. ```svelte <script lang="ts"> import type { TreeNode } from './types'; import TreeView from './TreeView.svelte'; import type { Snippet } from 'svelte'; interface Props { node: TreeNode; selectedId: string | null; onSelect: (id: string) => void; nodeTemplate?: Snippet<[{ node: TreeNode; isSelected: boolean; onSelect: (id: string) => void }]>; } let { node, selectedId, onSelect, nodeTemplate }: Props = $props(); </script> {#snippet defaultTemplate({ node: current, isSelected, onSelect: handleSelect }: { node: TreeNode; isSelected: boolean; onSelect: (id: string) => void })} <div class:active={isSelected} onclick={() => handleSelect(current.id)}> <span>{current.label}</span> {#if current.children} {#each current.children as child (child.id)} <TreeView node={child} {selectedId} {onSelect} nodeTemplate={nodeTemplate ?? defaultTemplate} /> {/each} {/if} </div> {/snippet} {@render (nodeTemplate ?? defaultTemplate)({ node, isSelected: selectedId === node.id, onSelect })} ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Snippet Context Scoping and Memory Leak Prevention

Svelte 5 Snippet Context Scoping and Memory Leak Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict lexical and reactive scoping rules for Svelte 5 snippets passed across recursive component boundaries. Prevents implicit closure over parent component runes ($state, $derived) and context lookups (getContext) that trigger unintended reactive context bleeding and cyclic memory retention across unmounted tree segments. 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: Implicit Parent Lexical Closure and Context Bleed Inside Recursive Snippet Invocations 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	Implicit Parent Lexical Closure and Context Bleed Inside Recursive Snippet Invocations	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 pass required reactive state as explicit arguments to `#snippet` definitions rather than implicitly closing over parent component scope runes.

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.