feat: update to @volar/monaco and @vue/language-service v2 (#150)

Co-authored-by: Anthony Fu <[email protected]>

Author: johnsoncodehk

monaco/env.ts

@@ -131,24 +131,24 @@ export async function reloadLanguageTools(ctx: PlaygroundMonacoContext) {
       .map(file => Uri.parse(`file:///${file.filepath}`)),
     ...extraFiles,
   ]
-  const { dispose: disposeMarkers } = volar.editor.activateMarkers(
+  const { dispose: disposeMarkers } = volar.activateMarkers(
     worker,
     languageId,
     'vue',
     getSyncUris,
-    editor,
+    editor as typeof import('monaco-editor').editor,
   )
-  const { dispose: disposeAutoInsertion } = volar.editor.activateAutoInsertion(
+  const { dispose: disposeAutoInsertion } = volar.activateAutoInsertion(
     worker,
     languageId,
     getSyncUris,
-    editor,
+    editor as typeof import('monaco-editor').editor,
   )
-  const { dispose: disposeProvides } = await volar.languages.registerProvides(
+  const { dispose: disposeProvides } = await volar.registerProviders(
     worker,
     languageId,
     getSyncUris,
-    languages,
+    languages as unknown as typeof import('monaco-editor').languages,
   )
 
   disposeVue = () => {

monaco/setup.ts

@@ -10,7 +10,6 @@ import vueWorker from './vue.worker?worker'
 import { reloadLanguageTools } from './env'
 
 export function initMonaco(ctx: PlaygroundStore) {
-  // @ts-expect-error MonacoEnvironment is a global variable injected for monaco
   self.MonacoEnvironment = {
     async getWorker(_: any, label: string) {
       switch (label) {

monaco/vue.worker.ts

@@ -2,14 +2,11 @@
 import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker'
 import type * as monaco from 'monaco-editor-core'
 import * as ts from 'typescript/lib/tsserverlibrary'
-import type { VueCompilerOptions } from '@vue/language-service'
-import { resolveConfig } from '@vue/language-service'
-import {
-  createLanguageHost,
-  createLanguageService,
-  createServiceEnvironment,
-} from '@volar/monaco/worker'
+import type { LanguageServiceEnvironment, VueCompilerOptions } from '@vue/language-service'
+import { getFullLanguageServicePlugins, createVueLanguagePlugin, resolveVueCompilerOptions } from '@vue/language-service'
+import { createTypeScriptWorkerService } from '@volar/monaco/worker'
 import type { WorkerHost } from './env'
+import { URI } from 'vscode-uri'
 
 export interface CreateData {
   tsconfig: {
@@ -36,51 +33,70 @@ self.onmessage = () => {
     ctx: monaco.worker.IWorkerContext<WorkerHost>,
     { tsconfig }: CreateData,
   ) => {
+    const asFileName = (uri: URI) => uri.path
+    const asUri = (fileName: string): URI => URI.file(fileName)
+    const env: LanguageServiceEnvironment = {
+      workspaceFolders: [URI.file('/')],
+    }
     const { options: compilerOptions } = ts.convertCompilerOptionsFromJson(
       tsconfig.compilerOptions || {},
       '',
     )
+    const vueCompilerOptions = resolveVueCompilerOptions(
+      tsconfig.vueCompilerOptions || {},
+    )
 
     // eslint-disable-next-line no-console
     console.log('Vue Language Services: compilerOptions', compilerOptions)
 
-    const env = createServiceEnvironment()
-    const host = createLanguageHost(
-      ctx.getMirrorModels,
-      env,
-      '/',
-      compilerOptions,
-    )
-
     env.fs = {
       async readFile(uri) {
-        if (isInvalidPath(uri))
+        if (isInvalidPath(uri.path))
           return undefined
-        const file = await ctx.host.fsReadFile(uri)
+        const file = await ctx.host.fsReadFile(uri.toString())
         return file
       },
       async stat(uri) {
-        if (isInvalidPath(uri))
+        if (isInvalidPath(uri.path))
           return undefined
-        const result = await ctx.host.fsStat(uri)
+        const result = await ctx.host.fsStat(uri.toString())
         return result
       },
       async readDirectory(uri) {
-        const dirs = await ctx.host.fsReadDirectory(uri)
+        const dirs = await ctx.host.fsReadDirectory(uri.toString())
         return dirs
       },
     }
 
-    return createLanguageService(
-      { typescript: ts },
+    return createTypeScriptWorkerService({
+      typescript: ts,
       env,
-      resolveConfig(
+      compilerOptions,
+      uriConverter: {
+        asFileName,
+        asUri,
+      },
+      workerContext: ctx,
+      languagePlugins: [createVueLanguagePlugin(
         ts,
-        {},
+        asFileName,
+        () => '', // TODO getProjectVersion
+        (fileName) => {
+          const uri = asUri(fileName)
+          for (const model of ctx.getMirrorModels()) {
+            if (model.uri.toString() === uri.toString()) {
+              return true
+            }
+          }
+          return false
+        },
         compilerOptions,
-        tsconfig?.vueCompilerOptions || {},
-      ),
-      host,
-    )
+        vueCompilerOptions,
+      )],
+      languageServicePlugins: getFullLanguageServicePlugins(ts),
+      setup({ project }) {
+        project.vue = { compilerOptions: vueCompilerOptions }
+      },
+    })
   })
 }

package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "@shikijs/core": "^1.5.2",
     "@shikijs/monaco": "^1.5.2",
-    "@volar/monaco": "^1.11.1",
-    "@vue/language-service": "^1.8.27",
+    "@volar/monaco": "~2.4.0-alpha.12",
+    "@vue/language-service": "^2.0.26-alpha.2",
     "@webcontainer/api": "^1.1.9",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
@@ -33,6 +33,7 @@
     "strip-json-comments": "^5.0.1",
     "theme-vitesse": "^0.8.0",
     "unified": "^11.0.4",
+    "vscode-uri": "^3.0.8",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
@@ -56,13 +57,13 @@
     "execa": "^9.1.0",
     "fast-glob": "^3.3.2",
     "fuse.js": "^7.0.0",
-    "monaco-editor-core": "^0.48.0",
+    "monaco-editor-core": "^0.50.0",
     "nuxt": "^3.11.2",
     "nuxt-icon": "^0.6.10",
     "pathe": "^1.1.2",
     "remark-external-links": "^9.0.1",
     "typescript": "^5.4.5",
-    "vue-tsc": "^2.0.19"
+    "vue-tsc": "^2.0.26-alpha.2"
   },
   "pnpm": {
     "patchedDependencies": {