Browse Source

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 năm trước cách đây
mục cha
commit
f0c47e6e2d
1 tập tin đã thay đổi với 31 bổ sung19 xóa
  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'