From 31e6bbb6466d1a8dad71efeb9f63b7e1c1010d32 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:25:03 +0100
Subject: [PATCH] fix: add `lang="ts"` attribute during migration if needed
 (#14222)

* fix: add `lang="ts"` attribute during migration if needed

fixes #14219

* fix
---
 .changeset/seven-clocks-pull.md                     |  5 +++++
 packages/svelte/src/compiler/migrate/index.js       | 10 +++++++++-
 .../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 +++++++++++++
 .../tests/migrate/samples/slot-use_ts/output.svelte |  2 +-
 9 files changed, 59 insertions(+), 2 deletions(-)
 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..5bcf160e8bc7 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -207,8 +207,12 @@ export function migrate(source, { filename, use_ts } = {}) {
 			analysis.uses_props ||
 			state.has_svelte_self;
 
+		const need_ts_tag =
+			state.uses_ts &&
+			(!parsed.instance || !parsed.instance.attributes.some((attr) => attr.name === 'lang'));
+
 		if (!parsed.instance && need_script) {
-			str.appendRight(0, '<script>');
+			str.appendRight(0, need_ts_tag ? '<script lang="ts">' : '<script>');
 		}
 
 		if (state.has_svelte_self && filename) {
@@ -326,6 +330,10 @@ export function migrate(source, { filename, use_ts } = {}) {
 				props_declaration = `\n${indent}${props_declaration}`;
 				str.appendRight(insertion_point, props_declaration);
 			}
+
+			if (parsed.instance && need_ts_tag) {
+				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
diff --git a/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte b/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
index 3e92f5ceb124..0ba0bf53e925 100644
--- a/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	interface Props {
 		children?: import('svelte').Snippet;
 	}