feat(monaco-graphql): support monaco-editor 0.52 / render Markdown in completion popup descriptions (#3996)

dimaMachina · web-flow · commit 662c1434932d · 2025-06-07T00:34:03.000+02:00
* upd

* upd

* fix netlify and vitest

* upd vitest
diff --git a/.changeset/forty-laws-thank.md b/.changeset/forty-laws-thank.md
@@ -0,0 +1,7 @@
+---
+'monaco-graphql': minor
+---
+
+- support monaco-editor 0.52
+- remove unnecessary conditions
+- render Markdown in completion popup descriptions
diff --git a/examples/monaco-graphql-webpack/babel.config.js b/examples/monaco-graphql-webpack/babel.config.js
@@ -7,5 +7,6 @@ module.exports = {
   plugins: [
     require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+    require.resolve('@babel/plugin-transform-class-static-block'),
   ],
 };
diff --git a/examples/monaco-graphql-webpack/package.json b/examples/monaco-graphql-webpack/package.json
@@ -22,6 +22,7 @@
     "@babel/core": "^7.21.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "test:ci": "yarn build && jest --coverage && yarn vitest",
     "test:coverage": "yarn jest --coverage",
     "test:watch": "yarn jest --watch",
-    "tsc": "tsc --build",
+    "tsc": "tsc --build && node resources/patch-monaco-editor-type.mjs",
     "vitest": "yarn wsrun -p -m test",
     "wsrun:noexamples": "wsrun --exclude-missing --exclude example-monaco-graphql-react-vite --exclude example-monaco-graphql-nextjs --exclude example-monaco-graphql-webpack --exclude example-graphiql-webpack",
     "gen-agenda": "wgutils agenda gen"
diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md
@@ -486,7 +486,7 @@ import { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';
 
 import { myValidationRules } from './custom';
 
-self.onmessage = () => {
+globalThis.onmessage = () => {
   worker.initialize(
     (
       ctx: WorkerNamespace.IWorkerContext,
diff --git a/packages/monaco-graphql/package.json b/packages/monaco-graphql/package.json
@@ -59,8 +59,7 @@
   },
   "files": [
     "dist",
-    "esm",
-    "src"
+    "esm"
   ],
   "scripts": {
     "types:check": "tsc --noEmit",
@@ -73,7 +72,7 @@
   "devDependencies": {
     "execa": "^7.1.1",
     "graphql": "^16.9.0",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.52.2",
     "prettier": "3.3.2",
     "vscode-languageserver-types": "^3.17.1"
   },
diff --git a/packages/monaco-graphql/src/GraphQLWorker.ts b/packages/monaco-graphql/src/GraphQLWorker.ts
@@ -111,9 +111,11 @@ export class GraphQLWorker {
       { useMarkdownDescription: true },
     );
     if (jsonSchema) {
-      jsonSchema.$id = 'monaco://variables-schema.json';
-      jsonSchema.title = 'GraphQL Variables';
-      return jsonSchema;
+      return {
+        ...jsonSchema,
+        $id: 'monaco://variables-schema.json',
+        title: 'GraphQL Variables',
+      };
     }
 
     return null;
diff --git a/packages/monaco-graphql/src/LanguageService.ts b/packages/monaco-graphql/src/LanguageService.ts
@@ -108,11 +108,11 @@ export class LanguageService {
    * @returns {SchemaCacheItem | undefined}
    */
   public getSchemaForFile(uri: string): SchemaCacheItem | undefined {
-    if (!this._schemas?.length) {
+    if (!this._schemas.length) {
       return;
     }
     if (this._schemas.length === 1) {
-      return this._schemaCache.get(this._schemas[0].uri);
+      return this._schemaCache.get(this._schemas[0]!.uri);
     }
     const schema = this._schemas.find(schemaConfig => {
       if (!schemaConfig.fileMatch) {
@@ -157,17 +157,15 @@ export class LanguageService {
   }
 
   /**
-   * override `schemas` config entirely
-   * @param schema {schemaString}
+   * Override `schemas` config entirely.
    */
   public async updateSchemas(schemas: SchemaConfig[]): Promise<void> {
     this._schemas = schemas;
     this._cacheSchemas();
   }
 
   /**
-   * overwrite an existing schema config by Uri string
-   * @param schema {schemaString}
+   * Overwrite an existing schema config by Uri string.
    */
   public updateSchema(schema: SchemaConfig): void {
     const schemaIndex = this._schemas.findIndex(c => c.uri === schema.uri);
@@ -184,8 +182,7 @@ export class LanguageService {
   }
 
   /**
-   * add a schema to the config
-   * @param schema {schemaString}
+   * Add a schema to the config.
    */
   public addSchema(schema: SchemaConfig): void {
     this._schemas.push(schema);
@@ -213,7 +210,7 @@ export class LanguageService {
     position: IPosition,
   ) => {
     const schema = this.getSchemaForFile(uri);
-    if (!documentText || documentText.length < 1 || !schema?.schema) {
+    if (!documentText || !schema?.schema) {
       return [];
     }
     return getAutocompleteSuggestions(
@@ -257,7 +254,7 @@ export class LanguageService {
     options?: HoverConfig,
   ) => {
     const schema = this.getSchemaForFile(uri);
-    if (schema && documentText?.length > 3) {
+    if (schema && documentText.length > 3) {
       return getHoverInformation(
         schema.schema,
         documentText,
@@ -280,9 +277,12 @@ export class LanguageService {
     if (schema && documentText.length > 3) {
       try {
         const documentAST = this.parse(documentText);
-        const operationFacts = getOperationASTFacts(documentAST, schema.schema);
-        if (operationFacts?.variableToType) {
-          return getVariablesJSONSchema(operationFacts.variableToType, {
+        const { variableToType } = getOperationASTFacts(
+          documentAST,
+          schema.schema,
+        );
+        if (variableToType) {
+          return getVariablesJSONSchema(variableToType, {
             ...options,
             scalarSchemas: schema.customScalarSchemas,
           });
diff --git a/packages/monaco-graphql/src/api.ts b/packages/monaco-graphql/src/api.ts
@@ -59,10 +59,10 @@ export class MonacoGraphQLAPI {
     if (schemas) {
       this.setSchemaConfig(schemas);
     }
-    this._modeConfiguration = modeConfiguration ?? modeConfigurationDefault;
-    this._completionSettings = completionSettings ?? completionSettingDefault;
-    this._diagnosticSettings = diagnosticSettings ?? diagnosticSettingDefault;
-    this._formattingOptions = formattingOptions ?? formattingDefaults;
+    this._modeConfiguration = modeConfiguration;
+    this._completionSettings = completionSettings;
+    this._diagnosticSettings = diagnosticSettings;
+    this._formattingOptions = formattingOptions;
   }
 
   public get onDidChange(): monaco.IEvent<MonacoGraphQLAPI> {
@@ -93,8 +93,8 @@ export class MonacoGraphQLAPI {
     return {
       ...this._completionSettings,
       fillLeafsOnComplete:
-        this._completionSettings?.__experimental__fillLeafsOnComplete ??
-        this._completionSettings?.fillLeafsOnComplete,
+        this._completionSettings.__experimental__fillLeafsOnComplete ??
+        this._completionSettings.fillLeafsOnComplete,
     };
   }
   public get externalFragmentDefinitions() {
@@ -107,7 +107,7 @@ export class MonacoGraphQLAPI {
    * @param schemas {SchemaConfig[]}
    */
   public setSchemaConfig(schemas: SchemaConfig[]): void {
-    this._schemas = schemas || null;
+    this._schemas = schemas;
     this._schemasById = schemas.reduce((result, schema) => {
       result[schema.uri] = schema;
       return result;
@@ -122,22 +122,22 @@ export class MonacoGraphQLAPI {
   }
 
   public setModeConfiguration(modeConfiguration: ModeConfiguration): void {
-    this._modeConfiguration = modeConfiguration || Object.create(null);
+    this._modeConfiguration = modeConfiguration;
     this._onDidChange.fire(this);
   }
 
   public setFormattingOptions(formattingOptions: FormattingOptions): void {
-    this._formattingOptions = formattingOptions || Object.create(null);
+    this._formattingOptions = formattingOptions;
     this._onDidChange.fire(this);
   }
 
   public setDiagnosticSettings(diagnosticSettings: DiagnosticSettings): void {
-    this._diagnosticSettings = diagnosticSettings || Object.create(null);
+    this._diagnosticSettings = diagnosticSettings;
     this._onDidChange.fire(this);
   }
 
   public setCompletionSettings(completionSettings: CompletionSettings): void {
-    this._completionSettings = completionSettings || Object.create(null);
+    this._completionSettings = completionSettings;
     this._onDidChange.fire(this);
   }
 }
diff --git a/packages/monaco-graphql/src/full.ts b/packages/monaco-graphql/src/full.ts
@@ -1,7 +1,6 @@
 import 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';
 import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions';
 import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching';
-import 'monaco-editor/esm/vs/editor/contrib/hover/browser/hover';
 import 'monaco-editor/esm/vs/editor/browser/coreCommands';
 import 'monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard';
 import 'monaco-editor/esm/vs/editor/contrib/cursorUndo/browser/cursorUndo';
diff --git a/packages/monaco-graphql/src/graphql.worker.ts b/packages/monaco-graphql/src/graphql.worker.ts
@@ -13,7 +13,7 @@ import { initialize } from 'monaco-editor/esm/vs/editor/editor.worker';
 
 import { GraphQLWorker } from './GraphQLWorker';
 
-self.onmessage = () => {
+globalThis.onmessage = () => {
   initialize(
     (ctx: monaco.worker.IWorkerContext, createData: ICreateData) =>
       new GraphQLWorker(ctx, createData),
diff --git a/packages/monaco-graphql/src/initialize.ts b/packages/monaco-graphql/src/initialize.ts
@@ -12,10 +12,10 @@ import { languages } from './monaco-editor';
 
 export const LANGUAGE_ID = 'graphql';
 
-let api: MonacoGraphQLAPI;
+let api: MonacoGraphQLAPI | undefined;
 
 /**
- * Initialize the mode & worker synchronously with provided configuration
+ * Initialize the mode and worker synchronously with the provided configuration
  *
  * @param config
  * @returns {MonacoGraphQLAPI}
@@ -29,7 +29,7 @@ export function initializeMode(
     // export to the global monaco API
 
     // eslint-disable-next-line promise/prefer-await-to-then -- ignore to leave initializeMode sync
-    void getMode().then(mode => mode.setupMode(api));
+    void getMode().then(mode => mode.setupMode(api!));
   }
 
   return api;
diff --git a/packages/monaco-graphql/src/languageFeatures.ts b/packages/monaco-graphql/src/languageFeatures.ts
@@ -33,16 +33,16 @@ export class DiagnosticsAdapter {
     const onModelAdd = (model: editor.IModel): void => {
       const modeId = getModelLanguageId(model);
       if (modeId !== this.defaults.languageId) {
-        // it is tempting to load json models we cared about here
-        // into the webworker, however setDiagnosticOptions() needs
-        // to be called here from main process anyway, and the worker
-        // is already generating json schema itself!
+        // it is tempting to load JSON models we cared about here
+        // into the web worker, however setDiagnosticOptions() needs
+        // to be called here from the main process anyway, and the worker
+        // is already generating JSON schema itself!
         return;
       }
       const modelUri = model.uri.toString();
       // if the config changes, this adapter will be re-instantiated, so we only need to check this once
       const jsonValidationForModel =
-        defaults.diagnosticSettings?.validateVariablesJSON?.[modelUri];
+        defaults.diagnosticSettings.validateVariablesJSON?.[modelUri];
       // once on adding a model, this is also fired when schema or other config changes
       onChangeTimeout = setTimeout(() => {
         void this._doValidate(model.uri, modeId, jsonValidationForModel);
@@ -83,8 +83,8 @@ export class DiagnosticsAdapter {
       }),
       {
         dispose: () => {
-          for (const key in this._listener) {
-            this._listener[key].dispose();
+          for (const listener of Object.values(this._listener)) {
+            listener.dispose();
           }
         },
       },
@@ -105,8 +105,8 @@ export class DiagnosticsAdapter {
   }
 
   public dispose(): void {
-    for (const d of this._disposables) {
-      d?.dispose();
+    for (const disposable of this._disposables) {
+      disposable.dispose();
     }
     this._disposables = [];
   }
@@ -118,8 +118,7 @@ export class DiagnosticsAdapter {
   ) {
     const worker = await this._worker(resource);
 
-    // to handle an edge case bug that happens when
-    // typing before the schema is present
+    // TODO: eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- to handle an edge case bug that happens when typing before the schema is present
     if (!worker) {
       return;
     }
@@ -128,11 +127,11 @@ export class DiagnosticsAdapter {
     editor.setModelMarkers(editor.getModel(resource)!, languageId, diagnostics);
 
     if (variablesUris) {
-      // only import the json mode if users configure it
+      // only import the JSON mode if users configure it
       await import('monaco-editor/esm/vs/language/json/monaco.contribution.js');
 
-      if (variablesUris.length < 1) {
-        throw new Error('no variables URI strings provided to validate');
+      if (!variablesUris.length) {
+        throw new Error('No variables URI strings provided to validate');
       }
       const jsonSchema = await worker.doGetVariablesJSONSchema(
         resource.toString(),
@@ -142,7 +141,7 @@ export class DiagnosticsAdapter {
       }
 
       const schemaUri = Uri.file(
-        variablesUris[0].replace('.json', '-schema.json'),
+        variablesUris[0]!.replace('.json', '-schema.json'),
       ).toString();
       const configResult = {
         uri: schemaUri,
@@ -158,7 +157,7 @@ export class DiagnosticsAdapter {
       languages.json.jsonDefaults.setDiagnosticsOptions({
         schemaValidation: 'error',
         validate: true,
-        ...this.defaults?.diagnosticSettings?.jsonDiagnosticSettings,
+        ...this.defaults.diagnosticSettings.jsonDiagnosticSettings,
         schemas: [...currentSchemas, configResult],
         enableSchemaRequest: false,
       });
diff --git a/packages/monaco-graphql/src/monaco-editor.ts b/packages/monaco-graphql/src/monaco-editor.ts
@@ -19,4 +19,4 @@
 import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution.js';
 import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';
 
-export * from 'monaco-editor/esm/vs/editor/editor.api.js';
+export * from 'monaco-editor/esm/vs/editor/edcore.main.js';
diff --git a/packages/monaco-graphql/src/schemaLoader.ts b/packages/monaco-graphql/src/schemaLoader.ts
@@ -27,5 +27,5 @@ export const defaultSchemaLoader: SchemaLoader = (schemaConfig, parser) => {
   if (documentAST) {
     return buildASTSchema(documentAST, buildSchemaOptions);
   }
-  throw new Error('no schema supplied');
+  throw new Error('No schema supplied');
 };
diff --git a/packages/monaco-graphql/src/typings/monaco-editor.d.ts b/packages/monaco-graphql/src/typings/monaco-editor.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports --
  * in this file is allowed to import monaco-editor
  */
-declare module 'monaco-editor/esm/vs/editor/editor.api.js' {
+declare module 'monaco-editor/esm/vs/editor/edcore.main.js' {
   export * from 'monaco-editor';
 }
diff --git a/packages/monaco-graphql/src/utils.ts b/packages/monaco-graphql/src/utils.ts
diff --git a/packages/monaco-graphql/test/monaco-editor.test.ts b/packages/monaco-graphql/test/monaco-editor.test.ts
diff --git a/packages/monaco-graphql/tsconfig.esm.json b/packages/monaco-graphql/tsconfig.esm.json
diff --git a/packages/monaco-graphql/tsconfig.json b/packages/monaco-graphql/tsconfig.json
diff --git a/resources/patch-monaco-editor-type.mjs b/resources/patch-monaco-editor-type.mjs
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -486,7 +486,7 @@ import { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';`
`486`	`486`
`487`	`487`	`import { myValidationRules } from './custom';`
`488`	`488`
`489`		`-self.onmessage = () => {`
	`489`	`+globalThis.onmessage = () => {`
`490`	`490`	`worker.initialize(`
`491`	`491`	`(`
`492`	`492`	`ctx: WorkerNamespace.IWorkerContext,`