graphiql - npm Package Compare versions

Comparing version 3.5.0-canary-869419d9.0 to 4.0.0-alpha.0

dist/index.d.ts

@@ -1,5 +0,82 @@
-export { GraphiQLProvider } from '@graphiql/react';
-export type { GraphiQLProps, GraphiQLInterfaceProps, } from './components/GraphiQL';
-export type { GraphiQLProviderProps } from '@graphiql/react';
-export { GraphiQLInterface, GraphiQL, GraphiQL as default, } from './components/GraphiQL';
-//# sourceMappingURL=index.d.ts.map
+import { default as default_2 } from 'react';
+import { GraphiQLProvider } from '@graphiql/react';
+import { GraphiQLProviderProps } from '@graphiql/react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { UseHeaderEditorArgs } from '@graphiql/react';
+import { UseQueryEditorArgs } from '@graphiql/react';
+import { UseResponseEditorArgs } from '@graphiql/react';
+import { UseVariableEditorArgs } from '@graphiql/react';
+import { WriteableEditorProps } from '@graphiql/react';
+
+declare type AddSuffix<Obj extends Record<string, any>, Suffix extends string> = {
+    [Key in keyof Obj as `${string & Key}${Suffix}`]: Obj[Key];
+};
+
+export declare function GraphiQL({ dangerouslyAssumeSchemaIsValid, defaultQuery, defaultTabs, externalFragments, fetcher, getDefaultFieldNames, headers, inputValueDeprecation, introspectionQueryName, maxHistoryLength, onEditOperationName, onSchemaChange, onTabChange, onTogglePluginVisibility, operationName, plugins, query, response, schema, schemaDescription, shouldPersistHeaders, storage, validationRules, variables, visiblePlugin, defaultHeaders, ...props }: GraphiQLProps): default_2.JSX.Element;
+
+export declare namespace GraphiQL {
+    var Logo: typeof GraphiQLLogo;
+    var Toolbar: typeof GraphiQLToolbar;
+    var Footer: typeof GraphiQLFooter;
+}
+
+declare function GraphiQLFooter<TProps>(props: PropsWithChildren<TProps>): default_2.JSX.Element;
+
+declare namespace GraphiQLFooter {
+    var displayName: string;
+}
+
+export declare function GraphiQLInterface(props: GraphiQLInterfaceProps): default_2.JSX.Element;
+
+export declare type GraphiQLInterfaceProps = WriteableEditorProps & AddSuffix<Pick<UseQueryEditorArgs, 'onEdit'>, 'Query'> & Pick<UseQueryEditorArgs, 'onCopyQuery'> & AddSuffix<Pick<UseVariableEditorArgs, 'onEdit'>, 'Variables'> & AddSuffix<Pick<UseHeaderEditorArgs, 'onEdit'>, 'Headers'> & Pick<UseResponseEditorArgs, 'responseTooltip'> & {
+    children?: ReactNode;
+    defaultEditorToolsVisibility?: boolean | 'variables' | 'headers';
+    isHeadersEditorEnabled?: boolean;
+    toolbar?: GraphiQLToolbarConfig;
+    showPersistHeadersSettings?: boolean;
+    forcedTheme?: (typeof THEMES)[number];
+    className?: string;
+};
+
+declare function GraphiQLLogo<TProps>(props: PropsWithChildren<TProps>): default_2.JSX.Element;
+
+declare namespace GraphiQLLogo {
+    var displayName: string;
+}
+
+export declare type GraphiQLProps = Omit<GraphiQLProviderProps, 'children'> & GraphiQLInterfaceProps;
+
+export { GraphiQLProvider }
+
+export { GraphiQLProviderProps }
+
+declare function GraphiQLToolbar<TProps>(props: PropsWithChildren<TProps>): default_2.JSX.Element;
+
+declare namespace GraphiQLToolbar {
+    var displayName: string;
+}
+
+declare type GraphiQLToolbarConfig = {
+    additionalContent?: default_2.ReactNode;
+    additionalComponent?: default_2.JSXElementConstructor<any>;
+};
+
+declare const THEMES: readonly ["light", "dark", "system"];
+
+export { }
+
+
+declare namespace GraphiQLLogo {
+    var displayName: string;
+}
+
+
+declare namespace GraphiQLToolbar {
+    var displayName: string;
+}
+
+
+declare namespace GraphiQLFooter {
+    var displayName: string;
+}

