From f0c47e6e2d8ab7bd1b9727bf3e92048c3451ed5c Mon Sep 17 00:00:00 2001
From: Daniel Veihelmann <daniel.veihelmann+github@gmail.com>
Date: Wed, 23 Feb 2022 19:30:08 +0100
Subject: [PATCH] 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.
---
 docs/integrate-esm.md | 50 +++++++++++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/docs/integrate-esm.md b/docs/integrate-esm.md
index bd10b807..7a531117 100644
--- a/docs/integrate-esm.md
+++ b/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'