GraphiQL v4

.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/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/good-vans-refuse.md

@@ -0,0 +1,12 @@
+---
+'@graphiql/react': major
+---
+
+`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/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": "pre",
+  "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,23 @@
+---
+'graphiql': major
+---
+
+migrate from `webpack` to `vite`
+
+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

.eslintrc.js

@@ -129,6 +129,16 @@ module.exports = {
             property: 'localStorage',
             message: 'Use `localStorage` instead',
           },
+          {
+            object: 'window',
+            property: 'location',
+            message: 'Use `location` instead',
+          },
+          {
+            object: 'window',
+            property: 'navigator',
+            message: 'Use `navigator` instead',
+          },
         ],
         'no-return-assign': 'error',
         'no-return-await': 'error',

.github/workflows/pr-graphql-compat-check.yml

@@ -4,8 +4,7 @@ on:
     # only on merge to main.
     # it's rare that this workflow would
     # show us an error, but when it does it's important!
-    branches:
-      - main
+    branches: [main, graphiql-v4]
     # don't run this regression suite if we don't need to
     paths-ignore:
       - '**.md'

.gitignore

@@ -41,12 +41,7 @@ packages/codemirror-graphql/*.d.ts
 packages/codemirror-graphql/*.map
 !packages/codemirror-graphql/*.config.js
 
-packages/graphiql/index.html
-packages/graphiql/dev.html
-packages/graphiql/analyzer.html
-packages/graphiql/graphiql*.js
-packages/graphiql/*.css
-packages/graphiql/*.map
 packages/graphiql/cypress/screenshots/
+packages/graphiql/cypress/videos/
 packages/graphiql/typedoc/
 packages/graphiql/webpack/

examples/cm6-graphql-legacy-parcel/package.json

@@ -25,7 +25,7 @@
     "@codemirror/basic-setup": "^0.20.0",
     "@codemirror/language": "^0.20.0",
     "codemirror-graphql": "^2.0.2",
-    "graphql": "^16.8.1"
+    "graphql": "^16.9.0"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.4",