From 785c05f1853e323173eb19f3e29ed11dc4ff3c3d Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Thu, 7 Mar 2024 14:36:43 +0100
Subject: [PATCH] feat(monaco): add compatiblity for loading with vite

---
 public/app/core/monacoEnv.ts         | 30 +++++++++++++---------------
 public/lib/monaco-languages/kusto.ts |  4 +++-
 vite.config.ts                       | 12 +++++++++--
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/public/app/core/monacoEnv.ts b/public/app/core/monacoEnv.ts
index 45e6a1ca8d3..6319be99373 100644
--- a/public/app/core/monacoEnv.ts
+++ b/public/app/core/monacoEnv.ts
@@ -1,42 +1,40 @@
+import editorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker.js?worker&url';
+import cssWorkerUrl from 'monaco-editor/esm/vs/language/css/css.worker?worker&url';
+import htmlWorkerUrl from 'monaco-editor/esm/vs/language/html/html.worker?worker&url';
+import jsonWorkerUrl from 'monaco-editor/esm/vs/language/json/json.worker?worker&url';
+import typescriptWorkerUrl from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&url';
+
 import { monacoLanguageRegistry } from '@grafana/data';
-// TODO: vite - handle CORs with webworkers
-// import { CorsWorker as Worker } from 'app/core/utils/CorsWorker';
+
+import { WorkaroundWorker } from './utils/CorsWorker';
 
 export function setMonacoEnv() {
   self.MonacoEnvironment = {
     getWorker(_moduleId, label) {
-      const getWorkerModule = (moduleUrl: string, label: string) => {
-        const workerUrl = self.MonacoEnvironment!.getWorkerUrl!(moduleUrl, label);
-        return new Worker(workerUrl, {
-          name: label,
-          type: 'module',
-        });
-      };
-
       const language = monacoLanguageRegistry.getIfExists(label);
 
       if (language) {
         const moduleUrl = language.init();
-        return getWorkerModule(moduleUrl, label);
+        return WorkaroundWorker(moduleUrl, { name: label });
       }
 
       if (label === 'json') {
-        return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
+        return WorkaroundWorker(jsonWorkerUrl, { name: label });
       }
 
       if (label === 'css' || label === 'scss' || label === 'less') {
-        return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
+        return WorkaroundWorker(cssWorkerUrl, { name: label });
       }
 
       if (label === 'html' || label === 'handlebars' || label === 'razor') {
-        return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
+        return WorkaroundWorker(htmlWorkerUrl, { name: label });
       }
 
       if (label === 'typescript' || label === 'javascript') {
-        return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
+        return WorkaroundWorker(typescriptWorkerUrl, { name: label });
       }
 
-      return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
+      return WorkaroundWorker(editorWorkerUrl, { name: label });
     },
   };
 }
diff --git a/public/lib/monaco-languages/kusto.ts b/public/lib/monaco-languages/kusto.ts
index 3ce4f7fd2e9..e726708750b 100644
--- a/public/lib/monaco-languages/kusto.ts
+++ b/public/lib/monaco-languages/kusto.ts
@@ -1,3 +1,5 @@
+import kustoWorkerUrl from '@kusto/monaco-kusto/release/esm/kusto.worker?worker&url';
+
 export default function loadKusto() {
-  return '@kusto/monaco-kusto/release/esm/kusto.worker?worker';
+  return kustoWorkerUrl;
 }
diff --git a/vite.config.ts b/vite.config.ts
index 44dd795e89a..515a8cf5abf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,8 +27,16 @@ export default defineConfig({
   },
   plugins: [react(), angularHtmlImport(), { ...moveAssets(), apply: 'build' }],
   optimizeDeps: {
-    // fixes for dependencies that don't support esm
-    include: ['jquery'],
+    include: [
+      'monaco-editor/esm/vs/editor/editor.worker',
+      'monaco-editor/esm/vs/language/css/css.worker',
+      'monaco-editor/esm/vs/language/html/html.worker',
+      'monaco-editor/esm/vs/language/json/json.worker',
+      'monaco-editor/esm/vs/language/typescript/ts.worker',
+      '@kusto/monaco-kusto/release/esm/kusto.worker',
+      '@kusto/language-service/bridge.min',
+      'jquery',
+    ],
   },
   resolve: {
     alias: [