upd

.gitignore

@@ -41,11 +41,8 @@ packages/codemirror-graphql/*.d.ts
 packages/codemirror-graphql/*.map
 !packages/codemirror-graphql/*.config.js
 
-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/

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",

packages/graphiql/src/GraphiQL.tsx

@@ -12,10 +12,8 @@ import React, {
   PropsWithChildren,
   ReactNode,
   ReactElement,
-  useCallback,
   useState,
   useEffect,
-  useMemo,
 } from 'react';
 
 import {
@@ -254,13 +252,10 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   const schemaContext = useSchemaContext({ nonNull: true });
   const storageContext = useStorageContext();
   const pluginContext = usePluginContext();
-  const forcedTheme = useMemo(
-    () =>
-      props.forcedTheme && THEMES.includes(props.forcedTheme)
-        ? props.forcedTheme
-        : undefined,
-    [props.forcedTheme],
-  );
+  const forcedTheme =
+    props.forcedTheme && THEMES.includes(props.forcedTheme)
+      ? props.forcedTheme
+      : undefined;
 
   const copy = useCopyQuery({ onCopyQuery: props.onCopyQuery });
   const merge = useMergeQuery();
@@ -378,97 +373,80 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     }
   }, [pluginResize]);
 
-  const handleClearData = useCallback(() => {
+  const handleClearData = () => {
     try {
       storageContext?.clear();
       setClearStorageStatus('success');
     } catch {
       setClearStorageStatus('error');
     }
-  }, [storageContext]);
+  };
 
-  const handlePersistHeaders: MouseEventHandler<HTMLButtonElement> =
-    useCallback(
-      event => {
-        editorContext.setShouldPersistHeaders(
-          event.currentTarget.dataset.value === 'true',
-        );
-      },
-      [editorContext],
+  const handlePersistHeaders: MouseEventHandler<HTMLButtonElement> = event => {
+    editorContext.setShouldPersistHeaders(
+      event.currentTarget.dataset.value === 'true',
     );
+  };
 
-  const handleChangeTheme: MouseEventHandler<HTMLButtonElement> = useCallback(
-    event => {
-      const selectedTheme = event.currentTarget.dataset.theme as
-        | 'light'
-        | 'dark'
-        | undefined;
-      setTheme(selectedTheme || null);
-    },
-    [setTheme],
-  );
+  const handleChangeTheme: MouseEventHandler<HTMLButtonElement> = event => {
+    const selectedTheme = event.currentTarget.dataset.theme as
+      | 'light'
+      | 'dark'
+      | undefined;
+    setTheme(selectedTheme || null);
+  };
 
   const handleAddTab = editorContext.addTab;
   const handleRefetchSchema = schemaContext.introspect;
   const handleReorder = editorContext.moveTab;
 
-  const handleShowDialog: MouseEventHandler<HTMLButtonElement> = useCallback(
-    event => {
-      setShowDialog(
-        event.currentTarget.dataset.value as 'short-keys' | 'settings',
-      );
-    },
-    [],
-  );
+  const handleShowDialog: MouseEventHandler<HTMLButtonElement> = event => {
+    setShowDialog(
+      event.currentTarget.dataset.value as 'short-keys' | 'settings',
+    );
+  };
 
-  const handlePluginClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    event => {
-      const context = pluginContext!;
-      const pluginIndex = Number(event.currentTarget.dataset.index!);
-      const plugin = context.plugins.find((_, index) => pluginIndex === index)!;
-      const isVisible = plugin === context.visiblePlugin;
-      if (isVisible) {
-        context.setVisiblePlugin(null);
-        pluginResize.setHiddenElement('first');
-      } else {
-        context.setVisiblePlugin(plugin);
-        pluginResize.setHiddenElement(null);
-      }
-    },
-    [pluginContext, pluginResize],
-  );
+  const handlePluginClick: MouseEventHandler<HTMLButtonElement> = event => {
+    const context = pluginContext!;
+    const pluginIndex = Number(event.currentTarget.dataset.index!);
+    const plugin = context.plugins.find((_, index) => pluginIndex === index)!;
+    const isVisible = plugin === context.visiblePlugin;
+    if (isVisible) {
+      context.setVisiblePlugin(null);
+      pluginResize.setHiddenElement('first');
+    } else {
+      context.setVisiblePlugin(plugin);
+      pluginResize.setHiddenElement(null);
+    }
+  };
 
-  const handleToolsTabClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    event => {
-      if (editorToolsResize.hiddenElement === 'second') {
-        editorToolsResize.setHiddenElement(null);
-      }
-      setActiveSecondaryEditor(
-        event.currentTarget.dataset.name as 'variables' | 'headers',
-      );
-    },
-    [editorToolsResize],
-  );
+  const handleToolsTabClick: MouseEventHandler<HTMLButtonElement> = event => {
+    if (editorToolsResize.hiddenElement === 'second') {
+      editorToolsResize.setHiddenElement(null);
+    }
+    setActiveSecondaryEditor(
+      event.currentTarget.dataset.name as 'variables' | 'headers',
+    );
+  };
 
-  const toggleEditorTools: MouseEventHandler<HTMLButtonElement> =
-    useCallback(() => {
-      editorToolsResize.setHiddenElement(
-        editorToolsResize.hiddenElement === 'second' ? null : 'second',
-      );
-    }, [editorToolsResize]);
+  const toggleEditorTools: MouseEventHandler<HTMLButtonElement> = () => {
+    editorToolsResize.setHiddenElement(
+      editorToolsResize.hiddenElement === 'second' ? null : 'second',
+    );
+  };
 
-  const handleOpenShortKeysDialog = useCallback((isOpen: boolean) => {
+  const handleOpenShortKeysDialog = (isOpen: boolean) => {
     if (!isOpen) {
       setShowDialog(null);
     }
-  }, []);
+  };
 
-  const handleOpenSettingsDialog = useCallback((isOpen: boolean) => {
+  const handleOpenSettingsDialog = (isOpen: boolean) => {
     if (!isOpen) {
       setShowDialog(null);
       setClearStorageStatus(null);
     }
-  }, []);
+  };
 
   const addTab = (
     <Tooltip label="Add tab">
@@ -486,46 +464,37 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   const className = props.className ? ` ${props.className}` : '';
   const confirmClose = props.confirmCloseTab;
 
-  const handleTabClose: MouseEventHandler<HTMLButtonElement> = useCallback(
-    async event => {
-      const tabButton = event.currentTarget
-        .previousSibling as HTMLButtonElement;
-      const index = Number(tabButton.id.replace(TAB_CLASS_PREFIX, ''));
+  const handleTabClose: MouseEventHandler<HTMLButtonElement> = async event => {
+    const tabButton = event.currentTarget.previousSibling as HTMLButtonElement;
+    const index = Number(tabButton.id.replace(TAB_CLASS_PREFIX, ''));
 
-      /** TODO:
-       * Move everything after into `editorContext.closeTab` once zustand will be used instead of
-       * React context, since now we can't use execution context inside editor context, since editor
-       * context is used in execution context.
-       */
-      const shouldCloseTab = confirmClose ? await confirmClose(index) : true;
-
-      if (!shouldCloseTab) {
-        return;
-      }
+    /** TODO:
+     * Move everything after into `editorContext.closeTab` once zustand will be used instead of
+     * React context, since now we can't use execution context inside editor context, since editor
+     * context is used in execution context.
+     */
+    const shouldCloseTab = confirmClose ? await confirmClose(index) : true;
 
