sveltejs · paoloricciuti · May 15, 2024 · May 15, 2024 · May 15, 2024
diff --git a/.changeset/empty-worms-leave.md b/.changeset/empty-worms-leave.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: warn on implicit children snipett shadowing a prop
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
@@ -240,9 +240,13 @@
 
 > snippets do not support rest parameters; use an array instead
 
+## snippet_shadowing_children_prop
+
+> The component content is implicitly passed as a `children` snippet which conflicts with the `children` prop set as an attribute.
+
 ## snippet_shadowing_prop
 
-> This snippet is shadowing the prop `%prop%` with the same name
+> This snippet is conflicting with the prop `%prop%` with the same name
 
 ## style_directive_invalid_modifier
 

diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
@@ -1077,13 +1077,22 @@ export function snippet_invalid_rest_parameter(node) {
 }
 
 /**
- * This snippet is shadowing the prop `%prop%` with the same name
+ * The component content is implicitly passed as a `children` snippet which conflicts with the `children` prop set as an attribute.
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function snippet_shadowing_children_prop(node) {
+	e(node, "snippet_shadowing_children_prop", "The component content is implicitly passed as a `children` snippet which conflicts with the `children` prop set as an attribute.");
+}
+
+/**
+ * This snippet is conflicting with 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`);
+	e(node, "snippet_shadowing_prop", `This snippet is conflicting with the prop \`${prop}\` with the same name`);
 }
 
 /**

diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -39,6 +39,17 @@ import { a11y_validators } from './a11y.js';
  * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
  */
 function validate_component(node, context) {
+	const has_implicit_children = node.fragment.nodes.length > 0;
+	if (
+		has_implicit_children &&
+		node.attributes.some(
+			(attribute) =>
+				(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+				attribute.name === 'children'
+		)
+	) {
+		e.snippet_shadowing_children_prop(node);
+	}
 	for (const attribute of node.attributes) {
 		if (
 			attribute.type !== 'Attribute' &&

diff --git a/packages/svelte/tests/validator/samples/snippet-shadowing-prop-implicit-children/errors.json b/packages/svelte/tests/validator/samples/snippet-shadowing-prop-implicit-children/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "snippet_shadowing_children_prop",
+		"message": "The component content is implicitly passed as a `children` snippet which conflicts with the `children` prop set as an attribute.",
+		"start": {
+			"column": 0,
+			"line": 5
+		},
+		"end": {
+			"column": 12,
+			"line": 7
+		}
+	}
+]
diff --git a/...ages/svelte/tests/validator/samples/snippet-shadowing-prop-implicit-children/input.svelte b/...ages/svelte/tests/validator/samples/snippet-shadowing-prop-implicit-children/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component children="">
+	title
+</Component>
diff --git a/packages/svelte/tests/validator/samples/snippet-shadowing-prop/errors.json b/packages/svelte/tests/validator/samples/snippet-shadowing-prop/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "snippet_shadowing_prop",
-		"message": "This snippet is shadowing the prop `title` with the same name",
+		"message": "This snippet is conflicting with the prop `title` with the same name",
 		"start": {
 			"column": 1,
 			"line": 6