Fixed test's `env.ts` for usage with latests deps.

[JulianCataldo]

Just in case someone want to copy the test and make it work with the latest volar etc.

import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import vueWorker from "monaco-volar/vue.worker?worker";
import * as onigasm from "onigasm";
import onigasmWasm from "onigasm/lib/onigasm.wasm?url";

import type { LanguageService } from "@vue/language-service";
import { editor, languages } from "monaco-editor";
import * as volar from "@volar/monaco";

export function loadOnigasm() {
  return onigasm.loadWASM(onigasmWasm);
}

export function setupMonacoEnv(takeoverMode = false) {
  let initialized = false;

  languages.register({ id: "vue", extensions: [".vue"] });
  languages.onLanguage("vue", setup);

  if (takeoverMode) {
    languages.onLanguage("javascript", setup);
    languages.onLanguage("typescript", setup);
    languages.onLanguage("javascriptreact", setup);
    languages.onLanguage("typescriptreact", setup);
    languages.onLanguage("json", setup);
  }

  async function setup() {
    if (initialized) {
      return;
    }
    initialized = true;

    (self as any).MonacoEnvironment ??= {};
    (self as any).MonacoEnvironment.getWorker ??= () => new editorWorker();

    const getWorker = (self as any).MonacoEnvironment.getWorker;

    (self as any).MonacoEnvironment.getWorker = (_: any, label: string) => {
      if (label === "vue") {
        return new vueWorker();
      }
      return getWorker();
    };

    const worker = editor.createWebWorker<LanguageService>({
      moduleId: "vs/language/vue/vueWorker",
      label: "vue",
      createData: {},
    });
    const languageId = takeoverMode
      ? [
          "vue",
          "javascript",
          "typescript",
          "javascriptreact",
          "typescriptreact",
          "json",
        ]
      : ["vue"];
    const getSyncUris = () => editor.getModels().map((model) => model.uri);
    volar.activateMarkers(worker, languageId, "vue", getSyncUris, editor);
    volar.activateAutoInsertion(worker, languageId, getSyncUris, editor);
    await volar.registerProviders(worker, languageId, getSyncUris, languages);
  }
}

Changed:

• volar.editor.activateAutoInsertion => volar.activateAutoInsertion, etc.
• monaco-editor-core imports => monaco-editor for typings mismatches

Can confirm it works with:

Sorry, just tried again and using monaco-editor, while it fixes the typings issue, breaks the IntelliSense. Will post updates if needed.

  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@volar/monaco": "^2.1.5",
    "@vue/language-service": "^2.0.7",
    "monaco-editor": "^0.47.0",
    "monaco-editor-core": "^0.47.0",
    "monaco-editor-textmate": "^4.0.0",
    "monaco-volar": "^0.4.0",
    "onigasm": "^2.2.5",
    "vue": "^3.4.21"
  }

[rubick24]

Works great! Thanks for posting this.

[rubick24]

I noticed that the vue worker in this repo is not compatable with lastest @vue/language-service and volar-service-typescript, is there any reference or example that I can make the update?

[rubick24]

After some tinkering to install matched package version, I got this: https://github.com/c8se/monaco-volar-vue-demo There are still problems with ts support in vue files，but I have no idea how to resolve them:

[ejfasting]

Hi, I tried to follow this example to set it up for another languageservice then vue (basically replacing vue all together). My experience is the same, the intellisense is broken for the newer version of volar-service-typescript, and in my scenario i had some import-statements that i injected in the top of the virtual document (in my languageService). This lead to the same errormsg you have above, 'process is not defined'.

So i guess this just doesn't work, unless @c8se has made some progress since last comment (?)

[rubick24]

I have no further progress yet. @johnsoncodehk Could you please take a look at this?

[ejfasting]

Could probably move this issue to @volar/monaco instead, as it seems to be the package and not this implementation that fails (?)