@tanstack/react-query-devtools 4.24.9 → 5.0.0-alpha.0

package/build/lib/devtools.esm.js

@@ -9,7 +9,6 @@ import ScreenReader from './screenreader.esm.js';
 import { defaultTheme, ThemeProvider } from './theme.esm.js';
 import Explorer from './Explorer.esm.js';
 import Logo from './Logo.esm.js';
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
 function ReactQueryDevtools({
   initialIsOpen,
@@ -18,7 +17,7 @@ function ReactQueryDevtools({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
   panelPosition: initialPanelPosition = 'bottom'
 }) {
@@ -31,11 +30,9 @@ function ReactQueryDevtools({
   const [isResolvedOpen, setIsResolvedOpen] = React.useState(false);
   const [isResizing, setIsResizing] = React.useState(false);
   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);
     setIsResizing(true);
     const {
@@ -45,12 +42,12 @@ function ReactQueryDevtools({
     const startX = startEvent.clientX;
     const startY = startEvent.clientY;
     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
-      // hint: it is different formula for the opposite sides
+      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) {
         newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
         setDevtoolsWidth(newSize);
@@ -58,48 +55,41 @@ function ReactQueryDevtools({
         newSize = height + (panelPosition === 'bottom' ? startY - moveEvent.clientY : moveEvent.clientY - startY);
         setDevtoolsHeight(newSize);
       }
-
       if (newSize < minPanelSize) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
       }
     };
-
     const unsub = () => {
       if (isResizing) {
         setIsResizing(false);
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
-
   React.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+  // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
   React.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
       const handlePanelTransitionStart = () => {
         if (isResolvedOpen) {
           ref.style.visibility = 'visible';
         }
       };
-
       const handlePanelTransitionEnd = () => {
         if (!isResolvedOpen) {
           ref.style.visibility = 'hidden';
         }
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
       ref.addEventListener('transitionend', handlePanelTransitionEnd);
       return () => {
@@ -107,19 +97,15 @@ function ReactQueryDevtools({
         ref.removeEventListener('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 {
         parentElement
       } = rootRef.current;
       const styleProp = getSidedProp('padding', panelPosition);
       const isVertical = isVerticalSide(panelPosition);
-
       const previousPaddings = (({
         padding,
         paddingTop,
@@ -133,20 +119,18 @@ function ReactQueryDevtools({
         paddingLeft,
         paddingRight
       }))(parentElement.style);
-
       const run = () => {
         // reset the padding
         parentElement.style.padding = '0px';
         parentElement.style.paddingTop = '0px';
         parentElement.style.paddingBottom = '0px';
         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') {
         window.addEventListener('resize', run);
         return () => {
@@ -157,7 +141,6 @@ function ReactQueryDevtools({
         };
       }
     }
-
     return;
   }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
   const {
@@ -168,8 +151,9 @@ function ReactQueryDevtools({
     style: toggleButtonStyle = {},
     onClick: onToggleClick,
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = getSidePanelStyle({
     position: panelPosition,
     devtoolsTheme: defaultTheme,
@@ -178,8 +162,9 @@ function ReactQueryDevtools({
     width: devtoolsWidth,
     isResizing,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
   return /*#__PURE__*/React.createElement(Container, {
     ref: rootRef,
@@ -189,7 +174,7 @@ function ReactQueryDevtools({
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(ReactQueryDevtoolsPanel, _extends({
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
     position: panelPosition,
     onPositionChange: setPanelPosition,
@@ -209,7 +194,7 @@ function ReactQueryDevtools({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
     style: {
       background: 'none',
@@ -243,22 +228,20 @@ function ReactQueryDevtools({
     text: "Open React Query Devtools"
   })) : null);
 }
-
 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));
     return () => {
       return;
     };
   }, [queryCache, skip]), getSnapshot, getSnapshot);
 };
-
 const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
   const {
     isOpen = true,
     styleNonce,
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
     onPositionChange,
     showCloseButton,
@@ -270,10 +253,8 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     onClick: onCloseClick,
     ...otherCloseButtonProps
   } = 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]);
   const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
   const [baseSort, setBaseSort] = useLocalStorage('reactQueryDevtoolsBaseSort', 1);
@@ -282,11 +263,9 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
   const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
   const queries = React.useMemo(() => {
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
     const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     return sorted;
@@ -308,7 +287,26 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
   }), /*#__PURE__*/React.createElement("style", {
     nonce: styleNonce,
     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};
+            }
+          `
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: getResizeHandleStyle(position),
@@ -319,7 +317,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -387,7 +385,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: "Filter",
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
     onKeyDown: e => {
       if (e.key === 'Escape') setFilter('');
@@ -397,7 +395,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
       marginRight: '.5em',
       width: '100%'
     }
-  }), !filter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React.createElement(Select, {
     "aria-label": "Sort queries",
     value: sort,
     onChange: e => setSort(e.target.value),
@@ -478,7 +476,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
   }))), /*#__PURE__*/React.createElement(ScreenReader, {
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement("div", {
     style: {
       overflowY: 'auto',
       flex: '1'
@@ -494,7 +492,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: queryClient
+    queryClient: client
   }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
@@ -511,44 +509,26 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     },
     onClick: e => {
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
   queryClient
 }) => {
-  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", {
     style: {
       padding: '.5em',
@@ -680,7 +660,6 @@ const ActiveQuery = ({
     }
   })));
 };
-
 const QueryStatusCount = ({
   queryCache
 }) => {
@@ -718,52 +697,37 @@ const QueryStatusCount = ({
     }
   }, "inactive ", /*#__PURE__*/React.createElement(Code, null, "(", hasInactive, ")")));
 };
-
 const QueryRow = /*#__PURE__*/React.memo(({
   queryKey,
   setActiveQueryHash,
   activeQueryHash,
   queryCache
 }) => {
-  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',
       background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
@@ -799,9 +763,10 @@ const QueryRow = /*#__PURE__*/React.memo(({
     style: {
       padding: '.5em'
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
 export { ReactQueryDevtools, ReactQueryDevtoolsPanel };