@tanstack/react-query-devtools - npm Package Compare versions

Comparing version 4.24.10 to 5.0.0-alpha.0

build/lib/__tests__/devtools.test.d.ts

 import '@testing-library/jest-dom';
-declare module 'react-error-boundary' {
-    interface ErrorBoundaryPropsWithFallback {
-        children: any;
-    }
-}

build/lib/_virtual/_rollupPluginBabelHelpers.esm.js

@@ -5,3 +5,2 @@ function _extends() {
       var source = arguments[i];
-
       for (var key in source) {
@@ -13,3 +12,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -16,0 +14,0 @@ };

build/lib/_virtual/_rollupPluginBabelHelpers.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function _extends() {
@@ -9,3 +7,2 @@ _extends = Object.assign ? Object.assign.bind() : function (target) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -17,3 +14,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -24,3 +20,3 @@ };
 
-exports["extends"] = _extends;
+exports.extends = _extends;
 //# sourceMappingURL=_rollupPluginBabelHelpers.js.map

build/lib/devtools.d.ts

 import * as React from 'react';
-import type { ContextOptions } from '@tanstack/react-query';
+import type { QueryClient } from '@tanstack/react-query';
 import type { Corner, Side } from './utils';
-export interface DevtoolsOptions extends ContextOptions {
+export interface DevtoolsOptions {
     /**
@@ -41,4 +41,8 @@ * Set this true if you want the dev tools to default to being open
     styleNonce?: string;
+    /**
+     * Custom instance of QueryClient
+     */
+    queryClient?: QueryClient;
 }
-interface DevtoolsPanelOptions extends ContextOptions {
+interface DevtoolsPanelOptions {
     /**
@@ -85,5 +89,9 @@ * The standard React style object used to style a component with inline styles
     closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /**
+     * Custom instance of QueryClient
+     */
+    queryClient?: QueryClient;
 }
-export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, context, styleNonce, panelPosition: initialPanelPosition, }: DevtoolsOptions): React.ReactElement | null;
+export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, queryClient, styleNonce, panelPosition: initialPanelPosition, }: DevtoolsOptions): React.ReactElement | null;
 export declare const ReactQueryDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
 export {};

build/lib/devtools.esm.js

