Skip to content

Commit d1db4c7

Browse files
dimaMachinadimaMachina
authored
[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
1 parent 0b434a9 commit d1db4c7

File tree

32 files changed

+675
-779
lines changed

32 files changed

+675
-779
lines changed

‎.changeset/clean-lamps-bow.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@graphiql/plugin-code-exporter': major
3+
'@graphiql/plugin-explorer': major
4+
'@graphiql/react': minor
5+
'graphiql': major
6+
---
7+
8+
drop commonjs build files

‎.changeset/gold-cooks-design.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@graphiql/plugin-code-exporter': major
3+
'@graphiql/plugin-explorer': major
4+
'@graphiql/react': minor
5+
'graphiql': major
6+
---
7+
8+
- support react 19, drop support react 16 and react 17
9+
- replace deprecated `ReactDOM.unmountComponentAtNode()` and `ReactDOM.render()` with `root.unmount()` and `createRoot(container).render()`
10+
- update `@radix-ui` and `@headlessui/react` dependencies

‎.eslintrc.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,7 @@ module.exports = {
366366
excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
367367
// extends: ['plugin:@typescript-eslint/recommended-type-checked'],
368368
rules: {
369+
// '@typescript-eslint/no-redundant-type-constituents': 'error',
369370
'@typescript-eslint/prefer-optional-chain': 'error',
370371
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
371372
'@typescript-eslint/no-floating-promises': 'error',
@@ -388,11 +389,10 @@ module.exports = {
388389
projectService: {
389390
allowDefaultProject: [
390391
'examples/monaco-graphql-react-vite/vite.config.ts',
391-
'packages/*/vitest.config.mts',
392-
'packages/*/vite.config.mts',
392+
'packages/{graphiql,graphiql-plugin-explorer,graphiql-plugin-code-exporter}/vite.config.mts',
393+
'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax,graphiql}/vitest.config.mts',
393394

394395
'packages/cm6-graphql/__tests__/test.spec.ts',
395-
'packages/graphiql-react/setup-files.ts',
396396
'packages/graphiql/src/GraphiQL.spec.tsx',
397397
'packages/vscode-graphql-syntax/tests/*.spec.ts',
398398
'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
@@ -483,15 +483,15 @@ module.exports = {
483483
},
484484
},
485485
{
486-
// Rule prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
486+
// Rule to prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
487487
files: ['packages/**'],
488488
excludedFiles: ['packages/graphiql/**', 'packages/graphiql-react/**'],
489489
rules: {
490490
'promise/prefer-await-to-then': 'error',
491491
},
492492
},
493493
{
494-
files: ['packages/{graphiql-react,graphiql}/**'],
494+
files: ['packages/{graphiql-react,graphiql}/**/*.{ts,tsx}'],
495495
rules: {
496496
'@typescript-eslint/no-restricted-imports': [
497497
'error',
@@ -502,6 +502,7 @@ module.exports = {
502502
},
503503
],
504504
'react-hooks/react-compiler': 'error',
505+
'@typescript-eslint/no-deprecated': 'error',
505506
},
506507
},
507508
{
@@ -529,6 +530,12 @@ module.exports = {
529530
'mdx/code-blocks': true,
530531
},
531532
},
533+
{
534+
files: ['**/*.d.ts'],
535+
rules: {
536+
'no-var': 'off',
537+
},
538+
},
532539
{
533540
// ❗ALWAYS LAST
534541
// Rules for codeblocks inside Markdown/MDX

‎docs/migration/graphiql-4.0.0.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Upgrading `graphiql` from `3.x` to `4.0.0`
2+
3+
## `graphiql` changes
4+
5+
- Drop CommonJS build output
6+
- Drop support React 16/17
7+
- Support React 19
8+
9+
## `@graphiql/react` changes
10+
11+
- Drop CommonJS build output
12+
- Drop support React 16/17
13+
- Support React 19
14+
- Update `@radix-ui` and `@headlessui/react` dependencies
15+
16+
## `@graphiql/plugin-code-exporter` changes
17+
18+
- Drop CommonJS build output
19+
- Drop support React 16/17
20+
- Support React 19
21+
22+
## `@graphiql/plugin-explorer` changes
23+
24+
- Drop CommonJS build output
25+
- Drop support React 16/17
26+
- Support React 19

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"graphiql": "^3.4.0",
77
"graphql": "^16.9.0",
8-
"react": "^18.3.1",
9-
"react-dom": "^18.3.1",
8+
"react": "^19.1.0",
9+
"react-dom": "^19.1.0",
1010
"react-scripts": "5.0.1"
1111
},
1212
"scripts": {

‎examples/graphiql-parcel/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"dependencies": {
2525
"graphiql": "^2.2.0",
2626
"graphql": "^16.9.0",
27-
"react": "^18.2.0",
28-
"react-dom": "^18.2.0"
27+
"react": "^19.1.0",
28+
"react-dom": "^19.1.0"
2929
},
3030
"devDependencies": {
3131
"parcel": "^2.5.0",

‎examples/graphiql-webpack/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"graphiql": "^3.9.0",
1717
"graphql": "^16.9.0",
1818
"graphql-ws": "^5.5.5",
19-
"react": "^18.2.0",
19+
"react": "^19.1.0",
2020
"regenerator-runtime": "^0.13.9"
2121
},
2222
"devDependencies": {
@@ -29,7 +29,7 @@
2929
"cross-env": "^7.0.2",
3030
"css-loader": "^6.7.3",
3131
"html-webpack-plugin": "^5.5.0",
32-
"react-dom": "^18.2.0",
32+
"react-dom": "^19.1.0",
3333
"style-loader": "^3.3.1",
3434
"webpack": "5.94.0",
3535
"webpack-cli": "^5.0.1",

‎examples/monaco-graphql-nextjs/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
"monaco-graphql": "^1.6.1",
2020
"next": "13.4.7",
2121
"prettier": "3.3.2",
22-
"react": "^18.2.0",
23-
"react-dom": "^18.2.0"
22+
"react": "^19.1.0",
23+
"react-dom": "^19.1.0"
2424
},
2525
"devDependencies": {
2626
"@types/node": "^16.18.4",
27-
"@types/react": "18.2.14",
27+
"@types/react": "^19.1.2",
2828
"next-global-css": "1.3.1",
2929
"typescript": "^4.6.3"
3030
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
"monaco-editor": "^0.39.0",
1111
"monaco-graphql": "^1.6.1",
1212
"prettier": "3.3.2",
13-
"react": "^18.2.0",
14-
"react-dom": "^18.2.0"
13+
"react": "^19.1.0",
14+
"react-dom": "^19.1.0"
1515
},
1616
"devDependencies": {
17-
"@vitejs/plugin-react": "^4.3.1",
17+
"@vitejs/plugin-react": "^4.4.1",
1818
"vite": "^5.4.18",
1919
"vite-plugin-monaco-editor": "^1.1.0"
2020
},

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,8 @@
143143
"resolutions": {
144144
"@babel/traverse": "^7.23.2",
145145
"vscode-languageserver-types": "3.17.3",
146-
"markdown-it": "14.1.0"
146+
"markdown-it": "14.1.0",
147+
"react": "18.3.1",
148+
"react-dom": "18.3.1"
147149
}
148150
}

0 commit comments

Comments
 (0)