Svelte 5 Snippet Parameter Immutability and DOM Detach Barrier

--- description: Svelte 5 Snippet Parameter Immutability and DOM Detach Barrier - Enforces strict immutability of parameters passed into Svelte 5 snippets and establishes clean teardown barriers for dynamic snippet renders. Mutating snippet arguments or closing over mutating outer rune state within dynamic SSR snippets causes reactive signal desynchronization, hydration mismatches, and memory leaks from orphaned DOM references. globs: src/**/*.{svelte,svelte.ts,svelte.js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-snippet-immutability-dom-detach-barrier" --- # Svelte 5 Snippet Parameter Immutability and DOM Detach Barrier > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Snippet Closure Arguments or Leaking Outer Reactive Runes into Snippet Dynamic Blocks ## System Constraints You are a Principal Frontend Architect enforcing absolute parameter immutability and memory-safe DOM attachment boundaries in Svelte 5 snippets. You must reject any pattern where snippet closures mutate incoming positional parameters, bind directly to external mutable runes without explicit down-streaming events, or capture unmanaged DOM references that survive snippet destruction. ## Strict Guidelines - Engineers MUST treat all parameters delivered to a Svelte 5 `{#snippet ...}` definition as strictly read-only values. - Engineers MUST NOT bind to (`bind:value`, `bind:checked`) or directly assign mutations to snippet parameters. - Components rendering dynamic snippets via `{@render ...}` MUST derive their dynamic inputs using `$derived` or pure accessors to guarantee deterministic SSR and hydration parity. - Components MUST decouple template block closures from reactive rune write-paths by propagating changes through explicit event dispatchers or callback props rather than in-place reference mutations. - Engineers MUST ensure that any action, manual listener, or detached node instantiated inside a snippet block cleans up its listeners and references during the Svelte 5 destroy/detach phase. ## Bad vs Good Implementations ### Direct Mutation of Snippet Parameter vs Pure Event-Driven Downward Flow #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly binding or assigning to `task.completed` and `task.title` within the snippet treats the snippet parameter as mutable proxy state. In dynamic SSR hydration cycles and virtual lists, this breaks reactive lineage, leads to stale DOM nodes, and triggers hydration mismatches. ```svelte <script lang="ts"> interface Item { id: string; title: string; completed: boolean; } let items = $state<Item[]>([ { id: '1', title: 'Task A', completed: false } ]); </script> {#snippet taskRow(task: Item)}  <div class="row"> <input type="checkbox" bind:checked={task.completed} /> <input type="text" oninput={(e) => { task.title = e.currentTarget.value; }} /> </div> {/snippet} {#each items as item (item.id)} {@render taskRow(item)} {/each} ``` #### Production Standard (Correct) > **Standard**: Snippet arguments are declared with immutable types. The mutation is externalized via the owner's `updateTask` callback, isolating snippet instantiation from reactive mutations, maintaining hydration parity and preventing detached node leaks. ```svelte <script lang="ts"> interface Item { readonly id: string; readonly title: string; readonly completed: boolean; } let items = $state<Item[]>([ { id: '1', title: 'Task A', completed: false } ]); function updateTask(id: string, updates: Partial<Item>): void { items = items.map(task => task.id === id ? { ...task, ...updates } : task); } </script> {#snippet taskRow(task: Item, onUpdate: (id: string, patch: Partial<Item>) => void)}  <div class="row"> <input type="checkbox" checked={task.completed} onchange={(e) => onUpdate(task.id, { completed: e.currentTarget.checked })} /> <input type="text" value={task.title} oninput={(e) => onUpdate(task.id, { title: e.currentTarget.value })} /> </div> {/snippet} {#each items as item (item.id)} {@render taskRow(item, updateTask)} {/each} ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Snippet Parameter Immutability and DOM Detach Barrier

Svelte 5 Snippet Parameter Immutability and DOM Detach Barrier defines an industrial-grade behavioral standard for frontend engineering. Enforces strict immutability of parameters passed into Svelte 5 snippets and establishes clean teardown barriers for dynamic snippet renders. Mutating snippet arguments or closing over mutating outer rune state within dynamic SSR snippets causes reactive signal desynchronization, hydration mismatches, and memory leaks from orphaned DOM references. 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: Mutating Snippet Closure Arguments or Leaking Outer Reactive Runes into Snippet Dynamic Blocks 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	Mutating Snippet Closure Arguments or Leaking Outer Reactive Runes into Snippet Dynamic Blocks	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 treat all parameters delivered to a Svelte 5 `{#snippet ...}` definition as strictly read-only values.

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.