From 61391c8704a6cb8767a862fdcb61b587778bb322 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 18 Oct 2024 21:29:24 +0100
Subject: [PATCH] fix: ensure migrate correctly handles named slots (#13676)

* fix: ensure migrate correctly handles named slots

* tweak

* fix
---
 .changeset/silver-beans-hear.md                    |  5 +++++
 packages/svelte/src/compiler/migrate/index.js      | 12 +++++++++++-
 .../tests/migrate/samples/named-slots/input.svelte |  7 +++++++
 .../migrate/samples/named-slots/output.svelte      | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silver-beans-hear.md
 create mode 100644 packages/svelte/tests/migrate/samples/named-slots/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/named-slots/output.svelte

diff --git a/.changeset/silver-beans-hear.md b/.changeset/silver-beans-hear.md
new file mode 100644
index 000000000000..19ec07a6e3a3
--- /dev/null
+++ b/.changeset/silver-beans-hear.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure migrate correctly handles named slots
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 57091ba1a1ee..a4a2fb488e4b 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -996,6 +996,10 @@ const template = {
 			if (attr.type === 'SpreadAttribute') {
 				slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
 			} else if (attr.type === 'Attribute') {
+				if (attr.name === 'slot') {
+					continue;
+				}
+
 				if (attr.name === 'name') {
 					slot_name = /** @type {any} */ (attr.value)[0].data;
 				} else {
@@ -1200,7 +1204,13 @@ function migrate_slot_usage(node, path, state) {
 				[node.end, state.str.original.length]
 			]
 		});
-		state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`);
+		const str = `\n${state.indent.repeat(path.length - 2)}{/snippet}`;
+
+		if (node.type === 'SlotElement') {
+			state.str.appendRight(node.end, str);
+		} else {
+			state.str.appendLeft(node.end, str);
+		}
 	}
 }
 
diff --git a/packages/svelte/tests/migrate/samples/named-slots/input.svelte b/packages/svelte/tests/migrate/samples/named-slots/input.svelte
new file mode 100644
index 000000000000..1996e08afd84
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/named-slots/input.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Component from './Component.svelte';
+</script>
+
+<Component>
+  <slot slot="msg"></slot>
+</Component>
diff --git a/packages/svelte/tests/migrate/samples/named-slots/output.svelte b/packages/svelte/tests/migrate/samples/named-slots/output.svelte
new file mode 100644
index 000000000000..bb5ad39aa355
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/named-slots/output.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Component from './Component.svelte';
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<Component>
+  {#snippet msg()}
+    {@render children?.()}
+  {/snippet}
+</Component>
\ No newline at end of file