From 31ded5e02ffb3334c22235fdb4285e926be0a98d Mon Sep 17 00:00:00 2001 From: Rikki Schulte Date: Sat, 12 Aug 2023 10:15:08 +0200 Subject: [PATCH] fix: `monaco-graphql` exports, validate on load (#3384) - validates both graphql and json variables on load - reduces bundle size further, allowing users to specify which features they want, instead of importing all of them - adds a typescript mode to the vite/next.js demos to ensure our implementation doesn't break `typescript` language mode & worker - fix variables json validation by pointing to a meta schema - add `exports` aliases that are backwards compatible, but allow `monaco-graphql/initializeMode` and `monaco-graphql/graphql.worker` to be imported directly - add a `monaco-graphql/lite` import for minimal features - import the json language mode only if variables json validation is used --- .changeset/fluffy-pens-lick.md | 15 +++++ .github/workflows/pr.yml | 4 -- custom-words.txt | 1 + examples/monaco-graphql-nextjs/next.config.js | 13 ++++- .../monaco-graphql-nextjs/src/constants.ts | 57 +++++++++++++++---- examples/monaco-graphql-nextjs/src/editor.tsx | 27 ++++++++- .../monaco-graphql-react-vite/vite.config.ts | 3 +- .../src/utils/getVariablesJSONSchema.ts | 4 ++ packages/monaco-graphql/README.md | 49 +++++++++++++--- packages/monaco-graphql/package.json | 40 ++++++++++++- .../scripts/patch-monaco-editor-types.mjs | 10 ---- packages/monaco-graphql/src/full.ts | 9 +++ packages/monaco-graphql/src/initialize.ts | 40 +++++++++++++ packages/monaco-graphql/src/initializeMode.ts | 41 +------------ .../monaco-graphql/src/languageFeatures.ts | 14 ++++- packages/monaco-graphql/src/lite.ts | 4 ++ packages/monaco-graphql/src/monaco-editor.ts | 2 +- .../monaco-graphql/src/monaco.contribution.ts | 3 - .../src/typings/monaco-editor.d.ts | 2 +- .../monaco-graphql/test/monaco-editor.test.ts | 2 +- scripts/canary-release.js | 1 - 21 files changed, 254 insertions(+), 87 deletions(-) create mode 100644 .changeset/fluffy-pens-lick.md delete mode 100644 packages/monaco-graphql/scripts/patch-monaco-editor-types.mjs create mode 100644 packages/monaco-graphql/src/full.ts create mode 100644 packages/monaco-graphql/src/initialize.ts create mode 100644 packages/monaco-graphql/src/lite.ts diff --git a/.changeset/fluffy-pens-lick.md b/.changeset/fluffy-pens-lick.md new file mode 100644 index 00000000000..d80b6213d19 --- /dev/null +++ b/.changeset/fluffy-pens-lick.md @@ -0,0 +1,15 @@ +--- +'monaco-graphql': patch +--- + +import only `editor.api` & basic features, add `monaco-graphql/lite` + +- switch from exporting `edcore.js` to `editor.api.js` as recommended, and minimal features to get the editor working + - `edcore` imports `editor.all` which contains many monaco-editor features we don't use +- dynamic import of `json` language mode only if the user supplies configuration for json validation +- update monaco examples to show minimal `typescript` implementation alongside `graphql` +- add new simplified `exports` with backwards compatibility: + - `monaco-graphql/initializeMode` + - `monaco-graphql/graphql.worker` + - `monaco-graphql/monaco-editor` +- introduce `monaco-graphql/lite` for users who want the most minimum version possible, and to only import the features they need diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index f4c78be8c5c..b6c35bd1a43 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -11,8 +11,6 @@ jobs: steps: - name: Checkout Code uses: actions/checkout@v3 - with: - fetch-depth: 0 - uses: actions/setup-node@v3 with: node-version: 16 @@ -38,8 +36,6 @@ jobs: steps: - uses: actions/checkout@v3 - with: - fetch-depth: 0 - uses: actions/setup-node@v3 with: node-version: 16 diff --git a/custom-words.txt b/custom-words.txt index db8dd7bf17f..247e049b8d0 100644 --- a/custom-words.txt +++ b/custom-words.txt @@ -130,6 +130,7 @@ matchingbracket middlewares modulemap newhope +nextjs nocheck nocursor nonmatchingbracket diff --git a/examples/monaco-graphql-nextjs/next.config.js b/examples/monaco-graphql-nextjs/next.config.js index 2ae3c4371ad..3aba5c28211 100644 --- a/examples/monaco-graphql-nextjs/next.config.js +++ b/examples/monaco-graphql-nextjs/next.config.js @@ -19,7 +19,8 @@ const nextConfig = { // where vscode contains a version of `marked` with modules pre-transpiled, which seems to break the build. // // (the error mentions that exports.Lexer is a const that can't be re-declared) - '../common/marked/marked.js': 'marked', + // this import has moved a bit, so let's make it absolute from the module path + 'monaco-editor/esm/vs/common/marked/marked.js': 'marked', }; if (!options.isServer) { config.plugins.push( @@ -40,6 +41,16 @@ const nextConfig = { entry: 'monaco-graphql/esm/graphql.worker.js', }, }, + // TOD: webpack monaco editor plugin breaks on languages: ['typescript'] + // so this was necessary + // see: https://github.com/microsoft/monaco-editor/issues/2738 + { + label: 'typescript', + worker: { + id: 'typescript', + entry: 'monaco-editor/esm/vs/language/typescript/ts.worker.js', + }, + }, ], }), ); diff --git a/examples/monaco-graphql-nextjs/src/constants.ts b/examples/monaco-graphql-nextjs/src/constants.ts index e6964c76988..70639a6358c 100644 --- a/examples/monaco-graphql-nextjs/src/constants.ts +++ b/examples/monaco-graphql-nextjs/src/constants.ts @@ -1,7 +1,8 @@ import { editor, Uri } from 'monaco-graphql/esm/monaco-editor'; import { initializeMode } from 'monaco-graphql/esm/initializeMode'; +import { parse, print } from 'graphql'; -type ModelType = 'operations' | 'variables' | 'response'; +type ModelType = 'operations' | 'variables' | 'response' | 'typescript'; export const GRAPHQL_URL = 'https://countries.trevorblades.com'; @@ -18,35 +19,59 @@ export const STORAGE_KEY = { variables: 'variables', }; -export const DEFAULT_VALUE: Record = { - operations: - localStorage.getItem(STORAGE_KEY.operations) ?? - `# CMD/CTRL + Return/Enter will execute the operation, +// allow a typo to test validation on schema load +/* cSpell:disable */ +const operations = + localStorage.getItem(STORAGE_KEY.operations) ?? + `# CMD/CTRL + Return/Enter will execute the operation, # same in the variables editor below # also available via context menu & F1 command palette -query($code: ID!) { +query Example($code: ID!, $filter: LanguageFilterInput!) { country(code: $code) { awsRegion native phone + emoj } -}`, + languages(filter: $filter) { + name + } +}`; +/* cSpell:enable */ + +let prettyOp = ''; +const makeOpTemplate = (op: string) => { + try { + prettyOp = print(parse(op)); + return ` + const graphql = (arg: TemplateStringsArray): string => arg[0] + + const op = graphql\`\n${prettyOp}\n\``; + } catch { + return prettyOp; + } +}; + +export const DEFAULT_VALUE: Record = { + operations, variables: localStorage.getItem(STORAGE_KEY.variables) ?? `{ "code": "UA" }`, response: '', + typescript: makeOpTemplate(operations), }; export const FILE_SYSTEM_PATH: Record< ModelType, - `${string}.${'graphql' | 'json'}` + `${string}.${'graphql' | 'json' | 'ts'}` > = { operations: 'operations.graphql', variables: 'variables.json', response: 'response.json', + typescript: 'typescript.ts', }; export const MONACO_GRAPHQL_API = initializeMode({ @@ -70,14 +95,22 @@ export const MODEL: Record = { operations: getOrCreateModel('operations'), variables: getOrCreateModel('variables'), response: getOrCreateModel('response'), + typescript: getOrCreateModel('typescript'), }; -function getOrCreateModel( - type: 'operations' | 'variables' | 'response', -): editor.ITextModel { +MODEL.operations.onDidChangeContent(() => { + const value = MODEL.operations.getValue(); + MODEL.typescript.setValue(makeOpTemplate(value)); +}); + +function getOrCreateModel(type: ModelType): editor.ITextModel { const uri = Uri.file(FILE_SYSTEM_PATH[type]); const defaultValue = DEFAULT_VALUE[type]; - const language = uri.path.split('.').pop(); + let language = uri.path.split('.').pop(); + console.log({ language }); + if (language === 'ts') { + language = 'typescript'; + } return ( editor.getModel(uri) ?? editor.createModel(defaultValue, language, uri) ); diff --git a/examples/monaco-graphql-nextjs/src/editor.tsx b/examples/monaco-graphql-nextjs/src/editor.tsx index ea861a67230..d0f88faaef2 100644 --- a/examples/monaco-graphql-nextjs/src/editor.tsx +++ b/examples/monaco-graphql-nextjs/src/editor.tsx @@ -6,6 +6,13 @@ import { KeyCode, languages, } from 'monaco-graphql/esm/monaco-editor'; + +// to get typescript mode working +import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; +import 'monaco-editor/esm/vs/editor/contrib/peekView/browser/peekView'; +import 'monaco-editor/esm/vs/editor/contrib/parameterHints/browser/parameterHints'; +import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'; + import { createGraphiQLFetcher } from '@graphiql/toolkit'; import * as JSONC from 'jsonc-parser'; import { @@ -78,12 +85,15 @@ export default function Editor(): ReactElement { const operationsRef = useRef(null); const variablesRef = useRef(null); const responseRef = useRef(null); + const typescriptRef = useRef(null); const [operationsEditor, setOperationsEditor] = useState(); const [variablesEditor, setVariablesEditor] = useState(); const [responseEditor, setResponseEditor] = useState(); + const [typescriptEditor, setTypescriptEditor] = + useState(); const [schema, setSchema] = useState(); const [loading, setLoading] = useState(false); /** @@ -132,6 +142,18 @@ export default function Editor(): ReactElement { }), ); } + if (!typescriptEditor) { + setTypescriptEditor( + editor.create(typescriptRef.current!, { + model: MODEL.typescript, + ...DEFAULT_EDITOR_OPTIONS, + smoothScrolling: true, + readOnly: false, + 'semanticHighlighting.enabled': true, + language: 'typescript', + }), + ); + } }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only run once on mount /** * Handle the initial schema load @@ -156,7 +178,10 @@ export default function Editor(): ReactElement {
-
+
+
+
+
); } diff --git a/examples/monaco-graphql-react-vite/vite.config.ts b/examples/monaco-graphql-react-vite/vite.config.ts index 5aaf5f1d19f..889998bbc5b 100644 --- a/examples/monaco-graphql-react-vite/vite.config.ts +++ b/examples/monaco-graphql-react-vite/vite.config.ts @@ -10,7 +10,8 @@ export default defineConfig({ react(), monacoEditorPlugin({ publicPath: 'workers', - languageWorkers: ['json', 'editorWorkerService'], + // note that this only loads the worker, not the full main process language support + languageWorkers: ['json', 'typescript', 'editorWorkerService'], customWorkers: [ { label: 'graphql', diff --git a/packages/graphql-language-service/src/utils/getVariablesJSONSchema.ts b/packages/graphql-language-service/src/utils/getVariablesJSONSchema.ts index 9f350cbfc82..5611777ae61 100644 --- a/packages/graphql-language-service/src/utils/getVariablesJSONSchema.ts +++ b/packages/graphql-language-service/src/utils/getVariablesJSONSchema.ts @@ -351,6 +351,10 @@ export function getVariablesJSONSchema( options?: JSONSchemaOptions, ): JSONSchema6 { const jsonSchema: PropertiedJSON6 = { + // this gets monaco-json validation working again + // otherwise it shows an error for newer schema draft versions + // variables and graphql types are simple and compatible with all versions of json schema + // since draft 4. package.json and many other schemas still use draft 4 $schema: 'http://json-schema.org/draft-04/schema', type: 'object', properties: {}, diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md index 8e317452352..88a07187ab6 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/initializeMode'; 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/initializeMode'; 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/initializeMode'; const schemas = [ { @@ -402,12 +429,20 @@ you'll can refer to the webpack configuration in the how it works with webpack and the official `monaco-editor-webpack-plugin`. there is probably an easier way to configure webpack `worker-loader` for this. +**Notes:** + +- for additional features, please specify them in `features` for the webpack plugin, or import them directly +- if you are trying to add `typescript` as a language, there is an outstanding [bug with the webpack plugin](https://github.com/microsoft/monaco-editor/issues/2738), see our [next.js example](../../examples/monaco-graphql-nextjs/next.config.js) for the workaround. do not specify `languages: ['typescript']` or `javascript` + ### Vite You can configure vite to load `monaco-editor` json mode and even the language editor worker using [the example for our mode](https://github.com/vdesjs/vite-plugin-monaco-editor#options) +Be sure to import additional editor features and language modes manually, as the vite plugin only allows you to specify `languageWorkers`. +See the vite example to see how to add typescript support + ## Web Frameworks the plain javascript diff --git a/packages/monaco-graphql/package.json b/packages/monaco-graphql/package.json index b488d42848a..cdbc88b2214 100644 --- a/packages/monaco-graphql/package.json +++ b/packages/monaco-graphql/package.json @@ -16,6 +16,43 @@ "url": "https://github.com/acao" } ], + "exports": { + ".": { + "import": "./esm/monaco.contribution.js", + "require": "./dist/monaco.contribution.js", + "types": "./esm/monaco.contribution.d.ts", + "default": "./dist/monaco.contribution.js" + }, + "./*": { + "import": "./*", + "require": "./*", + "types": "./*", + "default": "./*" + }, + "./esm/graphql.worker": { + "import": "./esm/graphql.worker.js", + "require": "./dist/graphql.worker.js", + "types": "./esm/graphql.worker.d.ts" + }, + "./lite": { + "import": "./esm/lite.js", + "types": "./esm/lite.d.ts", + "require": "./dist/lite.js", + "default": "./dist/lite.js" + }, + "./graphql.worker": { + "import": "./esm/graphql.worker.js", + "types": "./esm/graphql.worker.d.ts", + "require": "./dist/graphql.worker.js", + "default": "./dist/graphql.worker.js" + }, + "./initializeMode": { + "import": "./esm/initializeMode.js", + "types": "./esm/initializeMode.d.ts", + "require": "./dist/initializeMode.js", + "default": "./dist/initializeMode.js" + } + }, "repository": { "url": "http://github.com/graphql/graphiql", "directory": "packages/monaco-graphql" @@ -26,8 +63,7 @@ "src" ], "scripts": { - "test": "vitest run", - "postbuild": "node scripts/patch-monaco-editor-types.mjs" + "test": "vitest run" }, "dependencies": { "graphql-language-service": "^5.1.7", diff --git a/packages/monaco-graphql/scripts/patch-monaco-editor-types.mjs b/packages/monaco-graphql/scripts/patch-monaco-editor-types.mjs deleted file mode 100644 index 141dc714b40..00000000000 --- a/packages/monaco-graphql/scripts/patch-monaco-editor-types.mjs +++ /dev/null @@ -1,10 +0,0 @@ -import { writeFile } from 'node:fs/promises'; - -/* - * Generated types for `esm/monaco-editor` are incorrect, patch them by putting - * reexport of `monaco-editor` - */ - -await writeFile('esm/monaco-editor.d.ts', "export * from 'monaco-editor'"); - -console.log('✅ `monaco-graphql` types patched!'); 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 5e54979f696..0dfc52d5046 100644 --- a/packages/monaco-graphql/src/languageFeatures.ts +++ b/packages/monaco-graphql/src/languageFeatures.ts @@ -44,12 +44,16 @@ export class DiagnosticsAdapter { const jsonValidationForModel = defaults.diagnosticSettings?.validateVariablesJSON && 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); + }, 400); this._listener[modelUri] = model.onDidChangeContent(() => { clearTimeout(onChangeTimeout); onChangeTimeout = setTimeout(() => { void this._doValidate(model.uri, modeId, jsonValidationForModel); - }, 200); + }, 400); }); }; @@ -94,9 +98,10 @@ export class DiagnosticsAdapter { } }), ); - for (const model of editor.getModels()) { - onModelAdd(model); + if (getModelLanguageId(model) === this.defaults.languageId) { + onModelAdd(model); + } } } @@ -124,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 03665989a07..e153469af82 100644 --- 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/edcore.main.js'; +export * from 'monaco-editor/esm/vs/editor/editor.api.js'; 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/src/typings/monaco-editor.d.ts b/packages/monaco-graphql/src/typings/monaco-editor.d.ts index fc026eb7b5d..4c9d4ec4c87 100644 --- 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/edcore.main.js' { +declare module 'monaco-editor/esm/vs/editor/editor.api.js' { export * from 'monaco-editor'; } diff --git a/packages/monaco-graphql/test/monaco-editor.test.ts b/packages/monaco-graphql/test/monaco-editor.test.ts index 5739f255046..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('✓ 970 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'); diff --git a/scripts/canary-release.js b/scripts/canary-release.js index 471cf40b05f..d58180b51ac 100644 --- a/scripts/canary-release.js +++ b/scripts/canary-release.js @@ -73,7 +73,6 @@ async function updateVersions() { const changesets = (await readChangesets(cwd)).filter(change => modifiedChangesets.includes(change.id), ); - // const isMain = process.env.GITHUB_REF_NAME?.includes('main'); let vscodeRelease = false;