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,
+ `\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 @@
cool
+
+
+
+
+
+
+
+ cool
+
+
+
+
+
+ cool
+
+
+
+
+
+ cool
+
+
+
+
+
+ cool
+
\ 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}
+
+
+
+
+
+
+
+
+ cool
+
+
+
+
+
+
+ cool
+
+
+
+
+
+
+ cool
+
+
+
+
+
+
+ cool
+
\ 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 @@
+
+
+
+
+ cool
+
+
+
+
+
+ cool
+
+
+
+
+
+
+
+ cool
+
+
+
+
+
+ cool
+
+
\ 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 @@
+
+
+
+
+
+ cool
+
+
+
+
+
+
+ cool
+
+
+
+
+
+
+
+
+ cool
+
+
+
+
+
+
+ cool
+
+
\ No newline at end of file