dist/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = exports.GraphiQL = exports.GraphiQLInterface = exports.GraphiQLProvider = void 0;
-var react_1 = require("@graphiql/react");
-Object.defineProperty(exports, "GraphiQLProvider", { enumerable: true, get: function () { return react_1.GraphiQLProvider; } });
-var GraphiQL_1 = require("./components/GraphiQL");
-Object.defineProperty(exports, "GraphiQLInterface", { enumerable: true, get: function () { return GraphiQL_1.GraphiQLInterface; } });
-Object.defineProperty(exports, "GraphiQL", { enumerable: true, get: function () { return GraphiQL_1.GraphiQL; } });
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return GraphiQL_1.GraphiQL; } });
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@graphiql/react");
+const React = require("react");
+const majorVersion = parseInt(React.version.slice(0, 2), 10);
+if (majorVersion < 16) {
+  throw new Error(
+    [
+      "GraphiQL 0.18.0 and after is not compatible with React 15 or below.",
+      "If you are using a CDN source (jsdelivr, unpkg, etc), follow this example:",
+      "https://github.com/graphql/graphiql/blob/master/examples/graphiql-cdn/index.html#L49"
+    ].join("\n")
+  );
+}
+function GraphiQL({
+  dangerouslyAssumeSchemaIsValid,
+  defaultQuery,
+  defaultTabs,
+  externalFragments,
+  fetcher,
+  getDefaultFieldNames,
+  headers,
+  inputValueDeprecation,
+  introspectionQueryName,
+  maxHistoryLength,
+  onEditOperationName,
+  onSchemaChange,
+  onTabChange,
+  onTogglePluginVisibility,
+  operationName,
+  plugins,
+  query,
+  response,
+  schema,
+  schemaDescription,
+  shouldPersistHeaders,
+  storage,
+  validationRules,
+  variables,
+  visiblePlugin,
+  defaultHeaders,
+  ...props
+}) {
+  if (typeof fetcher !== "function") {
+    throw new TypeError(
+      "The `GraphiQL` component requires a `fetcher` function to be passed as prop."
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    react.GraphiQLProvider,
+    {
+      getDefaultFieldNames,
+      dangerouslyAssumeSchemaIsValid,
+      defaultQuery,
+      defaultHeaders,
+      defaultTabs,
+      externalFragments,
+      fetcher,
+      headers,
+      inputValueDeprecation,
+      introspectionQueryName,
+      maxHistoryLength,
+      onEditOperationName,
+      onSchemaChange,
+      onTabChange,
+      onTogglePluginVisibility,
+      plugins,
+      visiblePlugin,
+      operationName,
+      query,
+      response,
+      schema,
+      schemaDescription,
+      shouldPersistHeaders,
+      storage,
+      validationRules,
+      variables
+    },
+    /* @__PURE__ */ React.createElement(
+      GraphiQLInterface,
+      {
+        showPersistHeadersSettings: shouldPersistHeaders !== false,
+        forcedTheme: props.forcedTheme,
+        ...props
+      }
+    )
+  );
+}
+GraphiQL.Logo = GraphiQLLogo;
+GraphiQL.Toolbar = GraphiQLToolbar;
+GraphiQL.Footer = GraphiQLFooter;
+const THEMES = ["light", "dark", "system"];
+function GraphiQLInterface(props) {
+  var _a, _b, _c;
+  const isHeadersEditorEnabled = props.isHeadersEditorEnabled ?? true;
+  const editorContext = react.useEditorContext({ nonNull: true });
+  const executionContext = react.useExecutionContext({ nonNull: true });
+  const schemaContext = react.useSchemaContext({ nonNull: true });
+  const storageContext = react.useStorageContext();
+  const pluginContext = react.usePluginContext();
+  const forcedTheme = React.useMemo(
+    () => props.forcedTheme && THEMES.includes(props.forcedTheme) ? props.forcedTheme : void 0,
+    [props.forcedTheme]
+  );
+  const copy = react.useCopyQuery({ onCopyQuery: props.onCopyQuery });
+  const merge = react.useMergeQuery();
+  const prettify = react.usePrettifyEditors();
+  const { theme, setTheme } = react.useTheme();
+  React.useEffect(() => {
+    if (forcedTheme === "system") {
+      setTheme(null);
+    } else if (forcedTheme === "light" || forcedTheme === "dark") {
+      setTheme(forcedTheme);
+    }
+  }, [forcedTheme, setTheme]);
+  const PluginContent = (_a = pluginContext == null ? void 0 : pluginContext.visiblePlugin) == null ? void 0 : _a.content;
+  const pluginResize = react.useDragResize({
+    defaultSizeRelation: 1 / 3,
+    direction: "horizontal",
+    initiallyHidden: (pluginContext == null ? void 0 : pluginContext.visiblePlugin) ? void 0 : "first",
+    onHiddenElementChange(resizableElement) {
+      if (resizableElement === "first") {
+        pluginContext == null ? void 0 : pluginContext.setVisiblePlugin(null);
+      }
+    },
+    sizeThresholdSecond: 200,
+    storageKey: "docExplorerFlex"
+  });
+  const editorResize = react.useDragResize({
+    direction: "horizontal",
+    storageKey: "editorFlex"
+  });
+  const editorToolsResize = react.useDragResize({
+    defaultSizeRelation: 3,
+    direction: "vertical",
+    initiallyHidden: (() => {
+      if (props.defaultEditorToolsVisibility === "variables" || props.defaultEditorToolsVisibility === "headers") {
+        return;
+      }
+      if (typeof props.defaultEditorToolsVisibility === "boolean") {
+        return props.defaultEditorToolsVisibility ? void 0 : "second";
+      }
+      return editorContext.initialVariables || editorContext.initialHeaders ? void 0 : "second";
+    })(),
+    sizeThresholdSecond: 60,
+    storageKey: "secondaryEditorFlex"
+  });
+  const [activeSecondaryEditor, setActiveSecondaryEditor] = React.useState(() => {
+    if (props.defaultEditorToolsVisibility === "variables" || props.defaultEditorToolsVisibility === "headers") {
+      return props.defaultEditorToolsVisibility;
+    }
+    return !editorContext.initialVariables && editorContext.initialHeaders && isHeadersEditorEnabled ? "headers" : "variables";
+  });
+  const [showDialog, setShowDialog] = React.useState(null);
+  const [clearStorageStatus, setClearStorageStatus] = React.useState(null);
+  const children = React.Children.toArray(props.children);
+  const logo = children.find(
+    (child) => isChildComponentType(child, GraphiQL.Logo)
+  ) || /* @__PURE__ */ React.createElement(GraphiQL.Logo, null);
+  const toolbar = children.find(
+    (child) => isChildComponentType(child, GraphiQL.Toolbar)
+  ) || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(react.ToolbarButton, { onClick: prettify, label: "Prettify query (Shift-Ctrl-P)" }, /* @__PURE__ */ React.createElement(react.PrettifyIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })), /* @__PURE__ */ React.createElement(
+    react.ToolbarButton,
+    {
+      onClick: merge,
+      label: "Merge fragments into query (Shift-Ctrl-M)"
+    },
+    /* @__PURE__ */ React.createElement(react.MergeIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })
+  ), /* @__PURE__ */ React.createElement(react.ToolbarButton, { onClick: copy, label: "Copy query (Shift-Ctrl-C)" }, /* @__PURE__ */ React.createElement(react.CopyIcon, { className: "graphiql-toolbar-icon", "aria-hidden": "true" })), (_b = props.toolbar) == null ? void 0 : _b.additionalContent, ((_c = props.toolbar) == null ? void 0 : _c.additionalComponent) && /* @__PURE__ */ React.createElement(props.toolbar.additionalComponent, null));
+  const footer = children.find(
+    (child) => isChildComponentType(child, GraphiQL.Footer)
+  );
+  const onClickReference = React.useCallback(() => {
+    if (pluginResize.hiddenElement === "first") {
+      pluginResize.setHiddenElement(null);
+    }
+  }, [pluginResize]);
+  const handleClearData = React.useCallback(() => {
+    try {
+      storageContext == null ? void 0 : storageContext.clear();
+      setClearStorageStatus("success");
+    } catch {
+      setClearStorageStatus("error");
+    }
+  }, [storageContext]);
+  const handlePersistHeaders = React.useCallback(
+    (event) => {
+      editorContext.setShouldPersistHeaders(
+        event.currentTarget.dataset.value === "true"
+      );
+    },
+    [editorContext]
+  );
+  const handleChangeTheme = React.useCallback(
+    (event) => {
+      const selectedTheme = event.currentTarget.dataset.theme;
+      setTheme(selectedTheme || null);
+    },
+    [setTheme]
+  );
+  const handleAddTab = editorContext.addTab;
+  const handleRefetchSchema = schemaContext.introspect;
+  const handleReorder = editorContext.moveTab;
+  const handleShowDialog = React.useCallback(
+    (event) => {
+      setShowDialog(
+        event.currentTarget.dataset.value
+      );
+    },
+    []
+  );
+  const handlePluginClick = React.useCallback(
+    (e) => {
+      const context = pluginContext;
+      const pluginIndex = Number(e.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 handleToolsTabClick = React.useCallback(
+    (event) => {
+      if (editorToolsResize.hiddenElement === "second") {
+        editorToolsResize.setHiddenElement(null);
+      }
+      setActiveSecondaryEditor(
+        event.currentTarget.dataset.name
+      );
+    },
+    [editorToolsResize]
+  );
+  const toggleEditorTools = React.useCallback(() => {
+    editorToolsResize.setHiddenElement(
+      editorToolsResize.hiddenElement === "second" ? null : "second"
+    );
+  }, [editorToolsResize]);
+  const handleOpenShortKeysDialog = React.useCallback((isOpen) => {
+    if (!isOpen) {
+      setShowDialog(null);
+    }
+  }, []);
+  const handleOpenSettingsDialog = React.useCallback((isOpen) => {
+    if (!isOpen) {
+      setShowDialog(null);
+      setClearStorageStatus(null);
+    }
+  }, []);
+  const hasMultipleTabs = editorContext.tabs.length > 1;
+  const className = props.className ? ` ${props.className}` : "";
+  return /* @__PURE__ */ React.createElement(react.Tooltip.Provider, null, /* @__PURE__ */ React.createElement("div", { className: `graphiql-container${className}` }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-sidebar-section" }, pluginContext == null ? void 0 : pluginContext.plugins.map((plugin, index) => {
+    const isVisible = plugin === pluginContext.visiblePlugin;
+    const label = `${isVisible ? "Hide" : "Show"} ${plugin.title}`;
+    const Icon = plugin.icon;
+    return /* @__PURE__ */ React.createElement(react.Tooltip, { key: plugin.title, label }, /* @__PURE__ */ React.createElement(
+      react.UnStyledButton,
+      {
+        type: "button",
+        className: isVisible ? "active" : "",
+        onClick: handlePluginClick,
+        "data-index": index,
+        "aria-label": label
+      },
+      /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": "true" })
+    ));
+  })), /* @__PURE__ */ React.createElement("div", { className: "graphiql-sidebar-section" }, /* @__PURE__ */ React.createElement(react.Tooltip, { label: "Re-fetch GraphQL schema" }, /* @__PURE__ */ React.createElement(
+    react.UnStyledButton,
+    {
+      type: "button",
+      disabled: schemaContext.isFetching,
+      onClick: handleRefetchSchema,
+      "aria-label": "Re-fetch GraphQL schema"
+    },
+    /* @__PURE__ */ React.createElement(
+      react.ReloadIcon,
+      {
+        className: schemaContext.isFetching ? "graphiql-spin" : "",
+        "aria-hidden": "true"
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(react.Tooltip, { label: "Open short keys dialog" }, /* @__PURE__ */ React.createElement(
+    react.UnStyledButton,
+    {
+      type: "button",
+      "data-value": "short-keys",
+      onClick: handleShowDialog,
+      "aria-label": "Open short keys dialog"
+    },
+    /* @__PURE__ */ React.createElement(react.KeyboardShortcutIcon, { "aria-hidden": "true" })
+  )), /* @__PURE__ */ React.createElement(react.Tooltip, { label: "Open settings dialog" }, /* @__PURE__ */ React.createElement(
+    react.UnStyledButton,
+    {
+      type: "button",
+      "data-value": "settings",
+      onClick: handleShowDialog,
+      "aria-label": "Open settings dialog"
+    },
+    /* @__PURE__ */ React.createElement(react.SettingsIcon, { "aria-hidden": "true" })
+  )))), /* @__PURE__ */ React.createElement("div", { className: "graphiql-main" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: pluginResize.firstRef,
+      style: {
+        // Make sure the container shrinks when containing long
+        // non-breaking texts
+        minWidth: "200px"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "graphiql-plugin" }, PluginContent ? /* @__PURE__ */ React.createElement(PluginContent, null) : null)
+  ), (pluginContext == null ? void 0 : pluginContext.visiblePlugin) && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "graphiql-horizontal-drag-bar",
+      ref: pluginResize.dragBarRef
+    }
+  ), /* @__PURE__ */ React.createElement("div", { ref: pluginResize.secondRef, className: "graphiql-sessions" }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-session-header" }, hasMultipleTabs && /* @__PURE__ */ React.createElement(
+    react.Tabs,
+    {
+      values: editorContext.tabs,
+      onReorder: handleReorder,
+      "aria-label": "Select active operation"
+    },
+    editorContext.tabs.map((tab, index) => /* @__PURE__ */ React.createElement(react.Tooltip, { key: tab.id, label: tab.title }, /* @__PURE__ */ React.createElement(
+      react.Tab,
+      {
+        value: tab,
+        isActive: index === editorContext.activeTabIndex
+      },
+      /* @__PURE__ */ React.createElement(
+        react.Tab.Button,
+        {
+          "aria-controls": "graphiql-session",
+          id: `graphiql-session-tab-${index}`,
+          onClick: () => {
+            executionContext.stop();
+            editorContext.changeTab(index);
+          }
+        },
+        tab.title
+      ),
+      /* @__PURE__ */ React.createElement(
+        react.Tab.Close,
+        {
+          onClick: () => {
+            if (editorContext.activeTabIndex === index) {
+              executionContext.stop();
+            }
+            editorContext.closeTab(index);
+          }
+        }
+      )
+    )))
+  ), /* @__PURE__ */ React.createElement(react.Tooltip, { label: "New tab" }, /* @__PURE__ */ React.createElement(
+    react.UnStyledButton,
+    {
+      type: "button",
+      className: "graphiql-tab-add",
+      onClick: handleAddTab,
+      "aria-label": "New tab"
+    },
+    /* @__PURE__ */ React.createElement(react.PlusIcon, { "aria-hidden": "true" })
+  )), logo), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      id: "graphiql-session",
+      className: "graphiql-session",
+      "aria-labelledby": `graphiql-session-tab-${editorContext.activeTabIndex}`
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: editorResize.firstRef }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "graphiql-editors",
+        style: hasMultipleTabs ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 } : {
+          marginTop: "calc(var(--px-8) - var(--session-header-height))"
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { ref: editorToolsResize.firstRef }, /* @__PURE__ */ React.createElement(
+        "section",
+        {
+          className: "graphiql-query-editor",
+          "aria-label": "Query Editor"
+        },
+        /* @__PURE__ */ React.createElement(
+          react.QueryEditor,
+          {
+            editorTheme: props.editorTheme,
+            keyMap: props.keyMap,
+            onClickReference,
+            onCopyQuery: props.onCopyQuery,
+            onEdit: props.onEditQuery,
+            readOnly: props.readOnly
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "graphiql-toolbar",
+            role: "toolbar",
+            "aria-label": "Editor Commands"
+          },
+          /* @__PURE__ */ React.createElement(react.ExecuteButton, null),
+          toolbar
+        )
+      )),
+      /* @__PURE__ */ React.createElement("div", { ref: editorToolsResize.dragBarRef }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-editor-tools" }, /* @__PURE__ */ React.createElement(
+        react.UnStyledButton,
+        {
+          type: "button",
+          className: activeSecondaryEditor === "variables" && editorToolsResize.hiddenElement !== "second" ? "active" : "",
+          onClick: handleToolsTabClick,
+          "data-name": "variables"
+        },
+        "Variables"
+      ), isHeadersEditorEnabled && /* @__PURE__ */ React.createElement(
+        react.UnStyledButton,
+        {
+          type: "button",
+          className: activeSecondaryEditor === "headers" && editorToolsResize.hiddenElement !== "second" ? "active" : "",
+          onClick: handleToolsTabClick,
+          "data-name": "headers"
+        },
+        "Headers"
+      ), /* @__PURE__ */ React.createElement(
+        react.Tooltip,
+        {
+          label: editorToolsResize.hiddenElement === "second" ? "Show editor tools" : "Hide editor tools"
+        },
+        /* @__PURE__ */ React.createElement(
+          react.UnStyledButton,
+          {
+            type: "button",
+            onClick: toggleEditorTools,
+            "aria-label": editorToolsResize.hiddenElement === "second" ? "Show editor tools" : "Hide editor tools",
+            className: "graphiql-toggle-editor-tools"
+          },
+          editorToolsResize.hiddenElement === "second" ? /* @__PURE__ */ React.createElement(
+            react.ChevronUpIcon,
+            {
+              className: "graphiql-chevron-icon",
+              "aria-hidden": "true"
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            react.ChevronDownIcon,
+            {
+              className: "graphiql-chevron-icon",
+              "aria-hidden": "true"
+            }
+          )
+        )
+      ))),
+      /* @__PURE__ */ React.createElement("div", { ref: editorToolsResize.secondRef }, /* @__PURE__ */ React.createElement(
+        "section",
+        {
+          className: "graphiql-editor-tool",
+          "aria-label": activeSecondaryEditor === "variables" ? "Variables" : "Headers"
+        },
+        /* @__PURE__ */ React.createElement(
+          react.VariableEditor,
+          {
+            editorTheme: props.editorTheme,
+            isHidden: activeSecondaryEditor !== "variables",
+            keyMap: props.keyMap,
+            onEdit: props.onEditVariables,
+            onClickReference,
+            readOnly: props.readOnly
+          }
+        ),
+        isHeadersEditorEnabled && /* @__PURE__ */ React.createElement(
+          react.HeaderEditor,
+          {
+            editorTheme: props.editorTheme,
+            isHidden: activeSecondaryEditor !== "headers",
+            keyMap: props.keyMap,
+            onEdit: props.onEditHeaders,
+            readOnly: props.readOnly
+          }
+        )
+      ))
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "graphiql-horizontal-drag-bar",
+        ref: editorResize.dragBarRef
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { ref: editorResize.secondRef }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-response" }, executionContext.isFetching ? /* @__PURE__ */ React.createElement(react.Spinner, null) : null, /* @__PURE__ */ React.createElement(
+      react.ResponseEditor,
+      {
+        editorTheme: props.editorTheme,
+        responseTooltip: props.responseTooltip,
+        keyMap: props.keyMap
+      }
+    ), footer))
+  ))), /* @__PURE__ */ React.createElement(
+    react.Dialog,
+    {
+      open: showDialog === "short-keys",
+      onOpenChange: handleOpenShortKeysDialog
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-header" }, /* @__PURE__ */ React.createElement(react.Dialog.Title, { className: "graphiql-dialog-title" }, "Short Keys"), /* @__PURE__ */ React.createElement(react.Dialog.Close, null)),
+    /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section" }, /* @__PURE__ */ React.createElement(ShortKeys, { keyMap: props.keyMap || "sublime" }))
+  ), /* @__PURE__ */ React.createElement(
+    react.Dialog,
+    {
+      open: showDialog === "settings",
+      onOpenChange: handleOpenSettingsDialog
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-header" }, /* @__PURE__ */ React.createElement(react.Dialog.Title, { className: "graphiql-dialog-title" }, "Settings"), /* @__PURE__ */ React.createElement(react.Dialog.Close, null)),
+    props.showPersistHeadersSettings ? /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-title" }, "Persist headers"), /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-caption" }, "Save headers upon reloading.", " ", /* @__PURE__ */ React.createElement("span", { className: "graphiql-warning-text" }, "Only enable if you trust this device."))), /* @__PURE__ */ React.createElement(react.ButtonGroup, null, /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        id: "enable-persist-headers",
+        className: editorContext.shouldPersistHeaders ? "active" : "",
+        "data-value": "true",
+        onClick: handlePersistHeaders
+      },
+      "On"
+    ), /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        id: "disable-persist-headers",
+        className: editorContext.shouldPersistHeaders ? "" : "active",
+        onClick: handlePersistHeaders
+      },
+      "Off"
+    ))) : null,
+    !forcedTheme && /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-title" }, "Theme"), /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-caption" }, "Adjust how the interface appears.")), /* @__PURE__ */ React.createElement(react.ButtonGroup, null, /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        className: theme === null ? "active" : "",
+        onClick: handleChangeTheme
+      },
+      "System"
+    ), /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        className: theme === "light" ? "active" : "",
+        "data-theme": "light",
+        onClick: handleChangeTheme
+      },
+      "Light"
+    ), /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        className: theme === "dark" ? "active" : "",
+        "data-theme": "dark",
+        onClick: handleChangeTheme
+      },
+      "Dark"
+    ))),
+    storageContext ? /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-title" }, "Clear storage"), /* @__PURE__ */ React.createElement("div", { className: "graphiql-dialog-section-caption" }, "Remove all locally stored data and start fresh.")), /* @__PURE__ */ React.createElement(
+      react.Button,
+      {
+        type: "button",
+        state: clearStorageStatus || void 0,
+        disabled: clearStorageStatus === "success",
+        onClick: handleClearData
+      },
+      {
+        success: "Cleared data",
+        error: "Failed"
+      }[clearStorageStatus] || "Clear data"
+    )) : null
+  )));
+}
+const modifier = typeof navigator !== "undefined" && navigator.platform.toLowerCase().indexOf("mac") === 0 ? "Cmd" : "Ctrl";
+const SHORT_KEYS = Object.entries({
+  "Search in editor": [modifier, "F"],
+  "Search in documentation": [modifier, "K"],
+  "Execute query": [modifier, "Enter"],
+  "Prettify editors": ["Ctrl", "Shift", "P"],
+  "Merge fragments definitions into operation definition": [
+    "Ctrl",
+    "Shift",
+    "M"
+  ],
+  "Copy query": ["Ctrl", "Shift", "C"],
+  "Re-fetch schema using introspection": ["Ctrl", "Shift", "R"]
+});
+function ShortKeys({ keyMap }) {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("table", { className: "graphiql-table" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, "Short Key"), /* @__PURE__ */ React.createElement("th", null, "Function"))), /* @__PURE__ */ React.createElement("tbody", null, SHORT_KEYS.map(([title, keys]) => /* @__PURE__ */ React.createElement("tr", { key: title }, /* @__PURE__ */ React.createElement("td", null, keys.map((key, index, array) => /* @__PURE__ */ React.createElement(React.Fragment, { key }, /* @__PURE__ */ React.createElement("code", { className: "graphiql-key" }, key), index !== array.length - 1 && " + "))), /* @__PURE__ */ React.createElement("td", null, title))))), /* @__PURE__ */ React.createElement("p", null, "The editors use", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "https://codemirror.net/5/doc/manual.html#keymaps",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    "CodeMirror Key Maps"
+  ), " ", "that add more short keys. This instance of Graph", /* @__PURE__ */ React.createElement("em", null, "i"), "QL uses", " ", /* @__PURE__ */ React.createElement("code", null, keyMap), "."));
+}
+function GraphiQLLogo(props) {
+  return /* @__PURE__ */ React.createElement("div", { className: "graphiql-logo" }, props.children || /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      className: "graphiql-logo-link",
+      href: "https://github.com/graphql/graphiql",
+      target: "_blank",
+      rel: "noreferrer"
+    },
+    "Graph",
+    /* @__PURE__ */ React.createElement("em", null, "i"),
+    "QL"
+  ));
+}
+GraphiQLLogo.displayName = "GraphiQLLogo";
+function GraphiQLToolbar(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+}
+GraphiQLToolbar.displayName = "GraphiQLToolbar";
+function GraphiQLFooter(props) {
+  return /* @__PURE__ */ React.createElement("div", { className: "graphiql-footer" }, props.children);
+}
+GraphiQLFooter.displayName = "GraphiQLFooter";
+function isChildComponentType(child, component) {
+  var _a;
+  if (((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) && child.type.displayName === component.displayName) {
+    return true;
+  }
+  return child.type === component;
+}
+Object.defineProperty(exports, "GraphiQLProvider", {
+  enumerable: true,
+  get: () => react.GraphiQLProvider
+});
+exports.GraphiQL = GraphiQL;
+exports.GraphiQLInterface = GraphiQLInterface;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "graphiql",
-  "version": "3.5.0-canary-869419d9.0",
+  "version": "4.0.0-alpha.0",
   "description": "An graphical interactive in-browser GraphQL IDE.",
@@ -20,33 +20,27 @@ "contributors": [
   "main": "dist/index.js",
-  "module": "esm/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "esm",
-    "src",
-    "graphiql.js",
-    "graphiql.min.js",
-    "graphiql.min.js.map",
-    "graphiql.css",
-    "graphiql.min.css",
-    "graphiql.min.css.map"
+    "dist"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "analyze-bundle": "cross-env NODE_ENV=production ANALYZE=1 yarn webpack -p",
-    "build": "yarn build-clean && yarn build-cjs && yarn build-esm",
-    "build-bundles": "yarn build-bundles-clean && yarn build-bundles-webpack",
-    "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
-    "build-bundles-webpack": "cross-env yarn webpack --mode development --bail",
-    "build-cjs": "tsc",
-    "build-clean": "rimraf esm dist webpack *.html",
-    "build-esm": "tsc --project ./tsconfig.esm.json",
-    "check": "tsc --noEmit",
-    "cypress-open": "yarn e2e-server 'cypress open'",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
+    "cypress-open": "yarn dev 'cypress open'",
+    "build": "vite build && UMD=true vite build",
+    "dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit",
     "e2e": "yarn e2e-server 'cypress run'",
-    "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
-    "webpack": "webpack-cli --config resources/webpack.config.js"
+    "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'"
   },
   "dependencies": {
-    "@graphiql/react": "^0.24.0-canary-869419d9.0"
+    "@graphiql/react": "^1.0.0-alpha.0"
   },
@@ -60,44 +54,24 @@ "peerDependencies": {
     "@graphiql/toolkit": "^0.9.2",
-    "@cypress/webpack-preprocessor": "^5.5.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
-    "@types/codemirror": "^0.0.90",
-    "@types/node": "^16.18.4",
     "@types/testing-library__jest-dom": "5.14.5",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-macros": "^3.1.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
-    "cypress": "^12.6.0",
+    "cypress": "^13.13.2",
     "express": "^4.19.2",
-    "fork-ts-checker-webpack-plugin": "7.3.0",
-    "graphql": "^16.8.1",
+    "graphql": "^16.9.0",
     "graphql-http": "^1.19.0",
     "graphql-subscriptions": "^2.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "mini-css-extract-plugin": "^2.7.2",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
-    "postcss-loader": "7.0.2",
-    "postcss-preset-env": "^8.0.1",
-    "prop-types": "15.7.2",
+    "postcss-lightningcss": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-loader": "^4.12.20",
-    "react-test-renderer": "^18.2.0",
-    "require-context.macro": "^1.2.2",
-    "rimraf": "^3.0.2",
-    "serve": "^11.3.0",
     "start-server-and-test": "^1.10.11",
-    "style-loader": "^3.3.1",
     "subscriptions-transport-ws": "0.11.0",
     "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",
+    "vite": "^5.4.0",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-dts": "^4.0.1",
     "ws": "8.17.1"
   }
 }