@@ -12,3 +12,2 @@ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
 import Logo from './Logo.esm.js';
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
@@ -22,3 +21,3 @@ function ReactQueryDevtools({
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
@@ -36,7 +35,5 @@ panelPosition: initialPanelPosition = 'bottom'
   const isMounted = useIsMounted();
-
   const handleDragStart = (panelElement, startEvent) => {
     if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
-
     const isVertical = isVerticalSide(panelPosition);
@@ -51,8 +48,8 @@ setIsResizing(true);
     let newSize = 0;
-
     const run = moveEvent => {
       // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
+      moveEvent.preventDefault();
+
+      // calculate the correct size based on mouse position and current panel position
       // hint: it is different formula for the opposite sides
-
       if (isVertical) {
@@ -65,3 +62,2 @@ newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
       }
-
       if (newSize < minPanelSize) {
@@ -73,3 +69,2 @@ setIsOpen(false);
     };
-
     const unsub = () => {
@@ -79,19 +74,16 @@ if (isResizing) {
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
+  React.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
-  React.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
+  // Toggle panel visibility before/after transition (depending on direction).
   // Prevents focusing in a closed panel.
-
   React.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
@@ -103,3 +95,2 @@ const handlePanelTransitionStart = () => {
       };
-
       const handlePanelTransitionEnd = () => {
@@ -110,3 +101,2 @@ if (!isResolvedOpen) {
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
@@ -119,9 +109,6 @@ ref.addEventListener('transitionend', handlePanelTransitionEnd);
     }
-
     return;
   }, [isResolvedOpen]);
   React.useEffect(() => {
-    var _rootRef$current;
-
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+    if (isResolvedOpen && rootRef.current?.parentElement) {
       const {
@@ -132,3 +119,2 @@ parentElement
       const isVertical = isVerticalSide(panelPosition);
-
       const previousPaddings = (({
@@ -147,3 +133,2 @@ padding,
       }))(parentElement.style);
-
       const run = () => {
@@ -155,9 +140,8 @@ // reset the padding
         parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+        parentElement.style.paddingRight = '0px';
+        // set the new padding based on the new panel position
 
-        parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
       };
-
       run();
-
       if (typeof window !== 'undefined') {
@@ -173,3 +157,2 @@ window.addEventListener('resize', run);
     }
-
     return;
@@ -185,4 +168,5 @@ }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = getSidePanelStyle({
@@ -196,4 +180,5 @@ position: panelPosition,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
@@ -208,3 +193,3 @@ return /*#__PURE__*/React.createElement(Container, {
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
@@ -229,3 +214,3 @@ position: panelPosition,
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
@@ -264,5 +249,4 @@ style: {
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return useSyncExternalStore(React.useCallback(onStoreChange => {
+  return React.useSyncExternalStore(React.useCallback(onStoreChange => {
     if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
@@ -274,3 +258,2 @@ return () => {
 };
-
 const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
@@ -281,3 +264,3 @@ const {
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
@@ -294,6 +277,4 @@ onPositionChange,
   } = closeButtonProps;
-  const queryClient = useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
+  const client = useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
   const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
@@ -307,7 +288,5 @@ const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
@@ -334,3 +313,22 @@ const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n          "
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+          `
     }
@@ -346,3 +344,3 @@ }), /*#__PURE__*/React.createElement("div", {
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
@@ -415,3 +413,3 @@ flexDirection: 'column'
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
@@ -426,3 +424,3 @@ onKeyDown: e => {
     }
-  }), !filter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React.createElement(Select, {
     "aria-label": "Sort queries",
@@ -508,3 +506,3 @@ value: sort,
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -525,3 +523,3 @@ overflowY: 'auto',
     queryCache: queryCache,
-    queryClient: queryClient
+    queryClient: client
   }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
@@ -543,7 +541,6 @@ type: "button",
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
@@ -554,30 +551,13 @@ queryCache,
 }) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi;
-
-    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-  });
-  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi2;
-
-    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-  })) != null ? _useSubscribeToQueryC : false;
-  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi3;
-
-    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-  })) != null ? _useSubscribeToQueryC2 : 0;
-
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
   const handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
   };
-
   if (!activeQuery || !activeQueryState) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(ActiveQueryPanel, null, /*#__PURE__*/React.createElement("div", {
@@ -714,3 +694,2 @@ style: {
 };
-
 const QueryStatusCount = ({
@@ -753,3 +732,2 @@ queryCache
 };
-
 const QueryRow = /*#__PURE__*/React.memo(({
@@ -761,41 +739,27 @@ queryKey,
 }) => {
-  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find;
-
-    return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-  })) != null ? _useSubscribeToQueryC3 : '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find2;
-
-    return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-  });
-  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find3;
-
-    return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-  })) != null ? _useSubscribeToQueryC4 : false;
-  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find4;
-
-    return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-  })) != null ? _useSubscribeToQueryC5 : false;
-  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find5;
-
-    return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-  })) != null ? _useSubscribeToQueryC6 : 0;
-
+  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.queryHash) ?? '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isStale()) ?? false;
+  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isDisabled()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.getObserversCount()) ?? 0;
   if (!queryState) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     role: "button",
-    "aria-label": "Open query details for " + queryHash,
+    "aria-label": `Open query details for ${queryHash}`,
     onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
     style: {
       display: 'flex',
-      borderBottom: "solid 1px " + defaultTheme.grayAlt,
+      borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
       cursor: 'pointer',
@@ -836,5 +800,6 @@ background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
@@ -841,0 +806,0 @@

build/lib/devtools.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
@@ -16,6 +14,4 @@ var React = require('react');
 var Logo = require('./Logo.js');
-var index_js = require('use-sync-external-store/shim/index.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -33,7 +29,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -47,3 +43,3 @@ function ReactQueryDevtools({
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
@@ -54,14 +50,12 @@ panelPosition: initialPanelPosition = 'bottom'
   const panelRef = React__namespace.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactQueryDevtoolsHeight', utils.defaultPanelSize);
-  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage["default"]('reactQueryDevtoolsWidth', utils.defaultPanelSize);
-  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage["default"]('reactQueryDevtoolsPanelPosition', initialPanelPosition);
+  const [isOpen, setIsOpen] = useLocalStorage.default('reactQueryDevtoolsOpen', initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage.default('reactQueryDevtoolsHeight', utils.defaultPanelSize);
+  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage.default('reactQueryDevtoolsWidth', utils.defaultPanelSize);
+  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage.default('reactQueryDevtoolsPanelPosition', initialPanelPosition);
   const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
   const [isResizing, setIsResizing] = React__namespace.useState(false);
   const isMounted = utils.useIsMounted();
-
   const handleDragStart = (panelElement, startEvent) => {
     if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
-
     const isVertical = utils.isVerticalSide(panelPosition);
@@ -76,8 +70,8 @@ setIsResizing(true);
     let newSize = 0;
-
     const run = moveEvent => {
       // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
+      moveEvent.preventDefault();
+
+      // calculate the correct size based on mouse position and current panel position
       // hint: it is different formula for the opposite sides
-
       if (isVertical) {
@@ -90,3 +84,2 @@ newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
       }
-
       if (newSize < utils.minPanelSize) {
@@ -98,3 +91,2 @@ setIsOpen(false);
     };
-
     const unsub = () => {
@@ -104,19 +96,16 @@ if (isResizing) {
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
+  React__namespace.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
-  React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
+  // Toggle panel visibility before/after transition (depending on direction).
   // Prevents focusing in a closed panel.
-
   React__namespace.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
@@ -128,3 +117,2 @@ const handlePanelTransitionStart = () => {
       };
-
       const handlePanelTransitionEnd = () => {
@@ -135,3 +123,2 @@ if (!isResolvedOpen) {
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
@@ -144,9 +131,6 @@ ref.addEventListener('transitionend', handlePanelTransitionEnd);
     }
-
     return;
   }, [isResolvedOpen]);
   React__namespace.useEffect(() => {
-    var _rootRef$current;
-
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+    if (isResolvedOpen && rootRef.current?.parentElement) {
       const {
@@ -157,3 +141,2 @@ parentElement
       const isVertical = utils.isVerticalSide(panelPosition);
-
       const previousPaddings = (({
@@ -172,3 +155,2 @@ padding,
       }))(parentElement.style);
-
       const run = () => {
@@ -180,9 +162,8 @@ // reset the padding
         parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+        parentElement.style.paddingRight = '0px';
+        // set the new padding based on the new panel position
 
-        parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
       };
-
       run();
-
       if (typeof window !== 'undefined') {
@@ -198,3 +179,2 @@ window.addEventListener('resize', run);
     }
-
     return;
@@ -210,4 +190,5 @@ }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = utils.getSidePanelStyle({
@@ -221,4 +202,5 @@ position: panelPosition,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
@@ -231,5 +213,5 @@ return /*#__PURE__*/React__namespace.createElement(Container, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers.extends({
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
@@ -245,3 +227,3 @@ position: panelPosition,
     onDragStart: e => handleDragStart(panelRef.current, e)
-  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
@@ -255,3 +237,3 @@ }, otherToggleButtonProps, {
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
@@ -284,11 +266,10 @@ style: {
     }
-  }), /*#__PURE__*/React__namespace.createElement(Logo["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(Logo.default, {
     "aria-hidden": true
-  }), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: "Open React Query Devtools"
   })) : null);
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return index_js.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
+  return React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
     if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
@@ -300,3 +281,2 @@ return () => {
 };
-
 const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
@@ -307,3 +287,3 @@ const {
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
@@ -320,19 +300,15 @@ onPositionChange,
   } = closeButtonProps;
-  const queryClient = reactQuery.useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
-  const [sort, setSort] = useLocalStorage["default"]('reactQueryDevtoolsSortFn', Object.keys(utils.sortFns)[0]);
-  const [filter, setFilter] = useLocalStorage["default"]('reactQueryDevtoolsFilter', '');
-  const [baseSort, setBaseSort] = useLocalStorage["default"]('reactQueryDevtoolsBaseSort', 1);
+  const client = reactQuery.useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
+  const [sort, setSort] = useLocalStorage.default('reactQueryDevtoolsSortFn', Object.keys(utils.sortFns)[0]);
+  const [filter, setFilter] = useLocalStorage.default('reactQueryDevtoolsFilter', '');
+  const [baseSort, setBaseSort] = useLocalStorage.default('reactQueryDevtoolsBaseSort', 1);
   const sortFn = React__namespace.useMemo(() => utils.sortFns[sort], [sort]);
   const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length, !isOpen);
-  const [activeQueryHash, setActiveQueryHash] = useLocalStorage["default"]('reactQueryDevtoolsActiveQueryHash', '');
+  const [activeQueryHash, setActiveQueryHash] = useLocalStorage.default('reactQueryDevtoolsActiveQueryHash', '');
   const queries = React__namespace.useMemo(() => {
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => matchSorterUtils.rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
@@ -345,3 +321,3 @@ const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers.extends({
     ref: ref,
@@ -360,3 +336,22 @@ className: "ReactQueryDevtoolsPanel",
     dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n            }\n          "
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${theme.defaultTheme.backgroundAlt} ${theme.defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${theme.defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${theme.defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${theme.defaultTheme.backgroundAlt};
+            }
+          `
     }
@@ -372,3 +367,3 @@ }), /*#__PURE__*/React__namespace.createElement("div", {
       overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
       display: 'flex',
@@ -400,5 +395,5 @@ flexDirection: 'column'
     }
-  }, /*#__PURE__*/React__namespace.createElement(Logo["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Logo.default, {
     "aria-hidden": true
-  }), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: "Close React Query Devtools"
@@ -442,3 +437,3 @@ })), /*#__PURE__*/React__namespace.createElement("div", {
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
@@ -453,3 +448,3 @@ onKeyDown: e => {
     }
-  }), !filter ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
+  }), /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
     "aria-label": "Sort queries",
@@ -533,5 +528,5 @@ value: sort,
     d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
-  }))), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }))), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React__namespace.createElement("div", {
+  }))))), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
@@ -552,4 +547,4 @@ overflowY: 'auto',
     queryCache: queryCache,
-    queryClient: queryClient
-  }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
+    queryClient: client
+  }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers.extends({
     type: "button",
@@ -570,7 +565,6 @@ "aria-controls": "ReactQueryDevtoolsPanel",
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
@@ -581,30 +575,13 @@ queryCache,
 }) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi;
-
-    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-  });
-  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi2;
-
-    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-  })) != null ? _useSubscribeToQueryC : false;
-  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi3;
-
-    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-  })) != null ? _useSubscribeToQueryC2 : 0;
-
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
   const handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
   };
