diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md index 7e7faf57ec4..9a7cbdf0a9a 100644 --- a/packages/monaco-graphql/README.md +++ b/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,8 +236,8 @@ 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.) @@ -244,6 +245,32 @@ 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 = [ { diff --git a/packages/monaco-graphql/package.json b/packages/monaco-graphql/package.json index 4d319a07c0d..bb83d02155c 100644 --- a/packages/monaco-graphql/package.json +++ b/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" diff --git a/packages/monaco-graphql/src/full.ts b/packages/monaco-graphql/src/full.ts new file mode 100644 index 00000000000..1e1424c2cc0 --- /dev/null +++ b/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'; diff --git a/packages/monaco-graphql/src/initialize.ts b/packages/monaco-graphql/src/initialize.ts new file mode 100644 index 00000000000..5d81636d0da --- /dev/null +++ b/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 { + return import('./graphqlMode'); +} diff --git a/packages/monaco-graphql/src/initializeMode.ts b/packages/monaco-graphql/src/initializeMode.ts index 5d81636d0da..2475e396fc2 100644 --- a/packages/monaco-graphql/src/initializeMode.ts +++ b/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 { - return import('./graphqlMode'); -} +export { initializeMode, LANGUAGE_ID } from './initialize'; diff --git a/packages/monaco-graphql/src/languageFeatures.ts b/packages/monaco-graphql/src/languageFeatures.ts index e9ab4ff8c8c..0dfc52d5046 100644 --- a/packages/monaco-graphql/src/languageFeatures.ts +++ b/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'); } diff --git a/packages/monaco-graphql/src/lite.ts b/packages/monaco-graphql/src/lite.ts new file mode 100644 index 00000000000..a65d00e3635 --- /dev/null +++ b/packages/monaco-graphql/src/lite.ts @@ -0,0 +1,4 @@ +/** + * monaco-graphql/lite with no exports + */ +export { initializeMode, LANGUAGE_ID } from './initialize'; diff --git a/packages/monaco-graphql/src/monaco-editor.ts b/packages/monaco-graphql/src/monaco-editor.ts index 769af4bff1b..e153469af82 100644 --- a/packages/monaco-graphql/src/monaco-editor.ts +++ b/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'; diff --git a/packages/monaco-graphql/src/monaco.contribution.ts b/packages/monaco-graphql/src/monaco.contribution.ts index 6825acd266c..410841550bb 100644 --- a/packages/monaco-graphql/src/monaco.contribution.ts +++ b/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. - */ diff --git a/packages/monaco-graphql/test/monaco-editor.test.ts b/packages/monaco-graphql/test/monaco-editor.test.ts index d85ec473b36..c4ef749b517 100644 --- a/packages/monaco-graphql/test/monaco-editor.test.ts +++ b/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');