Feature: Add compatibility for loading Monaco Editor via ESM (#722)

jest.config.js

@@ -2,7 +2,7 @@
 // generally used by snapshots, but can affect specific tests
 process.env.TZ = 'UTC';
 
+// Jest configuration provided by Grafana scaffolding
 module.exports = {
-  // Jest configuration provided by Grafana scaffolding
   ...require('./.config/jest.config'),
 };

src/components/QueryEditor/OpenAIEditor.tsx

@@ -129,15 +129,38 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
       signatureHelpTriggerCharacters: ['(', ')'],
       provideSignatureHelp: getSignatureHelp,
     });
-    monaco.languages['kusto']
-      .getKustoWorker()
-      .then((kusto) => {
-        const model = editor.getModel();
-        return model && kusto(model.uri);
-      })
-      .then((worker) => {
-        setWorker(worker);
-      });
+
+    const model = editor.getModel();
+
+    // Handle cases where kusto is already loaded or will be loaded via AMD
+    if (monaco.languages['kusto'] && monaco.languages['kusto'].getKustoWorker) {
+      monaco.languages['kusto']
+        .getKustoWorker()
+        .then((kusto) => {
+          return model && kusto(model.uri);
+        })
+        .then((worker) => {
+          setWorker(worker);
+        });
+    } else {
+      // Handle cases where kusto should be loaded via ESM web worker (Grafana 10.3.x)
+      if ('System' in window) {
+        window.System.import('@kusto/monaco-kusto').then((kustoModule) => {
+          if (kustoModule && kustoModule.getKustoWorker) {
+            kustoModule
+              .getKustoWorker()
+              .then((workerAccessor) => {
+                return model && workerAccessor(model.uri);
+              })
+              .then((worker) => {
+                setWorker(worker);
+              });
+          } else {
+            console.log('kusto monaco language failed to load.');
+          }
+        });
+      }
+    }
   };
 
   useEffect(() => {

src/components/QueryEditor/RawQueryEditor.tsx

@@ -50,15 +50,38 @@ export const RawQueryEditor: React.FC<RawQueryEditorProps> = (props) => {
       signatureHelpTriggerCharacters: ['(', ')'],
       provideSignatureHelp: getSignatureHelp,
     });
-    monaco.languages['kusto']
-      .getKustoWorker()
-      .then((kusto) => {
-        const model = editor.getModel();
-        return model && kusto(model.uri);
-      })
-      .then((worker) => {
-        setWorker(worker);
-      });
+
+    const model = editor.getModel();
+
+    // Handle cases where kusto is already loaded or will be loaded via AMD
+    if (monaco.languages['kusto'] && monaco.languages['kusto'].getKustoWorker) {
+      monaco.languages['kusto']
+        .getKustoWorker()
+        .then((kusto) => {
+          return model && kusto(model.uri);
+        })
+        .then((worker) => {
+          setWorker(worker);
+        });
+    } else {
+      // Handle cases where kusto should be loaded via ESM web worker (Grafana 10.3.x)
+      if ('System' in window) {
+        window.System.import('@kusto/monaco-kusto').then((kustoModule) => {
+          if (kustoModule && kustoModule.getKustoWorker) {
+            kustoModule
+              .getKustoWorker()
+              .then((workerAccessor) => {
+                return model && workerAccessor(model.uri);
+              })
+              .then((worker) => {
+                setWorker(worker);
+              });
+          } else {
+            console.log('kusto monaco language failed to load.');
+          }
+        });
+      }
+    }
   };
 
   useEffect(() => {

src/global.d.ts

@@ -0,0 +1,12 @@
+export declare global {
+  interface Window {
+    System: {
+      import: (identifier: string) => Promise<Module>;
+    };
+  }
+
+  interface Module {
+    default?: any;
+    [exportName: string]: any;
+  }
+}

src/monaco/KustoMonacoEditor.tsx

@@ -37,7 +37,7 @@ export class KustoMonacoEditor extends React.Component<Props, MonacoState> {
 
     if (!window.hasOwnProperty('monaco')) {
       // using the standard import() here causes issues with webpack/babel/typescript because monaco is just so large
-      (window as any).System.import(`${props.pluginBaseUrl}/libs/monaco.min.js`).then(() => {
+      window.System.import(`${props.pluginBaseUrl}/libs/monaco.min.js`).then(() => {
         setTimeout(() => {
           this.initMonaco();
         }, 1);