README.md

@@ -66,4 +66,4 @@ # GraphiQL
 ```html
-<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
-<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
+<link href="https://unpkg.com/graphiql/dist/style.css" rel="stylesheet" />
+<script crossorigin src="https://unpkg.com/graphiql/dist/index.umd.js"></script>
 ```
@@ -111,3 +111,3 @@
 import { createRoot } from 'react-dom/client';
-import 'graphiql/graphiql.css';
+import 'graphiql/style.css';
 
@@ -114,0 +114,0 @@ const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Obfuscated code

Supply chain risk

Obfuscated files are intentionally packed to hide their behavior. This could be a sign of malware.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

High entropy strings

Supply chain risk

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

22

decreased by-47.62%

Worsened metrics

Total package byte prevSize

5621854

decreased by-59.14%

Number of package files

11

decreased by-76.6%

Lines of code

4989

decreased by-97.29%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@babel/runtime@7.26.0(transitive)

• + Added@graphiql/react@1.0.0-next.2(transitive)

• + Added@graphiql/toolkit@1.0.0-next.2(transitive)

• + Added@reach/auto-id@0.17.0(transitive)

• + Added@reach/combobox@0.17.0(transitive)

• + Added@reach/descendants@0.17.0(transitive)

• + Added@reach/dialog@0.17.0(transitive)

