fix: sync with vue repl

Author: nekomeowww

apps/playground/package.json

@@ -49,20 +49,23 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@volar/jsdelivr": "^2.4.23",
     "@volar/monaco": "^2.4.23",
-    "@vue/language-service": "^3.0.6",
+    "@vue/language-core": "3.0.7-alpha.1",
+    "@vue/language-service": "3.0.7-alpha.1",
     "@vue/server-renderer": "^3.5.21",
+    "@vue/typescript-plugin": "3.0.7-alpha.1",
     "@vueuse/core": "^13.9.0",
     "@vueuse/motion": "^3.0.3",
     "@xsai/shared": "^0.4.0-beta.3",
     "@xsai/stream-text": "^0.4.0-beta.3",
     "es-toolkit": "^1.39.10",
     "fflate": "^0.8.2",
     "hash-sum": "^2.0.0",
-    "monaco-editor-core": "^0.53.0",
+    "monaco-editor-core": "^0.52.2",
     "reka-ui": "^2.5.0",
     "splitpanes": "^4.0.4",
     "unplugin-vue-router": "^0.15.0",
     "vite": "^7.1.5",
+    "volar-service-typescript": "^0.0.65",
     "vscode-uri": "^3.1.0",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1",

apps/playground/src/components/Editor/env.ts

@@ -1,4 +1,4 @@
-// https://github.com/vuejs/repl/blob/5e092b6111118f5bb5fc419f0f8f3f84cd539366/src/monaco/env.ts
+// https://github.com/vuejs/repl/blob/f2b38cf978abb9c21c6c788589b4599b4ff85a7d/src/monaco/env.ts
 
 import type { WorkerLanguageService } from '@volar/monaco/worker'
 

apps/playground/src/components/Editor/vue.worker.ts

@@ -1,25 +1,46 @@
-// https://github.com/vuejs/repl/blob/5e092b6111118f5bb5fc419f0f8f3f84cd539366/src/monaco/vue.worker.ts
+// https://github.com/vuejs/repl/blob/f2b38cf978abb9c21c6c788589b4599b4ff85a7d/src/monaco/vue.worker.ts
 
-import type { LanguageServiceEnvironment } from '@volar/monaco/worker'
-import type { VueCompilerOptions } from '@vue/language-service'
+import type {
+  Language,
+  LanguageServiceEnvironment,
+} from '@volar/monaco/worker'
+import type { VueCompilerOptions } from '@vue/language-core'
+import type {
+  LanguageService,
+} from '@vue/language-service'
 import type * as monaco from 'monaco-editor-core'
 
 import type { WorkerHost, WorkerMessage } from './env'
 
 import { createNpmFileSystem } from '@volar/jsdelivr'
 import {
   createTypeScriptWorkerLanguageService,
-
 } from '@volar/monaco/worker'
 import {
   createVueLanguagePlugin,
+  generateGlobalTypes,
   getDefaultCompilerOptions,
-  getFullLanguageServicePlugins,
+  getGlobalTypesFileName,
+
+  VueVirtualCode,
+} from '@vue/language-core'
+import {
+  createVueLanguageServicePlugins,
 } from '@vue/language-service'
+import { createVueLanguageServiceProxy } from '@vue/typescript-plugin/lib/common'
+import { getComponentDirectives } from '@vue/typescript-plugin/lib/requests/getComponentDirectives'
+import { getComponentEvents } from '@vue/typescript-plugin/lib/requests/getComponentEvents'
+import { getComponentNames } from '@vue/typescript-plugin/lib/requests/getComponentNames'
+import { getComponentProps } from '@vue/typescript-plugin/lib/requests/getComponentProps'
+import { getComponentSlots } from '@vue/typescript-plugin/lib/requests/getComponentSlots'
+import { getElementAttrs } from '@vue/typescript-plugin/lib/requests/getElementAttrs'
+import { getElementNames } from '@vue/typescript-plugin/lib/requests/getElementNames'
+import { getPropertiesAtLocation } from '@vue/typescript-plugin/lib/requests/getPropertiesAtLocation'
+import { create as createTypeScriptDirectiveCommentPlugin } from 'volar-service-typescript/lib/plugins/directiveComment'
+import { create as createTypeScriptSemanticPlugin } from 'volar-service-typescript/lib/plugins/semantic'
 import { URI } from 'vscode-uri'
 
 import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker'
