remove /// <reference path='../../node_modules/monaco-editor/monaco.d.ts'/> and simple import it

packages/monaco-graphql/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "graphql": "^16.4.0",
-    "monaco-editor": "^0.36.1",
+    "monaco-editor": "^0.39.0",
     "vscode-languageserver-types": "^3.17.1"
   },
   "peerDependencies": {

packages/monaco-graphql/src/GraphQLWorker.ts

@@ -6,13 +6,9 @@
  */
 
 import { FormattingOptions, ICreateData, SchemaConfig } from './typings';
-
-import type { worker, Position } from 'monaco-editor';
-
+import type * as monaco from 'monaco-editor';
 import { getRange } from 'graphql-language-service';
-
 import { LanguageService } from './LanguageService';
-
 import {
   toGraphQLPosition,
   toMonacoRange,
@@ -26,10 +22,10 @@ export type MonacoCompletionItem = monaco.languages.CompletionItem & {
   deprecationReason?: string | null;
 };
 export class GraphQLWorker {
-  private _ctx: worker.IWorkerContext;
+  private _ctx: monaco.worker.IWorkerContext;
   private _languageService: LanguageService;
   private _formattingOptions: FormattingOptions | undefined;
-  constructor(ctx: worker.IWorkerContext, createData: ICreateData) {
+  constructor(ctx: monaco.worker.IWorkerContext, createData: ICreateData) {
     this._ctx = ctx;
     this._languageService = new LanguageService(createData.languageConfig);
     this._formattingOptions = createData.formattingOptions;
@@ -56,7 +52,7 @@ export class GraphQLWorker {
 
   public async doComplete(
     uri: string,
-    position: Position,
+    position: monaco.Position,
   ): Promise<GraphQLWorkerCompletionItem[]> {
     try {
       const documentModel = this._getTextModel(uri);
@@ -78,7 +74,7 @@ export class GraphQLWorker {
     }
   }
 
-  public async doHover(uri: string, position: Position) {
+  public async doHover(uri: string, position: monaco.Position) {
     try {
       const documentModel = this._getTextModel(uri);
       const document = documentModel?.getValue();
@@ -173,7 +169,7 @@ export default {
 };
 
 export function create(
-  ctx: worker.IWorkerContext,
+  ctx: monaco.worker.IWorkerContext,
   createData: ICreateData,
 ): GraphQLWorker {
   return new GraphQLWorker(ctx, createData);

packages/monaco-graphql/src/LanguageService.ts

@@ -14,9 +14,7 @@ import {
   DocumentNode,
   Source,
 } from 'graphql';
-
 import picomatch from 'picomatch-browser';
-
 import type { IPosition } from 'graphql-language-service';
 import {
   getAutocompleteSuggestions,
@@ -27,9 +25,7 @@ import {
   getOperationASTFacts,
   JSONSchemaOptions,
 } from 'graphql-language-service';
-
 import { defaultSchemaLoader } from './schemaLoader';
-
 import { SchemaConfig, SchemaLoader, GraphQLLanguageConfig } from './typings';
 
 type SchemaCacheItem = Omit<SchemaConfig, 'schema'> & { schema: GraphQLSchema };

packages/monaco-graphql/src/api.ts

@@ -6,8 +6,7 @@
  */
 
 import { Emitter } from 'monaco-editor';
-
-import type { IEvent } from 'monaco-editor';
+import type * as monaco from 'monaco-editor';
 import type { FragmentDefinitionNode, GraphQLSchema } from 'graphql';
 import type {
   CompletionSettings,
@@ -66,7 +65,7 @@ export class MonacoGraphQLAPI {
     this._formattingOptions = formattingOptions ?? formattingDefaults;
   }
 
-  public get onDidChange(): IEvent<MonacoGraphQLAPI> {
+  public get onDidChange(): monaco.IEvent<MonacoGraphQLAPI> {
     return this._onDidChange.event;
   }
 

packages/monaco-graphql/src/graphql.worker.ts

@@ -5,7 +5,7 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import type { worker as WorkerNamespace } from 'monaco-editor';
+import type * as monaco from 'monaco-editor';
 import { ICreateData } from './typings';
 
 // @ts-expect-error
@@ -15,7 +15,7 @@ import { GraphQLWorker } from './GraphQLWorker';
 
 self.onmessage = () => {
   initialize(
-    (ctx: WorkerNamespace.IWorkerContext, createData: ICreateData) =>
+    (ctx: monaco.worker.IWorkerContext, createData: ICreateData) =>
       new GraphQLWorker(ctx, createData),
   );
 };

packages/monaco-graphql/src/graphqlMode.ts

@@ -5,12 +5,9 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import { Uri, IDisposable } from 'monaco-editor';
-import * as monaco from 'monaco-editor';
-
+import { Uri, IDisposable, languages } from 'monaco-editor';
 import { WorkerManager } from './workerManager';
 import { GraphQLWorker } from './GraphQLWorker';
-
 import { MonacoGraphQLAPI } from './api';
 import * as languageFeatures from './languageFeatures';
 
@@ -34,7 +31,7 @@ export function setupMode(defaults: MonacoGraphQLAPI): IDisposable {
     const { modeConfiguration, languageId } = defaults;
     if (modeConfiguration.documentFormattingEdits) {
       providers.push(
-        monaco.languages.registerDocumentFormattingEditProvider(
+        languages.registerDocumentFormattingEditProvider(
           languageId,
           new languageFeatures.DocumentFormattingAdapter(worker),
         ),
@@ -48,7 +45,7 @@ export function setupMode(defaults: MonacoGraphQLAPI): IDisposable {
 
     if (modeConfiguration.completionItems) {
       providers.push(
-        monaco.languages.registerCompletionItemProvider(
+        languages.registerCompletionItemProvider(
           languageId,
           new languageFeatures.CompletionAdapter(worker),
         ),
@@ -59,7 +56,7 @@ export function setupMode(defaults: MonacoGraphQLAPI): IDisposable {
     }
     if (modeConfiguration.hovers) {
       providers.push(
-        monaco.languages.registerHoverProvider(
+        languages.registerHoverProvider(
           languageId,
           new languageFeatures.HoverAdapter(worker),
         ),
@@ -68,6 +65,7 @@ export function setupMode(defaults: MonacoGraphQLAPI): IDisposable {
 
     registerSchemaLessProviders();
   }
+
   let {
     modeConfiguration,
     formattingOptions,

packages/monaco-graphql/src/initializeMode.ts

@@ -8,7 +8,6 @@
 import type * as GraphQLMode from './graphqlMode';
 import { create as createMonacoGraphQLAPI, MonacoGraphQLAPI } from './api';
 import type { MonacoGraphQLInitializeConfig } from './typings';
-
 import { languages } from 'monaco-editor';
 
 export const LANGUAGE_ID = 'graphql';

packages/monaco-graphql/src/languageFeatures.ts

@@ -7,30 +7,22 @@
 
 import { GraphQLWorker } from './GraphQLWorker';
 import type { MonacoGraphQLAPI } from './api';
-
-import type {
-  Uri,
-  Position,
-  Thenable,
-  CancellationToken,
-  IDisposable,
-} from 'monaco-editor';
-
-import * as monaco from 'monaco-editor';
-
+import type * as monaco from 'monaco-editor';
+import { Uri, languages } from 'monaco-editor';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import { CompletionItemKind as lsCompletionItemKind } from 'graphql-language-service';
 import { getModelLanguageId, GraphQLWorkerCompletionItem } from './utils';
 
 export interface WorkerAccessor {
-  (...more: Uri[]): Thenable<GraphQLWorker>;
+  (...more: Uri[]): monaco.Thenable<GraphQLWorker>;
 }
 
 // --- completion ------
 
 export class DiagnosticsAdapter {
-  private _disposables: IDisposable[] = [];
-  private _listener: { [uri: string]: IDisposable } = Object.create(null);
+  private _disposables: monaco.IDisposable[] = [];
+  private _listener: { [uri: string]: monaco.IDisposable } =
+    Object.create(null);
 
   constructor(
     private defaults: MonacoGraphQLAPI,
@@ -142,7 +134,7 @@ export class DiagnosticsAdapter {
         return;
       }
 
-      const schemaUri = monaco.Uri.file(
+      const schemaUri = Uri.file(
         variablesUris[0].replace('.json', '-schema.json'),
       ).toString();
       const configResult = {
@@ -151,7 +143,7 @@ export class DiagnosticsAdapter {
         fileMatch: variablesUris,
       };
       // TODO: export from api somehow?
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      languages.json.jsonDefaults.setDiagnosticsOptions({
         schemaValidation: 'error',
         validate: true,
         ...this.defaults?.diagnosticSettings?.jsonDiagnosticSettings,
@@ -162,12 +154,9 @@ export class DiagnosticsAdapter {
   }
 }
 
-const mKind = monaco.languages.CompletionItemKind;
+const mKind = languages.CompletionItemKind;
 
-const kindMap: Record<
-  lsCompletionItemKind,
-  monaco.languages.CompletionItemKind
-> = {
+const kindMap: Record<lsCompletionItemKind, languages.CompletionItemKind> = {
   [lsCompletionItemKind.Text]: mKind.Text,
   [lsCompletionItemKind.Method]: mKind.Method,
   [lsCompletionItemKind.Function]: mKind.Function,
@@ -197,21 +186,21 @@ const kindMap: Record<
 
 export function toCompletionItemKind(
   kind: lsCompletionItemKind,
-): monaco.languages.CompletionItemKind {
+): languages.CompletionItemKind {
   return kind in kindMap ? kindMap[kind] : mKind.Text;
 }
 
 export function toCompletion(
   entry: GraphQLWorkerCompletionItem,
-): monaco.languages.CompletionItem {
-  const suggestions: monaco.languages.CompletionItem = {
+): languages.CompletionItem {
+  const suggestions: languages.CompletionItem = {
     // @ts-expect-error
     range: entry.range,
     kind: toCompletionItemKind(entry.kind!),
     label: entry.label,
     insertText: entry.insertText ?? entry.label,
     insertTextRules: entry.insertText
-      ? monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+      ? languages.CompletionItemInsertTextRule.InsertAsSnippet
       : undefined,
     sortText: entry.sortText,
     filterText: entry.filterText,
@@ -222,9 +211,7 @@ export function toCompletion(
   return suggestions;
 }
 
-export class CompletionAdapter
-  implements monaco.languages.CompletionItemProvider
-{
+export class CompletionAdapter implements languages.CompletionItemProvider {
   constructor(private _worker: WorkerAccessor) {
     this._worker = _worker;
   }
@@ -235,10 +222,10 @@ export class CompletionAdapter
 
   async provideCompletionItems(
     model: editor.IReadOnlyModel,
-    position: Position,
-    _context: monaco.languages.CompletionContext,
-    _token: CancellationToken,
-  ): Promise<monaco.languages.CompletionList> {
+    position: monaco.Position,
+    _context: languages.CompletionContext,
+    _token: monaco.CancellationToken,
+  ): Promise<languages.CompletionList> {
     try {
       const resource = model.uri;
       const worker = await this._worker(model.uri);
@@ -259,16 +246,16 @@ export class CompletionAdapter
 }
 
 export class DocumentFormattingAdapter
-  implements monaco.languages.DocumentFormattingEditProvider
+  implements languages.DocumentFormattingEditProvider
 {
   constructor(private _worker: WorkerAccessor) {
     this._worker = _worker;
   }
 
   async provideDocumentFormattingEdits(
     document: editor.ITextModel,
-    _options: monaco.languages.FormattingOptions,
-    _token: CancellationToken,
+    _options: languages.FormattingOptions,
+    _token: monaco.CancellationToken,
   ) {
     const worker = await this._worker(document.uri);
 
@@ -285,14 +272,14 @@ export class DocumentFormattingAdapter
   }
 }
 
-export class HoverAdapter implements monaco.languages.HoverProvider {
+export class HoverAdapter implements languages.HoverProvider {
   constructor(private _worker: WorkerAccessor) {}
 
   async provideHover(
     model: editor.IReadOnlyModel,
-    position: Position,
-    _token: CancellationToken,
-  ): Promise<monaco.languages.Hover> {
+    position: monaco.Position,
+    _token: monaco.CancellationToken,
+  ): Promise<languages.Hover> {
     const resource = model.uri;
     const worker = await this._worker(model.uri);
     const hoverItem = await worker.doHover(resource.toString(), position);

packages/monaco-graphql/src/monaco.contribution.ts

@@ -13,13 +13,13 @@ export {
   MonacoGraphQLAPIOptions,
   diagnosticSettingDefault,
 } from './api';
-
 import { languages } from 'monaco-editor';
+import { initializeMode, LANGUAGE_ID } from './initializeMode';
 
 export * from './typings';
-import { initializeMode, LANGUAGE_ID } from './initializeMode';
 
 export { LANGUAGE_ID };
+
 // here is the only place where we
 // initialize the mode `onLanguage`
 languages.onLanguage(LANGUAGE_ID, () => {

packages/monaco-graphql/src/schemaLoader.ts

@@ -1,5 +1,4 @@
 import { buildClientSchema, buildASTSchema } from 'graphql';
-
 import type { SchemaLoader } from './typings';
 
 export const defaultSchemaLoader: SchemaLoader = (schemaConfig, parser) => {

packages/monaco-graphql/src/typings/index.ts

@@ -1,5 +1,4 @@
-import type { languages } from 'monaco-editor';
-
+import type * as monaco from 'monaco-editor';
 import {
   IntrospectionQuery,
   DocumentNode,
@@ -10,7 +9,6 @@ import {
   ValidationRule,
   FragmentDefinitionNode,
 } from 'graphql';
-
 import type { Options as PrettierConfig } from 'prettier';
 
 export type BaseSchemaConfig = {
@@ -127,7 +125,8 @@ export interface IDisposable {
   dispose(): void;
 }
 
-export type JSONDiagnosticOptions = languages.json.DiagnosticsOptions;
+export type JSONDiagnosticOptions = monaco.languages.json.DiagnosticsOptions;
+
 export interface IEvent<T> {
   (listener: (e: T) => any, thisArg?: any): IDisposable;
 }
@@ -209,7 +208,7 @@ export type DiagnosticSettings = {
    * - `trailingComments` is `error` by default, and can be `warning` or `ignore`
    * {languages.json.DiagnosticsOptions}
    */
-  jsonDiagnosticSettings?: languages.json.DiagnosticsOptions;
+  jsonDiagnosticSettings?: monaco.languages.json.DiagnosticsOptions;
 };
 
 export type CompletionSettings = {