From c22aa49098dec247128f74b070bf697dd43cfdb6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 8 Nov 2024 11:30:02 +0100
Subject: [PATCH] fix: add `lang="ts"` attribute during migration if needed

fixes #14219
---
 .changeset/seven-clocks-pull.md                     |  5 +++++
 packages/svelte/src/compiler/migrate/index.js       |  8 ++++++++
 .../tests/migrate/samples/slot-use_ts-2/_config.js  |  5 +++++
 .../migrate/samples/slot-use_ts-2/input.svelte      |  5 +++++
 .../migrate/samples/slot-use_ts-2/output.svelte     | 10 ++++++++++
 .../tests/migrate/samples/slot-use_ts-3/_config.js  |  5 +++++
 .../migrate/samples/slot-use_ts-3/input.svelte      |  6 ++++++
 .../migrate/samples/slot-use_ts-3/output.svelte     | 13 +++++++++++++
 8 files changed, 57 insertions(+)
 create mode 100644 .changeset/seven-clocks-pull.md
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte

diff --git a/.changeset/seven-clocks-pull.md b/.changeset/seven-clocks-pull.md
new file mode 100644
index 000000000000..e426560b7b91
--- /dev/null
+++ b/.changeset/seven-clocks-pull.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `lang="ts"` attribute during migration if needed
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index b7687af09f0b..64b4466b2ce2 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -326,6 +326,14 @@ export function migrate(source, { filename, use_ts } = {}) {
 				props_declaration = `\n${indent}${props_declaration}`;
 				str.appendRight(insertion_point, props_declaration);
 			}
+
+			if (
+				state.uses_ts &&
+				parsed.instance &&
+				!parsed.instance.attributes.some((attr) => attr.name === 'lang')
+			) {
+				str.appendRight(parsed.instance.start + '<script'.length, ' lang="ts"');
+			}
 		}
 
 		/**
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js b/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
new file mode 100644
index 000000000000..dbc620d66e66
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	use_ts: true
+});
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
new file mode 100644
index 000000000000..0ea83a56d819
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/input.svelte
@@ -0,0 +1,5 @@
+<script>
+    // script tag but no lang="ts", because for example only imports present
+</script>
+
+<slot />
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
new file mode 100644
index 000000000000..a8e8db66b187
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-2/output.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
+    // script tag but no lang="ts", because for example only imports present
+</script>
+
+{@render children?.()}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js b/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
new file mode 100644
index 000000000000..dbc620d66e66
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	use_ts: true
+});
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
new file mode 100644
index 000000000000..b228fef106b3
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte
@@ -0,0 +1,6 @@
+<script>
+    /** @type {ShouldNotUseTSBecauseImUsingJsDoc} */
+    export let data;
+</script>
+
+<slot />
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte
new file mode 100644
index 000000000000..ab95eace3a8f
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts-3/output.svelte
@@ -0,0 +1,13 @@
+<script>
+    
+    /**
+     * @typedef {Object} Props
+     * @property {ShouldNotUseTSBecauseImUsingJsDoc} data
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { data, children } = $props();
+</script>
+
+{@render children?.()}
\ No newline at end of file