[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

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

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": "0.0.0-experimental-22c6e49-20241219",
     "@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": "0.0.0-experimental-22c6e49-20241219",
     "@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', () => {

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

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { StorageAPI } from '@graphiql/toolkit';
 import {
   createTab,

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

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

packages/graphiql-react/src/editor/components/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 export { HeaderEditor } from './header-editor';
 export { ImagePreview } from './image-preview';
 export { QueryEditor } from './query-editor';

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

@@ -1,5 +1,3 @@
-'use no memo';
-
 export {
   HeaderEditor,
   ImagePreview,

packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
 import { useContext, useEffect } from 'react';

packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
 

packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { fireEvent, render } from '@testing-library/react';
 import {
   GraphQLBoolean,

packages/graphiql-react/src/explorer/components/__tests__/type-link.spec.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLNonNull, GraphQLList, GraphQLString } from 'graphql';
 import { ComponentProps } from 'react';

packages/graphiql-react/src/explorer/components/search.tsx

@@ -7,16 +7,7 @@ import {
   isInterfaceType,
   isObjectType,
 } from 'graphql';
-import {
-  FocusEventHandler,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useCallback,
-  useEffect,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { FocusEventHandler, useEffect, useRef, useState } from 'react';
 import { Combobox } from '@headlessui/react';
 import { MagnifyingGlassIcon } from '../../icons';
 import { useSchemaContext } from '../../schema';
@@ -29,31 +20,26 @@ import { renderType } from './utils';
 import { isMacOs } from '../../utility/is-macos';
 
 export function Search() {
-  'use no memo'; // TODO: add test https://github.com/graphql/graphiql/issues/3842
   const { explorerNavStack, push } = useExplorerContext({
     nonNull: true,
     caller: Search,
   });
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null!);
   const getSearchResults = useSearchResults();
   const [searchValue, setSearchValue] = useState('');
-  const [results, setResults] = useState(getSearchResults(searchValue));
-  const debouncedGetSearchResults = useMemo(
-    () =>
-      debounce(200, (search: string) => {
-        setResults(getSearchResults(search));
-      }),
-    [getSearchResults],
-  );
+  const [results, setResults] = useState(() => getSearchResults(searchValue));
+  const debouncedGetSearchResults = debounce(200, (search: string) => {
+    setResults(getSearchResults(search));
+  });
   useEffect(() => {
     debouncedGetSearchResults(searchValue);
   }, [debouncedGetSearchResults, searchValue]);
 
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       if (event.metaKey && event.key === 'k') {
-        inputRef.current?.focus();
+        inputRef.current.focus();
       }
     }
 
@@ -63,20 +49,20 @@ export function Search() {
 
   const navItem = explorerNavStack.at(-1)!;
 
-  const onSelect = useCallback(
-    (def: TypeMatch | FieldMatch) => {
-      push(
-        'field' in def
-          ? { name: def.field.name, def: def.field }
-          : { name: def.type.name, def: def.type },
-      );
-    },
-    [push],
-  );
-  const isFocused = useRef(false);
-  const handleFocus: FocusEventHandler = useCallback(e => {
-    isFocused.current = e.type === 'focus';
-  }, []);
+  const onSelect = (def: TypeMatch | FieldMatch) => {
+    push(
+      'field' in def
+        ? { name: def.field.name, def: def.field }
+        : { name: def.type.name, def: def.type },
+    );
+  };
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus: FocusEventHandler = e => {
+    // Fix https://github.com/graphql/graphiql/issues/3842
+    setTimeout(() => {
+      setIsFocused(e.type === 'focus');
+    }, 0);
+  };
 
   const shouldSearchBoxAppear =
     explorerNavStack.length === 1 ||
@@ -98,7 +84,7 @@ export function Search() {
       <div
         className="graphiql-doc-explorer-search-input"
         onClick={() => {
-          inputRef.current?.focus();
+          inputRef.current.focus();
         }}
       >
         <MagnifyingGlassIcon />
@@ -115,8 +101,7 @@ export function Search() {
       </div>
 
       {/* display on focus */}
-      {/* eslint-disable-next-line react-compiler/react-compiler */}
-      {isFocused.current && (
+      {isFocused && (
         <Combobox.Options data-cy="doc-explorer-list">
           {results.within.length +
             results.types.length +
@@ -269,7 +254,7 @@ export function useSearchResults(caller?: Function) {
 function isMatch(sourceText: string, searchValue: string): boolean {
   try {
     const escaped = searchValue.replaceAll(/[^_0-9A-Za-z]/g, ch => '\\' + ch);
-    return sourceText.search(new RegExp(escaped, 'i')) !== -1;
+    return new RegExp(escaped, 'i').test(sourceText);
   } catch {
     return sourceText.toLowerCase().includes(searchValue.toLowerCase());
   }

packages/graphiql-react/src/explorer/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 export { Argument } from './components/argument';
 export { DefaultValue } from './components/default-value';
 export { DeprecationReason } from './components/deprecation-reason';

packages/graphiql-react/src/history/__tests__/components.spec.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { Mock } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
 import { ComponentProps } from 'react';

packages/graphiql-react/src/history/components.tsx

@@ -11,10 +11,21 @@ import {
   TrashIcon,
 } from '../icons';
 import { Button, Tooltip, UnStyledButton } from '../ui';
-import { useHistoryContext } from './context';
+import { HistoryContextType, useHistoryContext } from './context';
 
 import './style.css';
 
+// Fix error from react-compiler
+// Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+function handleDelete(
+  items: QueryStoreItem[],
+  deleteFromHistory: HistoryContextType['deleteFromHistory'],
+) {
+  for (const item of items) {
+    deleteFromHistory(item, true);
+  }
+}
+
 export function History() {
   const { items: all, deleteFromHistory } = useHistoryContext({
     nonNull: true,
@@ -45,9 +56,7 @@ export function History() {
 
   const handleClearStatus = () => {
     try {
-      for (const item of items) {
-        deleteFromHistory(item, true);
-      }
+      handleDelete(items, deleteFromHistory);
       setClearStatus('success');
     } catch {
       setClearStatus('error');

packages/graphiql-react/src/history/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 export { History } from './components';
 export {
   HistoryContext,

packages/graphiql-react/src/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 import './style/root.css';
 
 export {

packages/graphiql-react/src/toolbar/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 export * from './button';
 export * from './execute';
 export * from './menu';

packages/graphiql-react/src/ui/index.ts

@@ -1,5 +1,3 @@
-'use no memo';
-
 export * from './button';
 export * from './button-group';
 export * from './dialog';