microsoft / microsoft/monaco-editor

Support loading ESM workers natively as module Workers

Open
#2,795 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

ESM feature-request
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Bug/Feature request

I aware that this package currently doesn't support a fully native ESM module because it contains .css/.ttf imports.

The css imports might eventually be okay with CSS module scripts:

import sheet from './styles.css' assert { type: 'css' };

There will still be an issue with how the workers are loaded. Since the monaco-editor/esm/vs/language/typescript/ts.worker.js and monaco-editor/esm/vs/editor/editor.worker.js are ESM modules (they contain imports), they will need to be imported as module Workers:

const editorWorker = new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
  type: 'module'
});

The editor Worker imports monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js which contains a typeof importScripts check but "the old importScripts() method is not available within module workers"; it will throw:

Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Module scripts don't support importScripts().

(as discovered trying to load workers directly with webpack target esm).

So the worker should use import instead of importScripts or be self-contained classic workers.

Related issues:

ESM with Vanilla JS:
https://github.com/microsoft/monaco-editor/issues/2335

ES Modules (vs Webpack):
https://github.com/microsoft/monaco-editor/issues/949

ESM and CSS loading:
https://github.com/microsoft/monaco-editor/issues/886

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with monaco-editor/esm/vs/editor/editor.worker.js, monaco-editor/esm/vs/language/typescript/ts.worker.js, and vs/editor/common/services/editorSimpleWorker.js. Trace how the workers are loaded and where the typeof importScripts check is reached, then verify the module Worker example and its imports in a browser or webpack target esm setup. Done means the workers load as module Workers without the reported importScripts exception.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.