[1] various refactor after zustand migration

.changeset/chilly-sloths-heal.md

@@ -0,0 +1,27 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-explorer': patch
+'graphql-language-service': patch
+'@graphiql/plugin-history': patch
+'codemirror-graphql': patch
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+- replace `onCopyQuery` hook with `copyQuery` function
+- replace `onMergeQuery` hook with `mergeQuery` function
+- replace `onPrettifyEditors` hook with `prettifyEditors` function
+- remove `fetcher` prop from `SchemaContextProvider` and `schemaStore` and add `fetcher` to `executionStore`
+- add `onCopyQuery` and `onPrettifyQuery` props to `EditorContextProvider`
+- remove exports (use `GraphiQLProvider`)
+  - `EditorContextProvider`
+  - `ExecutionContextProvider`
+  - `PluginContextProvider`
+  - `SchemaContextProvider`
+  - `StorageContextProvider`
+  - `ExecutionContextType`
+  - `PluginContextType`
+- feat(@graphiql/react): migrate React context to zustand:
+  - replace `useExecutionContext` with `useExecutionStore` hook
+  - replace `useEditorContext` with `useEditorStore` hook
+- prefer `getComputedStyle` over `window.getComputedStyle`

.eslintrc.js

@@ -142,6 +142,11 @@ module.exports = {
             property: 'navigator',
             message: 'Use `navigator` instead',
           },
+          {
+            object: 'window',
+            property: 'getComputedStyle',
+            message: 'Use `getComputedStyle` instead',
+          },
         ],
         'no-return-assign': 'error',
         'no-return-await': 'error',

packages/codemirror-graphql/src/utils/info-addon.ts