-
   if (!activeQuery || !activeQueryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement(styledComponents.ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
@@ -716,3 +693,3 @@ style: {
     }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Explorer.default, {
     label: "Data",
@@ -734,3 +711,3 @@ value: activeQueryState.data,
     }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Explorer.default, {
     label: "Query",
@@ -743,3 +720,2 @@ value: activeQuery,
 };
-
 const QueryStatusCount = ({
@@ -782,3 +758,2 @@ queryCache
 };
-
 const QueryRow = /*#__PURE__*/React__namespace.memo(({
@@ -790,41 +765,27 @@ queryKey,
 }) => {
-  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find;
-
-    return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-  })) != null ? _useSubscribeToQueryC3 : '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find2;
-
-    return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-  });
-  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find3;
-
-    return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-  })) != null ? _useSubscribeToQueryC4 : false;
-  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find4;
-
-    return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-  })) != null ? _useSubscribeToQueryC5 : false;
-  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find5;
-
-    return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-  })) != null ? _useSubscribeToQueryC6 : 0;
-
+  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.queryHash) ?? '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isStale()) ?? false;
+  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isDisabled()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.getObserversCount()) ?? 0;
   if (!queryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement("div", {
     role: "button",
-    "aria-label": "Open query details for " + queryHash,
+    "aria-label": `Open query details for ${queryHash}`,
     onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
     style: {
       display: 'flex',
-      borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+      borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
       cursor: 'pointer',
@@ -865,5 +826,6 @@ background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
@@ -870,0 +832,0 @@

build/lib/Explorer.d.ts

@@ -17,11 +17,11 @@ import * as React from 'react';
 export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
-declare type Entry = {
+declare type EntryType = {
     label: string;
 };
 declare type RendererProps = {
-    handleEntry: (entry: Entry) => JSX.Element;
+    handleEntry: (entry: EntryType) => JSX.Element;
     label?: string;
     value: unknown;
-    subEntries: Entry[];
-    subEntryPages: Entry[][];
+    subEntries: EntryType[];
+    subEntryPages: EntryType[][];
     type: string;
@@ -28,0 +28,0 @@ expanded: boolean;

build/lib/Explorer.esm.js

@@ -78,7 +78,6 @@ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
     transition: 'all .1s ease',
-    transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
     ...style
   }
 }, "\u25B6");
-
 const Copier = () => /*#__PURE__*/React.createElement("span", {
@@ -101,3 +100,2 @@ "aria-label": "Copy object to clipboard",
 })));
-
 const ErrorCopier = () => /*#__PURE__*/React.createElement("span", {
@@ -128,3 +126,2 @@ "aria-label": "Failed copying to clipboard",
 }, "See console"));
-
 const CopiedCopier = () => /*#__PURE__*/React.createElement("span", {
@@ -147,3 +144,2 @@ "aria-label": "Object copied to clipboard",
 })));
-
 /**
@@ -162,3 +158,2 @@ * Chunk elements in the array by size
   const result = [];
-
   while (i < array.length) {
@@ -168,3 +163,2 @@ result.push(array.slice(i, i + size));
   }
-
   return result;
@@ -191,3 +185,3 @@ }
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
     value: value
@@ -202,7 +196,5 @@ }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
 function Explorer({
@@ -220,12 +212,11 @@ value,
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return { ...sub,
+    } : defaultExpanded?.[sub.label];
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
     };
   };
-
   if (Array.isArray(value)) {
@@ -250,3 +241,2 @@ type = 'array';
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
@@ -253,0 +243,0 @@ return renderer({

build/lib/Explorer.js

@@ -10,6 +10,3 @@ 'use strict';
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -27,8 +24,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SuperJSON__default = /*#__PURE__*/_interopDefaultLegacy(SuperJSON);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -64,3 +60,3 @@ const Entry = utils.styled('div', {
     onClick: copyState === 'NoCopy' ? () => {
-      navigator.clipboard.writeText(SuperJSON__default["default"].stringify(value)).then(() => {
+      navigator.clipboard.writeText(SuperJSON.stringify(value)).then(() => {
         setCopyState('SuccessCopy');
@@ -108,7 +104,6 @@ setTimeout(() => {
     transition: 'all .1s ease',
-    transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
     ...style
   }
 }, "\u25B6");
-
 const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -131,3 +126,2 @@ "aria-label": "Copy object to clipboard",
 })));
-
 const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -158,3 +152,2 @@ "aria-label": "Failed copying to clipboard",
 }, "See console"));
-
 const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -177,3 +170,2 @@ "aria-label": "Object copied to clipboard",
 })));