-import * as typescript from 'typescript'
 
 export interface CreateData {
   tsconfig: {
@@ -29,12 +50,17 @@ export interface CreateData {
   dependencies: Record<string, string>
 }
 
+const asFileName = (uri: URI) => uri.path
+const asUri = (fileName: string): URI => URI.file(fileName)
+
+let ts: typeof import('typescript')
 let locale: string | undefined
 
 // eslint-disable-next-line no-restricted-globals
 self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
   if (msg.data?.event === 'init') {
     locale = msg.data.tsLocale
+    ts = await importTsFromCdn(msg.data.tsVersion)
     // eslint-disable-next-line no-restricted-globals
     self.postMessage('inited')
     return
@@ -45,8 +71,6 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
       ctx: monaco.worker.IWorkerContext<WorkerHost>,
       { tsconfig, dependencies }: CreateData,
     ) => {
-      const asFileName = (uri: URI) => uri.path
-      const asUri = (fileName: string): URI => URI.file(fileName)
       const env: LanguageServiceEnvironment = {
         workspaceFolders: [URI.file('/')],
         locale,
@@ -71,17 +95,18 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
         ),
       }
 
-      const { options: compilerOptions } = typescript.convertCompilerOptionsFromJson(
+      const { options: compilerOptions } = ts.convertCompilerOptionsFromJson(
         tsconfig?.compilerOptions || {},
         '',
       )
-      const vueCompilerOptions = getDefaultCompilerOptions(
-        tsconfig.vueCompilerOptions?.target,
-        tsconfig.vueCompilerOptions?.lib,
-      )
+      const vueCompilerOptions: VueCompilerOptions = {
+        ...getDefaultCompilerOptions(),
+        ...tsconfig.vueCompilerOptions,
+      }
+      setupGlobalTypes(vueCompilerOptions, env)
 
-      return createTypeScriptWorkerLanguageService({
-        typescript,
+      const workerService = createTypeScriptWorkerLanguageService({
+        typescript: ts,
         compilerOptions,
         workerContext: ctx,
         env,
@@ -91,17 +116,211 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
         },
         languagePlugins: [
           createVueLanguagePlugin(
-            typescript,
+            ts,
             compilerOptions,
             vueCompilerOptions,
             asFileName,
           ),
         ],
-        languageServicePlugins: getFullLanguageServicePlugins(typescript),
-        setup({ project }) {
-          project.vue = { compilerOptions: vueCompilerOptions }
-        },
+        languageServicePlugins: [
+          ...getTsLanguageServicePlugins(),
+          ...getVueLanguageServicePlugins(),
+        ],
       })
+
+      return workerService
+
+      function setupGlobalTypes(
+        options: VueCompilerOptions,
+        env: LanguageServiceEnvironment,
+      ) {
+        const globalTypes = generateGlobalTypes(options)
+        const globalTypesPath
+          = `/node_modules/${getGlobalTypesFileName(options)}`
+        options.globalTypesPath = () => globalTypesPath
+        const { stat, readFile } = env.fs!
+        const ctime = Date.now()
+        env.fs!.stat = async (uri) => {
+          if (uri.path === globalTypesPath) {
+            return {
+              type: 1,
+              ctime,
+              mtime: ctime,
+              size: globalTypes.length,
+            }
+          }
+          return stat(uri)
+        }
+        env.fs!.readFile = async (uri) => {
+          if (uri.path === globalTypesPath) {
+            return globalTypes
+          }
+          return readFile(uri)
+        }
+      }
+
+      function getTsLanguageServicePlugins() {
+        const semanticPlugin = createTypeScriptSemanticPlugin(ts)
+        const { create } = semanticPlugin
+        semanticPlugin.create = (context) => {
+          const created = create(context)
+          const ls = created.provide[
+            'typescript/languageService'
+          ]() as import('typescript').LanguageService
+          const proxy = createVueLanguageServiceProxy(
+            ts,
+            new Proxy(
+              {},
+              {
+                get(_target, prop, receiver) {
+                  return Reflect.get(context.language, prop, receiver)
+                },
+              },
+            ) as unknown as Language,
+            ls,
+            vueCompilerOptions,
+            asUri,
+          )
+          ls.getCompletionsAtPosition = proxy.getCompletionsAtPosition
+          ls.getCompletionEntryDetails = proxy.getCompletionEntryDetails
+          ls.getCodeFixesAtPosition = proxy.getCodeFixesAtPosition
+          ls.getDefinitionAndBoundSpan = proxy.getDefinitionAndBoundSpan
+          ls.getQuickInfoAtPosition = proxy.getQuickInfoAtPosition
+          return created
+        }
+        return [semanticPlugin, createTypeScriptDirectiveCommentPlugin()]
+      }
+
+      function getVueLanguageServicePlugins() {
+        const plugins = createVueLanguageServicePlugins(ts, {
+          getComponentDirectives(fileName) {
+            return getComponentDirectives(ts, getProgram(), fileName)
+          },
+          getComponentEvents(fileName, tag) {
+            return getComponentEvents(ts, getProgram(), fileName, tag)
+          },
+          getComponentNames(fileName) {
+            return getComponentNames(ts, getProgram(), fileName)
+          },
+          getComponentProps(fileName, tag) {
+            return getComponentProps(ts, getProgram(), fileName, tag)
+          },
+          getComponentSlots(fileName) {
+            const { virtualCode } = getVirtualCode(fileName)
+            return getComponentSlots(ts, getProgram(), virtualCode)
+          },
+          getElementAttrs(fileName, tag) {
+            return getElementAttrs(ts, getProgram(), fileName, tag)
+          },
+          getElementNames(fileName) {
+            return getElementNames(ts, getProgram(), fileName)
+          },
+          getPropertiesAtLocation(fileName, position) {
+            const { sourceScript, virtualCode } = getVirtualCode(fileName)
+            return getPropertiesAtLocation(
+              ts,
+              getLanguageService().context.language,
+              getProgram(),
+              sourceScript,
+              virtualCode,
+              position,
+              false,
+            )
+          },
+          async getQuickInfoAtPosition(fileName, position) {
+            const uri = asUri(fileName)
+            const sourceScript
+              = getLanguageService().context.language.scripts.get(uri)
+            if (!sourceScript) {
+              return
+            }
+            const hover = await getLanguageService().getHover(uri, position)
+            let text = ''
+            if (typeof hover?.contents === 'string') {
+              text = hover.contents
+            }
+            else if (Array.isArray(hover?.contents)) {
+              text = hover.contents
+                .map(c => (typeof c === 'string' ? c : c.value))
+                .join('\n')
+            }
+            else if (hover) {
+              text = hover.contents.value
+            }
+            text = text.replace(/```typescript/g, '')
+            text = text.replace(/```/g, '')
+            text = text.replace(/---/g, '')
+            text = text.trim()
+            while (true) {
+              const newText = text.replace(/\n\n/g, '\n')
+              if (newText === text) {
+                break
+              }
+              text = newText
+            }
+            text = text.replace(/\n/g, ' | ')
+            return text
+          },
+          collectExtractProps() {
+            throw new Error('Not implemented')
+          },
+          getImportPathForFile() {
+            throw new Error('Not implemented')
+          },
+          getDocumentHighlights() {
+            throw new Error('Not implemented')
+          },
+          getEncodedSemanticClassifications() {
+            throw new Error('Not implemented')
+          },
+        })
+        const ignoreVueServicePlugins = new Set([
+          'vue-extract-file',
+          'vue-document-drop',
+          'vue-document-highlights',
+          'typescript-semantic-tokens',
+        ])
+        return plugins.filter(
+          plugin => !ignoreVueServicePlugins.has(plugin.name!),
+        )
+
+        function getVirtualCode(fileName: string) {
+          const uri = asUri(fileName)
+          const sourceScript
+            = getLanguageService().context.language.scripts.get(uri)
+          if (!sourceScript) {
+            throw new Error(`No source script found for file: ${fileName}`)
+          }
+          const virtualCode = sourceScript.generated?.root
+          if (!(virtualCode instanceof VueVirtualCode)) {
+            throw new TypeError(`No virtual code found for file: ${fileName}`)
+          }
+          return {
+            sourceScript,
+            virtualCode,
+          }
+        }
+
+        function getProgram() {
+          const tsService: import('typescript').LanguageService
+            = getLanguageService().context.inject('typescript/languageService')
+          return tsService.getProgram()!
+        }
+
+        function getLanguageService() {
+          return (workerService as any).languageService as LanguageService
+        }
+      }
     },
   )
 }
+
+async function importTsFromCdn(tsVersion: string) {
+  const _module = globalThis.module
+  ;(globalThis as any).module = { exports: {} }
+  const tsUrl = `https://cdn.jsdelivr.net/npm/typescript@${tsVersion}/lib/typescript.js`
+  await import(/* @vite-ignore */ tsUrl)
+  const ts = globalThis.module.exports
+  globalThis.module = _module
+  return ts as typeof import('typescript')
+}