From c6c0cbaed9fc70a8dd05b52333941c0e92c66642 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 23 Jul 2024 10:18:45 +0200
Subject: [PATCH] feat: warn on possible implicit snippet shadowing

---
 .changeset/honest-steaks-grow.md                   |  5 +++++
 .../svelte/messages/compile-warnings/template.md   |  4 ++++
 .../src/compiler/phases/2-analyze/validation.js    |  4 ++++
 packages/svelte/src/compiler/warnings.js           | 10 ++++++++++
 .../input.svelte                                   | 13 +++++++++++++
 .../warnings.json                                  | 14 ++++++++++++++
 6 files changed, 50 insertions(+)
 create mode 100644 .changeset/honest-steaks-grow.md
 create mode 100644 packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/warnings.json

diff --git a/.changeset/honest-steaks-grow.md b/.changeset/honest-steaks-grow.md
new file mode 100644
index 0000000000..cfdf09557a
--- /dev/null
+++ b/.changeset/honest-steaks-grow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: warn on possible implicit snippet shadowing
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 3460e1098e..2500e7a6b0 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -38,6 +38,10 @@
 
 > Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 
+## implicit_children_possible_shadowing
+
+> if `%name%` is using `{@render}` the attribute `children` will shadow the implicit snippet
+
 ## slot_element_deprecated
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 29758b6b2f..666be79da6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -107,6 +107,10 @@ function validate_component(node, context) {
 			if (attribute.name === 'slot') {
 				validate_slot_attribute(context, attribute, true);
 			}
+
+			if (attribute.name === 'children' && node.fragment.nodes.length > 0) {
+				w.implicit_children_possible_shadowing(node, node.name);
+			}
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index d9c197cf75..6198e19a2d 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -114,6 +114,7 @@ export const codes = [
 	"component_name_lowercase",
 	"element_invalid_self_closing_tag",
 	"event_directive_deprecated",
+	"implicit_children_possible_shadowing",
 	"slot_element_deprecated",
 	"svelte_element_invalid_this"
 ];
@@ -739,6 +740,15 @@ export function event_directive_deprecated(node, name) {
 	w(node, "event_directive_deprecated", `Using \`on:${name}\` to listen to the ${name} event is deprecated. Use the event attribute \`on${name}\` instead`);
 }
 
+/**
+ * if `%name%` is using `{@render}` the attribute `children` will shadow the implicit snippet
+ * @param {null | NodeLike} node
+ * @param {string} name
+ */
+export function implicit_children_possible_shadowing(node, name) {
+	w(node, "implicit_children_possible_shadowing", `if \`${name}\` is using \`{@render}\` the attribute \`children\` will shadow the implicit snippet`);
+}
+
 /**
  * Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/input.svelte b/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/input.svelte
new file mode 100644
index 0000000000..e219b3704f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+	import Legacy from './Legacy.svelte';
+</script>
+
+<Component children="foo">Children</Component>
+
+<Component children="foo" />
+
+<Component children="foo"></Component>
+
+<!-- svelte-ignore implicit_children_possible_shadowing -->
+<Legacy children="foo">Legacy</Legacy>
diff --git a/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/warnings.json b/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/warnings.json
new file mode 100644
index 0000000000..1f15a11e63
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "implicit_children_possible_shadowing",
+		"end": {
+			"column": 46,
+			"line": 6
+		},
+		"message": "if `Component` is using `{@render}` the attribute `children` will shadow the implicit snippet",
+		"start": {
+			"column": 0,
+			"line": 6
+		}
+	}
+]