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 <[email protected]> Co-authored-by: dominikg <[email protected]>
sveltejs · Jan 27, 2024 · e95d863 · e95d863
1 parent c36c3ae
commit e95d863
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/.changeset/rare-buttons-argue.md 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
@@ -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
@@ -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,