monaco-graphql/lite

packages/monaco-graphql/README.md

@@ -53,7 +53,7 @@ yarn add monaco-graphql
 ```ts
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { initializeMode } from 'monaco-graphql/esm/initializeMode';
+import { initializeMode } from 'monaco-graphql/initializeMode'; // `monaco-graphql/esm/initializeMode` still works
 
 // you can also configure these using the webpack or vite plugins for `monaco-editor`
 import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';
@@ -93,7 +93,8 @@ monaco.editor.create(document.getElementById('someElementId'), {
 
 ## Lazy Example
 
-The existing API works as before in terms of instantiating the schema
+The existing API works as before in terms of instantiating the schema.
+To avoid manually calling getWorker(), you can use the monaco editor plugins for webpack or vite (see examples, and below)
 
 ```ts
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
@@ -151,7 +152,7 @@ any given set of operations
 ```ts
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { initializeMode } from 'monaco-graphql/esm/initializeMode';
+import { initializeMode } from 'monaco-graphql/full';
 
 import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';
 
@@ -235,15 +236,41 @@ MonacoGraphQL.setCompletionSettings({
 });
 ```
 
-You can also experiment with the built-in I think `jsonc`? (MSFT json5-ish
-syntax, for `tsconfig.json` etc.) and the 3rd party `monaco-yaml` language modes
+You can also experiment with the built-in `jsonc`? (JSON
+syntax that allows comments and trailing commas, for `tsconfig.json` etc.) and the 3rd party `monaco-yaml` language modes
 for completion of other types of variable input. you can also experiment with
 editor methods to parse detected input into different formats, etc (`yaml`
 pastes as `json`, etc.)
 
 You could of course prefer to generate a `jsonschema` form for variables input
 using a framework of your choice, instead of an editor. Enjoy!
 
+## `monaco-graphql/lite`
+
+You can also import a "lite" version, and manually enable only the monaco features you want!
+
+Warning: by default, completion and other features will not work, only highlighting and validation.
+
+```ts
+import { initializeMode } from 'monaco-graphql/lite';
+
+// enable completion
+import 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';
+
+const api = initializeMode({
+  schemas: [
+    {
+      // anything that monaco.URI.from() is compatible with
+      uri: 'schema.graphql',
+      // match the monaco file uris for this schema.
+      // accepts specific filenames and anything `picomatch` supports.
+      fileMatch: ['operation.graphql'],
+      schema: myGraphqlSchema as GraphQLSchema,
+    },
+  ],
+});
+```
+
 ## `MonacoGraphQLAPI` ([typedoc](https://graphiql-test.netlify.app/typedoc/classes/monaco_graphql.monacoMonacoGraphQLAPI.html))
 
 If you call any of these API methods to modify the language service
@@ -271,7 +298,7 @@ const { api } = languages.graphql;
 Otherwise, you can, like in the sync demo above:
 
 ```ts
-import { initializeMode } from 'monaco-graphql/esm/initializeMode';
+import { initializeMode } from 'monaco-graphql/full';
 
 const api = initializeMode(config);
 ```
@@ -299,7 +326,7 @@ monaco.languages.graphql.api.setSchemaConfig([
 or you can load the language features only when you have your schema
 
 ```ts
-import { initializeMode } from 'monaco-graphql/esm/initializeMode';
+import { initializeMode } from 'monaco-graphql/full';
 
 const schemas = [
   {

packages/monaco-graphql/package.json

@@ -16,6 +16,33 @@
       "url": "https://github.com/acao"
     }
   ],
+  "exports": {
+    ".": {
+      "import": "./esm/monaco.contribution.js",
+      "require": "./dist/monaco.contribution.js",
+      "types": "./esm/monaco.contribution.d.ts"
+    },
+    "./*": {
+      "default": "./*",
+      "import": "./*",
+      "require": "./*",
+      "types": "./*"
+    },
+    "./lite": {
+      "import": "./esm/lite.js",
+      "types": "./esm/lite.d.ts"
+    },
+    "./graphql.worker": {
+      "import": "./esm/graphql.worker.js",
+      "types": "./esm/graphql.worker.d.ts",
+      "require": "./dist/graphql.worker.js"
+    },
+    "./initializeMode": {
+      "import": "./esm/initializeMode.js",
+      "types": "./esm/initializeMode.d.ts",
+      "require": "./dist/initializeMode.js"
+    }
+  },
   "repository": {
     "url": "http://github.com/graphql/graphiql",
     "directory": "packages/monaco-graphql"

packages/monaco-graphql/src/full.ts

@@ -0,0 +1,9 @@
+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';
+import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController';

packages/monaco-graphql/src/initialize.ts

@@ -0,0 +1,40 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+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';
+
+let api: MonacoGraphQLAPI;
+
+/**
+ * Initialize the mode & worker synchronously with provided configuration
+ *
+ * @param config
+ * @returns {MonacoGraphQLAPI}
+ */
+export function initializeMode(
+  config?: MonacoGraphQLInitializeConfig,
+): MonacoGraphQLAPI {
+  if (!api) {
+    api = createMonacoGraphQLAPI(LANGUAGE_ID, config);
+    (languages as any).graphql = { api };
+    // 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));
+  }
+
+  return api;
+}
+
+function getMode(): Promise<typeof GraphQLMode> {
+  return import('./graphqlMode');
+}

packages/monaco-graphql/src/initializeMode.ts

@@ -1,40 +1,3 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
+import './full';
 
-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';
-
-let api: MonacoGraphQLAPI;
-
-/**
- * Initialize the mode & worker synchronously with provided configuration
- *
- * @param config
- * @returns {MonacoGraphQLAPI}
- */
-export function initializeMode(
-  config?: MonacoGraphQLInitializeConfig,
-): MonacoGraphQLAPI {
-  if (!api) {
-    api = createMonacoGraphQLAPI(LANGUAGE_ID, config);
-    (languages as any).graphql = { api };
-    // 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));
-  }
-
-  return api;
-}
-
-function getMode(): Promise<typeof GraphQLMode> {
-  return import('./graphqlMode');
-}
+export { initializeMode, LANGUAGE_ID } from './initialize';

packages/monaco-graphql/src/languageFeatures.ts

@@ -129,6 +129,9 @@ export class DiagnosticsAdapter {
     editor.setModelMarkers(editor.getModel(resource)!, languageId, diagnostics);
 
     if (variablesUris) {
+      // 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');
       }

packages/monaco-graphql/src/lite.ts

@@ -0,0 +1,4 @@
+/**
+ * monaco-graphql/lite with no exports
+ */
+export { initializeMode, LANGUAGE_ID } from './initialize';

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

@@ -20,13 +20,3 @@ 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';
-
-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';
-import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu';
-import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController';

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

@@ -27,6 +27,3 @@ languages.onLanguage(LANGUAGE_ID, () => {
 
   (languages as any).graphql = { api };
 });
-/**
- * Register the language mode without schema or any settings, so you can configure them asynchronously.
- */

packages/monaco-graphql/test/monaco-editor.test.ts

@@ -13,7 +13,7 @@ describe('monaco-editor', () => {
     // expect(lines[0]).toBe('$ vite build');
     // expect(lines[1]).toMatch(' building for production...');
     // expect(lines[2]).toBe('transforming...');
-    expect(lines[3]).toMatch('✓ 839 modules transformed.');
+    expect(lines[3]).toMatch('✓ 841 modules transformed.');
     // expect(lines[4]).toBe('rendering chunks...');
     // expect(lines[5]).toBe('computing gzip size...');
     // expect(lines[6]).toMatch('dist/index.html');