microsoft / microsoft/monaco-editor
[Feature Request] ESM build that can be loaded from CDNs
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Context
- This issue is not a bug report. (please use a different template for reporting a bug)
- This issue is not a duplicate of an existing issue. (please use the search to find existing issues)
Description
This is a suggestion to provide an ESM build that can be loaded from CDN.
Currently, the recommended way is to build the editor with a bundler and host it with the page that needs to load it. In addition it requires the user to configure the MonacoEnvironment.getWorkerUrl
This is a bit cumbersome and exposes implementation details that the end-user does not need to be concerned with.
The other alternative is to use the loader, that loads an AMD version, which I think should no longer be the recommended way, with ESM being used across the whole eco-system. In addition, it is prone to conflicts with other libraries and getting such errors:
Error: Can only have one anonymous define call per script file
My suggestion is something like this:
<div id="container" style="height: 200px;"></div>
<script type="module">
import { monaco } from "https://cdn.jsdelivr.net/npm/monaco-editor-esm-cdn/monaco.js";
monaco.editor.create(document.getElementById("container"), {
value: `function x() {\n\tconsole.log("Hello world!");\n}`,
language: "javascript",
});
</script>
This works by using a simple workaround that allows using web workers from a CDN.
I believe this can make using Monaco editor much simpler.
If you think this way is acceptable, I can start a PR to either provide such build that can just be published with the npm package or at least add docs for using something like this.
Please see the example repo:
https://github.com/hatemhosny/monaco-editor-esm-cdn
Monaco Editor Playground Link
No response
Monaco Editor Playground Code
No response
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
Read docs/integrate-esm.md and the linked monaco-editor-esm-cdn example first, then compare the current bundler and AMD approaches with the proposed CDN loading pattern. Done means an ESM build can be loaded from a CDN without a bundler or manual worker configuration, with the supported usage documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- build-system
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100