-
 /**
@@ -192,3 +184,2 @@ * Chunk elements in the array by size
   const result = [];
-
   while (i < array.length) {
@@ -198,3 +189,2 @@ result.push(array.slice(i, i + size));
   }
-
   return result;
@@ -221,3 +211,3 @@ }
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
+  }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
     value: value
@@ -232,7 +222,5 @@ }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
 function Explorer({
@@ -250,12 +238,11 @@ value,
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return { ...sub,
+    } : defaultExpanded?.[sub.label];
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
     };
   };
-
   if (Array.isArray(value)) {
@@ -280,6 +267,5 @@ type = 'array';
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
   return renderer({
-    handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers["extends"]({
+    handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers.extends({
       key: entry.label,
@@ -313,3 +299,3 @@ value: value,
 exports.chunkArray = chunkArray;
-exports["default"] = Explorer;
+exports.default = Explorer;
 //# sourceMappingURL=Explorer.js.map

build/lib/index.d.ts

 import * as devtools from './devtools';
-export declare const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'];
-export declare const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'];
+export declare const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'];
+export declare const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'];

build/lib/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var devtools = require('./devtools.js');
@@ -6,0 +4,0 @@

build/lib/index.prod.d.ts

 import * as devtools from './devtools';
-export declare const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'];
-export declare const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'];
+export declare const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'];
+export declare const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'];

build/lib/index.prod.esm.js

@@ -5,3 +5,2 @@ import * as React from 'react';
 import SuperJSON from 'superjson';
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
@@ -12,3 +11,2 @@ function _extends() {
       var source = arguments[i];
-
       for (var key in source) {
@@ -20,3 +18,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -30,7 +27,5 @@ };
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
@@ -41,3 +36,2 @@ } catch {
 };
-
 function useLocalStorage(key, defaultValue) {
@@ -47,3 +41,2 @@ const [value, setValue] = React.useState();
     const initialValue = getItem(key);
-
     if (typeof initialValue === 'undefined' || initialValue === null) {
@@ -58,11 +51,8 @@ setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       let newVal = updater;
-
       if (typeof updater == 'function') {
         newVal = updater(old);
       }
-
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
       } catch {}
-
       return newVal;
@@ -107,16 +97,17 @@ });
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // Watch for changes
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       // Create a matcher
-      const matcher = window.matchMedia(query); // Create our handler
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
       const onChange = ({
         matches
-      }) => setIsMatch(matches); // Listen for changes
+      }) => setIsMatch(matches);
 
-
+      // Listen for changes
       matcher.addListener(onChange);
@@ -128,3 +119,2 @@ return () => {
     }
-
     return;
@@ -154,8 +144,11 @@ }, [isMatch, query, setIsMatch]);
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? { ...current,
+      return useMediaQuery(key) ? {
+        ...current,
         ...(typeof value === 'function' ? value(rest, theme) : value)
       } : current;
     }, {});
-    return /*#__PURE__*/React.createElement(type, { ...rest,
-      style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+    return /*#__PURE__*/React.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
         ...style,
@@ -179,2 +172,3 @@ ...mediaStyles
 }
+
 /**
@@ -185,3 +179,2 @@ * Displays a string regardless the type of the data
  */
-
 const displayValue = (value, beautify = false) => {
@@ -192,10 +185,9 @@ const {
   return JSON.stringify(json, null, beautify ? 2 : undefined);
-}; // Sorting functions
+};
 
+// Sorting functions
+
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-
 const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-
 const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-
 const statusAndDateSort = (a, b) => {
@@ -205,6 +197,4 @@ if (getStatusRank(a) === getStatusRank(b)) {
   }
-
   return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
 };
-
 const sortFns = {
@@ -223,3 +213,2 @@ 'Status > Last Updated': statusAndDateSort,
 };
-
 /**
@@ -234,3 +223,2 @@ * Check if the given side is vertical (left/right)
  */
-
 function getOppositeSide(side) {
@@ -243,5 +231,4 @@ return sides[side];
  */
-
 function getSidedProp(prop, side) {
-  return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+  return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
 }
@@ -260,7 +247,8 @@ function getSidePanelStyle({
   const isVertical = isVerticalSide(position);
-  return { ...panelStyle,
+  return {
+    ...panelStyle,
     direction: 'ltr',
     position: 'fixed',
     [position]: 0,
-    [borderSide]: "1px solid " + devtoolsTheme.gray,
+    [borderSide]: `1px solid ${devtoolsTheme.gray}`,
     transformOrigin: oppositeSide,
@@ -272,5 +260,5 @@ boxShadow: '0 0 20px rgba(0,0,0,.3)',
     ...(isResizing ? {
-      transition: "none"
+      transition: `none`
     } : {
-      transition: "all .2s ease"
+      transition: `all .2s ease`
     }),
@@ -280,7 +268,7 @@ ...(isOpen ? {
       pointerEvents: 'all',
-      transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+      transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
     } : {
       opacity: 0,
       pointerEvents: 'none',
-      transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+      transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
     }),
@@ -300,6 +288,6 @@ ...(isVertical ? {
 }
+
 /**
  * Get resize handle style based on a given side
  */
-
 function getResizeHandleStyle(position = 'bottom') {
@@ -314,3 +302,3 @@ const isVertical = isVerticalSide(position);
     [oppositeSide]: 0,
-    [marginSide]: "-4px",
+    [marginSide]: `-4px`,
     ...(isVertical ? {
@@ -329,3 +317,3 @@ top: 0,
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
@@ -339,6 +327,7 @@ backgroundColor: theme.background,
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActiveQueryPanel = styled('div', () => ({
@@ -352,3 +341,3 @@ flex: '1 1 500px',
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
@@ -391,22 +380,22 @@ });
   fontSize: '.9em',
-  lineHeight: "1.3",
+  lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
 const Select = styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
+  display: `inline-block`,
+  fontSize: `.9em`,
+  fontFamily: `sans-serif`,
   fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
+  lineHeight: `1.3`,
+  padding: `.3em 1.5em .3em .5em`,
   height: 'auto',
   border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
+  borderRadius: `.2em`,
+  appearance: `none`,
   WebkitAppearance: 'none',
   backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
+  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+  backgroundRepeat: `no-repeat`,
+  backgroundPosition: `right .55em center`,
+  backgroundSize: `.65em auto, 100%`,
   color: theme.inputTextColor
@@ -504,7 +493,6 @@ }), {
     transition: 'all .1s ease',
-    transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
     ...style
   }
 }, "\u25B6");
-
 const Copier = () => /*#__PURE__*/React.createElement("span", {
@@ -527,3 +515,2 @@ "aria-label": "Copy object to clipboard",
 })));
-
 const ErrorCopier = () => /*#__PURE__*/React.createElement("span", {
@@ -554,3 +541,2 @@ "aria-label": "Failed copying to clipboard",
 }, "See console"));
-
 const CopiedCopier = () => /*#__PURE__*/React.createElement("span", {
@@ -573,3 +559,2 @@ "aria-label": "Object copied to clipboard",
 })));
-
 /**
@@ -588,3 +573,2 @@ * Chunk elements in the array by size
   const result = [];
-
   while (i < array.length) {
@@ -594,3 +578,2 @@ result.push(array.slice(i, i + size));
   }
-
   return result;
@@ -617,3 +600,3 @@ }
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React.createElement(CopyButton, {
     value: value
@@ -628,7 +611,5 @@ }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
 function Explorer({
@@ -646,12 +627,11 @@ value,
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return { ...sub,
+    } : defaultExpanded?.[sub.label];
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
     };
   };
-
   if (Array.isArray(value)) {
@@ -676,3 +656,2 @@ type = 'array';
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
@@ -732,3 +711,3 @@ return renderer({
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
@@ -746,7 +725,5 @@ panelPosition: initialPanelPosition = 'bottom'
   const isMounted = useIsMounted();
-
   const handleDragStart = (panelElement, startEvent) => {
     if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
-
     const isVertical = isVerticalSide(panelPosition);
@@ -761,8 +738,8 @@ setIsResizing(true);
     let newSize = 0;
-
     const run = moveEvent => {
       // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
+      moveEvent.preventDefault();
+
+      // calculate the correct size based on mouse position and current panel position
       // hint: it is different formula for the opposite sides
-
       if (isVertical) {
@@ -775,3 +752,2 @@ newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
       }
-
       if (newSize < minPanelSize) {
@@ -783,3 +759,2 @@ setIsOpen(false);
     };
-
     const unsub = () => {
@@ -789,19 +764,16 @@ if (isResizing) {
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
+  React.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
-  React.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
+  // Toggle panel visibility before/after transition (depending on direction).
   // Prevents focusing in a closed panel.
-
   React.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
@@ -813,3 +785,2 @@ const handlePanelTransitionStart = () => {
       };
-
       const handlePanelTransitionEnd = () => {
@@ -820,3 +791,2 @@ if (!isResolvedOpen) {
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
@@ -829,9 +799,6 @@ ref.addEventListener('transitionend', handlePanelTransitionEnd);
     }
-
     return;
   }, [isResolvedOpen]);
   React.useEffect(() => {
-    var _rootRef$current;
-
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+    if (isResolvedOpen && rootRef.current?.parentElement) {
       const {
@@ -842,3 +809,2 @@ parentElement
       const isVertical = isVerticalSide(panelPosition);
-
       const previousPaddings = (({
@@ -857,3 +823,2 @@ padding,
       }))(parentElement.style);
-
       const run = () => {
@@ -865,9 +830,8 @@ // reset the padding
         parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+        parentElement.style.paddingRight = '0px';
+        // set the new padding based on the new panel position
 
-        parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
       };
-
       run();
-
       if (typeof window !== 'undefined') {
@@ -883,3 +847,2 @@ window.addEventListener('resize', run);
     }
-
     return;
@@ -895,4 +858,5 @@ }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = getSidePanelStyle({
@@ -906,4 +870,5 @@ position: panelPosition,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
@@ -918,3 +883,3 @@ return /*#__PURE__*/React.createElement(Container, {
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
@@ -939,3 +904,3 @@ position: panelPosition,
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
@@ -974,5 +939,4 @@ style: {
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return useSyncExternalStore(React.useCallback(onStoreChange => {
+  return React.useSyncExternalStore(React.useCallback(onStoreChange => {
     if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
@@ -984,3 +948,2 @@ return () => {
 };
-
 const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
@@ -991,3 +954,3 @@ const {
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
@@ -1004,6 +967,4 @@ onPositionChange,
   } = closeButtonProps;
-  const queryClient = useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
+  const client = useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
   const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
@@ -1017,7 +978,5 @@ const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
@@ -1044,3 +1003,22 @@ const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n          "
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+          `
     }
@@ -1056,3 +1034,3 @@ }), /*#__PURE__*/React.createElement("div", {
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
@@ -1125,3 +1103,3 @@ flexDirection: 'column'
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
@@ -1136,3 +1114,3 @@ onKeyDown: e => {
     }
-  }), !filter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React.createElement(Select, {
     "aria-label": "Sort queries",
@@ -1218,3 +1196,3 @@ value: sort,
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -1235,3 +1213,3 @@ overflowY: 'auto',
     queryCache: queryCache,
-    queryClient: queryClient
+    queryClient: client
   }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
@@ -1253,7 +1231,6 @@ type: "button",
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
@@ -1264,30 +1241,13 @@ queryCache,
 }) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi;
-
-    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-  });
-  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi2;
-
-    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-  })) != null ? _useSubscribeToQueryC : false;
-  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi3;
-
-    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-  })) != null ? _useSubscribeToQueryC2 : 0;
-
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
   const handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
   };
-
   if (!activeQuery || !activeQueryState) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(ActiveQueryPanel, null, /*#__PURE__*/React.createElement("div", {
@@ -1424,3 +1384,2 @@ style: {
 };
-
 const QueryStatusCount = ({
@@ -1463,3 +1422,2 @@ queryCache
 };
-
 const QueryRow = /*#__PURE__*/React.memo(({
@@ -1471,41 +1429,27 @@ queryKey,
 }) => {
-  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find;
-
-    return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-  })) != null ? _useSubscribeToQueryC3 : '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find2;
-
-    return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-  });
-  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find3;
-
-    return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-  })) != null ? _useSubscribeToQueryC4 : false;
-  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find4;
-
-    return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-  })) != null ? _useSubscribeToQueryC5 : false;
-  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find5;
-
-    return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-  })) != null ? _useSubscribeToQueryC6 : 0;
-
+  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.queryHash) ?? '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isStale()) ?? false;
+  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isDisabled()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.getObserversCount()) ?? 0;
   if (!queryState) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     role: "button",
-    "aria-label": "Open query details for " + queryHash,
+    "aria-label": `Open query details for ${queryHash}`,
     onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
     style: {
       display: 'flex',
-      borderBottom: "solid 1px " + defaultTheme.grayAlt,
+      borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
       cursor: 'pointer',
@@ -1546,5 +1490,6 @@ background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
@@ -1551,0 +1496,0 @@

build/lib/index.prod.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
@@ -9,8 +7,4 @@ var reactQuery = require('@tanstack/react-query');
 var SuperJSON = require('superjson');
-var index_js = require('use-sync-external-store/shim/index.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -28,8 +22,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SuperJSON__default = /*#__PURE__*/_interopDefaultLegacy(SuperJSON);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -40,3 +33,2 @@ function _extends() {
       var source = arguments[i];
-
       for (var key in source) {
@@ -48,3 +40,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -58,7 +49,5 @@ };
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
@@ -69,3 +58,2 @@ } catch {
 };
-
 function useLocalStorage(key, defaultValue) {
@@ -75,3 +63,2 @@ const [value, setValue] = React__namespace.useState();
     const initialValue = getItem(key);
-
     if (typeof initialValue === 'undefined' || initialValue === null) {
@@ -86,11 +73,8 @@ setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       let newVal = updater;
-
       if (typeof updater == 'function') {
         newVal = updater(old);
       }
-
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
       } catch {}
-
       return newVal;
@@ -135,16 +119,17 @@ });
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // Watch for changes
   React__namespace.useEffect(() => {
     if (typeof window !== 'undefined') {
       // Create a matcher
-      const matcher = window.matchMedia(query); // Create our handler
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
       const onChange = ({
         matches
-      }) => setIsMatch(matches); // Listen for changes
+      }) => setIsMatch(matches);
 
-
+      // Listen for changes
       matcher.addListener(onChange);
@@ -156,3 +141,2 @@ return () => {
     }
-
     return;
@@ -182,8 +166,11 @@ }, [isMatch, query, setIsMatch]);
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? { ...current,
+      return useMediaQuery(key) ? {
+        ...current,
         ...(typeof value === 'function' ? value(rest, theme) : value)
       } : current;
     }, {});
-    return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
-      style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+    return /*#__PURE__*/React__namespace.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
         ...style,
@@ -207,2 +194,3 @@ ...mediaStyles
 }
+
 /**
@@ -213,16 +201,14 @@ * Displays a string regardless the type of the data
  */
-
 const displayValue = (value, beautify = false) => {
   const {
     json
-  } = SuperJSON__default["default"].serialize(value);
+  } = SuperJSON.serialize(value);
   return JSON.stringify(json, null, beautify ? 2 : undefined);
-}; // Sorting functions
+};
 
+// Sorting functions
+
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-
 const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-
 const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-
 const statusAndDateSort = (a, b) => {
@@ -232,6 +218,4 @@ if (getStatusRank(a) === getStatusRank(b)) {
   }
-
   return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
 };
-
 const sortFns = {
@@ -250,3 +234,2 @@ 'Status > Last Updated': statusAndDateSort,
 };
-
 /**
@@ -261,3 +244,2 @@ * Check if the given side is vertical (left/right)
  */
-
 function getOppositeSide(side) {
@@ -270,5 +252,4 @@ return sides[side];
  */
-
 function getSidedProp(prop, side) {
-  return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+  return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
 }
@@ -287,7 +268,8 @@ function getSidePanelStyle({
   const isVertical = isVerticalSide(position);
-  return { ...panelStyle,
+  return {
+    ...panelStyle,
     direction: 'ltr',
     position: 'fixed',
     [position]: 0,
-    [borderSide]: "1px solid " + devtoolsTheme.gray,
+    [borderSide]: `1px solid ${devtoolsTheme.gray}`,
     transformOrigin: oppositeSide,
@@ -299,5 +281,5 @@ boxShadow: '0 0 20px rgba(0,0,0,.3)',
     ...(isResizing ? {
-      transition: "none"
+      transition: `none`
     } : {
-      transition: "all .2s ease"
+      transition: `all .2s ease`
     }),
@@ -307,7 +289,7 @@ ...(isOpen ? {
       pointerEvents: 'all',
-      transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+      transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
     } : {
       opacity: 0,
       pointerEvents: 'none',
-      transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+      transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
     }),
@@ -327,6 +309,6 @@ ...(isVertical ? {
 }
+
 /**
  * Get resize handle style based on a given side
  */
-
 function getResizeHandleStyle(position = 'bottom') {
@@ -341,3 +323,3 @@ const isVertical = isVerticalSide(position);
     [oppositeSide]: 0,
-    [marginSide]: "-4px",
+    [marginSide]: `-4px`,
     ...(isVertical ? {
@@ -356,3 +338,3 @@ top: 0,
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
@@ -366,6 +348,7 @@ backgroundColor: theme.background,
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActiveQueryPanel = styled('div', () => ({
@@ -379,3 +362,3 @@ flex: '1 1 500px',
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
@@ -418,22 +401,22 @@ });
   fontSize: '.9em',
-  lineHeight: "1.3",
+  lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
 const Select = styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
+  display: `inline-block`,
+  fontSize: `.9em`,
+  fontFamily: `sans-serif`,
   fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
+  lineHeight: `1.3`,
+  padding: `.3em 1.5em .3em .5em`,
   height: 'auto',
   border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
+  borderRadius: `.2em`,
+  appearance: `none`,
   WebkitAppearance: 'none',
   backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
+  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+  backgroundRepeat: `no-repeat`,
+  backgroundPosition: `right .55em center`,
+  backgroundSize: `.65em auto, 100%`,
   color: theme.inputTextColor
@@ -488,3 +471,3 @@ }), {
     onClick: copyState === 'NoCopy' ? () => {
-      navigator.clipboard.writeText(SuperJSON__default["default"].stringify(value)).then(() => {
+      navigator.clipboard.writeText(SuperJSON.stringify(value)).then(() => {
         setCopyState('SuccessCopy');
@@ -532,7 +515,6 @@ setTimeout(() => {
     transition: 'all .1s ease',
-    transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
+    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
     ...style
   }
 }, "\u25B6");
-
 const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -555,3 +537,2 @@ "aria-label": "Copy object to clipboard",
 })));
-
 const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -582,3 +563,2 @@ "aria-label": "Failed copying to clipboard",
 }, "See console"));
-
 const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
@@ -601,3 +581,2 @@ "aria-label": "Object copied to clipboard",
 })));
-
 /**
@@ -616,3 +595,2 @@ * Chunk elements in the array by size
   const result = [];
-
   while (i < array.length) {
@@ -622,3 +600,2 @@ result.push(array.slice(i, i + size));
   }
-
   return result;
@@ -645,3 +622,3 @@ }
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
+  }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
     value: value
@@ -656,7 +633,5 @@ }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
 };
-
 function isIterable(x) {
   return Symbol.iterator in x;
 }
-
 function Explorer({
@@ -674,12 +649,11 @@ value,
   let subEntries = [];
-
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return { ...sub,
+    } : defaultExpanded?.[sub.label];
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
     };
   };
-
   if (Array.isArray(value)) {
@@ -704,3 +678,2 @@ type = 'array';
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
@@ -760,3 +733,3 @@ return renderer({
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
@@ -774,7 +747,5 @@ panelPosition: initialPanelPosition = 'bottom'
   const isMounted = useIsMounted();
-
   const handleDragStart = (panelElement, startEvent) => {
     if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
-
     const isVertical = isVerticalSide(panelPosition);
@@ -789,8 +760,8 @@ setIsResizing(true);
     let newSize = 0;
-
     const run = moveEvent => {
       // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
+      moveEvent.preventDefault();
+
+      // calculate the correct size based on mouse position and current panel position
       // hint: it is different formula for the opposite sides
-
       if (isVertical) {
@@ -803,3 +774,2 @@ newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
       }
-
       if (newSize < minPanelSize) {
@@ -811,3 +781,2 @@ setIsOpen(false);
     };
-
     const unsub = () => {
@@ -817,19 +786,16 @@ if (isResizing) {
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
+  React__namespace.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
-  React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
+  // Toggle panel visibility before/after transition (depending on direction).
   // Prevents focusing in a closed panel.
-
   React__namespace.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
@@ -841,3 +807,2 @@ const handlePanelTransitionStart = () => {
       };
-
       const handlePanelTransitionEnd = () => {
@@ -848,3 +813,2 @@ if (!isResolvedOpen) {
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
@@ -857,9 +821,6 @@ ref.addEventListener('transitionend', handlePanelTransitionEnd);
     }
-
     return;
   }, [isResolvedOpen]);
   React__namespace.useEffect(() => {
-    var _rootRef$current;
-
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+    if (isResolvedOpen && rootRef.current?.parentElement) {
       const {
@@ -870,3 +831,2 @@ parentElement
       const isVertical = isVerticalSide(panelPosition);
-
       const previousPaddings = (({
@@ -885,3 +845,2 @@ padding,
       }))(parentElement.style);
-
       const run = () => {
@@ -893,9 +852,8 @@ // reset the padding
         parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+        parentElement.style.paddingRight = '0px';
+        // set the new padding based on the new panel position
 
-        parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
       };
-
       run();
-
       if (typeof window !== 'undefined') {
@@ -911,3 +869,2 @@ window.addEventListener('resize', run);
     }
-
     return;
@@ -923,4 +880,5 @@ }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = getSidePanelStyle({
@@ -934,4 +892,5 @@ position: panelPosition,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
@@ -946,3 +905,3 @@ return /*#__PURE__*/React__namespace.createElement(Container, {
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
@@ -967,3 +926,3 @@ position: panelPosition,
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
@@ -1002,5 +961,4 @@ style: {
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return index_js.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
+  return React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
     if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
@@ -1012,3 +970,2 @@ return () => {
 };
-
 const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
@@ -1019,3 +976,3 @@ const {
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
@@ -1032,6 +989,4 @@ onPositionChange,
   } = closeButtonProps;
-  const queryClient = reactQuery.useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
+  const client = reactQuery.useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
   const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
@@ -1045,7 +1000,5 @@ const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => matchSorterUtils.rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
@@ -1072,3 +1025,22 @@ const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n          "
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+          `
     }
@@ -1084,3 +1056,3 @@ }), /*#__PURE__*/React__namespace.createElement("div", {
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
@@ -1153,3 +1125,3 @@ flexDirection: 'column'
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
@@ -1164,3 +1136,3 @@ onKeyDown: e => {
     }
-  }), !filter ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Select, {
+  }), /*#__PURE__*/React__namespace.createElement(Select, {
     "aria-label": "Sort queries",
@@ -1246,3 +1218,3 @@ value: sort,
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React__namespace.createElement("div", {
+  }))))), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
@@ -1263,3 +1235,3 @@ overflowY: 'auto',
     queryCache: queryCache,
-    queryClient: queryClient
+    queryClient: client
   }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(Button, _extends({
@@ -1281,7 +1253,6 @@ type: "button",
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
@@ -1292,30 +1263,13 @@ queryCache,
 }) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi;
-
-    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-  });
-  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi2;
-
-    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-  })) != null ? _useSubscribeToQueryC : false;
-  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi3;
-
-    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-  })) != null ? _useSubscribeToQueryC2 : 0;
-
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
   const handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
   };
