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 1/2] 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'

From 3717a26fcb073bd23c23c46f27fc52305f898cdf Mon Sep 17 00:00:00 2001
From: Daniel Veihelmann <daniel.veihelmann+github@gmail.com>
Date: Wed, 23 Feb 2022 19:36:48 +0100
Subject: [PATCH 2/2] FIx formatting

---
 docs/integrate-esm.md | 58 +++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/docs/integrate-esm.md b/docs/integrate-esm.md
index 7a531117..5babbee0 100644
--- a/docs/integrate-esm.md
+++ b/docs/integrate-esm.md
@@ -194,40 +194,38 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built
 import * as monaco from 'monaco-editor';
 
 self.MonacoEnvironment = {
-    getWorker: function (workerId, label) {
-    
-	const getWorkerModule = (moduleUrl, label) => {
-	    return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
-	        name: label,
-		type: 'module'
-            });
-	};
+    getWorker: function(workerId, label) {
 
-	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);
-	}
+        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'