@node-projects/monaco-editor-esm

Real ESM version of Monaco Editor

This package provides a true ESM (EcmaScript Module) build of the Monaco Editor, suitable for modern build tools and direct browser usage. All JavaScript modules are available in the /esm directory, and all required CSS files are in /min.

Why ESM?

• Native ESM modules allow for better tree-shaking, direct browser imports, and compatibility with modern bundlers (Webpack, Rollup, Vite, etc.).
• The official Monaco Editor package is not fully ESM and includes AMD/CommonJS code and non-standard CSS imports.

Usage

1. Install the package:

   npm install @node-projects/monaco-editor-esm

2. Import the editor in your code:

   import * as monaco from '@node-projects/monaco-editor-esm/esm/vs/editor/editor.main.js';

3. Make sure to load the required CSS from /min:

   import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type : 'css' };
   shadowRoot.adoptedStyleSheets.push(editorStyle);
   // or
   document.adoptedStyleSheets.push(editorStyle);

   Or include it in your HTML:

   <link rel="stylesheet" href="node_modules/@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css">

CSS Import Caveats

• The ESM modules may contain import './file.css' statements, which are not yet supported natively in browsers or Node.js. Most bundlers can handle these imports with the appropriate loader/plugin.
• If you use the modules directly in the browser, you must include the CSS manually as shown above.
• For more background, see the discussion on ESM and CSS loading.

Limitations

• Some features may require additional configuration for web workers. See Monaco Editor documentation for details.
• The ESM build is not guaranteed to be 100% compatible with all Monaco Editor plugins or extensions.

Updating to a New Monaco Editor Release

When a new version of Monaco Editor is released, update this package by running the update-monaco GitHub Actions workflow:

1. Go to the Actions tab in your GitHub repository.
2. Select the Update Monaco Editor workflow.
3. Click Run workflow to trigger the update process.

This workflow will:

• Install the latest Monaco Editor version
• Update the package version
• Rebuild the ESM and CSS outputs
• Commit, tag, and (if configured) create a GitHub release for the new version

After the workflow completes, verify the changes and publish the package if needed.

License

MIT