fix(@vue/language-service): reload on script lang change

Author: oumoussa98

src/store.ts

@@ -1,7 +1,7 @@
 import { version, reactive, watchEffect, watch } from 'vue'
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { compileFile } from './transform'
-import { utoa, atou } from './utils'
+import { utoa, atou, hasScriptLangChanged } from './utils'
 import {
   SFCScriptCompileOptions,
   SFCAsyncStyleCompileOptions,
@@ -193,6 +193,18 @@ export class ReplStore implements Store {
       )
     )
 
+    // 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(
+      () => this.state.activeFile.code,
+      (newCode, oldCode) => {
+        if (this.state.activeFile.language !== 'vue') return
+        if (hasScriptLangChanged(newCode, oldCode))
+          this.reloadLanguageTools?.()
+      },
+    )
+
     watch(
       () => [
         this.state.files[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
+}