Monaco-editor: Poor Documentation

[amazzalel-habib]

Hello,
Does any one know how to create a custom web worker using only Monaco API.
And for supproted languages (ts,js, css,html and json) what is the diffrence between i.e html.worker.ts and htmlWorker.ts?
Please help

[masad-frost]

Disagree. There's https://microsoft.github.io/monaco-editor/api/ and you can always look at the VSCode code base and look at how things are used or written

[DJBMASTER]

I agree with @amazzalel-habib. This library is incredible frustrating to get started with. I am currently at a roadblock because I cannot get a MonacoWebWorker to work using ESM and I not have had any response both on here and on StackOverflow.

[alexdima]

html.worker.ts is the ESM entry point to the web worker.
htmlWorker.ts is the AMD entry point to the web worker and also imported by the ESM entry point (via an import statement).

We do this because we want to ship both an ESM and an AMD variant of the editor.

---

If you use AMD you can call monaco.editor.createWebWorker and pass as moduleId the module id you want to load.

If you use ESM you can also call monaco.editor.createWebWorker and pass as moduleId anything you wish. Then you must define MonacoEnvironment.getWorkerUrl and based on the label, you can return your own custom ESM module script. Then, from the ESM module script you can follow a pattern like the following @ https://github.com/Microsoft/monaco-css/blob/master/src/css.worker.ts:

import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
import { CSSWorker } from './cssWorker';

self.onmessage = () => {
    // ignore the first message
    worker.initialize((ctx, createData) => {
        return new CSSWorker(ctx, createData)
    });
};

[amazzalel-habib]

Thanks Alex, now I undeestand. I didn't find this online so I think it's better to put that somewhere in the doc.

[amazzalel-habib]

Also the initial function in the editor.worker.js is not typed, so working with typescript I needed to add my .d.ts file.