GraphiQL 5

.changeset/beige-months-care.md

@@ -0,0 +1,14 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': major
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+'graphiql': major
+---
+
+- allow multiple independent instances of GraphiQL on the same page
+- store `onClickReference` in query editor in React `ref`
+- remove `onClickReference` from variable editor
+- fix shortcut text per OS for run query in execute query button's tooltip and in default query
+- allow override all default GraphiQL plugins
+- adjust operation argument color to be purple from GraphiQL v2 on dark/light theme

.changeset/chilly-sloths-heal.md

@@ -0,0 +1,26 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': patch
+'codemirror-graphql': patch
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+- replace `onCopyQuery` hook with `copyQuery` function
+- replace `onMergeQuery` hook with `mergeQuery` function
+- replace `onPrettifyEditors` hook with `prettifyEditors` function
+- remove `fetcher` prop from `SchemaContextProvider` and `schemaStore` and add `fetcher` to `executionStore`
+- add `onCopyQuery` and `onPrettifyQuery` props to `EditorContextProvider`
+- remove exports (use `GraphiQLProvider`)
+  - `EditorContextProvider`
+  - `ExecutionContextProvider`
+  - `PluginContextProvider`
+  - `SchemaContextProvider`
+  - `StorageContextProvider`
+  - `ExecutionContextType`
+  - `PluginContextType`
+- feat(@graphiql/react): migrate React context to zustand:
+  - replace `useExecutionContext` with `useExecutionStore` hook
+  - replace `useEditorContext` with `useEditorStore` hook
+- prefer `getComputedStyle` over `window.getComputedStyle`

.changeset/config.json

