feat: error when snippet shadow a prop

.changeset/warm-cherries-shake.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: error when snippet shadow a prop

packages/svelte/messages/compile-errors/template.md

@@ -240,6 +240,10 @@
 
 > snippets do not support rest parameters; use an array instead
 
+## snippet_shadowing_prop
+
+> This snippet is shadowing the prop `%prop%` with the same name
+
 ## style_directive_invalid_modifier
 
 > `style:` directive can only use the `important` modifier

packages/svelte/src/compiler/errors.js

@@ -1076,6 +1076,16 @@ export function snippet_invalid_rest_parameter(node) {
 	e(node, "snippet_invalid_rest_parameter", "snippets do not support rest parameters; use an array instead");
 }
 
+/**
+ * This snippet is shadowing the prop `%prop%` with the same name
+ * @param {null | number | NodeLike} node
+ * @param {string} prop
+ * @returns {never}
+ */
+export function snippet_shadowing_prop(node, prop) {
+	e(node, "snippet_shadowing_prop", `This snippet is shadowing the prop \`${prop}\` with the same name`);
+}
+
 /**
  * `style:` directive can only use the `important` modifier
  * @param {null | number | NodeLike} node

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

@@ -624,11 +624,23 @@ const validation = {
 
 		context.next({ ...context.state, parent_element: null });
 
-		if (node.expression.name !== 'children') return;
-
 		const { path } = context;
 		const parent = path.at(-2);
 		if (!parent) return;
+
+		if (
+			parent.type === 'Component' &&
+			parent.attributes.some(
+				(attribute) =>
+					(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+					attribute.name === node.expression.name
+			)
+		) {
+			e.snippet_shadowing_prop(node, node.expression.name);
+		}
+
+		if (node.expression.name !== 'children') return;
+
 		if (
 			parent.type === 'Component' ||
 			parent.type === 'SvelteComponent' ||

packages/svelte/tests/validator/samples/snippet-shadowing-prop/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "snippet_shadowing_prop",
+		"message": "This snippet is shadowing the prop `title` with the same name",
+		"start": {
+			"column": 1,
+			"line": 6
+		},
+		"end": {
+			"column": 11,
+			"line": 8
+		}
+	}
+]

packages/svelte/tests/validator/samples/snippet-shadowing-prop/input.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component title="">
+	{#snippet title()}
+		title
+	{/snippet}
+</Component>