-      if (editorContext.activeTabIndex === index) {
-        executionContext.stop();
-      }
-      editorContext.closeTab(index);
-    },
-    [confirmClose, editorContext, executionContext],
-  );
+    if (!shouldCloseTab) {
+      return;
+    }
 
-  const handleTabClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    event => {
-      const index = Number(
-        event.currentTarget.id.replace(TAB_CLASS_PREFIX, ''),
-      );
-      /** TODO:
-       * Move everything after into `editorContext.changeTab` once zustand will be used instead of
-       * React context, since now we can't use execution context inside editor context, since editor
-       * context is used in execution context.
-       */
+    if (editorContext.activeTabIndex === index) {
       executionContext.stop();
-      editorContext.changeTab(index);
-    },
-    [editorContext, executionContext],
-  );
+    }
+    editorContext.closeTab(index);
+  };
+
+  const handleTabClick: MouseEventHandler<HTMLButtonElement> = event => {
+    const index = Number(event.currentTarget.id.replace(TAB_CLASS_PREFIX, ''));
+    /** TODO:
+     * Move everything after into `editorContext.changeTab` once zustand will be used instead of
+     * React context, since now we can't use execution context inside editor context, since editor
+     * context is used in execution context.
+     */
+    executionContext.stop();
+    editorContext.changeTab(index);
+  };
 
   return (
     <Tooltip.Provider>

packages/graphiql/src/cdn.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 /**
  *  Copyright (c) 2021 GraphQL Contributors.
  *

packages/graphiql/src/index.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 /**
  *  Copyright (c) 2021 GraphQL Contributors.
  *

packages/graphiql/vite.config.mts

@@ -1,7 +1,29 @@
+import { sep } from 'node:path';
 import { defineConfig, PluginOption } from 'vite';
-import packageJSON from './package.json';
 import dts from 'vite-plugin-dts';
 import commonjs from 'vite-plugin-commonjs';
+import react from '@vitejs/plugin-react';
+import packageJSON from './package.json';
+
+const ReactCompilerConfig = {
+  target: '17',
+  sources(filename) {
+    if (!filename.includes(`packages${sep}graphiql${sep}`)) {
+      return false;
+    }
+    // eslint-disable-next-line no-console
+    console.log({ filename });
+    return true;
+  },
+};
+
+const plugins = [
+  react({
+    babel: {
+      plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+    },
+  }),
+];
 
 const umdConfig = defineConfig({
   define: {
@@ -12,7 +34,7 @@ const umdConfig = defineConfig({
     'process.env.NODE_ENV': '"production"',
   },
   // To bundle `const { createClient } = require('graphql-ws')` in `createWebsocketsFetcherFromUrl` function
-  plugins: [commonjs()],
+  plugins: [...plugins, commonjs()],
   build: {
     minify: 'terser', // produce less bundle size
     sourcemap: true,
@@ -64,7 +86,7 @@ const esmConfig = defineConfig({
       },
     },
   },
-  plugins: [htmlPlugin(), dts({ rollupTypes: true })],
+  plugins: [...plugins, htmlPlugin(), dts({ rollupTypes: true })],
 });
 
 function htmlPlugin(): PluginOption {

resources/patches/@vitejs+plugin-react+4.3.1.patch

@@ -6,7 +6,7 @@ index e61f42b..a6ad925 100644
        });
        if (result) {
          let code2 = result.code;
-+        if (filepath.includes('graphiql-react')) {
++        if (/packages[/\\](graphiql|graphiql-react)[/\\]/.test(filepath)) {
 +          if (
 +            /^import \{ c as _c } from "/m.test(code2)
 +          ) {