[Bug] Using workers with the deprecated AMD build

[spahnke]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

Let me preface this with I understand that you want to move forward to ESM builds, and I understand deprecation of the AMD build, and I'm thankful that is still included for now. However, I can't just switch to ESM with everything implied by that especially bundler integration into a bigger project etc. without allocating a long and dedicated period of time to do so which is just not possible right now or the near future 🙁 Furthermore, as long as AMD is still included I'd like to at least keep up-to-date especially with regards to the TS version which hasn't been updated for a long while now. So I'd like to ask for some help here. This is for Monaco version 0.54.0 because I want to get at least this sorted out before the even more breaking-changes coming in 0.55.0 regarding language integration.

My integration of the Monaco editor relies on a worker running ESLint, that was built as an AMD module and then loaded using monaco.editor.createWebWorker, and makes use of the mirror models. The changelog states "Custom AMD workers don't work anymore out of the box.". I was able to at least figure out that I can compile the worker code as a normal script, create the Worker myself and then call the method like

const worker = new Worker(window.location.origin + "/worker/eslint-worker.js");
this.webWorker = monaco.editor.createWebWorker<IEsLintWorker>({
	worker,
	// moduleId: window.location.origin + "/worker/eslint-worker",
	// label: this.owner,
	// createData: { config: this.createEsLintCompatibleConfig() } as IWorkerCreateData
});
return this.webWorker.getProxy();

where the commented lines were the API used before. However, I can't figure out what I need to do for plumbing, so that the create function is still called and provides a) the worker context (monaco.worker.IWorkerContext) for the mirror models, and b) the createData. Can I make this work without completely switching to ESM? What code can I consult? The only messages I receive inside the worker are -please-ignore- and $initialize, after which the promise returned by the call to getProxy() never resolves and no further messages arrive. What's the protocol here? Debugging all those tangled event handlers and figuring out what to do when and where when my worker isn't the only one loaded is pretty hard...

Do I really have to resort back to a custom build worker integration without mirror model support? 🙁

[spahnke]

For now I found a solution, let me know if this is the proper way as well when using the ESM build in the future, and please also let me know if I can simplify stuff.

I now build the actual worker script as an ESM module and bundle that separately importing the worker boilerplate by mimicking what e.g. the TS worker does, like this at the start of the worker code. The rest of the worker code can remain the same and still has its create function like in the AMD case. As source I used #4950 especially the common/initialize.ts and common/workers.ts, as well as ts.worker.ts.

import { start } from "../../../node_modules/monaco-editor/esm/vs/editor/editor.worker.start.js";

self.onmessage = (e) => {
	console.log(e);
	// ignore the first message
	initialize((ctx: monaco.worker.IWorkerContext, createData: IWorkerCreateData) => {
		return create(ctx, createData);
	});
};

let initialized = false;

export function isWorkerInitialized(): boolean {
	return initialized;
}

export function initialize(callback: (ctx: any, createData: any) => any): void {
	initialized = true;
	self.onmessage = (m) => {
		start((ctx: any) => {
			return callback(ctx, m.data);
		});
	};
}

To load I then (like above) create the Worker object myself and post one ignore message and one message with the creation parameters like this:

const worker = new Worker(window.location.origin + "/worker/eslint-worker.js", { type: "module" });
worker.postMessage('ignore');
worker.postMessage({ config: this.createEsLintCompatibleConfig() } as IWorkerCreateData);