feat: warn when a snippet shadow a prop

Author: paoloricciuti

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

@@ -37,3 +37,7 @@
 ## slot_element_deprecated
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead.
+
+## snippet_shadowing_prop
+
+> This snippet is shadowing the prop `%prop%` with the same name

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
+			)
+		) {
+			w.snippet_shadowing_prop(node, node.expression.name);
+		}
+
+		if (node.expression.name !== 'children') return;
+
 		if (
 			parent.type === 'Component' ||
 			parent.type === 'SvelteComponent' ||

packages/svelte/src/compiler/warnings.js

@@ -90,7 +90,8 @@ export const codes = [
 	"component_name_lowercase",
 	"element_invalid_self_closing_tag",
 	"event_directive_deprecated",
-	"slot_element_deprecated"
+	"slot_element_deprecated",
+	"snippet_shadowing_prop"
 ];
 
 /**
@@ -712,4 +713,13 @@ export function event_directive_deprecated(node, name) {
  */
 export function slot_element_deprecated(node) {
 	w(node, "slot_element_deprecated", "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead.");
+}
+
+/**
+ * This snippet is shadowing the prop `%prop%` with the same name
+ * @param {null | NodeLike} node
+ * @param {string} prop
+ */
+export function snippet_shadowing_prop(node, prop) {
+	w(node, "snippet_shadowing_prop", `This snippet is shadowing the prop \`${prop}\` with the same name`);
 }

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>

packages/svelte/tests/validator/samples/snippet-shadowing-prop/warnings.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
+		}
+	}
+]