Replies: 12 comments 4 replies
-
|
Hi @sbuchok 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/[email protected]/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/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> |
Beta Was this translation helpful? Give feedback.
-
|
I was already using the AMD version before. I want a straight vanilla version that has 0 dependencies on other tech. |
Beta Was this translation helpful? Give feedback.
-
|
@sbuchok 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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply. What I would like to be able to do is: 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. |
Beta Was this translation helpful? Give feedback.
-
|
Related to #949 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. |
Beta Was this translation helpful? Give feedback.
-
Can you elaborate on how you got it to work with SkyPack or Esm.run? |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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'
}); |
Beta Was this translation helpful? Give feedback.
-
|
@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/[email protected]/es2021/esm/vs/editor/editor.worker.js' cannot be accessed from origin 'https://cdpn.io'." |
Beta Was this translation helpful? Give feedback.
-
|
Here is an code pen of it working but with errors: https://codepen.io/jamesgibson14/pen/ZEXOWEz |
Beta Was this translation helpful? Give feedback.
-
|
just tried, works for me |
Beta Was this translation helpful? Give feedback.
-
|
any update on a pure esm module? |
Beta Was this translation helpful? Give feedback.
-
|
The documentation seems to offer a few ESM options, like https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite I'm not certain if that's pure ESM though. |
Beta Was this translation helpful? Give feedback.
-
|
I created monaco-esm to make Monaco Editor work as a native ES module without bundlers like Webpack. Just import it and go. No hacks, no loaders. Perfect for Vite, Deno, or direct browser use. Here's a live demo: CodeSandbox. |
Beta Was this translation helpful? Give feedback.
-
|
The link gives me a 404 page, is it possible that it's still a private repo? |
Beta Was this translation helpful? Give feedback.
-
|
@stefnotch oh yes, you're right, thanks 👍 Fixed |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Please create a sample for ESM that doesn't use WebPack or Parcel. Just plain Vanilla JS.
Beta Was this translation helpful? Give feedback.
All reactions