fix: import LS only for monaco-graphql (#2103)

Author: acao

.changeset/cuddly-moons-shave.md

@@ -0,0 +1,6 @@
+---
+'graphql-language-service': patch
+'monaco-graphql': patch
+---
+
+LangugeService should not be imported by `codemirror-graphql`, and thus `picomatch` should not be imported.

examples/monaco-graphql-webpack/src/schema.ts

@@ -1,5 +1,5 @@
 import { getIntrospectionQuery } from 'graphql';
-import type { SchemaConfig } from 'graphql-language-service';
+import type { SchemaConfig } from 'monaco-graphql/src/typings';
 import { Uri } from 'monaco-editor';
 
 const SCHEMA_URL = 'https://api.github.com/graphql';

packages/graphql-language-service/package.json

@@ -34,8 +34,7 @@
     "graphql-language-service-interface": "^2.10.1",
     "graphql-language-service-parser": "^1.10.4",
     "graphql-language-service-types": "^1.8.7",
-    "graphql-language-service-utils": "^2.7.1",
-    "picomatch-browser": "^2.2.5"
+    "graphql-language-service-utils": "^2.7.1"
   },
   "devDependencies": {
     "@types/picomatch": "^2.3.0",

packages/graphql-language-service/src/index.ts

@@ -12,16 +12,6 @@
  *
  * TODO: retire `graphql-language-service-{parser,interface,types,utils}` and merge with this workspace
  */
-export type {
-  SchemaConfig,
-  BaseSchemaConfig,
-  SchemaLoader,
-} from './schemaLoader';
-export { defaultSchemaLoader } from './schemaLoader';
-
-export type { GraphQLLanguageConfig } from './LanguageService';
-export { LanguageService } from './LanguageService';
-
 /**
  * A whole bunch of the key language services
  */
@@ -43,6 +33,7 @@ export {
   GraphQLLanguageService,
   SEVERITY,
   Severity,
+  HoverConfig,
   SeverityEnum,
   DIAGNOSTIC_SEVERITY,
   DefinitionQueryResult,

packages/graphql-language-service/src/schemaLoader.ts

@@ -5,7 +5,7 @@
   "license": "MIT",
   "main": "dist/monaco.contribution.js",
   "module": "esm/monaco.contribution.js",
-  "types": "dist/monaco.contribution.d.ts",
+  "types": "esm/monaco.contribution.d.ts",
   "contributors": [
     {
       "name": "Peng Lyu",
@@ -26,8 +26,9 @@
     "src"
   ],
   "dependencies": {
-    "graphql-language-service": "^4.1.2",
-    "graphql-language-service-utils": "^2.7.1"
+    "graphql-language-service": "^4.1.1",
+    "graphql-language-service-utils": "^2.7.1",
+    "picomatch-browser": "^2.2.5"
   },
   "devDependencies": {
     "graphql": "16.0.0-experimental-stream-defer.5",

packages/monaco-graphql/package.json

@@ -5,15 +5,13 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import { FormattingOptions, ICreateData } from './typings';
+import { FormattingOptions, ICreateData, SchemaConfig } from './typings';
 
 import type { worker, Position } from 'monaco-editor';
 
-import {
-  getRange,
-  LanguageService,
-  SchemaConfig,
-} from 'graphql-language-service';
+import { getRange } from 'graphql-language-service';
+
+import { LanguageService } from './LanguageService';
 
 import {
   toGraphQLPosition,
@@ -27,7 +25,6 @@ export type MonacoCompletionItem = monaco.languages.CompletionItem & {
   isDeprecated?: boolean;
   deprecationReason?: string | null;
 };
-
 export class GraphQLWorker {
   private _ctx: worker.IWorkerContext;
   private _languageService: LanguageService;
@@ -133,6 +130,7 @@ export class GraphQLWorker {
       ...this._formattingOptions?.prettierConfig,
     });
   }
+
   /**
    * TODO: store this in a proper document cache in the language service
    */

packages/monaco-graphql/src/GraphQLWorker.ts

@@ -12,69 +12,37 @@ import {
   FragmentDefinitionNode,
   visit,
   DocumentNode,
+  Source,
 } from 'graphql';
 
-import { default as picomatch } from 'picomatch';
+import picomatch from 'picomatch-browser';
 
-import type { IPosition } from 'graphql-language-service-types';
+import type { IPosition } from 'graphql-language-service';
 import {
   getAutocompleteSuggestions,
   getDiagnostics,
   getHoverInformation,
   HoverConfig,
-} from 'graphql-language-service-interface';
+} from 'graphql-language-service';
 
 import {
   getVariablesJSONSchema,
   getOperationASTFacts,
   JSONSchemaOptions,
 } from 'graphql-language-service-utils';
 
-import {
-  defaultSchemaLoader,
-  SchemaConfig,
-  SchemaLoader,
-} from './schemaLoader';
+import { defaultSchemaLoader } from './schemaLoader';
 
-/**
- * For the `monaco-graphql` language worker, these must be specified
- * in a custom webworker. see the readme.
- */
-export type GraphQLLanguageConfig = {
-  /**
-   * Provide a parser that matches `graphql` `parse()` signature
-   * Used for internal document parsing operations
-   * for autocompletion and hover, `graphql-language-service-parser ` is used via `graphql-language-service-interface`
-   */
-  parser?: typeof parse;
-  /**
-   * Custom options passed to `parse`, whether `graphql` parse by default or custom parser
-   */
-  parseOptions?: ParseOptions;
-  /**
-   * Take a variety of schema inputs common for the language worker, and transform them
-   * to at least a `schema` if not other easily available implementations
-   */
-  schemaLoader?: SchemaLoader;
-  /**
-   * An array of schema configurations from which to match files for language features
-   */
-  schemas?: SchemaConfig[];
-  /**
-   * External fragments to be used with completion and validation
-   */
-  exteralFragmentDefinitions?: FragmentDefinitionNode[] | string;
-  /**
-   * Custom validation rules following `graphql` `ValidationRule` signature
-   */
-  customValidationRules?: ValidationRule[];
-};
+import { SchemaConfig, SchemaLoader, GraphQLLanguageConfig } from './typings';
 
 type SchemaCacheItem = Omit<SchemaConfig, 'schema'> & { schema: GraphQLSchema };
 
 type SchemaCache = Map<string, SchemaCacheItem>;
 const schemaCache: SchemaCache = new Map();
 
+/**
+ * Currently only used by the `monaco-graphql` worker
+ */
 export class LanguageService {
   private _parser: typeof parse = parse;
   private _schemas: SchemaConfig[] = [];
@@ -128,28 +96,36 @@ export class LanguageService {
       schema,
     });
   }
+
   /**
    * Provide a model uri path, and see if a schema config has a `fileMatch` to match it
    * @param uri {string}
    * @returns {SchemaCacheItem | undefined}
    */
   public getSchemaForFile(uri: string): SchemaCacheItem | undefined {
-    const schema = this._schemas.find(schemaConfig => {
-      if (!schemaConfig.fileMatch) {
-        return false;
-      }
-      return schemaConfig.fileMatch.some(glob => {
-        const isMatch = picomatch(glob);
-        return isMatch(uri);
+    if (!this._schemas || !this._schemas.length) {
+      return;
+    }
+    if (this._schemas.length === 1) {
+      return this._schemaCache.get(this._schemas[0].uri);
+    } else {
+      const schema = this._schemas.find(schemaConfig => {
+        if (!schemaConfig.fileMatch) {
+          return false;
+        }
+        return schemaConfig.fileMatch.some(glob => {
+          const isMatch = picomatch(glob);
+          return isMatch(uri);
+        });
       });
-    });
-    if (schema) {
-      const cacheEntry = this._schemaCache.get(schema.uri);
-      if (cacheEntry) {
-        return cacheEntry;
+      if (schema) {
+        const cacheEntry = this._schemaCache.get(schema.uri);
+        if (cacheEntry) {
+          return cacheEntry;
+        }
+        const cache = this._cacheSchema(schema);
+        return cache.get(schema.uri);
       }
-      const cache = this._cacheSchema(schema);
-      return cache.get(schema.uri);
     }
   }
 
@@ -212,11 +188,11 @@ export class LanguageService {
   }
   /**
    * Uses the configured parser
-   * @param text
-   * @param options
+   * @param text {string | Source}
+   * @param options {ParseOptions}
    * @returns {DocumentNode}
    */
-  public parse(text: string, options?: ParseOptions): DocumentNode {
+  public parse(text: string | Source, options?: ParseOptions): DocumentNode {
     return this._parser(text, options || this._parseOptions);
   }
   /**

packages/graphql-language-service/src/LanguageService.ts renamed to packages/monaco-graphql/src/LanguageService.ts

@@ -5,7 +5,6 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import { SchemaConfig } from 'graphql-language-service';
 import { Emitter } from 'monaco-editor';
 
 import type { IEvent } from 'monaco-editor';
@@ -15,6 +14,7 @@ import type {
   FormattingOptions,
   ModeConfiguration,
   MonacoGraphQLInitializeConfig,
+  SchemaConfig,
 } from './typings';
 
 export type MonacoGraphQLAPIOptions = {

packages/monaco-graphql/src/api.ts

@@ -0,0 +1,32 @@
+import { buildClientSchema, buildASTSchema } from 'graphql';
+
+import type { SchemaLoader } from './typings';
+
+export const defaultSchemaLoader: SchemaLoader = (schemaConfig, parser) => {
+  const {
+    schema,
+    documentAST,
+    introspectionJSON,
+    introspectionJSONString,
+    buildSchemaOptions,
+    documentString,
+  } = schemaConfig;
+  if (schema) {
+    return schema;
+  }
+  if (introspectionJSONString) {
+    const introspectionJSONResult = JSON.parse(introspectionJSONString);
+    return buildClientSchema(introspectionJSONResult, buildSchemaOptions);
+  }
+  if (documentString && parser) {
+    const docAST = parser(documentString);
+    return buildASTSchema(docAST, buildSchemaOptions);
+  }
+  if (introspectionJSON) {
+    return buildClientSchema(introspectionJSON, buildSchemaOptions);
+  }
+  if (documentAST) {
+    return buildASTSchema(documentAST, buildSchemaOptions);
+  }
+  throw Error('no schema supplied');
+};