feat: extract apidom language into separate plugin (#3977)

The name of the new plugin is editor-monaco-language-apidom.

BREAKING CHANGE: createData is now passed to individual language plugins and not to editor-monaco one

Author: char0n

create-react-app

@@ -1,3 +1,3 @@
 # Plug points
 
-- [editor-monaco](./editor-monaco.md)
+- [editor-monaco-language-apidom](./editor-monaco-language-apidom.md)

docs/customization/plug-points/README.md

@@ -2,9 +2,8 @@
 
 ## Extending web worker capabilities
 
-`editor-monaco` plugin is using monaco editor, which is using web workers to provide
-editor capabilities. `editor-monaco` comes with a web worker called `apidom.worker`.
-This worker contains all the language service utilizing ApiDOM capabilities.
+`editor-monaco-language-apidom` comes with implementation of `apidom` language.
+The plugin comes with `apidom.worker` utilizing ApiDOM capabilities.
 `apidom.worker` can be extended in two ways: dynamic and static.
 
 ### Dynamic extension
@@ -14,7 +13,7 @@ Dynamic extension happens during runtime, and we recommend to use it only for si
 First thing we need to do is to pass a `customApiDOMWorkerPath` option to the `EditorMonaco` plugin.
 
 ```js
-EditorMonaco({
+EditorMonacoLanguageApiDOM({
   createData: {
     customApiDOMWorkerPath: 'https://example.com/index.js',
   },
@@ -107,7 +106,7 @@ it will be fetching data on demand from authorized REST endpoint.
 `EditorMonaco` plugin configuration.
 
 ```js
-EditorMonaco({
+EditorMonacoLanguageApiDOM({
   createData: {
     authToken: 'c32d8b45-92fe-44f6-8b61-42c2107dfe87',
     customApiDOMWorkerPath: 'https://example.com/index.js',

…stomization/plug-points/editor-monaco.md …-points/editor-monaco-language-apidom.mddocs/customization/plug-points/editor-monaco.md renamed to docs/customization/plug-points/editor-monaco-language-apidom.md docs/customization/plug-points/editor-monaco.md renamed to docs/customization/plug-points/editor-monaco-language-apidom.md

@@ -14,6 +14,7 @@ import DropzonePlugin from './plugins/dropzone/index.js';
 import VersionsPlugin from './plugins/versions/index.js';
 import EditorTextareaPlugin from './plugins/editor-textarea/index.js';
 import EditorMonacoPlugin from './plugins/editor-monaco/index.js';
+import EditorMonacoLanguageApiDOMPlugin from './plugins/editor-monaco-language-apidom/index.js';
 import EditorPreviewPlugin from './plugins/editor-preview/index.js';
 import EditorPreviewSwaggerUIPlugin from './plugins/editor-preview-swagger-ui/index.js';
 import EditorPreviewAsyncAPIPlugin from './plugins/editor-preview-asyncapi/index.js';
@@ -63,6 +64,7 @@ SwaggerEditor.plugins = {
   Versions: VersionsPlugin,
   EditorTextarea: EditorTextareaPlugin,
   EditorMonaco: EditorMonacoPlugin,
+  EditorMonacoLanguageApiDOM: EditorMonacoLanguageApiDOMPlugin,
   EditorContentReadOnly: EditorContentReadOnlyPlugin,
   EditorContentOrigin: EditorContentOriginPlugin,
   EditorContentType: EditorContentTypePlugin,
@@ -109,6 +111,7 @@ SwaggerEditor.presets = {
     VersionsPlugin,
     EditorTextareaPlugin,
     EditorMonacoPlugin,
+    EditorMonacoLanguageApiDOMPlugin,
     EditorContentReadOnlyPlugin,
     EditorContentOriginPlugin,
     EditorContentTypePlugin,

src/App.jsx

@@ -0,0 +1,55 @@
+import { ModesRegistry } from 'monaco-editor/esm/vs/editor/common/languages/modesRegistry.js';
+import * as monaco from 'monaco-editor';
+
+import { languageExtensionPoint, monarchLanguage, languageId } from './language/config.js';
+import { setupApiDOM } from './language/apidom-mode.js';
+
+const makeAfterLoad =
+  ({ createData = {} } = {}) =>
+  () => {
+    /**
+     * Parts of this code use ModesRegistry API instead of monaco.languages API.
+     * The reason is that monaco.languages API is using ModesRegistory under the hood
+     * but doesn't return disposables produced by ModesRegistry. By using ModesRegistry
+     * directly we're able to obtain disposables.
+     */
+
+    // guard for multiple language registration
+    const languages = ModesRegistry.getLanguages().map(({ id }) => id);
+    if (languages.includes(languageId)) {
+      return;
+    }
+
+    // setup monaco environment
+    globalThis.MonacoEnvironment = {
+      // expect monaco plugin to have already executed
+      ...globalThis.MonacoEnvironment,
+      getWorkerUrl(moduleId, label) {
+        if (label === languageId) {
+          return new URL('./apidom.worker.js', this.baseUrl).toString();
+        }
+        return new URL('./editor.worker.js', this.baseUrl).toString();
+      },
+    };
+
+    // setting up ApiDOM language
+    const disposables = [];
+    disposables.push(ModesRegistry.registerLanguage(languageExtensionPoint));
+    disposables.push(
+      monaco.languages.onLanguage(languageId, () => {
+        disposables.push(monaco.languages.setMonarchTokensProvider(languageId, monarchLanguage)); // enable syntax highlighting
+        disposables.push(setupApiDOM({ languageId, options: createData }));
+
+        // disposing of all allocated disposables
+        disposables.push(
+          monaco.editor.onWillDisposeModel((model) => {
+            if (model.getLanguageId() === languageId) {
+              disposables.forEach((disposable) => disposable.dispose());
+            }
+          })
+        );
+      })
+    );
+  };
+
+export default makeAfterLoad;

src/plugins/editor-monaco-language-apidom/after-load.js

@@ -0,0 +1,13 @@
+import makeAfterLoad from './after-load.js';
+
+const EditorMonacoLanguageApiDOMPlugin = (opts = {}) => {
+  const isCalledWithGetSystem = typeof opts.getSystem === 'function';
+  const options = isCalledWithGetSystem ? {} : opts;
+  const plugin = () => ({
+    afterLoad: makeAfterLoad(options),
+  });
+
+  return isCalledWithGetSystem ? plugin(opts) : plugin;
+};
+
+export default EditorMonacoLanguageApiDOMPlugin;

src/plugins/editor-monaco-language-apidom/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import * as vscodeLanguageServerTextDocument from 'vscode-languageserver-textdocument'; // this is true source
+import * as vscodeLanguageServerTextDocument from 'vscode-languageserver-textdocument';
 import * as apidomLS from '@swagger-api/apidom-ls';
 
 export class ApiDOMWorker {
@@ -91,7 +91,7 @@ export class ApiDOMWorker {
   }
 
   _getTextDocument(uri) {
-    const models = this._ctx.getMirrorModels()[0];
+    const [model] = this._ctx.getMirrorModels();
     /**
      * When there are multiple files open, this will be an array
      * expect models: _lines[], _uri, _versionId
@@ -106,8 +106,8 @@ export class ApiDOMWorker {
     return vscodeLanguageServerTextDocument.TextDocument.create(
       uri,
       this._createData.languageId,
-      models._versionId,
-      models.getValue()
+      model.version,
+      model.getValue()
     );
   }
 }