[v3] migrate graphiql to vite and react compiler (#3826)

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* [skip ci]

* fix

* migrate `graphiql` from `jest` to `vitest`

* add .js extension

* add .js extension

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* add

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* clean up deps

* clean up deps

* clean up deps

* clean up deps

* clean up deps

* upd

* upd

* more changes from graphiql v4

* more

* fix path isn't exported

* fix integration tests

* fix e2e

* bump

* add changeset

* remove unneeded beforeDevServer.js

* found case which was not optimized

* Delete .changeset/sour-onions-rhyme.md

* Delete .changeset/silly-nails-double.md

* polish graphiql tests setup

* polish graphiql tests setup

* should be good

* prettier

* upd

* remove `vite-plugin-commonjs`

* remove react compiler patch, and use 19.1.0-rc.1 version

* remove react compiler patch, and use 19.1.0-rc.1 version

* lock update

* use requestAnimationFrame instead of setTimeout

* use requestAnimationFrame instead of setTimeout

* Update packages/graphiql-react/src/editor/hooks.ts

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

* upd

* fix cypress failing test

---------

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

Author: dimaMachina

.changeset/dull-toys-cross.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+- remove react compiler custom patch
+- update `react-compiler-runtime` to use `19.1.0-rc.1` version

.changeset/stupid-lamps-search.md

@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+migrate `graphiql` to `vite` and `react compiler`

.eslintrc.js

@@ -57,7 +57,7 @@ module.exports = {
         'plugin:import-x/recommended',
         'plugin:import-x/typescript',
         'plugin:react/recommended',
-        'plugin:react-hooks/recommended',
+        'plugin:react-hooks/recommended-legacy',
         'plugin:react/jsx-runtime',
         'prettier',
       ],
@@ -462,8 +462,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/graphiql-react/**'],
-      plugins: ['react-compiler'],
+      files: ['packages/{graphiql-react,graphiql}/**'],
       rules: {
         '@typescript-eslint/no-restricted-imports': [
           'error',
@@ -473,7 +472,7 @@ module.exports = {
             importNames: ['memo', 'useCallback', 'useMemo'],
           },
         ],
-        'react-compiler/react-compiler': 'error',
+        'react-hooks/react-compiler': 'error',
       },
     },
     {

.gitignore

@@ -41,12 +41,10 @@ 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/typedoc/
-packages/graphiql/webpack/
+
+packages/graphiql/cypress/downloads/

examples/monaco-graphql-webpack/package.json

@@ -30,11 +30,13 @@
     "cross-env": "^7.0.2",
     "css-loader": "^6.7.3",
     "file-loader": "6.2.0",
+    "fork-ts-checker-webpack-plugin": "7.3.0",
     "html-webpack-plugin": "^5.5.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "style-loader": "^3.3.1",
     "typescript": "^4.6.3",
     "webpack": "5.76.0",
+    "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }

package.json

@@ -33,7 +33,7 @@
   "scripts": {
     "build": "yarn build-clean && yarn tsc && yarn build:nontsc",
     "build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",
-    "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql build-bundles-clean",
+    "build-bundles-clean": "rimraf '{packages,examples}/**/{bundle,cdn,webpack}'",
     "build-clean": "yarn tsc --clean",
     "build-docs": "rimraf packages/graphiql/typedoc && typedoc packages",
     "build:nontsc": "yarn wsrun:noexamples --exclude-missing --serial build",
@@ -46,8 +46,7 @@
     "check": "yarn tsc --noEmit",
     "cypress-open": "yarn workspace graphiql cypress-open",
     "dev-graphiql": "yarn workspace graphiql dev",
-    "e2e": "yarn run e2e:build && yarn workspace graphiql e2e",
-    "e2e:build": "WEBPACK_SERVE=1 yarn workspace graphiql build-bundles",
+    "e2e": "yarn workspace graphiql e2e",
     "eslint": "NODE_OPTIONS=--max-old-space-size=4096 ESLINT_USE_FLAT_CONFIG=false eslint --max-warnings=0 --ignore-path .gitignore --cache .",
     "format": "yarn eslint --fix && yarn pretty",
     "jest": "jest",
@@ -78,7 +77,6 @@
     "gen-agenda": "wgutils agenda gen"
   },
   "dependencies": {
-    "eslint-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
     "graphql-http": "^1.22.1",
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.0",
@@ -106,24 +104,26 @@
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "babel-jest": "^29.4.3",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "concurrently": "^7.0.0",
     "copy": "^0.3.2",
     "cspell": "^5.15.2",
     "eslint": "9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-cypress": "^3.4.0",
+    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import-x": "^3.1.0",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-promise": "^7.0.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "eslint-plugin-sonar": "^0.14.1",
     "eslint-plugin-sonarjs": "^1.0.4",
     "eslint-plugin-unicorn": "^55.0.0",
     "execa": "^7.1.1",
+    "identity-obj-proxy": "^3.0.0",
     "fetch-mock": "6.5.2",
     "husky": "^4.2.3",
     "jest": "^27.5.1",

packages/graphiql-plugin-explorer/CHANGELOG.md

@@ -312,7 +312,7 @@
 
 ### Patch Changes
 
-- [#3124](https://github.com/graphql/graphiql/pull/3124) [`c645932c`](https://github.com/graphql/graphiql/commit/c645932c7973e11ad917e1d1d897fd409f8c042f) Thanks [@B2o5T](https://github.com/B2o5T)! - avoid unecessary renders by using useMemo or useCallback
+- [#3124](https://github.com/graphql/graphiql/pull/3124) [`c645932c`](https://github.com/graphql/graphiql/commit/c645932c7973e11ad917e1d1d897fd409f8c042f) Thanks [@B2o5T](https://github.com/B2o5T)! - avoid unnecessary renders by using useMemo or useCallback
 
 - Updated dependencies [[`911cf3e0`](https://github.com/graphql/graphiql/commit/911cf3e0b0fa13268245463c8db8299279e5c461), [`c645932c`](https://github.com/graphql/graphiql/commit/c645932c7973e11ad917e1d1d897fd409f8c042f), [`2ca4841b`](https://github.com/graphql/graphiql/commit/2ca4841baf74e87a3f067b3415f8da3347ee3898), [`7bf90929`](https://github.com/graphql/graphiql/commit/7bf90929f62ba812c0946e0424f9f843f7b6b0ff), [`431b7fe1`](https://github.com/graphql/graphiql/commit/431b7fe1efefa4867f0ea617adc436b1117052e8)]:
   - @graphiql/react@0.17.6

packages/graphiql-react/CHANGELOG.md

@@ -311,7 +311,7 @@
 
 - [#3194](https://github.com/graphql/graphiql/pull/3194) [`911cf3e0`](https://github.com/graphql/graphiql/commit/911cf3e0b0fa13268245463c8db8299279e5c461) Thanks [@dwwoelfel](https://github.com/dwwoelfel)! - fix tab content getting replaced on `changeTab`
 
-- [#3124](https://github.com/graphql/graphiql/pull/3124) [`c645932c`](https://github.com/graphql/graphiql/commit/c645932c7973e11ad917e1d1d897fd409f8c042f) Thanks [@B2o5T](https://github.com/B2o5T)! - avoid unecessary renders by using useMemo or useCallback
+- [#3124](https://github.com/graphql/graphiql/pull/3124) [`c645932c`](https://github.com/graphql/graphiql/commit/c645932c7973e11ad917e1d1d897fd409f8c042f) Thanks [@B2o5T](https://github.com/B2o5T)! - avoid unnecessary renders by using useMemo or useCallback
 
 - [#3197](https://github.com/graphql/graphiql/pull/3197) [`2ca4841b`](https://github.com/graphql/graphiql/commit/2ca4841baf74e87a3f067b3415f8da3347ee3898) Thanks [@B2o5T](https://github.com/B2o5T)! - remove confusing ligatures, set `font-variant-ligatures: none`
 

packages/graphiql-react/package.json

@@ -49,7 +49,7 @@
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "dependencies": {
-    "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "@graphiql/toolkit": "^0.11.0",
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -68,7 +68,7 @@
     "set-value": "^4.1.0"
   },
   "devDependencies": {
-    "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
     "@types/react-dom": "^18.3.1",
     "@babel/helper-string-parser": "^7.19.4",
     "@testing-library/dom": "^10.4.0",

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

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { importCodeMirror } from '../common';
 
 describe('importCodeMirror', () => {