From ab9eeb46fe80db0ea9930564b91d99040fb5a9a5 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sat, 19 Oct 2024 01:43:14 +0200
Subject: [PATCH] fix: migrated snippet shadowing prop and let directive
 removal (#13679)

---
 .changeset/ten-vans-divide.md                 |  5 +++
 packages/svelte/src/compiler/migrate/index.js | 30 ++++++++++++++++-
 .../samples/slot-non-identifier/input.svelte  | 27 +++++++++++++++
 .../samples/slot-non-identifier/output.svelte | 31 +++++++++++++++++
 .../samples/slot-shadow-props/input.svelte    | 29 ++++++++++++++++
 .../samples/slot-shadow-props/output.svelte   | 33 +++++++++++++++++++
 6 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/ten-vans-divide.md
 create mode 100644 packages/svelte/tests/migrate/samples/slot-shadow-props/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-shadow-props/output.svelte

diff --git a/.changeset/ten-vans-divide.md b/.changeset/ten-vans-divide.md
new file mode 100644
index 0000000000..f3afbbcc70
--- /dev/null
+++ b/.changeset/ten-vans-divide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: migrated snippet shadowing prop and let directive removal
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index a4a2fb488e..b879c0b491 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1097,6 +1097,10 @@ function migrate_slot_usage(node, path, state) {
 	let snippet_name = 'children';
 	let snippet_props = [];
 
+	// if we stop the transform because the name is not correct we don't want to
+	// remove the let directive and they could come before the name
+	let removal_queue = [];
+
 	for (let attribute of node.attributes) {
 		if (
 			attribute.type === 'Attribute' &&
@@ -1112,6 +1116,23 @@ function migrate_slot_usage(node, path, state) {
 				);
 				return;
 			}
+			if (parent?.type === 'Component' || parent?.type === 'SvelteComponent') {
+				for (let attribute of parent.attributes) {
+					if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
+						if (attribute.name === snippet_name) {
+							state.str.appendLeft(
+								node.start,
+								`<!-- @migration-task: migrate this slot by hand, \`${snippet_name}\` would shadow a prop on the parent component -->\n${state.indent}`
+							);
+							return;
+						}
+					}
+				}
+			}
+			// flush the queue after we found the name
+			for (let remove_let of removal_queue) {
+				remove_let();
+			}
 			state.str.remove(attribute.start, attribute.end);
 		}
 		if (attribute.type === 'LetDirective') {
@@ -1121,7 +1142,14 @@ function migrate_slot_usage(node, path, state) {
 						? `: ${state.str.original.substring(/** @type {number} */ (attribute.expression.start), /** @type {number} */ (attribute.expression.end))}`
 						: '')
 			);
-			state.str.remove(attribute.start, attribute.end);
+			// we just add to the queue to remove them after we found if we need to migrate or we bail
+			removal_queue.push(() => state.str.remove(attribute.start, attribute.end));
+		}
+	}
+
+	if (removal_queue.length > 0) {
+		for (let remove_let of removal_queue) {
+			remove_let();
 		}
 	}
 
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
index a5dfd1aad1..a62eff1b74 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte
@@ -36,4 +36,31 @@
 	<svelte:fragment slot="stuff">
 		cool
 	</svelte:fragment>
+</Comp>
+
+
+<!-- don't remove the let directive if we don't migrate -->
+
+<Comp>
+	<div let:should_stay slot="cool:stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<div let:should_stay slot="cool stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<svelte:fragment let:should_stay slot="cool:stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	<svelte:fragment let:should_stay slot="cool stuff">
+		cool
+	</svelte:fragment>
 </Comp>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
index 6ea49817d1..85913264b4 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
@@ -44,4 +44,35 @@
 			cool
 		
 	{/snippet}
+</Comp>
+
+
+<!-- don't remove the let directive if we don't migrate -->
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand, `cool:stuff` is an invalid identifier -->
+	<div let:should_stay slot="cool:stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand, `cool stuff` is an invalid identifier -->
+	<div let:should_stay slot="cool stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand, `cool:stuff` is an invalid identifier -->
+	<svelte:fragment let:should_stay slot="cool:stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<Comp>
+	<!-- @migration-task: migrate this slot by hand, `cool stuff` is an invalid identifier -->
+	<svelte:fragment let:should_stay slot="cool stuff">
+		cool
+	</svelte:fragment>
 </Comp>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-shadow-props/input.svelte b/packages/svelte/tests/migrate/samples/slot-shadow-props/input.svelte
new file mode 100644
index 0000000000..d09cec9ec8
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-shadow-props/input.svelte
@@ -0,0 +1,29 @@
+<script>
+	import Comp from "./Component.svelte";
+</script>
+
+<Comp stuff="cool">
+	<div slot="stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp stuff="cool">
+	<svelte:fragment slot="stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<!-- don't remove the let if we are not migrating -->
+
+<Comp stuff="cool">
+	<div let:should_stay slot="stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp stuff="cool">
+	<svelte:fragment let:should_stay slot="stuff">
+		cool
+	</svelte:fragment>
+</Comp>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-shadow-props/output.svelte b/packages/svelte/tests/migrate/samples/slot-shadow-props/output.svelte
new file mode 100644
index 0000000000..2089810044
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-shadow-props/output.svelte
@@ -0,0 +1,33 @@
+<script>
+	import Comp from "./Component.svelte";
+</script>
+
+<Comp stuff="cool">
+	<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
+	<div slot="stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp stuff="cool">
+	<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
+	<svelte:fragment slot="stuff">
+		cool
+	</svelte:fragment>
+</Comp>
+
+<!-- don't remove the let if we are not migrating -->
+
+<Comp stuff="cool">
+	<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
+	<div let:should_stay slot="stuff">
+		cool
+	</div>
+</Comp>
+
+<Comp stuff="cool">
+	<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
+	<svelte:fragment let:should_stay slot="stuff">
+		cool
+	</svelte:fragment>
+</Comp>
\ No newline at end of file