From e95d863cc06881770a89948180ac53692f911f20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Iv=C3=A1nek?= <richard@ivanek.dev>
Date: Sat, 27 Jan 2024 15:33:37 +0100
Subject: [PATCH] fix: correctly detect script language during compilation
 (#844)

* fix: correctly detect script language during compilation

* fix: correctly handle commented script blocks in compile.js

* chore: add changeset

---------

Co-authored-by: Richard Ivanek <richard.ivanek@gmail.com>
Co-authored-by: dominikg <dominik.goepel@gmx.de>
---
 .changeset/rare-buttons-argue.md              |  5 +++
 .../__tests__/compile.spec.js                 | 31 +++++++++++++++++++
 .../vite-plugin-svelte/src/utils/compile.js   | 12 +++++--
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rare-buttons-argue.md

diff --git a/.changeset/rare-buttons-argue.md b/.changeset/rare-buttons-argue.md
new file mode 100644
index 000000000..f724b00c0
--- /dev/null
+++ b/.changeset/rare-buttons-argue.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(compile): correctly determine script lang in files where a comment precedes the script tag
diff --git a/packages/vite-plugin-svelte/__tests__/compile.spec.js b/packages/vite-plugin-svelte/__tests__/compile.spec.js
index a5e82701d..c9c1282fa 100644
--- a/packages/vite-plugin-svelte/__tests__/compile.spec.js
+++ b/packages/vite-plugin-svelte/__tests__/compile.spec.js
@@ -45,5 +45,36 @@ describe('createCompileSvelte', () => {
 			);
 			expect(output.compiled.js.code).not.toContain('/* @__PURE__ */\n');
 		});
+
+		it('detects script lang', async () => {
+			const code = `<!-- this file uses typescript -->
+			<!--
+			<script lang="foo">
+			</script>-->
+			<script lang="ts" generics="T">
+				const x = 1;
+				console.log('something',/* @__PURE__ */ new Date());
+				console.log('something else');
+			</script>
+			<div>{x}</div>`;
+
+			const compileSvelte = createCompileSvelte(options);
+			const output = await compileSvelte(
+				{
+					cssId: 'svelte-xxxxx',
+					query: {},
+					raw: false,
+					ssr: false,
+					timestamp: Date.now(),
+					id: 'id',
+					filename: '/some/File.svelte',
+					normalizedFilename: 'some/File.svelte'
+				},
+				code,
+				{}
+			);
+
+			expect(output.lang).toBe('ts');
+		});
 	});
 });
diff --git a/packages/vite-plugin-svelte/src/utils/compile.js b/packages/vite-plugin-svelte/src/utils/compile.js
index 38994439a..3218a0610 100644
--- a/packages/vite-plugin-svelte/src/utils/compile.js
+++ b/packages/vite-plugin-svelte/src/utils/compile.js
@@ -16,7 +16,7 @@ import { isSvelte5 } from './svelte-version.js';
 // which is closer to the other regexes in at least not falling into commented script
 // but ideally would be shared exactly with svelte and other tools that use it
 const scriptLangRE =
-	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/;
+	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/g;
 
 /**
  * @param {Function} [makeHot]
@@ -184,10 +184,18 @@ export const _createCompileSvelte = (makeHot) => {
 			}
 		}
 
+		let lang = 'js';
+		for (const match of code.matchAll(scriptLangRE)) {
+			if (match[1]) {
+				lang = match[1];
+				break;
+			}
+		}
+
 		return {
 			filename,
 			normalizedFilename,
-			lang: code.match(scriptLangRE)?.[1] || 'js',
+			lang,
 			// @ts-ignore
 			compiled,
 			ssr,