From 67de37527f71fed61a7b69d4a6fad7afa79efeec Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Wed, 22 Mar 2023 12:32:48 -0700 Subject: [PATCH] [Backport 2.x] Add json worker to monaco editor (#3615) * Add json worker to monaco editor (#3424) * feat: add json worker and language implement in dashboards Signed-off-by: suzhou --------- Signed-off-by: suzhou Co-authored-by: Anan Zhuang Co-authored-by: Josh Romero (cherry picked from commit 725a2a1d5e17fdace0279ecae51b12f308b40a10) Signed-off-by: github-actions[bot] # Conflicts: # CHANGELOG.md * Add changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero Co-authored-by: github-actions[bot] Co-authored-by: Josh Romero --- CHANGELOG.md | 2 ++ packages/osd-monaco/README.md | 4 +++- packages/osd-monaco/src/index.ts | 3 +++ packages/osd-monaco/src/json/index.ts | 10 ++++++++++ .../osd-monaco/src/json/worker/json.worker.ts | 8 ++++++++ packages/osd-monaco/src/monaco_environment.ts | 17 +++++++++++++++++ packages/osd-monaco/src/worker_store.ts | 19 +++++++++++++++++++ packages/osd-monaco/src/xjson/language.ts | 16 +++------------- packages/osd-monaco/webpack.config.js | 2 +- 9 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 packages/osd-monaco/src/json/index.ts create mode 100644 packages/osd-monaco/src/json/worker/json.worker.ts create mode 100644 packages/osd-monaco/src/monaco_environment.ts create mode 100644 packages/osd-monaco/src/worker_store.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e4076a3adc60..64e9aa54219f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### 📈 Features/Enhancements +- [Monaco editor] Add json worker support ([#3424](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3424)) + ### 🐛 Bug Fixes ### 🚞 Infrastructure diff --git a/packages/osd-monaco/README.md b/packages/osd-monaco/README.md index c9bdbae030cc..b31ee4035e4f 100644 --- 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/packages/osd-monaco/src/index.ts b/packages/osd-monaco/src/index.ts index 440d62de0f1a..e2002dfceb31 100644 --- 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 new file mode 100644 index 000000000000..c27849986f1d --- /dev/null +++ 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 new file mode 100644 index 000000000000..3df49d6355a6 --- /dev/null +++ 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 new file mode 100644 index 000000000000..ac5bc439e9a5 --- /dev/null +++ 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 new file mode 100644 index 000000000000..59eb6b3f369e --- /dev/null +++ b/packages/osd-monaco/src/worker_store.ts @@ -0,0 +1,19 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +const workerStoreMap: Record = {}; + +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 index 084ecb84283d..f9b317a39d3e 100644 --- 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 index 696837d9a6f0..1e3f108b95e5 100644 --- 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')];