@tanstack/solid-query-devtools 5.90.3 → 5.91.0

package/build/dev.cjs

@@ -21,8 +21,8 @@ __export(devtools_exports, {
   default: () => SolidQueryDevtools
 });
 function SolidQueryDevtools(props) {
-  const queryClient = solidQuery.useQueryClient();
-  const client = solidJs.createMemo(() => props.client || queryClient);
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
   let ref;
   const devtools = new queryDevtools.TanstackQueryDevtools({
     client: client(),
@@ -35,7 +35,8 @@ function SolidQueryDevtools(props) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
-    hideDisabledQueries: props.hideDisabledQueries
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -58,6 +59,9 @@ function SolidQueryDevtools(props) {
   solidJs.createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   solidJs.onMount(() => {
     devtools.mount(ref);
     solidJs.onCleanup(() => devtools.unmount());
@@ -82,8 +86,8 @@ __export(devtoolsPanel_exports, {
   default: () => SolidQueryDevtoolsPanel
 });
 function SolidQueryDevtoolsPanel(props) {
-  const queryClient = solidQuery.useQueryClient();
-  const client = solidJs.createMemo(() => props.client || queryClient);
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
   let ref;
   const {
     errorTypes,
@@ -103,7 +107,8 @@ function SolidQueryDevtoolsPanel(props) {
     styleNonce,
     shadowDOMTarget,
     onClose: props.onClose,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme: props.theme
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -115,6 +120,9 @@ function SolidQueryDevtoolsPanel(props) {
   solidJs.createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   solidJs.onMount(() => {
     devtools.mount(ref);
     solidJs.onCleanup(() => devtools.unmount());

package/build/dev.js

@@ -18,10 +18,10 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/DFW22NEL.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BCD44V6M.js')) : function() {
   return null;
 };
-var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/QH7X6ZDM.js')) : function() {
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/VKJ7SILT.js')) : function() {
   return null;
 };
 

package/build/dev.jsx

@@ -30,10 +30,10 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/4LKOWRT2.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/32HRKFKI.jsx")) : function() {
   return null;
 };
-var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/YI6MKFAH.jsx")) : function() {
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/NDFIDQLQ.jsx")) : function() {
   return null;
 };
 export {

package/build/devtools/{4LKOWRT2.jsx → 32HRKFKI.jsx}

@@ -3,8 +3,8 @@ import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
 import { onlineManager, useQueryClient } from "@tanstack/solid-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
 function SolidQueryDevtools(props) {
-  const queryClient = useQueryClient();
-  const client = createMemo(() => props.client || queryClient);
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
   let ref;
   const devtools = new TanstackQueryDevtools({
     client: client(),
@@ -17,7 +17,8 @@ function SolidQueryDevtools(props) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
-    hideDisabledQueries: props.hideDisabledQueries
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
   });
   createEffect(() => {
     devtools.setClient(client());
@@ -40,6 +41,9 @@ function SolidQueryDevtools(props) {
   createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   onMount(() => {
     devtools.mount(ref);
     onCleanup(() => devtools.unmount());

package/build/devtools/{DFW22NEL.js → BCD44V6M.js}

@@ -6,8 +6,8 @@ import { TanstackQueryDevtools } from '@tanstack/query-devtools';
 // src/devtools.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
 function SolidQueryDevtools(props) {
-  const queryClient = useQueryClient();
-  const client = createMemo(() => props.client || queryClient);
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
   let ref;
   const devtools = new TanstackQueryDevtools({
     client: client(),
@@ -20,7 +20,8 @@ function SolidQueryDevtools(props) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
-    hideDisabledQueries: props.hideDisabledQueries
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
   });
   createEffect(() => {
     devtools.setClient(client());
@@ -43,6 +44,9 @@ function SolidQueryDevtools(props) {
   createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   onMount(() => {
     devtools.mount(ref);
     onCleanup(() => devtools.unmount());

package/build/devtoolsPanel/{YI6MKFAH.jsx → NDFIDQLQ.jsx}

@@ -3,8 +3,8 @@ import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
 import { onlineManager, useQueryClient } from "@tanstack/solid-query";
 import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
 function SolidQueryDevtoolsPanel(props) {
-  const queryClient = useQueryClient();
-  const client = createMemo(() => props.client || queryClient);
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
   let ref;
   const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
   const devtools = new TanstackQueryDevtoolsPanel({
@@ -19,7 +19,8 @@ function SolidQueryDevtoolsPanel(props) {
     styleNonce,
     shadowDOMTarget,
     onClose: props.onClose,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme: props.theme
   });
   createEffect(() => {
     devtools.setClient(client());
@@ -31,6 +32,9 @@ function SolidQueryDevtoolsPanel(props) {
   createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   onMount(() => {
     devtools.mount(ref);
     onCleanup(() => devtools.unmount());

package/build/devtoolsPanel/{QH7X6ZDM.js → VKJ7SILT.js}

@@ -6,8 +6,8 @@ import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools';
 // src/devtoolsPanel.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
 function SolidQueryDevtoolsPanel(props) {
-  const queryClient = useQueryClient();
-  const client = createMemo(() => props.client || queryClient);
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
   let ref;
   const {
     errorTypes,
@@ -27,7 +27,8 @@ function SolidQueryDevtoolsPanel(props) {
     styleNonce,
     shadowDOMTarget,
     onClose: props.onClose,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme: props.theme
   });
   createEffect(() => {
     devtools.setClient(client());
@@ -39,6 +40,9 @@ function SolidQueryDevtoolsPanel(props) {
   createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   onMount(() => {
     devtools.mount(ref);
     onCleanup(() => devtools.unmount());

package/build/index.cjs

@@ -21,8 +21,8 @@ __export(devtools_exports, {
   default: () => SolidQueryDevtools
 });
 function SolidQueryDevtools(props) {
-  const queryClient = solidQuery.useQueryClient();
-  const client = solidJs.createMemo(() => props.client || queryClient);
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
   let ref;
   const devtools = new queryDevtools.TanstackQueryDevtools({
     client: client(),
@@ -35,7 +35,8 @@ function SolidQueryDevtools(props) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
-    hideDisabledQueries: props.hideDisabledQueries
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -58,6 +59,9 @@ function SolidQueryDevtools(props) {
   solidJs.createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   solidJs.onMount(() => {
     devtools.mount(ref);
     solidJs.onCleanup(() => devtools.unmount());
@@ -82,8 +86,8 @@ __export(devtoolsPanel_exports, {
   default: () => SolidQueryDevtoolsPanel
 });
 function SolidQueryDevtoolsPanel(props) {
-  const queryClient = solidQuery.useQueryClient();
-  const client = solidJs.createMemo(() => props.client || queryClient);
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
   let ref;
   const {
     errorTypes,
@@ -103,7 +107,8 @@ function SolidQueryDevtoolsPanel(props) {
     styleNonce,
     shadowDOMTarget,
     onClose: props.onClose,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme: props.theme
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -115,6 +120,9 @@ function SolidQueryDevtoolsPanel(props) {
   solidJs.createEffect(() => {
     devtools.setErrorTypes(props.errorTypes || []);
   });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
   solidJs.onMount(() => {
     devtools.mount(ref);
     solidJs.onCleanup(() => devtools.unmount());

package/build/index.d.cts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { JSX } from 'solid-js';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/solid-query';
 
 interface DevtoolsOptions {
@@ -40,6 +40,11 @@ interface DevtoolsOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): solid_js.JSX.Element;
 
@@ -75,6 +80,11 @@ interface DevtoolsPanelOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 declare function SolidQueryDevtoolsPanel$1(props: DevtoolsPanelOptions): JSX.Element;
 

package/build/index.d.ts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { JSX } from 'solid-js';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/solid-query';
 
 interface DevtoolsOptions {
@@ -40,6 +40,11 @@ interface DevtoolsOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): solid_js.JSX.Element;
 
@@ -75,6 +80,11 @@ interface DevtoolsPanelOptions {
      * Set this to true to hide disabled queries from the devtools panel.
      */
     hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
 }
 declare function SolidQueryDevtoolsPanel$1(props: DevtoolsPanelOptions): JSX.Element;
 

package/build/index.js

@@ -18,10 +18,10 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/DFW22NEL.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BCD44V6M.js')) : function() {
   return null;
 };
-var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/QH7X6ZDM.js')) : function() {
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/VKJ7SILT.js')) : function() {
   return null;
 };
 

package/build/index.jsx

@@ -30,10 +30,10 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/4LKOWRT2.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/32HRKFKI.jsx")) : function() {
   return null;
 };
-var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/YI6MKFAH.jsx")) : function() {
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/NDFIDQLQ.jsx")) : function() {
   return null;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.90.3",
+  "version": "5.91.0",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -44,18 +44,19 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.90.1"
+    "@tanstack/query-devtools": "5.91.0"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
     "npm-run-all2": "^5.0.0",
     "solid-js": "^1.9.7",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6",
-    "@tanstack/solid-query": "5.90.3"
+    "@tanstack/solid-query": "5.90.13"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0",
-    "@tanstack/solid-query": "^5.90.3"
+    "@tanstack/solid-query": "^5.90.13"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",
@@ -71,6 +72,8 @@
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
     "test:build": "publint --strict && attw --pack",
+    "test:lib": "vitest --retry=3",
+    "test:lib:dev": "pnpm run test:lib --watch",
     "build": "tsup --tsconfig tsconfig.prod.json",
     "build:dev": "tsup --watch"
   }

package/src/devtools.tsx

@@ -5,6 +5,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
 
@@ -45,11 +46,16 @@ interface DevtoolsOptions {
    * Set this to true to hide disabled queries from the devtools panel.
    */
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }
 
 export default function SolidQueryDevtools(props: DevtoolsOptions) {
-  const queryClient = useQueryClient()
-  const client = createMemo(() => props.client || queryClient)
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
   let ref!: HTMLDivElement
   const devtools = new TanstackQueryDevtools({
     client: client(),
@@ -63,6 +69,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
     hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme,
   })
 
   createEffect(() => {
@@ -91,6 +98,10 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     devtools.setErrorTypes(props.errorTypes || [])
   })
 
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
   onMount(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())

package/src/devtoolsPanel.tsx

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
 import type { JSX } from 'solid-js'
 
@@ -39,11 +39,16 @@ export interface DevtoolsPanelOptions {
    * Set this to true to hide disabled queries from the devtools panel.
    */
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }
 
 export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
-  const queryClient = useQueryClient()
-  const client = createMemo(() => props.client || queryClient)
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
   let ref!: HTMLDivElement
   const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
   const devtools = new TanstackQueryDevtoolsPanel({
@@ -59,6 +64,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     shadowDOMTarget,
     onClose: props.onClose,
     hideDisabledQueries,
+    theme: props.theme,
   })
   createEffect(() => {
     devtools.setClient(client())
@@ -71,6 +77,10 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     devtools.setErrorTypes(props.errorTypes || [])
   })
 
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
   onMount(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())