diff --git a/packages/web/app/src/components/schema-editor.ts b/packages/web/app/src/components/schema-editor.ts index 77c489bd2..c6cc0a96a 100644 --- a/packages/web/app/src/components/schema-editor.ts +++ b/packages/web/app/src/components/schema-editor.ts @@ -1,6 +1,18 @@ import { lazy } from 'react'; +// Import from `editor.api` rather than the `monaco-editor` main entry to keep +// the bundle lean — the main entry auto-registers every basic language, which +// bloats our client sourcemaps. We opt in to the contributions we actually use +// via the side-effect imports below. import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +// Enables the read-only tooltip shown when users type into a read-only model. import 'monaco-editor/esm/vs/editor/contrib/readOnlyMessage/browser/contribution.js'; +// Registers the basic GraphQL Monarch tokenizer so `language="graphql"` models +// get syntax highlighting. Without this, `editor.api` ships no languages. +import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution.js'; +// Registers the JSON language service (`monaco.languages.json`) — required by +// the policy naming-convention rule editor, which configures JSON schema +// diagnostics in `beforeMount`. +import 'monaco-editor/esm/vs/language/json/monaco.contribution.js'; import { loader, DiffEditor as MonacoDiffEditor, diff --git a/packages/web/app/src/lib/preflight/graphiql-plugin.tsx b/packages/web/app/src/lib/preflight/graphiql-plugin.tsx index 1776a0aa9..7e48477e2 100644 --- a/packages/web/app/src/lib/preflight/graphiql-plugin.tsx +++ b/packages/web/app/src/lib/preflight/graphiql-plugin.tsx @@ -660,7 +660,11 @@ function PreflightModal({ }, []); const handleMonacoEditorBeforeMount = useCallback(async (monaco: Monaco) => { - if (monaco.languages.typescript) { + // Lazy-load the TS language service on first preflight mount if it hasn't + // already been registered. `schema-editor.ts` configures Monaco with the + // lean `editor.api` entry (no languages bundled), so `monaco.languages + // .typescript` is only defined after this side-effect import has run. + if (!monaco.languages.typescript) { await import('monaco-editor/esm/vs/language/typescript/monaco.contribution'); }