avoid bundling unnecesary languages, except graphql/json (#3285)

* simplify `monaco-graphql-react-vite`, fix sending variables

---------

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>

.changeset/gold-nails-share.md

@@ -0,0 +1,5 @@
+---
+'monaco-graphql': minor
+---
+
+avoid bundling unnecessary languages — import `monaco-graphql/esm/monaco-editor` instead of `monaco-editor` to reduce your bundle size, as that imports only `graphql` and `json` languages and leaves out `ts`, `css`, `html`, and much more

.eslintrc.js

@@ -14,6 +14,11 @@ const RESTRICTED_IMPORTS = [
   { name: 'graphql/type/definition', message: 'use `graphql`' },
   { name: 'graphql/type/directives', message: 'use `graphql`' },
   { name: 'graphql/version', message: 'use `graphql`' },
+  {
+    name: 'monaco-editor',
+    message:
+      '`monaco-editor` imports all languages; use `monaco-graphql/esm/monaco-editor` instead to import only `json` and `graphql` languages',
+  },
 ];
 
 module.exports = {
@@ -249,7 +254,6 @@ module.exports = {
         'unicorn/prefer-dom-node-remove': 'error',
         // ECMAScript 6 (http://eslint.org/docs/rules/#ecmascript-6)
         'arrow-body-style': 'off',
-        'no-duplicate-imports': 'off',
         '@typescript-eslint/no-restricted-imports': [
           'error',
           ...RESTRICTED_IMPORTS,
@@ -327,6 +331,7 @@ module.exports = {
         'unicorn/prefer-node-protocol': 'error',
         'import/no-unresolved': ['error', { ignore: ['^node:'] }],
         'unicorn/prefer-string-replace-all': 'error',
+        'unicorn/no-hex-escape': 'off', // TODO: enable
         // doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
         'unicorn/prefer-keyboard-event-key': 'off',
 
@@ -431,6 +436,21 @@ module.exports = {
         'promise/prefer-await-to-then': 'error',
       },
     },
+    {
+      // Monaco-GraphQL rules
+      files: ['packages/monaco-graphql/**'],
+      rules: {
+        '@typescript-eslint/no-restricted-imports': [
+          'error',
+          ...RESTRICTED_IMPORTS.filter(({ name }) => name !== 'monaco-editor'),
+          {
+            name: 'monaco-editor',
+            message:
+              '`monaco-editor` imports all languages; use locale `monaco-editor.ts` instead to import only `json` and `graphql` languages',
+          },
+        ],
+      },
+    },
     {
       // Parsing Markdown/MDX
       files: ['**/*.{md,mdx}'],
@@ -442,6 +462,7 @@ module.exports = {
       },
     },
     {
+      // ❗ALWAYS LAST
       // Rules for codeblocks inside Markdown/MDX
       files: ['**/*.{md,mdx}/*.{js,jsx,ts,tsx}'],
       rules: {
@@ -454,6 +475,7 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
         '@arthurgeron/react-usememo/require-usememo': 'off',
         'sonar/no-dead-store': 'off',
+        '@typescript-eslint/no-restricted-imports': 'off',
       },
     },
   ],

.github/workflows/pr-tests.yml

@@ -22,7 +22,7 @@ jobs:
       - run: yarn install --frozen-lockfile --immutable
 
       - name: Run Unit Tests
-        run: yarn test:ci --coverage
+        run: yarn test:ci
 
       - uses: codecov/codecov-action@v3
         with:

custom-words.txt

@@ -90,8 +90,10 @@ sonarjs
 svgr
 typedoc
 vite
+vitest
 vitejs
 wonka
+urql
 
 // identifiers used in code and configs
 acmerc
@@ -123,7 +125,6 @@ marko
 matchingbracket
 middlewares
 modulemap
-myschema
 newhope
 nocheck
 nocursor
@@ -152,11 +153,9 @@ streamable
 subword
 testid
 testonly
-typeof
 unfocus
 unnormalized
 unsubscribable
-urql
 vash
 websockets
 
@@ -221,3 +220,5 @@ typeahead
 typeaheads
 unparsable
 randomthing
+codicon
+edcore

examples/monaco-graphql-nextjs/src/constants.ts

@@ -1,4 +1,4 @@
-import { editor, Uri } from 'monaco-editor';
+import { editor, Uri } from 'monaco-graphql/esm/monaco-editor';
 import { initializeMode } from 'monaco-graphql/esm/initializeMode';
 
 type ModelType = 'operations' | 'variables' | 'response';

examples/monaco-graphql-nextjs/src/editor.tsx

@@ -1,6 +1,11 @@
 import { ReactElement, useEffect, useRef, useState } from 'react';
 import { getIntrospectionQuery, IntrospectionQuery } from 'graphql';
-import { editor, KeyMod, KeyCode, languages } from 'monaco-editor';
+import {
+  editor,
+  KeyMod,
+  KeyCode,
+  languages,
+} from 'monaco-graphql/esm/monaco-editor';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import * as JSONC from 'jsonc-parser';
 import {
@@ -69,16 +74,17 @@ languages.json.jsonDefaults.setDiagnosticsOptions({
   trailingCommas: 'ignore',
 });
 
-type CodeEditor = editor.IStandaloneCodeEditor | null;
-
 export default function Editor(): ReactElement {
   const operationsRef = useRef<HTMLDivElement>(null);
   const variablesRef = useRef<HTMLDivElement>(null);
   const responseRef = useRef<HTMLDivElement>(null);
-  const [operationsEditor, setOperationsEditor] = useState<CodeEditor>(null);
-  const [variablesEditor, setVariablesEditor] = useState<CodeEditor>(null);
-  const [responseEditor, setResponseEditor] = useState<CodeEditor>(null);
-  const [schema, setSchema] = useState<IntrospectionQuery | null>(null);
+  const [operationsEditor, setOperationsEditor] =
+    useState<editor.IStandaloneCodeEditor>();
+  const [variablesEditor, setVariablesEditor] =
+    useState<editor.IStandaloneCodeEditor>();
+  const [responseEditor, setResponseEditor] =
+    useState<editor.IStandaloneCodeEditor>();
+  const [schema, setSchema] = useState<IntrospectionQuery>();
   const [loading, setLoading] = useState(false);
   /**
    * Create the models & editors
@@ -137,7 +143,7 @@ export default function Editor(): ReactElement {
     setLoading(true);
     void getSchema().then(async introspectionJSON => {
       MONACO_GRAPHQL_API.setSchemaConfig([
-        { introspectionJSON, uri: 'myschema.graphql' },
+        { introspectionJSON, uri: 'my-schema.graphql' },
       ]);
       setSchema(introspectionJSON);
       setLoading(false);

examples/monaco-graphql-webpack/package.json

@@ -15,7 +15,7 @@
     "jsonc-parser": "3.2.0",
     "monaco-editor": "^0.36.0",
     "monaco-graphql": "^1.2.4",
-    "prettier": "^2.8.4"
+    "prettier": "3.0.0-alpha.12"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -24,7 +24,6 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@types/prettier": "^2.7.2",
     "@webpack-cli/serve": "^2.0.1",
     "babel-loader": "^9.1.2",
     "cross-env": "^7.0.2",

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

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor';
+import { editor, Uri } from 'monaco-graphql/esm/monaco-editor';
 
 const GRAPHQL_LANGUAGE_ID = 'graphql';
 
@@ -35,80 +35,68 @@ const schemaSdlString = localStorage.getItem('schema-sdl') ?? '';
 const THEME = 'vs-dark';
 
 export function createEditors() {
-  const variablesModel = monaco.editor.createModel(
+  const variablesModel = editor.createModel(
     variablesString,
     'json',
-    monaco.Uri.file('/1/variables.json'),
+    Uri.file('/1/variables.json'),
   );
 
-  const variablesEditor = monaco.editor.create(
-    document.getElementById('variables'),
-    {
-      model: variablesModel,
-      language: 'json',
-      formatOnPaste: true,
-      formatOnType: true,
-      theme: THEME,
-      comments: {
-        insertSpace: true,
-        ignoreEmptyLines: true,
-      },
+  const variablesEditor = editor.create(document.getElementById('variables'), {
+    model: variablesModel,
+    language: 'json',
+    formatOnPaste: true,
+    formatOnType: true,
+    theme: THEME,
+    comments: {
+      insertSpace: true,
+      ignoreEmptyLines: true,
     },
-  );
+  });
 
-  const operationModel = monaco.editor.createModel(
+  const operationModel = editor.createModel(
     operationString,
     GRAPHQL_LANGUAGE_ID,
-    monaco.Uri.file('/1/operation.graphql'),
+    Uri.file('/1/operation.graphql'),
   );
 
-  const operationEditor = monaco.editor.create(
-    document.getElementById('operation'),
-    {
-      model: operationModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      theme: THEME,
-      language: GRAPHQL_LANGUAGE_ID,
-    },
-  );
+  const operationEditor = editor.create(document.getElementById('operation'), {
+    model: operationModel,
+    formatOnPaste: true,
+    formatOnType: true,
+    folding: true,
+    theme: THEME,
+    language: GRAPHQL_LANGUAGE_ID,
+  });
 
-  const schemaModel = monaco.editor.createModel(
+  const schemaModel = editor.createModel(
     schemaSdlString,
     GRAPHQL_LANGUAGE_ID,
-    monaco.Uri.file('/1/schema.graphqls'),
+    Uri.file('/1/schema.graphqls'),
   );
 
-  const schemaEditor = monaco.editor.create(
-    document.getElementById('schema-sdl'),
-    {
-      model: schemaModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      theme: THEME,
-      language: GRAPHQL_LANGUAGE_ID,
-    },
-  );
+  const schemaEditor = editor.create(document.getElementById('schema-sdl'), {
+    model: schemaModel,
+    formatOnPaste: true,
+    formatOnType: true,
+    folding: true,
+    theme: THEME,
+    language: GRAPHQL_LANGUAGE_ID,
+  });
 
-  const resultsModel = monaco.editor.createModel(
+  const resultsModel = editor.createModel(
     resultsString,
     'json',
-    monaco.Uri.file('/1/results.json'),
+    Uri.file('/1/results.json'),
   );
 
-  const resultsEditor = monaco.editor.create(
-    document.getElementById('results'),
-    {
-      model: resultsModel,
-      language: 'json',
-      theme: THEME,
-      wordWrap: 'on',
-      readOnly: true,
-      showFoldingControls: 'always',
-    },
-  );
+  const resultsEditor = editor.create(document.getElementById('results'), {
+    model: resultsModel,
+    language: 'json',
+    theme: THEME,
+    wordWrap: 'on',
+    readOnly: true,
+    showFoldingControls: 'always',
+  });
 
   return {
     operationEditor,

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

@@ -1,6 +1,6 @@
 /* global netlify */
 
-import * as monaco from 'monaco-editor';
+import { editor, KeyMod, KeyCode } from 'monaco-graphql/esm/monaco-editor';
 import * as JSONC from 'jsonc-parser';
 import { initializeMode } from 'monaco-graphql/esm/initializeMode';
 
@@ -181,28 +181,28 @@ async function render() {
   /**
    * Add an editor operation to the command palette & keyboard shortcuts
    */
-  const opAction: monaco.editor.IActionDescriptor = {
+  const opAction: editor.IActionDescriptor = {
     id: 'graphql-run',
     label: 'Run Operation',
     contextMenuOrder: 0,
     contextMenuGroupId: 'graphql',
     keybindings: [
       // eslint-disable-next-line no-bitwise
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+      KeyMod.CtrlCmd | KeyCode.Enter,
     ],
     run: operationHandler,
   };
 
   /**
    * Add a reload operation to the command palette & keyboard shortcuts
    */
-  const reloadAction: monaco.editor.IActionDescriptor = {
+  const reloadAction: editor.IActionDescriptor = {
     id: 'graphql-reload',
     label: 'Reload Schema',
     contextMenuOrder: 0,
     contextMenuGroupId: 'graphql',
     keybindings: [
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode?.KeyR, // eslint-disable-line no-bitwise
+      KeyMod.CtrlCmd | KeyCode?.KeyR, // eslint-disable-line no-bitwise
     ],
     async run() {
       await schemaFetcher.loadSchema();

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

@@ -5,8 +5,8 @@ import {
   parse,
   buildASTSchema,
 } from 'graphql';
-import type { SchemaConfig } from 'monaco-graphql/src/typings';
-import { Uri } from 'monaco-editor';
+import type { SchemaConfig } from 'monaco-graphql';
+import { Uri } from 'monaco-graphql/esm/monaco-editor';
 
 const SCHEMA_URL = 'https://api.github.com/graphql';
 const API_TOKEN = localStorage.getItem('ghapi') || null;