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, isSciptLangChanged } from './utils'
 import {
   SFCScriptCompileOptions,
   SFCAsyncStyleCompileOptions,
@@ -193,6 +193,17 @@ 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 (isSciptLangChanged(newCode, oldCode)) this.reloadLanguageTools?.()
+      }
+    )
+
     watch(
       () => [
         this.state.files[tsconfigFile]?.code,

src/utils.ts

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