Import directly from leaf modules in graphiql-react to fix Rollup chunk cycles (#4272)

## Summary

`@graphiql/react` builds with `preserveModules: true`. Eight files
import from barrels (`./components`, `./utility`, `./stores`) for
symbols whose defining module also depends on those barrels. Rollup
can't split the resulting cycle into chunks cleanly, and emits 18
warnings like:

> Export `useGraphiQLActions` of module `src/components/provider.tsx`
was reexported through module `src/components/index.ts` while both
modules are dependencies of each other … will likely lead to broken
execution order.

Rollup's own hint is to import from the leaf module directly. Doing that
drops the warning count from 18 to 0. Same runtime behavior.

Author: trevor-scheer

packages/graphiql-react/src/components/operation-editor.tsx

@@ -8,16 +8,11 @@ import { FC, useEffect, useRef } from 'react';
 import { useMonaco } from '../stores';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import {
-  debounce,
   getOrCreateModel,
   createEditor,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-  Uri,
-  Range,
-} from '../utility';
+} from '../utility/create-editor';
+import { debounce, pick, cleanupDisposables, cn, Uri, Range } from '../utility';
 import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {
   KEY_BINDINGS,

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

@@ -11,14 +11,13 @@ import {
 import { create, useStore, UseBoundStore, StoreApi } from 'zustand';
 import { useShallow } from 'zustand/shallow';
 import { StorageAPI } from '@graphiql/toolkit';
+import { createEditorSlice, type EditorProps } from '../stores/editor';
 import {
-  createEditorSlice,
   createExecutionSlice,
   createPluginSlice,
   createSchemaSlice,
   createThemeSlice,
   createStorageSlice,
-  EditorProps,
   ExecutionProps,
   PluginProps,
   SchemaProps,

packages/graphiql-react/src/components/request-headers-editor.tsx

@@ -5,12 +5,9 @@ import { URI_NAME, KEY_BINDINGS, STORAGE_KEY } from '../constants';
 import {
   getOrCreateModel,
   createEditor,
-  useChangeHandler,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-} from '../utility';
+} from '../utility/create-editor';
+import { useChangeHandler, pick, cleanupDisposables, cn } from '../utility';
 import { useMonaco } from '../stores';
 
 interface RequestHeadersEditorProps extends EditorProps {

packages/graphiql-react/src/components/response-editor.tsx

@@ -7,11 +7,8 @@ import {
   getOrCreateModel,
   createEditor,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-  Range,
-} from '../utility';
+} from '../utility/create-editor';
+import { pick, cleanupDisposables, cn, Range } from '../utility';
 import { KEY_BINDINGS, URI_NAME } from '../constants';
 import type { EditorProps } from '../types';
 import type * as monaco from 'monaco-editor';

packages/graphiql-react/src/components/variables-editor.tsx

@@ -5,12 +5,9 @@ import { KEY_BINDINGS, STORAGE_KEY, URI_NAME } from '../constants';
 import {
   getOrCreateModel,
   createEditor,
-  useChangeHandler,
   onEditorContainerKeyDown,
-  cleanupDisposables,
-  cn,
-  pick,
-} from '../utility';
+} from '../utility/create-editor';
+import { useChangeHandler, cleanupDisposables, cn, pick } from '../utility';
 import { useMonaco } from '../stores';
 
 interface VariablesEditorProps extends EditorProps {

packages/graphiql-react/src/deprecated.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-deprecated */
 
-import { useGraphiQL, useGraphiQLActions } from './components';
+import { useGraphiQL, useGraphiQLActions } from './components/provider';
 import { pick } from './utility';
 import type { MonacoEditor } from './types';
 

packages/graphiql-react/src/utility/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { debounce } from './debounce';
 import type * as monaco from 'monaco-editor';
-import { useGraphiQL, useGraphiQLActions } from '../components';
+import { useGraphiQL, useGraphiQLActions } from '../components/provider';
 
 export function useChangeHandler(
   callback: ((value: string) => void) | undefined,

packages/graphiql-react/src/utility/resize.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { debounce } from './debounce';
-import { useGraphiQL } from '../components';
+import { useGraphiQL } from '../components/provider';
 
 type ResizableElement = 'first' | 'second';