microsoft / microsoft/monaco-editor

[Feature Request] ESM build that can be loaded from CDNs

Open
#4,628 5 comments 4 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

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>

Try in LiveCodes playground

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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.