-
   if (!activeQuery || !activeQueryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement(ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
@@ -1452,3 +1406,2 @@ style: {
 };
-
 const QueryStatusCount = ({
@@ -1491,3 +1444,2 @@ queryCache
 };
-
 const QueryRow = /*#__PURE__*/React__namespace.memo(({
@@ -1499,41 +1451,27 @@ queryKey,
 }) => {
-  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find;
-
-    return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-  })) != null ? _useSubscribeToQueryC3 : '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find2;
-
-    return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-  });
-  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find3;
-
-    return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-  })) != null ? _useSubscribeToQueryC4 : false;
-  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find4;
-
-    return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-  })) != null ? _useSubscribeToQueryC5 : false;
-  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find5;
-
-    return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-  })) != null ? _useSubscribeToQueryC6 : 0;
-
+  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.queryHash) ?? '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isStale()) ?? false;
+  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.isDisabled()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
+    queryKey
+  })?.getObserversCount()) ?? 0;
   if (!queryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement("div", {
     role: "button",
-    "aria-label": "Open query details for " + queryHash,
+    "aria-label": `Open query details for ${queryHash}`,
     onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
     style: {
       display: 'flex',
-      borderBottom: "solid 1px " + defaultTheme.grayAlt,
+      borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
       cursor: 'pointer',
@@ -1574,5 +1512,6 @@ background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
@@ -1579,0 +1518,0 @@

build/lib/Logo.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export default function Logo(props: any): JSX.Element;

build/lib/Logo.js

@@ -8,4 +8,3 @@ 'use strict';
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -23,10 +22,10 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function Logo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement("svg", _rollupPluginBabelHelpers.extends({
     width: "40px",
@@ -57,3 +56,3 @@ height: "40px",
 
-exports["default"] = Logo;
+exports.default = Logo;
 //# sourceMappingURL=Logo.js.map

build/lib/screenreader.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="react" />
 export default function ScreenReader({ text }: {
     text: string;
 }): JSX.Element;

build/lib/screenreader.js

@@ -7,4 +7,3 @@ 'use strict';
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -22,7 +21,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -42,3 +41,3 @@ function ScreenReader({
 
-exports["default"] = ScreenReader;
+exports.default = ScreenReader;
 //# sourceMappingURL=screenreader.js.map

build/lib/styledComponents.esm.js

@@ -5,3 +5,3 @@ import { styled } from './utils.esm.js';
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
@@ -15,6 +15,7 @@ backgroundColor: theme.background,
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActiveQueryPanel = styled('div', () => ({
@@ -28,3 +29,3 @@ flex: '1 1 500px',
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
@@ -67,22 +68,22 @@ });
   fontSize: '.9em',
-  lineHeight: "1.3",
+  lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
 const Select = styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
+  display: `inline-block`,
+  fontSize: `.9em`,
+  fontFamily: `sans-serif`,
   fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
+  lineHeight: `1.3`,
+  padding: `.3em 1.5em .3em .5em`,
   height: 'auto',
   border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
+  borderRadius: `.2em`,
+  appearance: `none`,
   WebkitAppearance: 'none',
   backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
+  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+  backgroundRepeat: `no-repeat`,
+  backgroundPosition: `right .55em center`,
+  backgroundSize: `.65em auto, 100%`,
   color: theme.inputTextColor
@@ -89,0 +90,0 @@ }), {

build/lib/styledComponents.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var utils = require('./utils.js');
@@ -9,3 +7,3 @@
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
@@ -19,6 +17,7 @@ backgroundColor: theme.background,
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActiveQueryPanel = utils.styled('div', () => ({
@@ -32,3 +31,3 @@ flex: '1 1 500px',
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
@@ -71,22 +70,22 @@ });
   fontSize: '.9em',
-  lineHeight: "1.3",
+  lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
 const Select = utils.styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
+  display: `inline-block`,
+  fontSize: `.9em`,
+  fontFamily: `sans-serif`,
   fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
+  lineHeight: `1.3`,
+  padding: `.3em 1.5em .3em .5em`,
   height: 'auto',
   border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
+  borderRadius: `.2em`,
+  appearance: `none`,
   WebkitAppearance: 'none',
   backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
+  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+  backgroundRepeat: `no-repeat`,
+  backgroundPosition: `right .55em center`,
+  backgroundSize: `.65em auto, 100%`,
   color: theme.inputTextColor
@@ -93,0 +92,0 @@ }), {

build/lib/theme.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -22,7 +19,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -48,3 +45,3 @@ const defaultTheme = {
 }) {
-  return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers.extends({
     value: theme
@@ -51,0 +48,0 @@ }, rest));

build/lib/useLocalStorage.esm.js

@@ -6,7 +6,5 @@ import * as React from 'react';
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
@@ -17,3 +15,2 @@ } catch {
 };
-
 function useLocalStorage(key, defaultValue) {
@@ -23,3 +20,2 @@ const [value, setValue] = React.useState();
     const initialValue = getItem(key);
-
     if (typeof initialValue === 'undefined' || initialValue === null) {
@@ -34,11 +30,8 @@ setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       let newVal = updater;
-
       if (typeof updater == 'function') {
         newVal = updater(old);
       }
-
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
       } catch {}
-
       return newVal;
@@ -45,0 +38,0 @@ });

build/lib/useLocalStorage.js

@@ -7,4 +7,3 @@ 'use strict';
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -22,7 +21,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -32,7 +31,5 @@ const getItem = key => {
     const itemValue = localStorage.getItem(key);
-
     if (typeof itemValue === 'string') {
       return JSON.parse(itemValue);
     }
-
     return undefined;
@@ -43,3 +40,2 @@ } catch {
 };
-
 function useLocalStorage(key, defaultValue) {
@@ -49,3 +45,2 @@ const [value, setValue] = React__namespace.useState();
     const initialValue = getItem(key);
-
     if (typeof initialValue === 'undefined' || initialValue === null) {
@@ -60,11 +55,8 @@ setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       let newVal = updater;
-
       if (typeof updater == 'function') {
         newVal = updater(old);
       }
-
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
       } catch {}
-
       return newVal;
@@ -76,3 +68,3 @@ });
 
-exports["default"] = useLocalStorage;
+exports.default = useLocalStorage;
 //# sourceMappingURL=useLocalStorage.js.map

build/lib/useMediaQuery.esm.js

@@ -9,16 +9,17 @@ import * as React from 'react';
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // Watch for changes
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       // Create a matcher
-      const matcher = window.matchMedia(query); // Create our handler
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
       const onChange = ({
         matches
-      }) => setIsMatch(matches); // Listen for changes
+      }) => setIsMatch(matches);
 
-
+      // Listen for changes
       matcher.addListener(onChange);
@@ -30,3 +31,2 @@ return () => {
     }
-
     return;
@@ -33,0 +33,0 @@ }, [isMatch, query, setIsMatch]);

build/lib/useMediaQuery.js

@@ -7,4 +7,3 @@ 'use strict';
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -22,7 +21,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -35,16 +34,17 @@ function useMediaQuery(query) {
     }
-
     return;
-  }); // Watch for changes
+  });
 
