[v3] migrate graphiql to vite and react compiler

.changeset/stupid-lamps-search.md

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

.eslintrc.js

@@ -462,7 +462,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/graphiql-react/**'],
+      files: ['packages/{graphiql-react,graphiql}/**'],
       plugins: ['react-compiler'],
       rules: {
         '@typescript-eslint/no-restricted-imports': [

.gitignore

@@ -41,12 +41,8 @@ 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/

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",
@@ -106,14 +105,15 @@
     "@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",
@@ -124,6 +124,7 @@
     "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

@@ -306,7 +306,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/[email protected]

packages/graphiql-react/CHANGELOG.md

@@ -299,7 +299,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/CHANGELOG.md

@@ -309,7 +309,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/[email protected]

packages/graphiql/__mocks__/codemirror.ts

@@ -1,3 +1,6 @@
+// @ts-nocheck
+'use no memo';
+
 function CodeMirror(node: HTMLElement, { value, ...options }) {
   let _eventListeners = {};
   const mockWrapper = document.createElement('div');

packages/graphiql/cypress.config.ts

@@ -1,8 +1,10 @@
 import { defineConfig } from 'cypress';
 
+const PORT = process.env.CI === 'true' ? 8080 : 5173;
+
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:8080',
+    baseUrl: `http://localhost:${PORT}`,
   },
   video: false,
   viewportWidth: 1920,

packages/graphiql/cypress/e2e/init.cy.ts

@@ -15,7 +15,7 @@ const mockSuccess = {
   data: {
     longDescriptionType: {
       id: 'abc123',
-      image: '/images/logo.svg',
+      image: '/resources/logo.svg',
       hasArgs: '{"defaultValue":"test default value"}',
       test: {
         id: 'abc123',

packages/graphiql/cypress/e2e/tabs.cy.ts

@@ -61,7 +61,7 @@ describe('Tabs', () => {
       query: 'query Foo {image}',
       variablesString: '{"someVar":42}',
       headersString: '{"someHeader":"someValue"}',
-      response: { data: { image: '/images/logo.svg' } },
+      response: { data: { image: '/resources/logo.svg' } },
     });
 
     // Close tab

packages/graphiql/cypress/plugins/index.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error -- fixme
 export default (on, config) => {
   return config;
 };

packages/graphiql/cypress/support/commands.ts

@@ -49,22 +49,27 @@ declare namespace Cypress {
   }
 }
 
+// @ts-expect-error -- fixme
 Cypress.Commands.add('dataCy', value => {
   return cy.get(`[data-cy="${value}"]`);
 });
 
+// @ts-expect-error -- fixme
 Cypress.Commands.add('clickExecuteQuery', () => {
   return cy.get('.graphiql-execute-button').click();
 });
 
+// @ts-expect-error -- fixme
 Cypress.Commands.add('clickPrettify', () => {
   return cy.get('[aria-label="Prettify query (Shift-Ctrl-P)"]').click();
 });
 
+// @ts-expect-error -- fixme
 Cypress.Commands.add('visitWithOp', ({ query, variables, variablesString }) => {
   let url = `/?query=${encodeURIComponent(query)}`;
   if (variables || variablesString) {
     url += `&variables=${encodeURIComponent(
+      // @ts-expect-error -- fixme
       JSON.stringify(variables, null, 2) || variablesString,
     )}`;
   }

packages/graphiql/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/resources/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GraphiQL</title>
+    <style>
+      body {
+        margin: 0;
+        overflow: hidden; /* in Firefox */
+      }
+
+      #graphiql {
+        height: 100dvh;
+      }
+
+      .loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 4rem;
+      }
+    </style>
+    <!--vite-replace-start-->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    ></script>
+    <script src="/dist/index.umd.js"></script>
+    <link href="/dist/style.css" rel="stylesheet" />
+    <!--vite-replace-end-->
+  </head>
+  <body>
+    <div id="graphiql">
+      <div class="loading">Loading…</div>
+    </div>
+    <script type="module" src="resources/renderExample.js"></script>
+  </body>
+</html>

packages/graphiql/package.json

@@ -17,37 +17,39 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "esm/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "esm",
-    "src",
     "graphiql.js",
     "graphiql.min.js",
     "graphiql.min.js.map",
     "graphiql.css",
-    "graphiql.min.css",
-    "graphiql.min.css.map"
+    "graphiql.min.css"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    "./graphiql.css": "./dist/style.css",
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "analyze-bundle": "cross-env NODE_ENV=production ANALYZE=1 yarn webpack -p",
-    "build": "yarn build-clean && yarn build-cjs && yarn build-esm",
-    "build-bundles": "yarn build-bundles-clean && yarn build-bundles-webpack",
-    "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
-    "build-bundles-webpack": "cross-env yarn webpack --mode development --bail",
-    "build-cjs": "tsc",
-    "build-clean": "rimraf esm dist webpack *.html",
-    "build-esm": "tsc --project ./tsconfig.esm.json",
-    "check": "tsc --noEmit",
-    "cypress-open": "yarn e2e-server 'cypress open'",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit",
+    "build": "vite build && UMD=true vite build",
+    "cypress-open": "yarn dev 'cypress open'",
+    "dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
-    "webpack": "webpack-cli --config resources/webpack.config.js",
+    "prepublishOnly": "cp dist/index.umd.js graphiql.js && cp dist/index.umd.js.map graphiql.js.map && cp dist/index.umd.js graphiql.min.js && cp dist/index.umd.js.map graphiql.min.js.map && cp dist/style.css graphiql.css && cp dist/style.css graphiql.min.css",
     "test": "vitest"
   },
   "dependencies": {
+    "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
     "@graphiql/react": "^0.28.0"
   },
   "peerDependencies": {
@@ -56,42 +58,28 @@
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
+    "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-commonjs": "^0.10.4",
+    "vite": "^5.3.6",
+    "postcss-lightningcss": "^1.0.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "@graphiql/toolkit": "^0.11.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-macros": "^3.1.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
     "cypress": "^13.13.2",
     "express": "^4.20.0",
-    "fork-ts-checker-webpack-plugin": "7.3.0",
     "graphql": "^16.9.0",
     "graphql-http": "^1.22.1",
     "graphql-subscriptions": "^2.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "mini-css-extract-plugin": "^2.7.2",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
-    "postcss-loader": "7.0.2",
-    "postcss-preset-env": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-loader": "^4.12.20",
-    "react-test-renderer": "^18.2.0",
-    "require-context.macro": "^1.2.2",
-    "rimraf": "^3.0.2",
-    "serve": "^11.3.0",
     "start-server-and-test": "^1.10.11",
-    "style-loader": "^3.3.1",
     "subscriptions-transport-ws": "0.11.0",
     "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",
     "ws": "8.17.1"
   }
 }

packages/graphiql/postcss.config.js

@@ -1,13 +1,9 @@
-module.exports =
-  process.env.NODE_ENV === 'test'
-    ? {}
-    : ({ options, webpackLoaderContext }) => ({
-        plugins: {
-          // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
-          'postcss-import': { root: webpackLoaderContext.context },
-          // contains autoprefixer, etc
-          'postcss-preset-env': options['postcss-preset-env'] || false,
-          cssnano:
-            process.env.NODE_ENV === 'production' ? options.cssnano : false,
-        },
-      });
+module.exports = {
+  plugins: {
+    // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
+    'postcss-import': '',
+    'postcss-lightningcss': {
+      browsers: '>= .25%',
+    },
+  },
+};