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

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add `lang="ts"` attribute during migration if needed

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"');
+			}
 		}
 
 		/**

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
+});

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 />

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?.()}

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
+});

packages/svelte/tests/migrate/samples/slot-use_ts-3/input.svelte

@@ -0,0 +1,6 @@
+<script>
+    /** @type {ShouldNotUseTSBecauseImUsingJsDoc} */
+    export let data;
+</script>
+
+<slot />

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?.()}

packages/svelte/tests/migrate/samples/slot-use_ts/output.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	interface Props {
 		children?: import('svelte').Snippet;
 	}