microsoft / microsoft/monaco-editor
Support loading ESM workers natively as module Workers
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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