[wip] use zustand-persist

.changeset/little-impalas-applaud.md

@@ -0,0 +1,14 @@
+---
+#'@graphiql/plugin-history': minor
+#'@graphiql/toolkit': minor
+#'@graphiql/react': minor
+#'graphiql': minor
+---
+
+remove `createLocalStorage` from `@graphiql/toolkit`
+
+deprecate `useStorage` and `useTheme` hooks, use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+
+remove `StorageAPI`, replace it with `persist` and `createJSONStorage` from `zustand/middleware`
+
+remove unused CodeMirror CSS classes from GraphiQL 4

docs/migration/graphiql-5.0.0.md

@@ -138,14 +138,14 @@ function App() {
 > Clicking on a reference in the Query editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux.
 
 - `usePrettifyEditors`, `useCopyQuery`, `useMergeQuery`, `useExecutionContext`, `usePluginContext`, `useSchemaContext`, `useStorageContext` hooks are deprecated.
-- Add new `useGraphiQL` and `useGraphiQLActions` hooks instead. See updated [README](../../packages/graphiql-react/README.md#available-stores) for more details about them.
+- Add new `useGraphiQL` and `useGraphiQLActions` hooks instead. See updated [README](../../packages/graphiql-react/README.md#core-hooks) for more details about them.
 - remove `useSynchronizeValue` hook
 - fix `defaultQuery` with empty string does not result in an empty default query
 - fix `defaultQuery`, when is set will only be used for the first tab. When opening more tabs, the query editor will start out empty
 - fix execute query shortcut in query editor, run it even there are no operations in query editor
 - fix plugin store, save last opened plugin in storage
 - remove `onClickReference` from variable editor
-- fix shortcut text per OS for default query and in run query in execute query button's tooltip
+- fix shortcut text per OS for a default query and in run query in execute query button's tooltip
 
 The `ToolbarMenu` component has changed.
 

examples/graphiql-webpack/src/index.jsx

@@ -6,7 +6,7 @@ import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { getSnippets } from './snippets';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { useStorage } from '@graphiql/react';
+import { useGraphiQL } from '@graphiql/react';
 import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
 import 'graphiql/setup-workers/webpack';
 import './index.css';
@@ -91,8 +91,8 @@ function App() {
  * provider tree. `<GraphiQLStorageBound>` must be rendered as a child of `<GraphiQL>`.
  */
 function GraphiQLStorageBound({ setUrl }) {
-  const storage = useStorage();
-  const lastUrl = storage.get(LAST_URL_KEY) ?? STARTING_URL;
+  const storage = useGraphiQL(state => state.storage);
+  const lastUrl = storage.getItem(LAST_URL_KEY) ?? STARTING_URL;
 
   useEffect(() => {
     setUrl(lastUrl);

examples/graphiql-webpack/src/select-server-plugin.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { useStorage, useSchemaStore } from '@graphiql/react';
+import { useGraphiQL, useSchemaStore } from '@graphiql/react';
 
 export const LAST_URL_KEY = 'lastURL';
 
 export const PREV_URLS_KEY = 'previousURLs';
 
 const SelectServer = ({ url, setUrl }) => {
   const inputRef = React.useRef(null);
-  const storage = useStorage();
-  const lastUrl = storage.get(LAST_URL_KEY);
+  const storage = useGraphiQL(state => state.storage);
+  const lastUrl = storage.getItem(LAST_URL_KEY);
   const currentUrl = lastUrl ?? url;
   const [inputValue, setInputValue] = React.useState(currentUrl);
   const [previousUrls, setPreviousUrls] = React.useState(

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

@@ -33,7 +33,7 @@ export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
   title: 'Documentation Explorer',
   icon: function Icon() {
     const visiblePlugin = useGraphiQL(state => state.visiblePlugin);
-    return visiblePlugin === DOC_EXPLORER_PLUGIN ? (
+    return visiblePlugin === DOC_EXPLORER_PLUGIN.title ? (
       <DocsFilledIcon />
     ) : (
       <DocsIcon />

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

@@ -4,12 +4,7 @@ import {
   HistoryStore as ToolkitHistoryStore,
   QueryStoreItem,
 } from '@graphiql/toolkit';
-import {
-  useGraphiQL,
-  pick,
-  useStorage,
-  createBoundedUseStore,
-} from '@graphiql/react';
+import { useGraphiQL, pick, createBoundedUseStore } from '@graphiql/react';
 
 const historyStore = createStore<HistoryStoreType>((set, get) => ({
   historyStorage: null,
@@ -44,7 +39,7 @@ type HistoryStoreType = {
   actions: {
     /**
      * Add an operation to the history.
-     * @param operation The operation that was executed, consisting of the query,
+     * @param operation - The operation that was executed, consisting of the query,
      * variables, headers, and operation name.
      */
     addToHistory(operation: {
@@ -55,11 +50,11 @@ type HistoryStoreType = {
     }): void;
     /**
      * Change the custom label of an item from the history.
-     * @param args An object containing the label (`undefined` if it should be
+     * @param args - An object containing the label (`undefined` if it should be
      * unset) and properties that identify the history item that the label should
      * be applied to. (This can result in the label being applied to multiple
      * history items.)
-     * @param index Index to edit. Without it, will look for the first index matching the
+     * @param index - Index to edit. Without it, will look for the first index matching the
      * operation, which may lead to misleading results if multiple items have the same label
      */
     editLabel(
@@ -90,9 +85,9 @@ type HistoryStoreType = {
     }): void;
     /**
      * Delete an operation from the history.
-     * @param args The operation that was executed, consisting of the query,
+     * @param args - The operation that was executed, consisting of the query,
      * variables, headers, and operation name.
-     * @param clearFavorites This is only if you press the 'clear' button
+     * @param clearFavorites - This is only if you press the 'clear' button
      */
     deleteFromHistory(args: QueryStoreItem, clearFavorites?: boolean): void;
     /**
@@ -126,7 +121,7 @@ export const HistoryStore: FC<HistoryStoreProps> = ({
     pick('isFetching', 'tabs', 'activeTabIndex'),
   );
   const activeTab = tabs[activeTabIndex]!;
-  const storage = useStorage();
+  const storage = useGraphiQL(state => state.storage);
 
   const historyStorage = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, code is optimized by React Compiler
     new ToolkitHistoryStore(storage, maxHistoryLength);

packages/graphiql-react/README.md

@@ -81,28 +81,26 @@ Further details on how to use `@graphiql/react` can be found in the reference
 implementation of a GraphQL IDE - Graph*i*QL - in the
 [`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).
 
-## Available Stores
+## Core Hooks
 
 GraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's
 behavior. These stores contain all logic related to state management and can be accessed via custom
 React hooks.
 
-### Core Hooks
-
-- **`useStorage`**: Provides a storage API that can be used to persist state in the browser (by default using `localStorage`).
-- **`useTheme`**: Manages the current theme and provides a method to update it.
 - **`useGraphiQL`**: Access the current state.
 - **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.
 
 The `useGraphiQLActions` hook **exposes all actions** across store slices.
 The `useGraphiQL` hook **provides access to the following store slices**:
 
-| Store Slice | Responsibilities                                                                 |
-| ----------- | -------------------------------------------------------------------------------- |
-| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs |
-| `execution` | Handles the execution of GraphQL requests                                        |
-| `plugin`    | Manages plugins and the currently active plugin                                  |
-| `schema`    | Fetches, validates, and stores the GraphQL schema                                |
+| Store Slice | Responsibilities                                                                                          |
+| ----------- | --------------------------------------------------------------------------------------------------------- |
+| `storage`   | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |
+| `theme`     | Manages the current theme and provides a method to update it.                                             |
+| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |
+| `execution` | Handles the execution of GraphQL requests                                                                 |
+| `schema`    | Fetches, validates, and stores the GraphQL schema                                                         |
+| `plugin`    | Manages plugins and the currently active plugin                                                           |
 
 ### Usage Example
 

packages/graphiql-react/src/components/dialog/index.css

@@ -2,12 +2,6 @@
   position: fixed;
   inset: 0;
   background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
-  /**
-   * CodeMirror has a `z-index` set for the container of the scrollbar of the
-   * editor, so we have to add one here to make sure that the dialog is shown
-   * above the editor scrollbar (if they are visible).
-   */
-  z-index: 10;
 }
 
 .graphiql-dialog {

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

@@ -1,13 +1,12 @@
 import { FC, useEffect, useRef } from 'react';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import type { EditorProps } from '../types';
-import { HEADER_URI, KEY_BINDINGS, STORAGE_KEY } from '../constants';
+import { HEADER_URI, KEY_BINDINGS } from '../constants';
 import {
   getOrCreateModel,
   createEditor,
-  useChangeHandler,
+  debounce,
   onEditorContainerKeyDown,
-  pick,
   cleanupDisposables,
   cn,
 } from '../utility';
@@ -21,21 +20,21 @@ interface HeaderEditorProps extends EditorProps {
 }
 
 export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
-  const { setEditor, run, prettifyEditors, mergeQuery } = useGraphiQLActions();
-  const { initialHeaders, shouldPersistHeaders } = useGraphiQL(
-    pick('initialHeaders', 'shouldPersistHeaders'),
-  );
+  const { setEditor, run, prettifyEditors, mergeQuery, updateActiveTabValues } =
+    useGraphiQLActions();
+  const initialHeaders = useGraphiQL(state => state.initialHeaders);
   const ref = useRef<HTMLDivElement>(null!);
-  useChangeHandler(
-    onEdit,
-    shouldPersistHeaders ? STORAGE_KEY.headers : null,
-    'headers',
-  );
   useEffect(() => {
     const model = getOrCreateModel({ uri: HEADER_URI, value: initialHeaders });
     const editor = createEditor(ref, { model });
     setEditor({ headerEditor: editor });
+    const handleChange = debounce(100, () => {
+      const value = model.getValue();
+      updateActiveTabValues({ headers: value });
+      onEdit?.(value);
+    });
     const disposables = [
+      model.onDidChangeContent(handleChange),
       editor.addAction({ ...KEY_BINDINGS.runQuery, run }),
       editor.addAction({ ...KEY_BINDINGS.prettify, run: prettifyEditors }),
       editor.addAction({ ...KEY_BINDINGS.mergeFragments, run: mergeQuery }),

packages/graphiql-react/src/components/markdown-content/index.css

@@ -7,11 +7,7 @@
  */
 
 .graphiql-markdown-description,
-.graphiql-markdown-deprecation,
-.CodeMirror-hint-information-description,
-.CodeMirror-hint-information-deprecation-reason,
-.CodeMirror-info .info-description,
-.CodeMirror-info .info-deprecation {
+.graphiql-markdown-deprecation {
   & blockquote {
     margin-left: 0;
     margin-right: 0;
@@ -68,9 +64,7 @@
   }
 }
 
-.graphiql-markdown-description,
-.CodeMirror-hint-information-description,
-.CodeMirror-info .info-description {
+.graphiql-markdown-description {
   & a {
     color: hsl(var(--color-primary));
     text-decoration: none;
@@ -95,9 +89,7 @@
   }
 }
 
-.graphiql-markdown-deprecation,
-.CodeMirror-hint-information-deprecation-reason,
-.CodeMirror-info .info-deprecation {
+.graphiql-markdown-deprecation {
   & a {
     color: hsl(var(--color-warning));
     text-decoration: underline;
@@ -120,30 +112,3 @@
 .graphiql-markdown-preview > :not(:first-child) {
   display: none;
 }
-
-/**
- * We show deprecations in the following places:
- * - In the hint tooltip when typing in the query editor.
- * - In the info tooltip when hovering over a field in the query editor.
- */
-
-.CodeMirror-hint-information-deprecation,
-.CodeMirror-info .info-deprecation {
-  background-color: hsla(var(--color-warning), var(--alpha-background-light));
-  border: 1px solid hsl(var(--color-warning));
-  border-radius: var(--border-radius-4);
-  color: hsl(var(--color-warning));
-  margin-top: var(--px-12);
-  padding: var(--px-6) var(--px-8);
-}
-
-.CodeMirror-hint-information-deprecation-label,
-.CodeMirror-info .info-deprecation-label {
-  font-size: var(--font-size-hint);
-  font-weight: var(--font-weight-medium);
-}
-
-.CodeMirror-hint-information-deprecation-reason,
-.CodeMirror-info .info-deprecation-reason {
-  margin-top: var(--px-6);
-}