Add json worker to monaco editor (#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]>
opensearch-project · Mar 16, 2023 · 725a2a1 · 725a2a1
1 parent 152fc9f
commit 725a2a1
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -195,6 +195,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
 

diff --git a/packages/osd-monaco/README.md b/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.
diff --git a/packages/osd-monaco/src/index.ts b/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';
diff --git a/packages/osd-monaco/src/json/index.ts b/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);
diff --git a/packages/osd-monaco/src/json/worker/json.worker.ts b/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';
diff --git a/packages/osd-monaco/src/monaco_environment.ts b/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));
+    }
+  },
+};
diff --git a/packages/osd-monaco/src/worker_store.ts b/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];
+};
diff --git a/packages/osd-monaco/src/xjson/language.ts b/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();

diff --git a/packages/osd-monaco/webpack.config.js b/packages/osd-monaco/webpack.config.js
@@ -59,4 +59,4 @@ const createLangWorkerConfig = (lang) => ({
   },
 });
 
-module.exports = [createLangWorkerConfig('xjson')];
+module.exports = [createLangWorkerConfig('xjson'), createLangWorkerConfig('json')];