@@ -6,6 +6,7 @@
   "access": "public",
   "baseBranch": "main",
   "ignore": [
+    "example-graphiql-vite",
     "example-graphiql-webpack",
     "example-monaco-graphql-nextjs",
     "example-monaco-graphql-react-vite",

.changeset/dull-balloons-warn.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+update graphiql-cdn example to show how to load workers with esm.sh

.changeset/eleven-rings-complain.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': major
+'@graphiql/react': minor
+'graphiql': major
+---
+
+separate store actions from state, add `useGraphiQLActions` state

.changeset/fluffy-beers-build.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+push field type on stack too before field

.changeset/four-carrots-leave.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+Use an additional `Alt` key for focus doc explorer search input instead of `Cmd/Ctrl+K` because monaco-editor has a built-in shortcut for `Cmd/Ctrl+K`

.changeset/good-turtles-speak.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/plugin-code-exporter': major
+'@graphiql/plugin-explorer': major
+'graphiql': major
+---
+
+remove UMD builds

.changeset/gorgeous-lobsters-run.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': patch
+---
+
+- run cypress tests in React strict mode
+- fix `defaultQuery` with empty string does not result in an empty default query
+- fix `useDidUpdate` in React strict mode 

.changeset/honest-clouds-brush.md

@@ -0,0 +1,11 @@
+---
+'monaco-graphql': patch
+---
+
+remove unused types
+
+- `BaseSchemaConfig`
+- `IDisposable`
+- `JSONDiagnosticOptions`
+- `IEvent`
+- `FilePointer`

.changeset/kind-timers-exist.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+support `externalFragments` prop and remove `validationRules` prop

.changeset/many-ducks-visit.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+remove `readOnly` prop
+document `keyMap` prop was removed in migration guide

.changeset/nasty-pandas-taste.md

@@ -0,0 +1,7 @@
+---
+'graphiql': major
+---
+
+Remove examples: `GraphiQL x Parcel` and `GraphiQL x Create React App`
+
+Add new examples: `GraphiQL x Vite` and `GraphiQL x Next.js`

.changeset/orange-spies-poke.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+extract graphiql sidebar to react component

.changeset/pre.json

@@ -0,0 +1,48 @@
+{
+  "mode": "pre",
+  "tag": "rc",
+  "initialVersions": {
+    "example-graphiql-webpack": "0.0.0",
+    "example-monaco-graphql-nextjs": "0.0.0",
+    "example-monaco-graphql-react-vite": "0.0.0",
+    "example-monaco-graphql-webpack": "0.0.0",
+    "cm6-graphql": "0.2.1",
+    "codemirror-graphql": "2.2.1",
+    "graphiql": "4.1.1",
+    "@graphiql/plugin-code-exporter": "4.0.5",
+    "@graphiql/plugin-doc-explorer": "0.2.2",
+    "@graphiql/plugin-explorer": "4.0.6",
+    "@graphiql/plugin-history": "0.2.2",
+    "@graphiql/react": "0.34.1",
+    "@graphiql/toolkit": "0.11.3",
+    "graphql-language-service": "5.3.1",
+    "graphql-language-service-cli": "3.5.0",
+    "graphql-language-service-server": "2.14.8",
+    "monaco-graphql": "1.6.1",
+    "vscode-graphql": "0.13.2",
+    "vscode-graphql-execution": "0.3.2",
+    "vscode-graphql-syntax": "1.3.8",
+    "example-graphiql-nextjs": "0.0.0",
+    "example-graphiql-vite": "0.0.0"
+  },
+  "changesets": [
+    "beige-months-care",
+    "chilly-sloths-heal",
+    "dull-balloons-warn",
+    "eleven-rings-complain",
+    "fluffy-beers-build",
+    "four-carrots-leave",
+    "good-turtles-speak",
+    "honest-clouds-brush",
+    "kind-timers-exist",
+    "many-ducks-visit",
+    "nasty-pandas-taste",
+    "orange-spies-poke",
+    "shy-keys-rest",
+    "soft-cars-notice",
+    "sweet-lamps-love",
+    "ten-peas-carry",
+    "twelve-lies-invent",
+    "warm-shoes-boil"
+  ]
+}

.changeset/shy-keys-rest.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+show spinner in doc explorer based on `isIntrospecting` value, and not based on `isFetching`

.changeset/soft-cars-notice.md

@@ -0,0 +1,14 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': patch
+'@graphiql/react': minor
+'graphiql': major
+---
+
+Migration from Codemirror to [Monaco Editor](https://github.com/microsoft/monaco-editor)
+
+Replacing `codemirror-graphql` with [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)
+
+Support for comments in **Variables** and **Headers** editors

.changeset/sweet-lamps-love.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+---
+
+fix execute query shortcut in query editor, run it even there are no operations in query editor
+
+fix plugin store, save last opened plugin in storage

.changeset/ten-peas-carry.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+extract storage key constants

.changeset/twelve-lies-invent.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+---
+
+- add f1 command as first item in shortcut table
+- set color of `quickInputList.focusForeground` in command palette to be primary color

.changeset/warm-shoes-boil.md

@@ -0,0 +1,16 @@
+---
+'@graphiql/react': minor
+'@graphiql/plugin-history': minor
+'@graphiql/plugin-doc-explorer': minor
+'graphiql': patch
+---
+
+- remove `useQueryEditor`, `useVariableEditor`, `useHeaderEditor`, `useResponseEditor` hooks
+- remove `UseHeaderEditorArgs`, `UseQueryEditorArgs`, `UseResponseEditorArgs`, `UseVariableEditorArgs` exports
+- rename components
+  - `StorageContextProvider` => `StorageStore`
+  - `EditorContextProvider` => `EditorStore`
+  - `SchemaContextProvider` => `SchemaStore`
+  - `ExecutionContextProvider` => `ExecutionStore`
+  - `HistoryContextProvider` => `HistoryStore`
+  - `ExplorerContextProvider` => `ExplorerStore`

.eslintrc.js

@@ -32,8 +32,11 @@ module.exports = {
     'functions/*',
     'packages/vscode-graphql-syntax/tests/__fixtures__/*',
     // symlinks
+    'packages/graphiql-react/__mocks__/monaco-editor.ts',
     'packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts',
+    'packages/graphiql-plugin-doc-explorer/__mocks__/monaco-editor.ts',
     'packages/graphiql-plugin-history/__mocks__/zustand.ts',
+    'packages/graphiql-plugin-history/__mocks__/monaco-editor.ts',
   ],
   overrides: [
     {
@@ -142,6 +145,15 @@ module.exports = {
             property: 'navigator',
             message: 'Use `navigator` instead',
           },
+          {
+            object: 'window',
+            property: 'getComputedStyle',
+            message: 'Use `getComputedStyle` instead',
+          },
+          {
+            object: 'self',
+            message: 'Use `globalThis` instead',
+          },
         ],
         'no-return-assign': 'error',
         'no-return-await': 'error',
@@ -171,7 +183,7 @@ module.exports = {
         'init-declarations': 'off',
         'no-catch-shadow': 'error',
         'no-label-var': 'error',
-        'no-restricted-globals': 'off',
+        'no-restricted-globals': ['error', 'stop'],
         'no-shadow': 'off',
         '@typescript-eslint/no-shadow': 'error',
         'no-undef-init': 'off',
@@ -362,6 +374,7 @@ module.exports = {
         'unicorn/no-length-as-slice-end': 'error',
         'unicorn/prefer-string-replace-all': 'error',
         'unicorn/prefer-array-some': 'error',
+        // '@typescript-eslint/prefer-for-of': 'error', TODO
         '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',
@@ -374,6 +387,13 @@ module.exports = {
         'import-x/no-named-as-default-member': 'off',
       },
     },
+    {
+      files: ['packages/{monaco-graphql,graphiql*}/**/*.{ts,tsx,mts,cts}'],
+      excludedFiles: ['packages/graphiql-toolkit/**/*.{ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-unnecessary-condition': 'error',
+      },
+    },
     {
       // Rules that requires type information
       files: ['**/*.{ts,tsx,mts,cts}'],
@@ -388,6 +408,7 @@ module.exports = {
         '@typescript-eslint/consistent-type-assertions': 'error',
         '@typescript-eslint/no-duplicate-type-constituents': 'error',
         '@typescript-eslint/no-unnecessary-type-conversion': 'error',
+        // '@typescript-eslint/await-thenable': 'error', // TODO
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-deprecated': 'off',
         '@typescript-eslint/no-unsafe-function-type': 'off',
@@ -404,11 +425,10 @@ module.exports = {
         projectService: {
           allowDefaultProject: [
             'examples/monaco-graphql-react-vite/vite.config.ts',
-            'packages/graphiql/vite.config.mts',
-            'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax,graphiql}/vitest.config.mts',
+            'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax}/vitest.config.mts',
 
             'packages/cm6-graphql/__tests__/test.spec.ts',
-            'packages/graphiql/src/GraphiQL.spec.tsx',
+            'packages/graphiql/cypress.config.ts',
             'packages/vscode-graphql-syntax/tests/*.spec.ts',
             'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
             'packages/monaco-graphql/test/monaco-editor.test.ts',
@@ -565,6 +585,7 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
         'sonarjs/no-dead-store': 'off',
         '@typescript-eslint/no-restricted-imports': 'off',
+        '@typescript-eslint/no-unnecessary-condition': 'off',
       },
     },
   ],

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 
 on:
   push:
-    branches: [main]
+    branches: [main, graphiql-5]
 permissions: {}
 jobs:
   release:

.gitignore

@@ -46,11 +46,7 @@ packages/codemirror-graphql/*.d.ts
 packages/codemirror-graphql/*.map
 !packages/codemirror-graphql/*.config.js
 
-packages/graphiql/graphiql*.js
-packages/graphiql/*.css
-packages/graphiql/*.map
 packages/graphiql/cypress/screenshots/
+packages/graphiql/cypress/downloads/
 packages/graphiql/typedoc/
 packages/graphiql/webpack/
-
-packages/graphiql/cypress/downloads/

cspell.json

@@ -19,6 +19,7 @@
     "**/esbuild.js",
     ".eslintrc.js",
     ".vscode/extensions.json",
+    "packages/monaco-graphql/test/monaco-editor.test.ts",
     "working-group"
   ],
   "files": ["**/*.{js,cjs,mjs,ts,jsx,tsx,md,mdx,html,json,css,toml,yaml,yml}"]

docs/migration/graphiql-5.0.0.md

@@ -13,3 +13,8 @@
 - Added new examples: [**GraphiQL x Vite**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-vite) and [**GraphiQL x
   Next.js**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-nextjs)
 - Removed examples: **GraphiQL x Parcel** and **GraphiQL x Create React App**
+- UMD build is removed. Use the ESM-based CDN instead.
+- Removed props
+  - `keyMap`. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs
+  - `readOnly`
+  - `validationRules`. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.'