Browse Source

Merge pull request #2991 from Dan1ve/patch-using-vite-code

Make Vite sample code Firefox compatible
Henning Dieterichs 3 years ago
parent
commit
72b7b1ea3b
1 changed files with 30 additions and 20 deletions
  1. 30 20
      docs/integrate-esm.md

+ 30 - 20
docs/integrate-esm.md

@@ -192,28 +192,38 @@ 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.editor.create(document.getElementById('container'), {