SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 19:42:56 +01:00
Code Issues Projects Releases Packages Activity

Make Vite sample code Firefox compatible

Browse source 
The current sample code for "Using Vite" works fine in Chrome, but causes errors in Firefox: 

`Error: import declarations may only appear at top level of a module`

In addition to many errors logged to the console, this also causes subtle bugs in Firefox (e.g. the highlighting in the diff editor didn't work).

The problem appears to be that Firefox requires an explicit `type: module` for the web workers.

The revised implementation for Vite takes this into account and has been tested successfully in Chrome and Firefox.
This commit is contained in:
Daniel Veihelmann 2022-02-23 19:30:08 +01:00 • committed by GitHub
parent 7826dee4ea
commit f0c47e6e2d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

50
docs/integrate-esm.md
View file

@ -192,30 +192,42 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorker(_, label) { getWorker: function (workerId, label) {
if (label === 'json') {
return new jsonWorker(); const getWorkerModule = (moduleUrl, label) => {
} return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
if (label === 'css' || label === 'scss' || label === 'less') { name: label,
return new cssWorker(); type: 'module'
} });
if (label === 'html' || label === 'handlebars' || label === 'razor') { };
return new htmlWorker();
} switch (label) {
if (label === 'typescript' || label === 'javascript') { case 'json':
return new tsWorker(); return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
} case 'css':
return new editorWorker(); case 'scss':
case 'less':
return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
case 'html':
case 'handlebars':
case 'razor':
return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
case 'typescript':
case 'javascript':
return getWorkerModule(
'/monaco-editor/esm/vs/language/typescript/ts.worker?worker',
label
);
default:
return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
} }
}
}; };
Monaco = await import('monaco-editor');
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}", value: "function hello() {\n\talert('Hello world!');\n}",
language: 'javascript' language: 'javascript'