Jelajahi Sumber

Make Vite sample code Firefox compatible

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.
Daniel Veihelmann 3 tahun lalu
induk
melakukan
f0c47e6e2d
1 mengubah file dengan 31 tambahan dan 19 penghapusan
  1. 31 19
      docs/integrate-esm.md

+ 31 - 19
docs/integrate-esm.md

@@ -192,30 +192,42 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built
 
 ```js
 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 = {
-	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();
+    getWorker: function (workerId, label) {
+    
+	const getWorkerModule = (moduleUrl, label) => {
+	    return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
+	        name: label,
+		type: 'module'
+            });
+	};
+
+	switch (label) {
+	    case 'json':
+		return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
+	    case 'css':
+	    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'), {
 	value: "function hello() {\n\talert('Hello world!');\n}",
 	language: 'javascript'