@tanstack/query-devtools 5.8.8 → 5.12.0

package/build/Devtools/{SZIKXSIQ.js → ANE6OXOK.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/3V52ZCRQ.js';
+import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/NCBN5K2V.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -1243,7 +1243,7 @@ var cookieStorage = addClearMethod({
   },
   removeItem: (key) => {
     cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
-      expires:  new Date(0)
+      expires: /* @__PURE__ */ new Date(0)
     })}`;
   },
   key: (index) => {
@@ -12646,4 +12646,4 @@ delegateEvents(["click", "mousedown", "input"]);
    *)
 */
 
-export { Devtools, DevtoolsComponent, DevtoolsPanel, MutationRow, MutationStatusCount, QueryRow, QueryStatus, QueryStatusCount, Devtools_default as default };
+export { Devtools_default as default };

package/build/Devtools/{YNBGVEJ4.js → E3UEEC63.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/2CFRQNPI.js';
+import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7TPOKDOT.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -1243,7 +1243,7 @@ var cookieStorage = addClearMethod({
   },
   removeItem: (key) => {
     cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
-      expires:  new Date(0)
+      expires: /* @__PURE__ */ new Date(0)
     })}`;
   },
   key: (index) => {
@@ -12645,4 +12645,4 @@ delegateEvents(["click", "mousedown", "input"]);
    *)
 */
 
-export { Devtools, DevtoolsComponent, DevtoolsPanel, MutationRow, MutationStatusCount, QueryRow, QueryStatus, QueryStatusCount, Devtools_default as default };
+export { Devtools_default as default };

package/build/Devtools/{3XM2XICE.jsx → OG2NFD3H.jsx}

