GraphiQL v4 (#3904)

* add some changes to create new branch

* [v3] update vite to v6 (#3828)

* upd

* rm postcss since it's included in vite

* prettier

* upd

* upd

* upd

* fix lint

* [graphiql]: support react 19, drop support react 16 and react 17 (#3897)

* upd

* upd

* upd

* upd

* upd

* exclude react-dom/client from bundle

* bump react everywhere to v19

* bump react everywhere to v19

* polish

* fix failing text, to unblock canary

* upd

* try `minor` for graphiql/react, otherwise it pines to `1.0.0-next.2` in esm.sh

* try workaround

* try workaround

* try workaround

* try workaround

* this should fix vitest

* try

* try

* lint

* try

* fix test

* try SOURCEMAP var

* try ESM_SH_BUILD var

* try

* rm some unneeded code

* try to fix esbuild: package 'uWebSockets.js' not found

* update vite to see if it fix esbuild error?

* bump module "@emotion/is-prop-valid" not found to fix `module "@emotion/is-prop-valid" not found` on esm.sh

* upd

* upd

* upd

* fix e2e

* add changeset

* add migration markdown file

* fix

* Update GraphiQL CDN example using ESM-based CDN esm.sh (#3902)

* upd

* upd

* upd

* upd

* upd

* exclude react-dom/client from bundle

* bump react everywhere to v19

* bump react everywhere to v19

* polish

* fix failing text, to unblock canary

* upd

* try `minor` for graphiql/react, otherwise it pines to `1.0.0-next.2` in esm.sh

* try workaround

* try workaround

* try workaround

* try workaround

* this should fix vitest

* try

* try

* lint

* try

* fix test

* try SOURCEMAP var

* try ESM_SH_BUILD var

* try

* rm some unneeded code

* try to fix esbuild: package 'uWebSockets.js' not found

* update vite to see if it fix esbuild error?

* bump module "@emotion/is-prop-valid" not found to fix `module "@emotion/is-prop-valid" not found` on esm.sh

* upd

* upd

* upd

* fix e2e

* add changeset

* add migration markdown file

* fix

* upd

* upd graphiql plugin explorer docs

* upd

* upd

* upd

* update code exporter

* upd

* upd

* upd

* upd

* upd

* upd

* polish

* add changeset

* new tabs look for graphiql v4 (#3685)

* changeset pre enter alpha

* [graphiql-react/graphiql] new looks of tabs (#3644)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* Update .changeset/thirty-spoons-call.md

* fix cypress

* this fix locally

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [2] GraphiQL x Vite v5 (#3679)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [3] remove unused webpack deps (#3681)

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [4] update graphql to `16.9.0` and use vite `define` configuration to remove development code from cdn bundle (#3683)

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* upd graphql

* aa

* yarn.lock

* fix tests

* remove `data-testid="graphiql-container"` (#3688)

* commit `pre.json` until `graphiql-v4` will be added to list of authorized branches to deploy

* remove `graphiql-v4` from release.yml

* [v4] remove `disableTabs` option (#3687)

* remove `disableTabs` option

* format

* commit `pre.json`

* add `graphiql-v4` in release.yml

* [v4] prefer `location` over `window.location` and prefer `navigator` over `window.navigator` (#3692)

* [v4] remove `build.sh` and `checkgit.sh` (#3694)

* [v4] test umd build only on ci, locally test cdn.ts (#3693)

* test umd build only on ci, locally test cdn.ts

* Update custom-words.txt

* [v4] convert graphiql e2e server to ESM (#3697)

* aa

* fix netlify

* fix

* fix fails on ci

* [v4] update changeset for changed exports (#3700)

* [v4] generate types with `vite-plugin-dts` (#3702)

* generate types with `vite-plugin-dts`

* add types:check in prebuild

* more

* more

* more

* update vite

* upd

* use terser

* [v4] use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them (#3705)

* [v4] remove graphiql default export (#3706)

* aa

* aa

* polish

* [v4] fix netlify deploy (#3708)

* fix netlify deploy

* fix cypress

* change `style.css` imports (#3709)

* Update poor-ghosts-jump.md

* Version Packages (alpha) (#3689)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] show tabs even there is only 1 tab (#3713)

* aa

* aa

* fix unit tests

* fix cypress

* [v4] Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props. (#3707)

* Version Packages (alpha) (#3714)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] use `position: absolute` for `.graphiql-logo` class (#3716)

* [v4] remove `createComponentGroup` utility in favour `Object.assign` (#3717)

* Version Packages (alpha) (#3718)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] fix merge conflicts with `main` (#3719)

* upgrade to graphql v17 including support for new incremental delivery format (#3682)

* add support for new incremental delivery format

* fix vitest

* add patch for graphql-js bug

submittes upstream with test at graphql/graphql-js#4160

* apply feedback

* move patches!

* some fixes

* fix netlify/cypress

* remove export

* update changeset

---------

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Version Packages (#3715)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* prettier

* fix e2e

* update pr-graphql-compat-check.yml

* prettier

---------

Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] fix scrollbar appearing in sidebar (#3720)

* replace `overflow-y: scroll` with `overflow-y: auto`

* fix netlify graphql function

* Version Packages (alpha) (#3723)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* style: Don't convert single \n to <br> (#3414)

* Update development instructions

* Don't convert single \n to <br>

* Add changeset

* Update .changeset/olive-mice-hide.md

---------

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* [v4] some refactoring (#3726)

* some refactoring

* use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`

* more

* try to fix

* fix join is not defined

* Update packages/graphiql/cypress/e2e/incremental-delivery.cy.ts

Co-authored-by: Ted Thibodeau Jr <[email protected]>

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* [v4] polish `tabs.cy` tests, remove `.graphiql-session` class (#3728)

* aa

* aa

* aa

* aa

* fix tests

* [v4] rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo (#3730)

* Version Packages (alpha) (#3725)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Add support for onPrettifyQuery callback to enable customised query formatting (#3733)

* aa

* prettifyyy

* Version Packages (alpha) (#3732)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* [v4] improve explorer styles (#3738)

* improve explorer styles

* aa

* Version Packages (alpha) (#3739)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix types incorrect types entry (#3740)

* Version Packages (alpha) (#3741)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* add vite replace html plugin for graphiql plugin explorer (#3742)

* add vite replace html plugin for graphiql plugin explorer

* fix build

* temp

* migrate `@graphiql/toolkit` to `tsup` (#3746)

* aa

* removes unneeded `undefined`

* try

* fix

* fix vitest

* rollback of `temp` commit

* update lock

* merge

* Update .changeset/rich-jobs-kick.md

* polish

* lint

* Update .changeset/good-vans-refuse.md

* update migration guide

* update migration guide

* upd

* upd

* fix

* make on prettify query async

* use maybe promise from toolkit

* upd

* message processor test pass

* fix e2e

* try

* FIX e2e

* try

* ok now it's good

* I hope now it's ok!

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Leonard Ehrenfried <[email protected]>

* GraphiQL v4: exit changeset alpha (#3907)

* exit changeset

* polish migration guide

* bump version

* bump version

* upd

* Update graphiql-4.0.0.md

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yaacov Rydzinski <[email protected]>
Co-authored-by: Leonard Ehrenfried <[email protected]>

Author: 6 people

.changeset/add-on-prettify-callback.md

@@ -0,0 +1,6 @@
+---
+"@graphiql/react": minor
+"graphiql": minor
+---
+
+Add support for `onPrettifyQuery` callback to enable customised query formatting

.changeset/breezy-chicken-crash.md

@@ -0,0 +1,12 @@
+---
+'@graphiql/plugin-code-exporter': major
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/plugin-code-exporter/dist/style.css';
++import '@graphiql/plugin-code-exporter/style.css';
+```

.changeset/chatty-spoons-accept.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-code-exporter': minor
+'@graphiql/plugin-explorer': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+Update GraphiQL CDN example using ESM-based CDN esm.sh

.changeset/clean-lamps-bow.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-code-exporter': major
+'@graphiql/plugin-explorer': major
+'@graphiql/react': minor
+'graphiql': major
+---
+
+drop commonjs build files

.changeset/few-steaks-clap.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+show tabs even there is only 1 tab

.changeset/flat-lies-heal.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+'@graphiql/plugin-explorer': minor
+'@graphiql/plugin-code-exporter': minor
+---
+
+generate types with `vite-plugin-dts`

.changeset/gentle-bugs-mix.md

@@ -0,0 +1,19 @@
+---
+'graphiql': major
+---
+
+remove default export
+
+## Migration
+
+### Before
+
+```jsx
+import GraphiQL from 'graphiql'
+```
+
+### After
+
+```jsx
+import { GraphiQL } from 'graphiql'
+```

.changeset/gold-cooks-design.md

@@ -0,0 +1,10 @@
+---
+'@graphiql/plugin-code-exporter': major
+'@graphiql/plugin-explorer': major
+'@graphiql/react': minor
+'graphiql': major
+---
+
+- support react 19, drop support react 16 and react 17
+- replace deprecated `ReactDOM.unmountComponentAtNode()` and `ReactDOM.render()` with `root.unmount()` and `createRoot(container).render()`
+- update `@radix-ui` and `@headlessui/react` dependencies

.changeset/good-vans-refuse.md

@@ -0,0 +1,12 @@
+---
+'@graphiql/react': minor
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/react/dist/style.css';
++import '@graphiql/react/style.css';
+```

.changeset/green-pugs-worry.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+remove `disableTabs` option

.changeset/healthy-onions-bake.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-explorer': patch
+---
+
+improve explorer styles

.changeset/hungry-spiders-cheat.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+remove `data-testid="graphiql-container"`

.changeset/late-trains-train.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-code-exporter': minor
+'@graphiql/plugin-explorer': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+update `vite` and related dependencies

.changeset/metal-glasses-bow.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+update graphql to `16.9.0` and use vite `define` configuration to remove development code from cdn bundle

.changeset/nine-meals-happen.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-explorer': patch
+---
+
+fix types incorrect types entry

.changeset/old-zebras-knock.md

@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+remove `.graphiql-session` class

.changeset/olive-mice-hide.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Respect Markdown format: ignore single newline

.changeset/orange-rivers-draw.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them
+
+do not use `vite-plugin-dts` when generating umd build 

.changeset/pink-moose-shake.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+use `position: absolute` for `.graphiql-logo` class

.changeset/poor-ghosts-jump.md

@@ -0,0 +1,13 @@
+---
+'@graphiql/plugin-explorer': major
+---
+
+`style.css` import was changed
+
+## Migration
+
+```diff
+-import '@graphiql/plugin-explorer/dist/style.css';
++import '@graphiql/plugin-explorer/style.css';
+```
+

.changeset/pre.json

@@ -0,0 +1,51 @@
+{
+  "mode": "exit",
+  "tag": "alpha",
+  "initialVersions": {
+    "cm6-graphql": "0.0.15",
+    "codemirror-graphql": "2.0.13",
+    "graphiql": "3.4.0",
+    "@graphiql/plugin-code-exporter": "3.0.5",
+    "@graphiql/plugin-explorer": "3.1.1",
+    "@graphiql/react": "0.23.0",
+    "@graphiql/toolkit": "0.9.2",
+    "graphql-language-service": "5.2.2",
+    "graphql-language-service-cli": "3.4.2",
+    "graphql-language-service-server": "2.13.2",
+    "monaco-graphql": "1.5.3",
+    "vscode-graphql": "0.11.2",
+    "vscode-graphql-execution": "0.2.6",
+    "vscode-graphql-syntax": "1.3.6",
+    "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"
+  },
+  "changesets": [
+    "add-on-prettify-callback",
+    "breezy-chicken-crash",
+    "few-steaks-clap",
+    "flat-lies-heal",
+    "gentle-bugs-mix",
+    "good-vans-refuse",
+    "green-pugs-worry",
+    "healthy-onions-bake",
+    "hungry-spiders-cheat",
+    "metal-glasses-bow",
+    "nine-meals-happen",
+    "old-zebras-knock",
+    "olive-mice-hide",
+    "orange-rivers-draw",
+    "pink-moose-shake",
+    "poor-ghosts-jump",
+    "red-papayas-fly",
+    "rich-jobs-kick",
+    "serious-forks-sip",
+    "spotty-bulldogs-confess",
+    "strong-ears-bake",
+    "thick-adults-leave",
+    "thirty-spoons-call",
+    "weak-dancers-jog",
+    "wicked-seas-laugh"
+  ]
+}

.changeset/red-papayas-fly.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+replace `overflow-y: scroll` with `overflow-y: auto`

.changeset/rich-jobs-kick.md

@@ -0,0 +1,21 @@
+---
+'graphiql': major
+---
+
+changed exports
+
+```diff
+-graphiql/graphiql.css
++graphiql/style.css
+```
+
+changed cdn paths, `dist/index.umd.js` and `dist/style.css` are minified
+
+```diff
+-https://unpkg.com/graphiql/graphiql.js
+-https://unpkg.com/graphiql/graphiql.min.js
++https://unpkg.com/graphiql/dist/index.umd.js
+-https://unpkg.com/graphiql/graphiql.css
+-https://unpkg.com/graphiql/graphiql.min.css
++https://unpkg.com/graphiql/dist/style.css
+```

.changeset/serious-forks-sip.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo

.changeset/spotty-bulldogs-confess.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+- prefer `location` over `window.location`
+- prefer `navigator` over `window.navigator`

.changeset/strong-ears-bake.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`

.changeset/thick-adults-leave.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+remove `createComponentGroup` utility in favour `Object.assign`

.changeset/thirty-spoons-call.md

@@ -0,0 +1,8 @@
+---
+"graphiql": major
+"@graphiql/react": minor
+---
+
+- new looks of tabs
+
+- fix `disableTabs` when `Add tab` button is still shown 

.changeset/weak-dancers-jog.md

@@ -0,0 +1,79 @@
+---
+'graphiql': major
+---
+
+Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props.
+
+## Migration from `toolbar.additionalContent`
+
+### Before
+
+```jsx
+<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
+```
+
+### After
+
+```jsx
+<GraphiQL>
+  <GraphiQL.Toolbar>
+    {({ merge, prettify, copy }) => (
+      <>
+        {prettify}
+        {merge}
+        {copy}
+        <button>My button</button>
+      </>
+    )}
+  </GraphiQL.Toolbar>
+</GraphiQL>
+```
+
+## Migration from `toolbar.additionalComponent`
+
+### Before
+
+```jsx
+<GraphiQL
+  toolbar={{
+    additionalComponent: function MyComponentWithAccessToContext() {
+      return <button>My button</button>;
+    },
+  }}
+/>
+```
+
+### After
+
+```jsx
+<GraphiQL>
+  <GraphiQL.Toolbar>
+    {({ merge, prettify, copy }) => (
+      <>
+        {prettify}
+        {merge}
+        {copy}
+        <MyComponentWithAccessToContext />
+      </>
+    )}
+  </GraphiQL.Toolbar>
+</GraphiQL>
+```
+
+---
+
+Additionally, you can sort default toolbar buttons in different order or remove unneeded buttons for you:
+
+```jsx
+<GraphiQL>
+  <GraphiQL.Toolbar>
+    {({ prettify, copy }) => (
+      <>
+        {copy /* Copy button will be first instead of default last */}
+        {/* Merge button is removed from toolbar */}
+        {prettify}
+      </>
+    )}
+  </GraphiQL.Toolbar>
+</GraphiQL>
+```

.changeset/wicked-seas-laugh.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+replace `Tooltip`s in tabs with html `title="..."` attribute