feat: pass vue dts module version from store

Author: johnsoncodehk

package.json

@@ -44,7 +44,7 @@
     "@types/codemirror": "^5.60.2",
     "@types/node": "^16.11.12",
     "@vitejs/plugin-vue": "^3.0.0",
-    "@volar/monaco": "1.3.0-alpha.3",
+    "@volar/monaco": "1.3.0-alpha.3-patch.2",
     "@volar/vue-language-service": "1.2.2-alpha.0",
     "codemirror": "^5.62.3",
     "fflate": "^0.7.3",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { loadMonacoEnv, loadWasm } from './env';
-loadMonacoEnv();
-loadWasm();
+
+let init = false;
 </script>
 
 <script lang="ts" setup>
@@ -20,14 +20,19 @@ const props = withDefaults(defineProps<{
 
 const emits = defineEmits<{
   (e: 'change', value: string): void,
-  (e: 'save', value: string): void
 }>()
 
 const containerRef = ref<HTMLDivElement | null>();
 const ready = ref(false);
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor | undefined>(undefined);
 const store = inject('store') as Store;
 
+if (!init) {
+  init = true;
+  loadMonacoEnv(store);
+  loadWasm();
+}
+
 watchEffect(() => {
   // create a model for each file in the store
   for (const filename in store.state.files) {
@@ -87,6 +92,10 @@ onMounted(async () => {
 
   await loadGrammars(editorInstance);
 
+  editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+    // ignore save event
+  });
+
   editorInstance.onDidChangeModelContent(() => {
     emits('change', editorInstance.getValue());
   });

src/monaco/Monaco.vue

@@ -1,15 +1,18 @@
 import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker';
-import vueWorker from 'monaco-volar/vue.worker?worker';
+import vueWorker from './vue.worker?worker';
 import * as onigasm from "onigasm";
 import onigasmWasm from "onigasm/lib/onigasm.wasm?url";
-import { editor, languages } from 'monaco-editor-core';
+import { editor, languages, Uri } from 'monaco-editor-core';
 import * as volar from '@volar/monaco';
+import { Store } from '../store';
+import * as VolarWorker from '@volar/monaco/worker';
+import { getOrCreateModel } from './utils';
 
 export function loadWasm() {
   return onigasm.loadWASM(onigasmWasm);
 }
 
-export function loadMonacoEnv() {
+export function loadMonacoEnv(store: Store) {
   (self as any).MonacoEnvironment = {
     async getWorker(_: any, label: string) {
       if (label === 'vue') {
@@ -23,12 +26,24 @@ export function loadMonacoEnv() {
     const worker = editor.createWebWorker<any>({
       moduleId: 'vs/language/vue/vueWorker',
       label: 'vue',
-      createData: {},
-    })
-    const languageId = ['vue']
-    const getSyncUris = () => editor.getModels().map(m => m.uri);
-    volar.editor.activateMarkers(worker, languageId, 'vue', getSyncUris, editor)
-    volar.editor.activateAutoInsertion(worker, languageId, getSyncUris, editor)
-    volar.languages.registerProvides(worker, languageId, getSyncUris, languages)
+      host: VolarWorker.createDtsHost('https://unpkg.com/', !store.vueVersion ? {} : {
+        'vue': store.vueVersion,
+        '@vue/compiler-core': store.vueVersion,
+        '@vue/compiler-dom': store.vueVersion,
+        '@vue/compiler-sfc': store.vueVersion,
+        '@vue/compiler-ssr': store.vueVersion,
+        '@vue/reactivity': store.vueVersion,
+        '@vue/runtime-core': store.vueVersion,
+        '@vue/runtime-dom': store.vueVersion,
+        '@vue/shared': store.vueVersion,
+      }, (filename, text) => {
+        getOrCreateModel(Uri.file(filename), undefined, text);
+      }),
+    });
+    const languageId = ['vue'];
+    const getSyncUris = () => Object.keys(store.state.files).map(filename => Uri.parse(`file:///${filename}`));
+    volar.editor.activateMarkers(worker, languageId, 'vue', getSyncUris, editor);
+    volar.editor.activateAutoInsertion(worker, languageId, getSyncUris, editor);
+    volar.languages.registerProvides(worker, languageId, getSyncUris, languages);
   })
-}
+}

src/monaco/env.ts

@@ -0,0 +1,34 @@
+// @ts-ignore
+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';
+import { resolveConfig } from '@volar/vue-language-service';
+import * as VolarWorker from '@volar/monaco/worker';
+
+self.onmessage = () => {
+  worker.initialize((ctx: monaco.worker.IWorkerContext) => {
+
+    const compilerOptions: ts.CompilerOptions = {
+      ...ts.getDefaultCompilerOptions(),
+      allowJs: true,
+      jsx: ts.JsxEmit.Preserve,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+    };
+
+    return VolarWorker.createLanguageService({
+      workerContext: ctx,
+      config: resolveConfig(
+        { plugins: { /* volar.config.js plugins */ } },
+        ts as any,
+        compilerOptions,
+        { plugins: [/* tsconfig vueCompilerOptions plugins */] }
+      ),
+      typescript: {
+        module: ts as any,
+        compilerOptions,
+      },
+      dtsHost: ctx.host,
+    });
+  });
+};