refactor: move dereference monaco action to apidom language plugin (#3981)

Action is now using worker to provide the
dereference capability, and does not instantiate
new language service instance.

Author: char0n

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

@@ -1,10 +1,14 @@
 import makeAfterLoad from './after-load.js';
+import { getWorker } from './language/monaco.contribution.js';
 
 const EditorMonacoLanguageApiDOMPlugin = (opts = {}) => {
   const isCalledWithGetSystem = typeof opts.getSystem === 'function';
   const options = isCalledWithGetSystem ? {} : opts;
   const plugin = () => ({
     afterLoad: makeAfterLoad(options),
+    fn: {
+      getApiDOMWorker: getWorker,
+    },
   });
 
   return isCalledWithGetSystem ? plugin(opts) : plugin;

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

@@ -90,18 +90,19 @@ export class ApiDOMWorker {
     return this._languageService.getSemanticTokensLegend();
   }
 
+  async doDeref(uri, dereferenceContext = {}) {
+    const document = this._getTextDocument(uri);
+    if (!document) {
+      return [];
+    }
+
+    return this._languageService.doDeref(document, dereferenceContext);
+  }
+
   _getTextDocument(uri) {
-    const [model] = this._ctx.getMirrorModels();
-    /**
-     * When there are multiple files open, this will be an array
-     * expect models: _lines[], _uri, _versionId
-     * expect models.uri.toString() to be singular, e.g. inmemory://model/1
-     * thus, before returning a TextDocument, we can optionally
-     * validate that models.uri.toString() === uri
-     * fyi, reference more complete example in cssWorker
-     * https://github.com/microsoft/monaco-css/blob/master/src/cssWorker.ts
-     * which we might want later to handle multiple URIs.
-     */
+    const model = this._ctx.getMirrorModels().find((mm) => mm.uri.toString() === uri);
+
+    if (!model) return null;
 
     return vscodeLanguageServerTextDocument.TextDocument.create(
       uri,

src/plugins/editor-monaco-language-apidom/language/actions/dereference.js

@@ -0,0 +1,17 @@
+import { getWorker } from '../apidom-mode.js';
+
+const dereferenceActionDescriptor = {
+  id: 'apidom-dereference',
+  label: 'Resolve document',
+  async run(editor) {
+    const model = editor.getModel();
+    const worker = await getWorker()();
+    const dereferenced = await worker.doDeref(model.uri.toString(), {
+      baseURI: globalThis.document.baseURI || globalThis.location.href,
+    });
+
+    editor.setValue(dereferenced);
+  },
+};
+
+export default dereferenceActionDescriptor;

src/plugins/editor-monaco-language-apidom/language/adapters/DiagnosticsAdapter.js

@@ -16,7 +16,7 @@ class DiagnosticsAdapter extends Adapter {
 
     this.#diagnosticCollection = languages.createDiagnosticCollection(apidom.languageId);
 
-    const onModelAdd = (model) => {
+    const onModelAdded = (model) => {
       if (model.getLanguageId() !== apidom.languageId) {
         return;
       }
@@ -50,7 +50,20 @@ class DiagnosticsAdapter extends Adapter {
       }
     };
 
-    this.#disposables.push(monaco.editor.onDidCreateModel(onModelAdd));
+    const onModelLanguageChanged = (model) => {
+      const key = model.uri.toString();
+      const hasChangedToApiDOM = model.getLanguageId() === apidom.languageId;
+      const isModelSubscribed = !!this.#listener[key];
+
+      if (!isModelSubscribed && hasChangedToApiDOM) {
+        onModelAdded(model);
+      } else if (isModelSubscribed && !hasChangedToApiDOM) {
+        onModelRemoved(model);
+      }
+    };
+
+    this.#disposables.push(monaco.editor.onDidCreateModel(onModelAdded));
+    this.#disposables.push(monaco.editor.onDidChangeModelLanguage(onModelLanguageChanged));
     this.#disposables.push(monaco.editor.onWillDisposeModel(onModelRemoved));
     this.#disposables.push(this.#diagnosticCollection);
   }
@@ -64,7 +77,7 @@ class DiagnosticsAdapter extends Adapter {
     }
 
     try {
-      return await worker.doValidation(model.uri);
+      return await worker.doValidation(model.uri.toString());
     } catch {
       return undefined;
     }

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

@@ -1,4 +1,4 @@
-import { languages } from 'vscode';
+import { languages as vscodeLanguages } from 'vscode';
 import { createConverter as createCodeConverter } from 'vscode-languageclient/lib/common/codeConverter.js';
 import { createConverter as createProtocolConverter } from 'vscode-languageclient/lib/common/protocolConverter.js';
 
@@ -34,31 +34,39 @@ export const getWorker = () => {
 const registerProviders = ({ languageId, providers, dependencies }) => {
   disposeAll(providers);
 
-  const { worker, codeConverter, protocolConverter, semanticTokensLegend } = dependencies;
+  const { worker, codeConverter, protocolConverter } = dependencies;
   const args = [worker, codeConverter, protocolConverter];
 
   providers.push(new DiagnosticsAdapter(...args));
-  providers.push(languages.registerHoverProvider(languageId, new HoverAdapter(...args)));
+  providers.push(vscodeLanguages.registerHoverProvider(languageId, new HoverAdapter(...args)));
   providers.push(
-    languages.registerDocumentLinkProvider(languageId, new DocumentLinkAdapter(...args))
+    vscodeLanguages.registerDocumentLinkProvider(languageId, new DocumentLinkAdapter(...args))
   );
   providers.push(
-    languages.registerCompletionItemProvider(languageId, new CompletionItemsAdapter(...args))
+    vscodeLanguages.registerCompletionItemProvider(languageId, new CompletionItemsAdapter(...args))
   );
   providers.push(
-    languages.registerCodeActionsProvider(languageId, new CodeActionsAdapter(...args))
+    vscodeLanguages.registerCodeActionsProvider(languageId, new CodeActionsAdapter(...args))
   );
   providers.push(
-    languages.registerDocumentSymbolProvider(languageId, new DocumentSymbolsAdapter(...args))
+    vscodeLanguages.registerDocumentSymbolProvider(languageId, new DocumentSymbolsAdapter(...args))
   );
   providers.push(
-    languages.registerDocumentSemanticTokensProvider(
-      languageId,
-      new DocumentSemanticTokensAdapter(...args),
-      semanticTokensLegend
-    )
+    vscodeLanguages.registerDefinitionProvider(languageId, new DefinitionAdapter(...args))
   );
-  providers.push(languages.registerDefinitionProvider(languageId, new DefinitionAdapter(...args)));
+
+  (async () => {
+    const workerService = await worker();
+    const semanticTokensLegend = await workerService.getSemanticTokensLegend();
+
+    providers.push(
+      vscodeLanguages.registerDocumentSemanticTokensProvider(
+        languageId,
+        new DocumentSemanticTokensAdapter(...args),
+        semanticTokensLegend
+      )
+    );
+  })();
 
   return providers;
 };
@@ -68,30 +76,28 @@ export function setupMode(defaults) {
   const providers = [];
   const codeConverter = createCodeConverter();
   const protocolConverter = createProtocolConverter(undefined, true, true);
-  const client = defaults.getModeConfiguration().client || new WorkerManager(defaults);
-  const worker = async (...uris) => {
-    return client.getLanguageServiceWorker(...uris);
-  };
-  const registeredProviders = registerProviders({
-    languageId: defaults.getLanguageId(),
-    providers,
-    dependencies: {
-      worker,
-      codeConverter,
-      protocolConverter,
-      semanticTokensLegend: defaults.getModeConfiguration().semanticTokensLegend,
-    },
-  });
-
-  disposables.push(client);
-  disposables.push(asDisposable(registeredProviders));
 
+  // setup apidom worker
+  const client = new WorkerManager(defaults);
+  const worker = async (...uris) => client.getLanguageServiceWorker(...uris);
   apidomWorker = worker;
   disposables.push({
     dispose() {
       apidomWorker = null;
     },
   });
+  disposables.push(client);
+
+  // register apidom providers
+  disposables.push(
+    asDisposable(
+      registerProviders({
+        languageId: defaults.getLanguageId(),
+        providers,
+        dependencies: { worker, codeConverter, protocolConverter },
+      })
+    )
+  );
 
   return asDisposable(disposables);
 }

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

@@ -1,20 +1,14 @@
-import { languages as vscodeLanguages } from 'vscode';
 import * as monaco from 'monaco-editor';
+import { languages as vscodeLanguages } from 'vscode';
 import { ModesRegistry } from 'monaco-editor/esm/vs/editor/common/languages/modesRegistry.js';
 
 import * as apidom from './apidom.js';
 import { setupMode } from './apidom-mode.js';
-import WorkerManager from './WorkerManager.js';
+import dereferenceActionDescriptor from './actions/dereference.js';
 
 export { getWorker } from './apidom-mode.js';
 
-const modeConfigurationDefault = {
-  semanticTokensLegend: {
-    tokenModifiers: [],
-    tokenTypes: [],
-  },
-  client: null,
-};
+const modeConfigurationDefault = {};
 
 const workerOptionsDefault = {
   customWorkerPath: undefined,
@@ -73,6 +67,7 @@ export const isLanguageRegistered = () => {
 const lazyMonacoContribution = ({ createData }) => {
   const disposables = [];
 
+  // register apidom language
   disposables.push(
     /**
      * This code uses ModesRegistry API instead of monaco.languages API.
@@ -87,25 +82,36 @@ const lazyMonacoContribution = ({ createData }) => {
   disposables.push(vscodeLanguages.setLanguageConfiguration(apidom.languageId, apidom.conf));
   disposables.push(monaco.languages.setMonarchTokensProvider(apidom.languageId, apidom.language));
 
+  // setup apidom mode
   disposables.push(
-    monaco.languages.onLanguage(apidom.languageId, async () => {
+    monaco.editor.onDidCreateEditor(() => {
       const { customApiDOMWorkerPath: customWorkerPath, ...data } = createData;
       const defaults = new LanguageServiceDefaultsImpl({ customWorkerPath, data });
-      const client = new WorkerManager(defaults);
-      const worker = await client.getLanguageServiceWorker();
-      const semanticTokensLegend = await worker.getSemanticTokensLegend();
-
-      defaults.getModeConfiguration().client = client;
-      defaults.getModeConfiguration().semanticTokensLegend = semanticTokensLegend;
 
       disposables.push(setupMode(defaults));
+    })
+  );
 
-      // disposing of all allocated disposables
+  // setup custom actions
+  disposables.push(
+    monaco.editor.onDidCreateEditor((editor) => {
+      disposables.push(
+        monaco.editor.onDidCreateModel(() => {
+          if (editor.getAction(dereferenceActionDescriptor.id)) return;
+
+          disposables.push(editor.addAction(dereferenceActionDescriptor));
+        })
+      );
+    })
+  );
+
+  // disposing of all allocated disposables
+  disposables.push(
+    monaco.editor.onDidCreateEditor((editor) => {
       disposables.push(
-        monaco.editor.onWillDisposeModel((model) => {
-          if (model.getLanguageId() === apidom.languageId) {
-            disposables.forEach((disposable) => disposable.dispose());
-          }
+        editor.onDidDispose(() => {
+          disposables.forEach((disposable) => disposable.dispose());
+          disposables.length = 0;
         })
       );
     })

src/plugins/editor-monaco/components/MonacoEditor/MonacoEditor.jsx

@@ -5,7 +5,6 @@ import noop from 'lodash/noop.js';
 
 import seVsDarkTheme from '../../themes/se-vs-dark.js';
 import seVsLightTheme from '../../themes/se-vs-light.js';
-import { dereference } from '../../utils/monaco-action-apidom-deref.js';
 import { requestGetJsonPointerPosition } from '../../utils/monaco-jump-from-path-to-line.js';
 import { useMount, useUpdate, useSmoothResize } from './hooks.js';
 
@@ -69,8 +68,8 @@ const MonacoEditor = ({
       },
       renderWhitespace: true,
     });
-    editorRef.current.getModel().updateOptions({ tabSize: 2 });
 
+    editorRef.current.getModel().updateOptions({ tabSize: 2 });
     setIsEditorReady(true);
   }, [value, language, theme, isReadOnly]);
 
@@ -220,17 +219,6 @@ const MonacoEditor = ({
     }
   }, [isEditorReady, onChange]);
 
-  // set additional Monaco Editor actions
-  useEffect(() => {
-    if (isEditorReady) {
-      editorRef.current.addAction({
-        id: 'de-reference',
-        label: 'resolve document',
-        run: dereference,
-      });
-    }
-  }, [isEditorReady]);
-
   // allow editor to resize to available space
   useEffect(() => {
     if (isEditorReady) {