[graphiql]: support react 19, drop support react 16 and react 17

.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` dependencies

.eslintrc.js

@@ -366,6 +366,7 @@ module.exports = {
       excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
       // extends: ['plugin:@typescript-eslint/recommended-type-checked'],
       rules: {
+        // '@typescript-eslint/no-redundant-type-constituents': 'error',
         '@typescript-eslint/prefer-optional-chain': 'error',
         '@typescript-eslint/no-unnecessary-type-assertion': 'error',
         '@typescript-eslint/no-floating-promises': 'error',
@@ -388,11 +389,10 @@ module.exports = {
         projectService: {
           allowDefaultProject: [
             'examples/monaco-graphql-react-vite/vite.config.ts',
-            'packages/*/vitest.config.mts',
-            'packages/*/vite.config.mts',
+            'packages/{graphiql,graphiql-plugin-explorer,graphiql-plugin-code-exporter}/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/cm6-graphql/__tests__/test.spec.ts',
-            'packages/graphiql-react/setup-files.ts',
             'packages/graphiql/src/GraphiQL.spec.tsx',
             'packages/vscode-graphql-syntax/tests/*.spec.ts',
             'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
@@ -483,15 +483,15 @@ module.exports = {
       },
     },
     {
-      // Rule prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
+      // Rule to prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
       files: ['packages/**'],
       excludedFiles: ['packages/graphiql/**', 'packages/graphiql-react/**'],
       rules: {
         'promise/prefer-await-to-then': 'error',
       },
     },
     {
-      files: ['packages/{graphiql-react,graphiql}/**'],
+      files: ['packages/{graphiql-react,graphiql}/**/*.{ts,tsx}'],
       rules: {
         '@typescript-eslint/no-restricted-imports': [
           'error',
@@ -502,6 +502,7 @@ module.exports = {
           },
         ],
         'react-hooks/react-compiler': 'error',
+        '@typescript-eslint/no-deprecated': 'error',
       },
     },
     {
@@ -529,6 +530,12 @@ module.exports = {
         'mdx/code-blocks': true,
       },
     },
+    {
+      files: ['**/*.d.ts'],
+      rules: {
+        'no-var': 'off',
+      },
+    },
     {
       // ❗ALWAYS LAST
       // Rules for codeblocks inside Markdown/MDX

examples/graphiql-create-react-app/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "graphiql": "^3.4.0",
     "graphql": "^16.9.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

examples/graphiql-parcel/package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "graphiql": "^2.2.0",
     "graphql": "^16.9.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "parcel": "^2.5.0",

examples/graphiql-webpack/package.json

@@ -16,7 +16,7 @@
     "graphiql": "^3.9.0",
     "graphql": "^16.9.0",
     "graphql-ws": "^5.5.5",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
@@ -29,7 +29,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "style-loader": "^3.3.1",
     "webpack": "5.94.0",
     "webpack-cli": "^5.0.1",

examples/monaco-graphql-nextjs/package.json

@@ -19,12 +19,12 @@
     "monaco-graphql": "^1.6.1",
     "next": "13.4.7",
     "prettier": "3.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@types/node": "^16.18.4",
-    "@types/react": "18.2.14",
+    "@types/react": "^19.1.2",
     "next-global-css": "1.3.1",
     "typescript": "^4.6.3"
   }

examples/monaco-graphql-react-vite/package.json

@@ -10,11 +10,11 @@
     "monaco-editor": "^0.39.0",
     "monaco-graphql": "^1.6.1",
     "prettier": "3.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "vite": "^5.4.18",
     "vite-plugin-monaco-editor": "^1.1.0"
   },

package.json

@@ -143,6 +143,8 @@
   "resolutions": {
     "@babel/traverse": "^7.23.2",
     "vscode-languageserver-types": "3.17.3",
-    "markdown-it": "14.1.0"
+    "markdown-it": "14.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   }
 }

packages/graphiql-plugin-code-exporter/package.json

@@ -35,16 +35,16 @@
   "peerDependencies": {
     "@graphiql/react": "^0.29.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@graphiql/react": "^0.29.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "postcss-nesting": "^10.1.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
     "vite": "^5.4.18"
   }

packages/graphiql-plugin-explorer/package.json

@@ -34,15 +34,15 @@
   "peerDependencies": {
     "@graphiql/react": "^0.29.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@graphiql/react": "^0.29.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
     "vite": "^5.4.18",
     "vite-plugin-svgr": "^4.2.0"

packages/graphiql-react/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@graphiql/react",
   "version": "0.29.0",
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
@@ -12,19 +15,17 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./types/index.d.ts"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./font/roboto.css": "./font/roboto.css",
     "./font/fira-code.css": "./font/fira-code.css",
     "./dist/style.css": "./dist/style.css"
   },
-  "types": "types/index.d.ts",
+  "types": "dist/index.d.ts",
   "keywords": [
     "react",
     "graphql",
@@ -33,56 +34,55 @@
   ],
   "files": [
     "dist",
-    "font",
-    "src",
-    "types"
+    "font"
   ],
   "scripts": {
-    "prebuild": "rimraf dist types",
-    "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
-    "build": "tsc --emitDeclarationOnly && vite build",
-    "test": "vitest"
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test": "vitest",
+    "types:check": "tsc --noEmit"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "react-compiler-runtime": "19.1.0-rc.1",
     "@graphiql/toolkit": "^0.11.2",
-    "@headlessui/react": "^1.7.15",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-tooltip": "^1.0.6",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "@headlessui/react": "^2.2",
+    "@radix-ui/react-dialog": "^1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1",
+    "@radix-ui/react-tooltip": "^1.2",
+    "@radix-ui/react-visually-hidden": "^1.2",
     "@types/codemirror": "^5.60.8",
     "clsx": "^1.2.1",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.2.1",
     "copy-to-clipboard": "^3.2.0",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^12",
     "get-value": "^3.0.1",
     "graphql-language-service": "^5.3.1",
     "markdown-it": "^14.1.0",
     "set-value": "^4.1.0"
   },
   "devDependencies": {
     "babel-plugin-react-compiler": "19.1.0-rc.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.1.2",
     "@babel/helper-string-parser": "^7.19.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/markdown-it": "^14.1.2",
     "@types/get-value": "^3.0.5",
     "@types/set-value": "^4.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "postcss-nesting": "^10.1.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^4.6.3",
-    "vite": "^5.4.18",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite": "^6.3.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-dts": "^4.5.3"
   }
 }

packages/graphiql-react/src/editor/common.ts

@@ -29,7 +29,7 @@ export async function importCodeMirror(
 ) {
   const CodeMirror = await import('codemirror').then(c =>
     // Depending on bundler and settings the dynamic import either returns a
-    // function (e.g. parcel) or an object containing a `default` property
+    // function (e.g., parcel) or an object containing a `default` property
     typeof c === 'function' ? c : c.default,
   );
   await Promise.all(

packages/graphiql-react/src/editor/context.tsx

@@ -211,7 +211,7 @@ export type EditorContextProviderProps = {
    * - Adding a tab
    * - Switching to a different tab
    * - Closing a tab
-   * @param tabState The tabs state after it has been updated.
+   * @param tabState The tab state after it has been updated.
    */
   onTabChange?(tabState: TabsState): void;
   /**
@@ -336,7 +336,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       storage?.set(PERSIST_HEADERS_STORAGE_KEY, persist.toString());
     };
 
-  const lastShouldPersistHeadersProp = useRef<boolean | undefined>();
+  const lastShouldPersistHeadersProp = useRef<boolean | undefined>(undefined);
   useEffect(() => {
     const propValue = Boolean(props.shouldPersistHeaders);
     if (lastShouldPersistHeadersProp?.current !== propValue) {

packages/graphiql-react/src/editor/query-editor.ts

@@ -11,7 +11,7 @@ import {
   GraphQLDocumentMode,
   OperationFacts,
 } from 'graphql-language-service';
-import { MutableRefObject, useEffect, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 
 import { useExecutionContext } from '../execution';
 import { useExplorerContext } from '../explorer';
@@ -149,7 +149,7 @@ export function useQueryEditor(
   const merge = useMergeQuery({ caller: caller || _useQueryEditor });
   const prettify = usePrettifyEditors({ caller: caller || _useQueryEditor });
   const ref = useRef<HTMLDivElement>(null);
-  const codeMirrorRef = useRef<CodeMirrorType>();
+  const codeMirrorRef = useRef<CodeMirrorType>(undefined);
 
   const onClickReferenceRef = useRef<
     NonNullable<UseQueryEditorArgs['onClickReference']>
@@ -474,7 +474,7 @@ export function useQueryEditor(
 function useSynchronizeSchema(
   editor: CodeMirrorEditor | null,
   schema: GraphQLSchema | null,
-  codeMirrorRef: MutableRefObject<CodeMirrorType | undefined>,
+  codeMirrorRef: RefObject<CodeMirrorType | undefined>,
 ) {
   useEffect(() => {
     if (!editor) {
@@ -493,7 +493,7 @@ function useSynchronizeSchema(
 function useSynchronizeValidationRules(
   editor: CodeMirrorEditor | null,
   validationRules: ValidationRule[] | null,
-  codeMirrorRef: MutableRefObject<CodeMirrorType | undefined>,
+  codeMirrorRef: RefObject<CodeMirrorType | undefined>,
 ) {
   useEffect(() => {
     if (!editor) {
@@ -512,7 +512,7 @@ function useSynchronizeValidationRules(
 function useSynchronizeExternalFragments(
   editor: CodeMirrorEditor | null,
   externalFragments: Map<string, FragmentDefinitionNode>,
-  codeMirrorRef: MutableRefObject<CodeMirrorType | undefined>,
+  codeMirrorRef: RefObject<CodeMirrorType | undefined>,
 ) {
   const externalFragmentList = [...externalFragments.values()]; // eslint-disable-line react-hooks/exhaustive-deps -- false positive, variable is optimized by react-compiler, no need to wrap with useMemo