• + Added@reach/dropdown@0.17.0(transitive)

• + Added@reach/menu-button@0.17.0(transitive)

• + Added@reach/observe-rect@1.2.0(transitive)

• + Added@reach/popover@0.17.0(transitive)

• + Added@reach/portal@0.17.0(transitive)

• + Added@reach/rect@0.17.0(transitive)

• + Added@reach/utils@0.17.0(transitive)

• + Added@reach/visually-hidden@0.17.0(transitive)

• + Addedentities@2.1.0(transitive)

• + Addedfocus-lock@1.3.5(transitive)

• + Addedgraphql-ws@5.16.0(transitive)

• + Addedlinkify-it@3.0.3(transitive)

• + Addedmarkdown-it@12.3.2(transitive)

• + Addedmdurl@1.0.1(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-clientside-effect@1.2.7(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-focus-lock@2.13.5(transitive)

• + Addedreact-is@16.13.117.0.2(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedtabbable@4.0.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addeduc.micro@1.0.6(transitive)

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@floating-ui/core@1.6.8(transitive)

• - Removed@floating-ui/dom@1.6.12(transitive)

• - Removed@floating-ui/react-dom@2.1.2(transitive)

• - Removed@floating-ui/utils@0.2.8(transitive)

• - Removed@graphiql/react@0.24.0(transitive)

• - Removed@graphiql/toolkit@0.9.2(transitive)

• - Removed@headlessui/react@1.7.19(transitive)

• - Removed@radix-ui/primitive@1.1.1(transitive)

• - Removed@radix-ui/react-arrow@1.1.1(transitive)

• - Removed@radix-ui/react-collection@1.1.1(transitive)

• - Removed@radix-ui/react-compose-refs@1.1.1(transitive)

• - Removed@radix-ui/react-context@1.1.1(transitive)

• - Removed@radix-ui/react-dialog@1.1.4(transitive)

• - Removed@radix-ui/react-direction@1.1.0(transitive)

• - Removed@radix-ui/react-dismissable-layer@1.1.3(transitive)

• - Removed@radix-ui/react-dropdown-menu@2.1.4(transitive)

• - Removed@radix-ui/react-focus-guards@1.1.1(transitive)

• - Removed@radix-ui/react-focus-scope@1.1.1(transitive)

• - Removed@radix-ui/react-id@1.1.0(transitive)

• - Removed@radix-ui/react-menu@2.1.4(transitive)

• - Removed@radix-ui/react-popper@1.2.1(transitive)

• - Removed@radix-ui/react-portal@1.1.3(transitive)

• - Removed@radix-ui/react-presence@1.1.2(transitive)

• - Removed@radix-ui/react-primitive@2.0.1(transitive)

• - Removed@radix-ui/react-roving-focus@1.1.1(transitive)

• - Removed@radix-ui/react-slot@1.1.1(transitive)

• - Removed@radix-ui/react-tooltip@1.1.6(transitive)

• - Removed@radix-ui/react-use-callback-ref@1.1.0(transitive)

• - Removed@radix-ui/react-use-controllable-state@1.1.0(transitive)

• - Removed@radix-ui/react-use-escape-keydown@1.1.0(transitive)

• - Removed@radix-ui/react-use-layout-effect@1.1.0(transitive)

• - Removed@radix-ui/react-use-rect@1.1.0(transitive)

• - Removed@radix-ui/react-use-size@1.1.0(transitive)

• - Removed@radix-ui/react-visually-hidden@1.1.1(transitive)

• - Removed@radix-ui/rect@1.1.0(transitive)

• - Removed@tanstack/react-virtual@3.11.2(transitive)

• - Removed@tanstack/virtual-core@3.11.2(transitive)

• - Removed@types/codemirror@5.60.15(transitive)

• - Removedaria-hidden@1.2.4(transitive)

• - Removedclient-only@0.0.1(transitive)

• - Removedclsx@1.2.1(transitive)

• - Removedentities@4.5.0(transitive)

• - Removedframer-motion@10.18.0(transitive)

• - Removedlinkify-it@5.0.0(transitive)

• - Removedmarkdown-it@14.1.0(transitive)

• - Removedmdurl@2.0.0(transitive)

• - Removedpunycode.js@2.3.1(transitive)

• - Removeduc.micro@2.1.0(transitive)

• Updated@graphiql/react@^1.0.0-alpha.0