feat: update error message for snippet binding and assignments

Author: tanhauhau

.changeset/wicked-wasps-allow.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: update error message for snippet binding and assignments

packages/svelte/src/compiler/errors.js

@@ -214,6 +214,8 @@ const runes = {
 	'duplicate-props-rune': () => `Cannot use $props() more than once`,
 	'invalid-each-assignment': () =>
 		`Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. 'array[i] = value' instead of 'entry = value')`,
+	'invalid-snippet-assignment': () =>
+		`Cannot reassign or bind to snippet function argument in runes mode`,
 	'invalid-derived-call': () => `$derived.call(...) has been replaced with $derived.by(...)`,
 	'conflicting-property-name': () =>
 		`Cannot have a property and a component export with the same name`

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -353,6 +353,10 @@ const validation = {
 				error(node, 'invalid-each-assignment');
 			}
 
+			if (context.state.analysis.runes && binding.kind === 'snippet') {
+				error(node, 'invalid-snippet-assignment');
+			}
+
 			// TODO handle mutations of non-state/props in runes mode
 		}
 
@@ -1022,6 +1026,10 @@ function validate_assignment(node, argument, state) {
 		if (binding?.kind === 'each') {
 			error(node, 'invalid-each-assignment');
 		}
+
+		if (binding?.kind === 'snippet') {
+			error(node, 'invalid-snippet-assignment');
+		}
 	}
 
 	let object = /** @type {import('estree').Expression | import('estree').Super} */ (argument);

packages/svelte/src/compiler/phases/scope.js

@@ -649,7 +649,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 
 			for (const param of node.parameters) {
 				for (const id of extract_identifiers(param)) {
-					child_scope.declare(id, 'each', 'let');
+					child_scope.declare(id, 'snippet', 'let');
 				}
 			}
 

packages/svelte/src/compiler/types/index.d.ts

@@ -254,6 +254,7 @@ export interface Binding {
 	 * - `state`: A state variable
 	 * - `derived`: A derived variable
 	 * - `each`: An each block context variable
+	 * - `snippet`: A snippet block context variable
 	 * - `store_sub`: A $store value
 	 * - `legacy_reactive`: A `$:` declaration
 	 * - `legacy_reactive_import`: An imported binding that is mutated inside the component
@@ -267,6 +268,7 @@ export interface Binding {
 		| 'frozen_state'
 		| 'derived'
 		| 'each'
+		| 'snippet'
 		| 'store_sub'
 		| 'legacy_reactive'
 		| 'legacy_reactive_import';

packages/svelte/tests/compiler-errors/samples/runes-invalid-snippet-binding/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'invalid-snippet-assignment',
+		message:
+			"Cannot reassign or bind to snippet function argument in runes mode"
+	}
+});

packages/svelte/tests/compiler-errors/samples/runes-invalid-snippet-binding/main.svelte

@@ -0,0 +1,5 @@
+<svelte:options runes />
+
+{#snippet foo(value)}
+	<input bind:value={value}>
+{/snippet}

packages/svelte/tests/compiler-errors/samples/runes-invalid-snippet-mutation/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'invalid-snippet-assignment',
+		message:
+			"Cannot reassign or bind to snippet function argument in runes mode"
+	}
+});

packages/svelte/tests/compiler-errors/samples/runes-invalid-snippet-mutation/main.svelte

@@ -0,0 +1,5 @@
+<svelte:options runes />
+
+{#snippet foo(value)}
+	<button onclick={() => value += 1}>click</button>
+{/snippet}

packages/svelte/types/index.d.ts

@@ -719,6 +719,7 @@ declare module 'svelte/compiler' {
 		 * - `state`: A state variable
 		 * - `derived`: A derived variable
 		 * - `each`: An each block context variable
+		 * - `snippet`: A snippet block context variable
 		 * - `store_sub`: A $store value
 		 * - `legacy_reactive`: A `$:` declaration
 		 * - `legacy_reactive_import`: An imported binding that is mutated inside the component
@@ -732,6 +733,7 @@ declare module 'svelte/compiler' {
 			| 'frozen_state'
 			| 'derived'
 			| 'each'
+			| 'snippet'
 			| 'store_sub'
 			| 'legacy_reactive'
 			| 'legacy_reactive_import';