@tanstack/query-devtools 5.27.3 → 5.27.8

package/build/index.cjs

@@ -12238,8 +12238,11 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -12582,10 +12585,10 @@ var init_Explorer = __esm({
     init_web();
     init_web();
     init_esm();
-    init_goober_modern();
     init_clsx();
     init_solid();
     init_dist6();
+    init_goober_modern();
     init_theme();
     init_utils();
     init_icons();
@@ -12603,14 +12606,17 @@ var init_Explorer = __esm({
     _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
     Expander = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       return (() => {
         const _el$ = _tmpl$23();
-        createRenderEffect(() => className(_el$, clsx(styles().expander, u`
+        createRenderEffect(() => className(_el$, clsx(styles().expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && u`
+        `, props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -12620,8 +12626,11 @@ var init_Explorer = __esm({
     };
     CopyButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const [copyState, setCopyState] = createSignal("NoCopy");
       return (() => {
@@ -12683,8 +12692,11 @@ var init_Explorer = __esm({
     };
     ClearArrayButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12701,8 +12713,11 @@ var init_Explorer = __esm({
     };
     DeleteItemButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12719,8 +12734,11 @@ var init_Explorer = __esm({
     };
     ToggleValueButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12738,14 +12756,14 @@ var init_Explorer = __esm({
             return props.value;
           }
         }));
-        createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+        createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `)));
         return _el$5;
       })();
     };
-    stylesFactory = (theme) => {
+    stylesFactory = (theme, css) => {
       const {
         colors,
         font,
@@ -12754,7 +12772,7 @@ var init_Explorer = __esm({
       } = tokens;
       const t2 = (light, dark) => theme === "light" ? light : dark;
       return {
-        entry: u`
+        entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -12764,13 +12782,13 @@ var init_Explorer = __esm({
       outline: none;
       word-break: break-word;
     `,
-        subEntry: u`
+        subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-        expander: u`
+        expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -12783,14 +12801,14 @@ var init_Explorer = __esm({
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-        expanderButtonContainer: u`
+        expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-        expanderButton: u`
+        expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -12815,26 +12833,26 @@ var init_Explorer = __esm({
         left: 1px;
       }
     `,
-        info: u`
+        info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-        label: u`
+        label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-        value: u`
+        value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-        actions: u`
+        actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-        row: u`
+        row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -12842,7 +12860,7 @@ var init_Explorer = __esm({
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-        editableInput: u`
+        editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -12853,7 +12871,7 @@ var init_Explorer = __esm({
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-        actionButton: u`
+        actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -12879,8 +12897,8 @@ var init_Explorer = __esm({
     `
       };
     };
-    lightStyles = stylesFactory("light");
-    darkStyles = stylesFactory("dark");
+    lightStyles = (css) => stylesFactory("light", css);
+    darkStyles = (css) => stylesFactory("dark", css);
     delegateEvents(["click"]);
   }
 });
@@ -12890,7 +12908,7 @@ var Devtools_exports = {};
 __export(Devtools_exports, {
   default: () => Devtools_default
 });
-var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, PiPContext, PiPProvider, usePiPWindow, DevtoolsComponent, Devtools_default, Devtools, PiPPanel, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, PiPContext, PiPProvider, usePiPWindow, DevtoolsComponent, Devtools_default, Devtools, PiPPanel, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12966,6 +12984,7 @@ var init_Devtools = __esm({
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
+    [offline, setOffline] = createSignal(false);
     PiPContext = createContext(void 0);
     PiPProvider = (props) => {
       const [pipWindow, setPipWindow] = createSignal(null);
@@ -13465,7 +13484,6 @@ var init_Devtools = __esm({
       const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
       const mutationSort = createMemo(() => props.localStore.mutationSort || DEFAULT_MUTATION_SORT_FN_NAME);
       const mutationSortOrder = createMemo(() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER);
-      const [offline, setOffline] = createSignal(false);
       const sortFn = createMemo(() => sortFns[sort()]);
       const mutationSortFn = createMemo(() => mutationSortFns[mutationSort()]);
       const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);

package/build/index.js

@@ -69,7 +69,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/DBFR2OSQ.js'));
+        Devtools = lazy(() => import('./Devtools/NISTJ3CZ.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);

package/build/index.jsx

@@ -73,7 +73,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/ZI3HPF3S.jsx"));
+        Devtools = lazy(() => import("./Devtools/A63KNBMQ.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.27.3",
+  "version": "5.27.8",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.13.3",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.9.1",
-    "@tanstack/query-core": "5.27.3"
+    "@tanstack/query-core": "5.27.5"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -110,6 +110,7 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
   null,
 )
 const [panelWidth, setPanelWidth] = createSignal(0)
+const [offline, setOffline] = createSignal(false)
 
 export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
   shadowDOMTarget?: ShadowRoot
@@ -776,8 +777,6 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
     () => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER,
   ) as () => 1 | -1
 
-  const [offline, setOffline] = createSignal(false)
-
   const sortFn = createMemo(() => sortFns[sort() as string])
   const mutationSortFn = createMemo(
     () => mutationSortFns[mutationSort() as string],

package/src/Explorer.tsx

@@ -1,8 +1,8 @@
 import { stringify } from 'superjson'
-import { css } from 'goober'
 import { clsx as cx } from 'clsx'
 import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
+import * as goober from 'goober'
 import { tokens } from './theme'
 import {
   deleteNestedDataByPath,
@@ -38,8 +38,11 @@ function chunkArray<T extends { label: string; value: unknown }>(
 
 const Expander = (props: { expanded: boolean }) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   return (
@@ -78,8 +81,11 @@ const Expander = (props: { expanded: boolean }) => {
 type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
 const CopyButton = (props: { value: unknown }) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
   const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
 
@@ -136,8 +142,11 @@ const ClearArrayButton = (props: {
   activeQuery: Query
 }) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
   const queryClient = useQueryDevtoolsContext().client
 
@@ -162,8 +171,11 @@ const DeleteItemButton = (props: {
   activeQuery: Query
 }) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
   const queryClient = useQueryDevtoolsContext().client
 
@@ -189,8 +201,11 @@ const ToggleValueButton = (props: {
   value: boolean
 }) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
   const queryClient = useQueryDevtoolsContext().client
 
@@ -236,8 +251,11 @@ function isIterable(x: any): x is Iterable<unknown> {
 
 export default function Explorer(props: ExplorerProps) {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
   const queryClient = useQueryDevtoolsContext().client
 
@@ -482,7 +500,10 @@ export default function Explorer(props: ExplorerProps) {
   )
 }
 
-const stylesFactory = (theme: 'light' | 'dark') => {
+const stylesFactory = (
+  theme: 'light' | 'dark',
+  css: (typeof goober)['css'],
+) => {
   const { colors, font, size, border } = tokens
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
   return {
@@ -612,5 +633,5 @@ const stylesFactory = (theme: 'light' | 'dark') => {
   }
 }
 
-const lightStyles = stylesFactory('light')
-const darkStyles = stylesFactory('dark')
+const lightStyles = (css: (typeof goober)['css']) => stylesFactory('light', css)
+const darkStyles = (css: (typeof goober)['css']) => stylesFactory('dark', css)