fix: reload language tools on script lang change

src/store.ts

@@ -10,7 +10,7 @@ import {
 } from 'vue'
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { compileFile } from './transform'
-import { atou, utoa } from './utils'
+import { atou, hasScriptLangChanged, utoa } from './utils'
 import type {
   SFCAsyncStyleCompileOptions,
   SFCScriptCompileOptions,
@@ -68,6 +68,18 @@ export function useStore(
       compileFile(store, activeFile.value).then((errs) => (errors.value = errs))
     })
 
+    // Temporary workaround for https://github.com/vuejs/repl/issues/321
+    // which is related to https://github.com/microsoft/TypeScript/issues/57631
+    // TODO: remove this when the issue is fixed
+    watch(
+      () => activeFile.value.code,
+      (newCode, oldCode) => {
+        if (activeFile.value.language !== 'vue') return
+        if (hasScriptLangChanged(newCode, oldCode))
+          reloadLanguageTools.value?.()
+      },
+    )
+
     watch(
       () => [
         files.value[tsconfigFile]?.code,

src/utils.ts

@@ -31,3 +31,13 @@ export function atou(base64: string): string {
   // https://base64.guru/developers/javascript/examples/unicode-strings
   return decodeURIComponent(escape(binary))
 }
+
+// compares the `lang` attribute of the `<script>` tag in .vue files
+export function hasScriptLangChanged(newCode: string, oldCode: string) {
+  const langRegex = /<script[^>]*lang\s*=\s*["']([^"']+)["'][^>]*>/;
+
+  const newLang = newCode.match(langRegex)?.[1]
+  const oldLang = oldCode.match(langRegex)?.[1]
+
+  return newLang !== oldLang
+}