+  // Watch for changes
   React__namespace.useEffect(() => {
     if (typeof window !== 'undefined') {
       // Create a matcher
-      const matcher = window.matchMedia(query); // Create our handler
+      const matcher = window.matchMedia(query);
 
+      // Create our handler
       const onChange = ({
         matches
-      }) => setIsMatch(matches); // Listen for changes
+      }) => setIsMatch(matches);
 
-
+      // Listen for changes
       matcher.addListener(onChange);
@@ -56,3 +56,2 @@ return () => {
     }
-
     return;
@@ -63,3 +62,3 @@ }, [isMatch, query, setIsMatch]);
 
-exports["default"] = useMediaQuery;
+exports.default = useMediaQuery;
 //# sourceMappingURL=useMediaQuery.js.map

build/lib/utils.esm.js

@@ -25,8 +25,11 @@ import * as React from 'react';
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? { ...current,
+      return useMediaQuery(key) ? {
+        ...current,
         ...(typeof value === 'function' ? value(rest, theme) : value)
       } : current;
     }, {});
-    return /*#__PURE__*/React.createElement(type, { ...rest,
-      style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+    return /*#__PURE__*/React.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
         ...style,
@@ -50,2 +53,3 @@ ...mediaStyles
 }
+
 /**
@@ -56,3 +60,2 @@ * Displays a string regardless the type of the data
  */
-
 const displayValue = (value, beautify = false) => {
@@ -63,10 +66,9 @@ const {
   return JSON.stringify(json, null, beautify ? 2 : undefined);
-}; // Sorting functions
+};
 
+// Sorting functions
+
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-
 const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-
 const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-
 const statusAndDateSort = (a, b) => {
@@ -76,6 +78,4 @@ if (getStatusRank(a) === getStatusRank(b)) {
   }
-
   return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
 };
-
 const sortFns = {
@@ -94,3 +94,2 @@ 'Status > Last Updated': statusAndDateSort,
 };
-
 /**
@@ -105,3 +104,2 @@ * Check if the given side is vertical (left/right)
  */
-
 function getOppositeSide(side) {
@@ -114,5 +112,4 @@ return sides[side];
  */
-
 function getSidedProp(prop, side) {
-  return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+  return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
 }
@@ -131,7 +128,8 @@ function getSidePanelStyle({
   const isVertical = isVerticalSide(position);
-  return { ...panelStyle,
+  return {
+    ...panelStyle,
     direction: 'ltr',
     position: 'fixed',
     [position]: 0,
-    [borderSide]: "1px solid " + devtoolsTheme.gray,
+    [borderSide]: `1px solid ${devtoolsTheme.gray}`,
     transformOrigin: oppositeSide,
@@ -143,5 +141,5 @@ boxShadow: '0 0 20px rgba(0,0,0,.3)',
     ...(isResizing ? {
-      transition: "none"
+      transition: `none`
     } : {
-      transition: "all .2s ease"
+      transition: `all .2s ease`
     }),
@@ -151,7 +149,7 @@ ...(isOpen ? {
       pointerEvents: 'all',
-      transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+      transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
     } : {
       opacity: 0,
       pointerEvents: 'none',
-      transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+      transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
     }),
@@ -171,6 +169,6 @@ ...(isVertical ? {
 }
+
 /**
  * Get resize handle style based on a given side
  */
-
 function getResizeHandleStyle(position = 'bottom') {
@@ -185,3 +183,3 @@ const isVertical = isVerticalSide(position);
     [oppositeSide]: 0,
-    [marginSide]: "-4px",
+    [marginSide]: `-4px`,
     ...(isVertical ? {
@@ -188,0 +186,0 @@ top: 0,

build/lib/utils.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
@@ -10,6 +8,3 @@ var SuperJSON = require('superjson');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -27,8 +22,7 @@ if (e) {
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SuperJSON__default = /*#__PURE__*/_interopDefaultLegacy(SuperJSON);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
@@ -54,8 +48,11 @@ function getQueryStatusColor({
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery["default"](key) ? { ...current,
+      return useMediaQuery.default(key) ? {
+        ...current,
         ...(typeof value === 'function' ? value(rest, theme$1) : value)
       } : current;
     }, {});
-    return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
-      style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
+    return /*#__PURE__*/React__namespace.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
         ...style,
@@ -79,2 +76,3 @@ ...mediaStyles
 }
+
 /**
@@ -85,16 +83,14 @@ * Displays a string regardless the type of the data
  */
-
 const displayValue = (value, beautify = false) => {
   const {
     json
-  } = SuperJSON__default["default"].serialize(value);
+  } = SuperJSON.serialize(value);
   return JSON.stringify(json, null, beautify ? 2 : undefined);
-}; // Sorting functions
+};
 
+// Sorting functions
+
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-
 const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-
 const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-
 const statusAndDateSort = (a, b) => {
@@ -104,6 +100,4 @@ if (getStatusRank(a) === getStatusRank(b)) {
   }
-
   return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
 };
-
 const sortFns = {
@@ -122,3 +116,2 @@ 'Status > Last Updated': statusAndDateSort,
 };
-
 /**
@@ -133,3 +126,2 @@ * Check if the given side is vertical (left/right)
  */
-
 function getOppositeSide(side) {
@@ -142,5 +134,4 @@ return sides[side];
  */
-
 function getSidedProp(prop, side) {
-  return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+  return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
 }
@@ -159,7 +150,8 @@ function getSidePanelStyle({
   const isVertical = isVerticalSide(position);
-  return { ...panelStyle,
+  return {
+    ...panelStyle,
     direction: 'ltr',
     position: 'fixed',
     [position]: 0,
-    [borderSide]: "1px solid " + devtoolsTheme.gray,
+    [borderSide]: `1px solid ${devtoolsTheme.gray}`,
     transformOrigin: oppositeSide,
@@ -171,5 +163,5 @@ boxShadow: '0 0 20px rgba(0,0,0,.3)',
     ...(isResizing ? {
-      transition: "none"
+      transition: `none`
     } : {
-      transition: "all .2s ease"
+      transition: `all .2s ease`
     }),
@@ -179,7 +171,7 @@ ...(isOpen ? {
       pointerEvents: 'all',
-      transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+      transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
     } : {
       opacity: 0,
       pointerEvents: 'none',
-      transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+      transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
     }),
@@ -199,6 +191,6 @@ ...(isVertical ? {
 }
+
 /**
  * Get resize handle style based on a given side
  */
-
 function getResizeHandleStyle(position = 'bottom') {
@@ -213,3 +205,3 @@ const isVertical = isVerticalSide(position);
     [oppositeSide]: 0,
-    [marginSide]: "-4px",
+    [marginSide]: `-4px`,
     ...(isVertical ? {
@@ -216,0 +208,0 @@ top: 0,

build/umd/index.production.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactQueryDevtools={})}(this,(function(e){"use strict";e.ReactQueryDevtools=function(){return null},e.ReactQueryDevtoolsPanel=function(){return null},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactQueryDevtools={})}(this,(function(e){"use strict";e.ReactQueryDevtools=function(){return null},e.ReactQueryDevtoolsPanel=function(){return null}}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.24.10",
+  "version": "5.0.0-alpha.0",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
@@ -43,19 +43,15 @@ "author": "tannerlinsley",
     "@types/react-dom": "^18.0.5",
-    "@types/use-sync-external-store": "^0.0.3",
     "react": "^18.2.0",
-    "react-17": "npm:react@^17.0.2",
     "react-dom": "^18.2.0",
-    "react-dom-17": "npm:react-dom@^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.24.10"
+    "@tanstack/react-query": "5.0.0-alpha.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.7.0",
-    "superjson": "^1.10.0",
-    "use-sync-external-store": "^1.2.0"
+    "superjson": "^1.10.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.24.10"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@tanstack/react-query": "5.0.0-alpha.0"
   },
@@ -62,0 +58,0 @@ "scripts": {

src/index.ts

 import * as devtools from './devtools'
 
-export const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =
+export const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =
   process.env.NODE_ENV !== 'development'
@@ -10,3 +10,3 @@ ? function () {
 
-export const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =
+export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
   process.env.NODE_ENV !== 'development'
@@ -13,0 +13,0 @@ ? (function () {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

-16.67%

Dev dependency count

6

-33.33%

Worsened metrics

Total package byte prevSize

1544835

-3.48%

Number of package files

107

-3.6%

Lines of code

15296

-1.34%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @tanstack/query-core@5.0.0-alpha.0
  (transitive)

• + Added

  @tanstack/react-query@5.0.0-alpha.0
  (transitive)

• - Removed

  use-sync-external-store@^1.2.0

• - Removed

  @tanstack/query-core@4.24.10
  (transitive)

• - Removed

  @tanstack/react-query@4.24.10
  (transitive)

• - Removed

  use-sync-external-store@1.4.0
  (transitive)