ESM with Vanilla JS - Githubissues

sbuchok commented 3 years ago

Please create a sample for ESM that doesn't use WebPack or Parcel. Just plain Vanilla JS.

ConradSollitt commented 3 years ago

Hi @sbuchok Check out the AMD version (linked from the main readme):

https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-amd.md

Below is a version of it that runs from CDN (jsdelivr).

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.22.3/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.22.3/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>
</body>
</html>

sbuchok commented 3 years ago

I was already using the AMD version before. I want a straight vanilla version that has 0 dependencies on other tech.

ConradSollitt commented 3 years ago

@sbuchok What is your goal of a vanilla version? For example - all code in a single JS file? I'm not a maintainer/developer of Monaco (rather an end-user/developer) so I can't provide future design divisions, etc but Monaco uses Web Workers and dynamic loading so a single file would probably not be possible.

Anyways, using the AMD version only code related to the current repository is loaded and no other files so it has no dependancies other than this repository or npm package. Personally I find that it works well for 0 dependancies as I can simply copy all files or just use a CDN/ link.

sbuchok commented 3 years ago

@ConradSollitt

Thanks for the reply.

What I would like to be able to do is:

import { monaco } from './somefolder/monaco.js';
...setupcode, labuage, theme, that sort of stuff...

monaco.editor.create(...);

Using native ES Modules. The ESM version makes it sound like you can do this, but that is not the case.

I want to be able to use Monaco from within a js module without the need for WebPack or anything else. As I mentioned, I already have the AMD version working. I also got the AMD version working ... hackily, within a js module. But it is not straight forward.

Here is what I did, please remember, very hacky.

(async () => {
    window.require = { paths: { 'vs': 'scripts/monaco/vs' } };

    await import('./monaco/vs/loader.js');
    await import('./monaco/vs/editor/editor.main.nls.js');

    require(["vs/editor/editor.main"], () => {
        monaco.languages.register(...);
        monaco.languages.setMonacrchTokenProvider(...);
        monaco.editor.defineTheme(...);
...
    });
})();

kurtcodemander commented 3 years ago

What's the status on this issue? We're in mid 2021 and monaco-editor still can't be loaded directly as an ESM module in the browser without AMD, Webpack or any other stuff?

It can be loaded with skypack.dev (https://www.skypack.dev/view/monaco-editor) when it works (but it is often broken).

We need a working solution right out of the box.

jamesgibson14 commented 3 years ago

It can be loaded with skypack.dev (https://www.skypack.dev/view/monaco-editor) when it works (but it is often broken).

Can you elaborate on how you got it to work with SkyPack or Esm.run? I haven't been able to get it to run with them.

suren-atoyan commented 3 years ago

For anyone who needs - here, is a utility that helps you to overcome the webpack configuration.

Please note that it doesn't solve the issue we have - we still waiting for the "pure" ESM version of the monaco-editor

ije commented 2 years ago

try esm.sh

import * as monaco from 'https://esm.sh/monaco-editor';
import editorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'https://esm.sh/monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'https://esm.sh/monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'https://esm.sh/monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  }
};

monaco.editor.create(document.getElementById('container'), {
  value: "function hello() {\n\talert('Hello world!');\n}",
  language: 'javascript'
});

jamesgibson14 commented 2 years ago

@ije have you got it working with esm.sh? I tested it and it does load correctly but then there is an Error: Unexpected usage, and also a CORS error: "Failed to construct 'Worker': Script at 'https://esm.sh/v58/monaco-editor@0.30.1/es2021/esm/vs/editor/editor.worker.js' cannot be accessed from origin 'https://cdpn.io'." Any idea how to fix these?

jamesgibson14 commented 2 years ago

Here is an code pen of it working but with errors: https://codepen.io/jamesgibson14/pen/ZEXOWEz

microsoft / monaco-editor

ESM with Vanilla JS #2335