Add json worker to monaco editor (opensearch-project#3424)

* feat: add json worker and language implement in dashboards

Signed-off-by: suzhou <[email protected]>

---------

Signed-off-by: suzhou <[email protected]>
Co-authored-by: Anan Zhuang <[email protected]>
Co-authored-by: Josh Romero <[email protected]>

CHANGELOG.md

@@ -196,6 +196,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multi DataSource] UX enhacement on index pattern management stack ([#2505](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2505))
 - [Multi DataSource] UX enhancement on Data source management stack ([#2521](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2521))
 - [Multi DataSource] UX enhancement on Update stored password modal for Data source management stack ([#2532](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2532))
+- [Monaco editor] Add json worker support ([#3424](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3424))
 
 ### 🐛 Bug Fixes
 

packages/osd-monaco/README.md

@@ -2,4 +2,6 @@
 
 A customized version of monaco that is automatically configured the way we want it to be when imported as `@osd/monaco`. Additionally, imports to this package are automatically shared with all plugins using `@osd/ui-shared-deps`.
 
-Includes custom xjson language support. The `opensearch_ui_shared` plugin has an example of how to use it, in the future we will likely expose helpers from this package to make using it everywhere a little more seamless.
+Includes custom xjson language support. The `opensearch_ui_shared` plugin has an example of how to use it, in the future we will likely expose helpers from this package to make using it everywhere a little more seamless.
+
+Includes json language worker support.

packages/osd-monaco/src/index.ts

@@ -30,7 +30,10 @@
 
 export { monaco } from './monaco';
 export { XJsonLang } from './xjson';
+import './json';
 
 /* eslint-disable-next-line @osd/eslint/module_migration */
 import * as BarePluginApi from 'monaco-editor/esm/vs/editor/editor.api';
 export { BarePluginApi };
+import './monaco_environment';
+export * from './worker_store';

packages/osd-monaco/src/json/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { registerWorker } from '../worker_store';
+// @ts-ignore
+import jsonWorkerSrc from '!!raw-loader!../../target/public/json.editor.worker.js';
+
+registerWorker('json', jsonWorkerSrc);

packages/osd-monaco/src/json/worker/json.worker.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// @ts-ignore
+/* eslint-disable-next-line @osd/eslint/module_migration */
+import 'monaco-editor/esm/vs/language/json/json.worker.js';

packages/osd-monaco/src/monaco_environment.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getWorker } from './worker_store';
+
+// @ts-ignore
+window.MonacoEnvironment = {
+  getWorker: (module: string, languageId: string) => {
+    const workerSrc = getWorker(languageId);
+    if (workerSrc) {
+      const blob = new Blob([workerSrc], { type: 'application/javascript' });
+      return new Worker(URL.createObjectURL(blob));
+    }
+  },
+};

packages/osd-monaco/src/worker_store.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const workerStoreMap: Record<string, string> = {};
+
+export const registerWorker = (workerId: string, worker: string) => {
+  if (!workerStoreMap[workerId]) {
+    workerStoreMap[workerId] = worker;
+    return true;
+  }
+
+  return false;
+};
+
+export const getWorker = (workerId: string) => {
+  return workerStoreMap[workerId];
+};

packages/osd-monaco/src/xjson/language.ts

@@ -34,6 +34,7 @@ import { monaco } from '../monaco';
 import { WorkerProxyService } from './worker_proxy_service';
 import { registerLexerRules } from './lexer_rules';
 import { ID } from './constants';
+import { registerWorker } from '../worker_store';
 // @ts-ignore
 import workerSrc from '!!raw-loader!../../target/public/xjson.editor.worker.js';
 
@@ -42,19 +43,8 @@ const wps = new WorkerProxyService();
 // Register rules against shared monaco instance.
 registerLexerRules(monaco);
 
-// In future we will need to make this map languages to workers using "id" and/or "label" values
-// that get passed in. Also this should not live inside the "xjson" dir directly. We can update this
-// once we have another worker.
-// @ts-ignore
-window.MonacoEnvironment = {
-  getWorker: (module: string, languageId: string) => {
-    if (languageId === ID) {
-      // In OpenSearch Dashboards we will probably build this once and then load with raw-loader
-      const blob = new Blob([workerSrc], { type: 'application/javascript' });
-      return new Worker(URL.createObjectURL(blob));
-    }
-  },
-};
+// register xjson worker to the worker map.
+registerWorker(ID, workerSrc);
 
 monaco.languages.onLanguage(ID, async () => {
   return wps.setup();

packages/osd-monaco/webpack.config.js

@@ -59,4 +59,4 @@ const createLangWorkerConfig = (lang) => ({
   },
 });
 
-module.exports = [createLangWorkerConfig('xjson')];
+module.exports = [createLangWorkerConfig('xjson'), createLangWorkerConfig('json')];