Vite & monaco-editor-workers

[cdietrich]

Hi, how to bundle monaco-editor-workers with vite? is there any example that works with import meta url?

[kaisalmen]

Hi @cdietrich monaco-editor-workers was designed to be used without any bundler in pure html/javascript. I want to propose some new approach with https://github.com/TypeFox/monaco-languageclient/pull/600 that let's you override the default.

You can get some inspiration here: https://github.com/CodinGame/monaco-vscode-api/blob/main/demo/src/setup.common.ts#L150-L167 I did so, too. 😊 I guess you are interested in editorWorkerService most of all when you are dealing with your own DSL

[cdietrich]

monaco seeems to whine if there is no worker.

[kaisalmen]

Yes, it likes the editor to be in a worker. I will work on the bespoke issue above today and move this topic forward along

[kaisalmen]

@cdietrich new preview release contain the new implementation, they are listed here: https://github.com/TypeFox/monaco-languageclient/pull/600#issue-2106106992

It is more versatile, because you have various possibilities to configure or overwrite it. Here are example how to use it.

Use pre-bundled version; https://github.com/TypeFox/monaco-languageclient/blob/merge-monaco-edtior-wrapper/packages/examples/src/python/client/reactPython.tsx#L12-L16

Provide your own (compatible with vite and webpack): https://github.com/TypeFox/monaco-languageclient/blob/merge-monaco-edtior-wrapper/packages/examples/src/json/client/wrapperWs.ts

[kaisalmen]

vite and webpack need to understand the new Worker(...) call. If you "hide" it in configuration, they are not able to extract the workers, that is the reason the second example defined a such. The pre-bundles are well suited for pure HTML+JS or Angular.

[cdietrich]

@kaisalmen is there a sample of a dependency list that works together? the like of

    "@codingame/monaco-vscode-configuration-service-override": "~1.85.0",
    "@codingame/monaco-vscode-editor-service-override": "~1.85.0",
    "@codingame/monaco-vscode-files-service-override": "~1.85.0",
    "@typefox/monaco-editor-react": "^2.6.0",
    "monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.85.0 <1.86.0",
    "monaco-languageclient": "~7.3.0",
    "monaco-editor-workers": "^0.45.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vscode": "npm:@codingame/monaco-vscode-api@>=1.85.0 <1.86.0"

e.g. where is npm:@codingame/monaco-editor-treemended gone

my wip work is here: https://github.com/cdietrich/my-monaco-editor-react-example/commit/0953e8ca5ba8637fce9980b6f14f82b0640402a6 https://github.com/cdietrich/my-monaco-editor-react-example/compare/cd/otherFilesExperiments_createModelReference_multi...cd/otherFilesExperiments_createModelReference_multi_update

simply adding https://github.com/TypeFox/monaco-languageclient/blob/9b1b3cf432fbdbbdd77854a2d88669a872830146/packages/examples/src/python/client/reactPython.tsx#L12-L16 does not sem to work in my example will try the other

[kaisalmen]

@cdietrich Regarding ⬆️ sorry, I have not received a notification or overlooked it.

[kaisalmen]

@codingame/monaco-editor-treemended => @codingame/monaco-vscode-editor-api no more overrides are required.

[cdietrich]

@kaisalmen hmmmm still have problems to get this running

✘ [ERROR] No matching export in "node_modules/monaco-editor/api.js" for import "editor"

node_modules/monaco-editor-wrapper/dist/editorAppClassic.js:5:9:
  5 │ import { editor, languages } from 'monaco-editor';

Update: problem solved

[kaisalmen]

@cdietrich did you define it like this in the package.json?

"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~3.1.2"

[cdietrich]

yes now i use it consistently and it works. so version update done. workers can be loaded. still looking into the component twice problem.