Svelte 5 Snippet Parameter Immutability & Scope Isolation

--- description: Svelte 5 Snippet Parameter Immutability & Scope Isolation - Enforces unidirectional data flow and strict parameter immutability within Svelte 5 snippets (`{#snippet ...}`). Prohibits mutating snippet-passed references or binding directly to external parent scopes from inside snippet blocks, which breaks reactive isolation boundaries and triggers cascading re-render loops or memory leaks across component boundaries. 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-scope-isolation" --- # Svelte 5 Snippet Parameter Immutability & Scope Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Snippet Arguments Directly or Creating Bidirectional State Couplings Across Snippet Closures ## System Constraints You are a Principal Engineer enforcing Svelte 5 Snippet Parameter Immutability & Scope Isolation. In Svelte 5, snippets are first-class functional UI closures that accept arguments and execute within lexical or consumer scopes. You must mandate that snippet parameters are treated as strictly immutable values. Any state modification must flow upward via explicit callback invocations or rune actions (`$state`), never via direct mutation of snippet parameter references (`item.checked = true`) or two-way bindings on transient snippet arguments (`bind:value={param}`). Prevent cyclic reactive dependency chains and unintended re-render cascading. ## Strict Guidelines - Engineers MUST ALWAYS treat Svelte 5 snippet parameters as read-only references, never mutating internal fields or properties directly. - Engineers MUST NOT bind to snippet parameters (e.g., `bind:value={item.text}`) when `item` is received as an unproxied snippet argument, as this bypasses explicit reactive ownership. - Code MUST pass explicit event/callback dispatchers into snippets or invoke parent mutation handlers to alter snippet-consumed domain objects. - Components NEVER capture and re-assign parent `$state` variables within nested snippets when equivalent decoupled parameter passing can be applied. - Snippets declared inside component templates SHOULD encapsulate their immediate presentation logic and pass changed state through typed callbacks (e.g., `(updatedId: string, value: boolean) => void`). ## Bad vs Good Implementations ### Snippet Parameter In-Place Mutation vs Callback-Driven Update #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating `todo.completed` directly within the snippet violates parameter immutability and circumvents explicit state-owner boundaries. This can cause desynchronization between reactive proxies, break tracking graphs across nested components, and cause unpredictable re-render cycles. ```svelte <script lang="ts"> interface TodoItem { id: string; title: string; completed: boolean; } let todos = $state<TodoItem[]>([ { id: '1', title: 'Refactor reactivity', completed: false } ]); </script> {#snippet todoRow(todo: TodoItem)} <div class="row">  <input type="checkbox" checked={todo.completed} onchange={() => { todo.completed = !todo.completed; }} /> <span>{todo.title}</span> </div> {/snippet} {#each todos as item (item.id)} {@render todoRow(item)} {/each} ``` #### Production Standard (Correct) > **Standard**: The snippet treats `todo` as `Readonly<TodoItem>` and triggers mutations by invoking a dedicated callback `onToggle`. This preserves unidirectional reactive boundaries and keeps state ownership strictly with the parent context. ```svelte <script lang="ts"> interface TodoItem { id: string; title: string; completed: boolean; } let todos = $state<TodoItem[]>([ { id: '1', title: 'Refactor reactivity', completed: false } ]); function toggleTodo(id: string, completed: boolean) { const target = todos.find(t => t.id === id); if (target) { target.completed = completed; } } </script> {#snippet todoRow(todo: Readonly<TodoItem>, onToggle: (id: string, status: boolean) => void)} <div class="row">  <input type="checkbox" checked={todo.completed} onchange={(e) => onToggle(todo.id, e.currentTarget.checked)} /> <span>{todo.title}</span> </div> {/snippet} {#each todos as item (item.id)} {@render todoRow(item, toggleTodo)} {/each} ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Snippet Parameter Immutability & Scope Isolation

Svelte 5 Snippet Parameter Immutability & Scope Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces unidirectional data flow and strict parameter immutability within Svelte 5 snippets (`{#snippet ...}`). Prohibits mutating snippet-passed references or binding directly to external parent scopes from inside snippet blocks, which breaks reactive isolation boundaries and triggers cascading re-render loops or memory leaks across component boundaries. 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 Arguments Directly or Creating Bidirectional State Couplings Across Snippet Closures 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 Arguments Directly or Creating Bidirectional State Couplings Across Snippet Closures	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 treat Svelte 5 snippet parameters as read-only references, never mutating internal fields or properties directly.

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.