@@ -119,17 +119,19 @@ function showPopup(cm: CodeMirror.Editor, box: DOMRect, info: HTMLDivElement) {
   document.body.append(popup);
 
   const popupBox = popup.getBoundingClientRect();
-  const popupStyle = window.getComputedStyle(popup);
+  const { marginLeft, marginRight, marginBottom, marginTop } =
+    getComputedStyle(popup);
+
   const popupWidth =
     popupBox.right -
     popupBox.left +
-    parseFloat(popupStyle.marginLeft) +
-    parseFloat(popupStyle.marginRight);
+    parseFloat(marginLeft) +
+    parseFloat(marginRight);
   const popupHeight =
     popupBox.bottom -
     popupBox.top +
-    parseFloat(popupStyle.marginTop) +
-    parseFloat(popupStyle.marginBottom);
+    parseFloat(marginTop) +
+    parseFloat(marginBottom);
 
   let topPos = box.bottom;
   if (

packages/graphiql-plugin-doc-explorer/src/components/search.tsx

@@ -158,7 +158,7 @@ type FieldMatch = {
 
 export function useSearchResults() {
   const explorerNavStack = useDocExplorer();
-  const { schema } = useSchemaStore();
+  const schema = useSchemaStore(store => store.schema);
 
   const navItem = explorerNavStack.at(-1)!;
 

packages/graphiql-plugin-doc-explorer/src/components/type-documentation.tsx

@@ -215,7 +215,7 @@ const EnumValue: FC<{ value: GraphQLEnumValue }> = ({ value }) => {
 };
 
 const PossibleTypes: FC<{ type: GraphQLNamedType }> = ({ type }) => {
-  const { schema } = useSchemaStore();
+  const schema = useSchemaStore(store => store.schema);
   if (!schema || !isAbstractType(type)) {
     return null;
   }

packages/graphiql-plugin-doc-explorer/src/index.tsx

@@ -24,7 +24,7 @@ export type {
 export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
   title: 'Documentation Explorer',
   icon: function Icon() {
-    const { visiblePlugin } = usePluginStore();
+    const visiblePlugin = usePluginStore(store => store.visiblePlugin);
     return visiblePlugin === DOC_EXPLORER_PLUGIN ? (
       <DocsFilledIcon />
     ) : (

packages/graphiql-plugin-explorer/src/index.tsx

@@ -62,9 +62,9 @@ export type GraphiQLExplorerPluginProps = Omit<
 >;
 
 const ExplorerPlugin: FC<GraphiQLExplorerPluginProps> = props => {
-  const { setOperationName } = useEditorStore();
-  const { schema } = useSchemaStore();
-  const { run } = useExecutionStore();
+  const setOperationName = useEditorStore(store => store.setOperationName);
+  const schema = useSchemaStore(store => store.schema);
+  const run = useExecutionStore(store => store.run);
 
   // handle running the current operation from the plugin
   const handleRunOperation = useCallback(

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

@@ -1,34 +1,9 @@
-import type { Mock } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
 import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
 import { HistoryContextProvider } from '../context';
-import {
-  useEditorStore,
-  Tooltip,
-  StorageContextProvider,
-} from '@graphiql/react';
-
-vi.mock('@graphiql/react', async () => {
-  const originalModule = await vi.importActual('@graphiql/react');
-  const mockedSetQueryEditor = vi.fn();
-  const mockedSetVariableEditor = vi.fn();
-  const mockedSetHeaderEditor = vi.fn();
-  return {
-    ...originalModule,
-    useEditorStore() {
-      return {
-        queryEditor: { setValue: mockedSetQueryEditor },
-        variableEditor: { setValue: mockedSetVariableEditor },
-        headerEditor: { setValue: mockedSetHeaderEditor },
-        tabs: [],
-      };
-    },
-    useExecutionStore() {
-      return {};
-    },
-  };
-});
+import { Tooltip, GraphiQLProvider } from '@graphiql/react';
+import { editorStore } from '../../../graphiql-react/dist/editor/context';
 
 const mockQuery = /* GraphQL */ `
   query Test($string: String) {
@@ -49,11 +24,11 @@ type QueryHistoryItemProps = ComponentProps<typeof HistoryItem>;
 const QueryHistoryItemWithContext: typeof HistoryItem = props => {
   return (
     <Tooltip.Provider>
-      <StorageContextProvider>
+      <GraphiQLProvider fetcher={vi.fn()}>
         <HistoryContextProvider>
           <HistoryItem {...props} />
         </HistoryContextProvider>
-      </StorageContextProvider>
+      </GraphiQLProvider>
     </Tooltip.Provider>
   );
 };
@@ -78,15 +53,6 @@ function getMockProps(
 }
 
 describe('QueryHistoryItem', () => {
-  const store = useEditorStore();
-  const mockedSetQueryEditor = store.queryEditor!.setValue as Mock;
-  const mockedSetVariableEditor = store.variableEditor!.setValue as Mock;
-  const mockedSetHeaderEditor = store.headerEditor!.setValue as Mock;
-  beforeEach(() => {
-    mockedSetQueryEditor.mockClear();
-    mockedSetVariableEditor.mockClear();
-    mockedSetHeaderEditor.mockClear();
-  });
   it('renders operationName if label is not provided', () => {
     const otherMockProps = { item: { operationName: mockOperationName } };
     const props = getMockProps(otherMockProps);
@@ -108,6 +74,29 @@ describe('QueryHistoryItem', () => {
   });
 
   it('selects the item when history label button is clicked', () => {
+    const mockedSetQueryEditor = vi.fn();
+    const mockedSetVariableEditor = vi.fn();
+    const mockedSetHeaderEditor = vi.fn();
+    type MonacoEditorWithOperationFacts = NonNullable<
+      ReturnType<typeof editorStore.getInitialState>['queryEditor']
+    >;
+    type MonacoEditor = NonNullable<
+      ReturnType<typeof editorStore.getInitialState>['variableEditor']
+    >;
+
+    editorStore.setState({
+      queryEditor: {
+        setValue: mockedSetQueryEditor,
+      } as unknown as MonacoEditorWithOperationFacts,
+      variableEditor: {
+        setValue: mockedSetVariableEditor,
+      } as unknown as MonacoEditor,
+      headerEditor: {
+        setValue: mockedSetHeaderEditor,
+        getValue: () => '',
+      } as unknown as MonacoEditor,
+    });
+
     const otherMockProps = { item: { operationName: mockOperationName } };
     const mockProps = getMockProps(otherMockProps);
     const { container } = render(

packages/graphiql-plugin-history/src/context.tsx

@@ -119,7 +119,7 @@ export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
   maxHistoryLength = 20,
   children,
 }) => {
-  const { isFetching } = useExecutionStore();
+  const isFetching = useExecutionStore(store => store.isFetching);
   const { tabs, activeTabIndex } = useEditorStore();
   const activeTab = tabs[activeTabIndex];
   const storage = useStorage();

packages/graphiql-react/src/constants.ts

@@ -1,7 +1,18 @@
+export const KEY_MAP = Object.freeze({
+  prettify: ['Shift-Ctrl-P'],
+  mergeFragments: ['Shift-Ctrl-M'],
+  runQuery: ['Ctrl-Enter', 'Cmd-Enter'],
+  autoComplete: ['Ctrl-Space'],
+  copyQuery: ['Shift-Ctrl-C'],
+  refetchSchema: ['Shift-Ctrl-R'],
+  searchInEditor: ['Ctrl-F'],
+  searchInDocs: ['Ctrl-K'],
+} as const);
+
 export const DEFAULT_QUERY = `# Welcome to GraphiQL
 #
-# GraphiQL is an in-browser tool for writing, validating, and
-# testing GraphQL queries.
+# GraphiQL is an in-browser tool for writing, validating, and testing
+# GraphQL queries.
 #
 # Type queries into this side of the screen, and you will see intelligent
 # typeaheads aware of the current GraphQL type schema and live syntax and
@@ -20,13 +31,13 @@ export const DEFAULT_QUERY = `# Welcome to GraphiQL
 #
 # Keyboard shortcuts:
 #
-#   Prettify query:  Shift-Ctrl-P (or press the prettify button)
+#   Prettify query:  ${KEY_MAP.prettify[0]} (or press the prettify button)
 #
-#  Merge fragments:  Shift-Ctrl-M (or press the merge button)
+#  Merge fragments:  ${KEY_MAP.mergeFragments[0]} (or press the merge button)
 #
-#        Run Query:  Ctrl-Enter (or press the play button)
+#        Run Query:  ${KEY_MAP.runQuery[0]} (or press the play button)
 #
-#    Auto Complete:  Ctrl-Space (or just start typing)
+#    Auto Complete:  ${KEY_MAP.autoComplete[0]} (or just start typing)
 #
 
 `;