@@ -49,7 +49,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/SPPEWFNK.jsx";
+} from "../chunk/EFDUVU65.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -12885,14 +12885,6 @@ var stylesFactory2 = (theme) => {
 var lightStyles2 = stylesFactory2("light");
 var darkStyles2 = stylesFactory2("dark");
 export {
-  Devtools,
-  DevtoolsComponent,
-  DevtoolsPanel,
-  MutationRow,
-  MutationStatusCount,
-  QueryRow,
-  QueryStatus,
-  QueryStatusCount,
   Devtools_default as default
 };
 /*! Bundled license information:

package/build/Devtools/{DKV2AFO3.jsx → Y6OLANNQ.jsx}

@@ -49,7 +49,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/MJH6GUJH.jsx";
+} from "../chunk/LRQXE5TJ.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -12884,14 +12884,6 @@ var stylesFactory2 = (theme) => {
 var lightStyles2 = stylesFactory2("light");
 var darkStyles2 = stylesFactory2("dark");
 export {
-  Devtools,
-  DevtoolsComponent,
-  DevtoolsPanel,
-  MutationRow,
-  MutationStatusCount,
-  QueryRow,
-  QueryStatus,
-  QueryStatusCount,
   Devtools_default as default
 };
 /*! Bundled license information:

package/build/dev.cjs

@@ -4635,7 +4635,7 @@ var init_dist7 = __esm({
       },
       removeItem: (key) => {
         cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
-          expires:  new Date(0)
+          expires: /* @__PURE__ */ new Date(0)
         })}`;
       },
       key: (index) => {
@@ -12994,14 +12994,6 @@ var init_fonts = __esm({
 // src/Devtools.tsx
 var Devtools_exports = {};
 __export(Devtools_exports, {
-  Devtools: () => Devtools,
-  DevtoolsComponent: () => DevtoolsComponent,
-  DevtoolsPanel: () => DevtoolsPanel,
-  MutationRow: () => MutationRow,
-  MutationStatusCount: () => MutationStatusCount,
-  QueryRow: () => QueryRow,
-  QueryStatus: () => QueryStatus,
-  QueryStatusCount: () => QueryStatusCount,
   default: () => Devtools_default
 });
 var _tmpl$24, _tmpl$25, _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$26, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, 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, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;

package/build/dev.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/3V52ZCRQ.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/NCBN5K2V.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/SZIKXSIQ.js'));
+        Devtools = lazy(() => import('./Devtools/ANE6OXOK.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/dev.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/SPPEWFNK.jsx";
+} from "./chunk/EFDUVU65.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/3XM2XICE.jsx"));
+        Devtools = lazy(() => import("./Devtools/OG2NFD3H.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -4634,7 +4634,7 @@ var init_dist7 = __esm({
       },
       removeItem: (key) => {
         cookieStorage._cookies[0][cookieStorage._cookies[1]] = `${key}=deleted${serializeCookieOptions({
-          expires:  new Date(0)
+          expires: /* @__PURE__ */ new Date(0)
         })}`;
       },
       key: (index) => {
@@ -12992,14 +12992,6 @@ var init_fonts = __esm({
 // src/Devtools.tsx
 var Devtools_exports = {};
 __export(Devtools_exports, {
-  Devtools: () => Devtools,
-  DevtoolsComponent: () => DevtoolsComponent,
-  DevtoolsPanel: () => DevtoolsPanel,
-  MutationRow: () => MutationRow,
-  MutationStatusCount: () => MutationStatusCount,
-  QueryRow: () => QueryRow,
-  QueryStatus: () => QueryStatus,
-  QueryStatusCount: () => QueryStatusCount,
   default: () => Devtools_default
 });
 var _tmpl$24, _tmpl$25, _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$26, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, 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, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;

package/build/index.d.cts

@@ -40,4 +40,4 @@ declare class TanstackQueryDevtools {
     unmount(): void;
 }
 
-export { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, TanstackQueryDevtools, TanstackQueryDevtoolsConfig };
+export { type DevToolsErrorType, type DevtoolsButtonPosition, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig };

package/build/index.d.ts

@@ -40,4 +40,4 @@ declare class TanstackQueryDevtools {
     unmount(): void;
 }
 
-export { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, TanstackQueryDevtools, TanstackQueryDevtoolsConfig };
+export { type DevToolsErrorType, type DevtoolsButtonPosition, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig };

package/build/index.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/2CFRQNPI.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/7TPOKDOT.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/YNBGVEJ4.js'));
+        Devtools = lazy(() => import('./Devtools/E3UEEC63.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/MJH6GUJH.jsx";
+} from "./chunk/LRQXE5TJ.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/DKV2AFO3.jsx"));
+        Devtools = lazy(() => import("./Devtools/Y6OLANNQ.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

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

package/src/Devtools.tsx

@@ -106,7 +106,9 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
 )
 const [panelWidth, setPanelWidth] = createSignal(0)
 
-export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
+export type DevtoolsComponentType = Component<QueryDevtoolsProps>
+
+const DevtoolsComponent: DevtoolsComponentType = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: 'TanstackQueryDevtools',
   })
@@ -133,7 +135,7 @@ export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
 
 export default DevtoolsComponent
 
-export const Devtools: Component<DevtoolsPanelProps> = (props) => {
+const Devtools: Component<DevtoolsPanelProps> = (props) => {
   loadFonts()
 
   const theme = useTheme()
@@ -265,7 +267,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
   )
 }
 
-export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
+const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1037,7 +1039,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
   )
 }
 
-export const QueryRow: Component<{ query: Query }> = (props) => {
+const QueryRow: Component<{ query: Query }> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1137,7 +1139,7 @@ export const QueryRow: Component<{ query: Query }> = (props) => {
   )
 }
 
-export const MutationRow: Component<{ mutation: Mutation }> = (props) => {
+const MutationRow: Component<{ mutation: Mutation }> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1245,7 +1247,7 @@ export const MutationRow: Component<{ mutation: Mutation }> = (props) => {
   )
 }
 
-export const QueryStatusCount: Component = () => {
+const QueryStatusCount: Component = () => {
   const stale = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
       queryCache()
@@ -1299,7 +1301,7 @@ export const QueryStatusCount: Component = () => {
   )
 }
 
-export const MutationStatusCount: Component = () => {
+const MutationStatusCount: Component = () => {
   const success = createSubscribeToMutationCacheBatcher(
     (mutationCache) =>
       mutationCache()
@@ -1369,7 +1371,7 @@ export const MutationStatusCount: Component = () => {
   )
 }
 
-export const QueryStatus: Component<QueryStatusProps> = (props) => {
+const QueryStatus: Component<QueryStatusProps> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles

package/src/Explorer.tsx

@@ -22,7 +22,7 @@ import type { Query } from '@tanstack/query-core'
  * @example
  * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
  */
-export function chunkArray<T extends { label: string; value: unknown }>(
+function chunkArray<T extends { label: string; value: unknown }>(
   array: Array<T>,
   size: number,
 ): Array<Array<T>> {

package/src/index.tsx

@@ -5,7 +5,7 @@ import type {
   QueryClient,
   onlineManager as TonlineManager,
 } from '@tanstack/query-core'
-import type { DevtoolsComponent } from './Devtools'
+import type { DevtoolsComponentType } from './Devtools'
 import type {
   DevToolsErrorType,
   DevtoolsButtonPosition,
@@ -30,7 +30,7 @@ class TanstackQueryDevtools {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevToolsErrorType> | undefined>
-  #Component: typeof DevtoolsComponent | undefined
+  #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsConfig) {
@@ -86,7 +86,7 @@ class TanstackQueryDevtools {
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
       const [queryClient] = this.#client
-      let Devtools: typeof DevtoolsComponent
+      let Devtools: DevtoolsComponentType
 
       if (this.#Component) {
         Devtools = this.#Component

package/src/theme.ts

@@ -309,15 +309,3 @@ export const tokens = {
     tooltip: 1800,
   },
 }
-
-export type ThemeConfigType = typeof tokens
-export type ThemeColorsAll = {
-  [key in keyof ThemeConfigType['colors']]: key
-}[keyof ThemeConfigType['colors']]
-export type AtomicThemeColors =
-  | 'white'
-  | 'black'
-  | 'transparent'
-  | 'current'
-  | 'inherit'
-export type ThemeColors = Exclude<ThemeColorsAll, AtomicThemeColors>

package/src/utils.tsx

@@ -15,14 +15,7 @@ export function getQueryStatusLabel(query: Query) {
           : 'fresh'
 }
 
-export const queryStatusLabels = [
-  'fresh',
-  'stale',
-  'paused',
-  'inactive',
-  'fetching',
-] as const
-export type IQueryStatusLabel = (typeof queryStatusLabels)[number]
+type QueryStatusLabel = 'fresh' | 'stale' | 'paused' | 'inactive' | 'fetching'
 
 export function getSidedProp<T extends string>(
   prop: T,
@@ -71,7 +64,7 @@ export function getMutationStatusColor({
           : 'gray'
 }
 
-export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
+export function getQueryStatusColorByLabel(label: QueryStatusLabel) {
   return label === 'fresh'
     ? 'green'
     : label === 'stale'
@@ -156,8 +149,6 @@ export const convertRemToPixels = (rem: number) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
 }
 
-export const convertPixelsToRem = (px: number) => px / convertRemToPixels(1)
-
 export const getPreferredColorScheme = () => {
   const [colorScheme, setColorScheme] = createSignal<'light' | 'dark'>('dark')