From b352f08e9d7ca1a6a03887c1f2ab9e44910e1c25 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 17 Oct 2024 20:06:24 +0200
Subject: [PATCH] fix: migrating rest props type includes props types (#13632)

* fix: rest props type includes props types

* chore: remove extra line

* Update .changeset/spotty-kings-hug.md
---
 .changeset/spotty-kings-hug.md                |  5 ++++
 packages/svelte/src/compiler/migrate/index.js | 30 +++++++++----------
 .../samples/props-rest-props-ts/input.svelte  |  5 ++++
 .../samples/props-rest-props-ts/output.svelte | 10 +++++++
 .../samples/props-rest-props/output.svelte    |  2 +-
 .../samples/slots-with-$$props/output.svelte  |  2 +-
 .../samples/svelte-component/output.svelte    |  2 +-
 .../svelte-self-name-conflict/output.svelte   |  2 +-
 .../migrate/samples/svelte-self/output.svelte |  2 +-
 9 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/spotty-kings-hug.md
 create mode 100644 packages/svelte/tests/migrate/samples/props-rest-props-ts/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/props-rest-props-ts/output.svelte

diff --git a/.changeset/spotty-kings-hug.md b/.changeset/spotty-kings-hug.md
new file mode 100644
index 0000000000..170b2c4b8c
--- /dev/null
+++ b/.changeset/spotty-kings-hug.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: migrating rest props type includes props types
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 06d551b7c8..66e5f2918a 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -198,26 +198,26 @@ export function migrate(source, { filename } = {}) {
 				const type_name = state.scope.root.unique('Props').name;
 				let type = '';
 				if (uses_ts) {
+					type = `interface ${type_name} {${newline_separator}${state.props
+						.map((prop) => {
+							const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
+							return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};`;
+						})
+						.join(newline_separator)}`;
 					if (analysis.uses_props || analysis.uses_rest_props) {
-						type = `interface ${type_name} { [key: string]: any }`;
-					} else {
-						type = `interface ${type_name} {${newline_separator}${state.props
-							.map((prop) => {
-								const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
-								return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};`;
-							})
-							.join(newline_separator)}\n${indent}}`;
+						type += `${state.props.length > 0 ? newline_separator : ''}[key: string]: any`;
 					}
+					type += `\n${indent}}`;
 				} else {
+					type = `{${state.props
+						.map((prop) => {
+							return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
+						})
+						.join(`, `)}`;
 					if (analysis.uses_props || analysis.uses_rest_props) {
-						type = `Record<string, any>`;
-					} else {
-						type = `{${state.props
-							.map((prop) => {
-								return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
-							})
-							.join(`, `)}}`;
+						type += `${state.props.length > 0 ? ', ' : ''}[key: string]: any`;
 					}
+					type += '}';
 				}
 
 				let props_declaration = `let {${props_separator}${props}${has_many_props ? `\n${indent}` : ' '}}`;
diff --git a/packages/svelte/tests/migrate/samples/props-rest-props-ts/input.svelte b/packages/svelte/tests/migrate/samples/props-rest-props-ts/input.svelte
new file mode 100644
index 0000000000..a4501f59a3
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/props-rest-props-ts/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let foo: string;
+</script>
+
+<button {foo} {...$$restProps}>click me</button>
diff --git a/packages/svelte/tests/migrate/samples/props-rest-props-ts/output.svelte b/packages/svelte/tests/migrate/samples/props-rest-props-ts/output.svelte
new file mode 100644
index 0000000000..47e59dced0
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/props-rest-props-ts/output.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    interface Props {
+        foo: string;
+        [key: string]: any
+    }
+
+    let { foo, ...rest }: Props = $props();
+</script>
+
+<button {foo} {...rest}>click me</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/props-rest-props/output.svelte b/packages/svelte/tests/migrate/samples/props-rest-props/output.svelte
index fd6773a999..7afdc7aac7 100644
--- a/packages/svelte/tests/migrate/samples/props-rest-props/output.svelte
+++ b/packages/svelte/tests/migrate/samples/props-rest-props/output.svelte
@@ -1,5 +1,5 @@
 <script>
-    /** @type {Record<string, any>} */
+    /** @type {{foo: any, [key: string]: any}} */
     let { foo, ...rest } = $props();
 </script>
 
diff --git a/packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte b/packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte
index b5cf1518e4..c40d990157 100644
--- a/packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte
@@ -1,5 +1,5 @@
 <script>
-	/** @type {Record<string, any>} */
+	/** @type {{children?: import('svelte').Snippet, foo_1?: import('svelte').Snippet<[any]>, bar?: import('svelte').Snippet, dashed_name?: import('svelte').Snippet, [key: string]: any}} */
 	let {
 		...props
 	} = $props();
diff --git a/packages/svelte/tests/migrate/samples/svelte-component/output.svelte b/packages/svelte/tests/migrate/samples/svelte-component/output.svelte
index 26a007aa3c..1e61d23ba5 100644
--- a/packages/svelte/tests/migrate/samples/svelte-component/output.svelte
+++ b/packages/svelte/tests/migrate/samples/svelte-component/output.svelte
@@ -1,5 +1,5 @@
 <script>
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...rest } = $props();
 	let Component;
 	let fallback;
diff --git a/packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte b/packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte
index 7be4cf0d13..0007392d85 100644
--- a/packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte
+++ b/packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Output_1 from './output.svelte';
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...props } = $props();
 	let Output;
 </script>
diff --git a/packages/svelte/tests/migrate/samples/svelte-self/output.svelte b/packages/svelte/tests/migrate/samples/svelte-self/output.svelte
index 30b65b7775..23b9af5c00 100644
--- a/packages/svelte/tests/migrate/samples/svelte-self/output.svelte
+++ b/packages/svelte/tests/migrate/samples/svelte-self/output.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Output from './output.svelte';
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...props } = $props();
 </script>