@tanstack/svelte-query-devtools 6.2.1 → 6.2.3

package/dist/Devtools.svelte

@@ -8,6 +8,7 @@
     DevtoolsErrorType,
     DevtoolsPosition,
     TanstackQueryDevtools,
+    Theme,
   } from '@tanstack/query-devtools'
 
   interface DevtoolsOptions {
@@ -18,13 +19,15 @@
     /**
      * The position of the TanStack logo to open and close the devtools panel.
      * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-     * Defaults to 'bottom-right'.
+     *
+     * @defaultValue bottom-right
      */
     buttonPosition?: DevtoolsButtonPosition
     /**
      * The position of the Svelte Query devtools panel.
      * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
+     *
+     * @defaultValue bottom
      */
     position?: DevtoolsPosition
     /**
@@ -47,6 +50,11 @@
      * 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
   }
 
   let {
@@ -58,6 +66,7 @@
     styleNonce = undefined,
     shadowDOMTarget = undefined,
     hideDisabledQueries = false,
+    theme = 'system',
   }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
@@ -80,6 +89,7 @@
           styleNonce,
           shadowDOMTarget,
           hideDisabledQueries,
+          theme,
         })
 
         devtools.mount(ref)
@@ -102,6 +112,10 @@
     $effect(() => {
       devtools?.setErrorTypes(errorTypes)
     })
+
+    $effect(() => {
+      devtools?.setTheme(theme)
+    })
   }
 </script>
 

package/dist/Devtools.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { QueryClient } from '@tanstack/svelte-query';
-import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
+import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
 interface DevtoolsOptions {
     /**
      * Set this true if you want the dev tools to default to being open
@@ -8,13 +8,15 @@ interface DevtoolsOptions {
     /**
      * The position of the TanStack logo to open and close the devtools panel.
      * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-     * Defaults to 'bottom-right'.
+     *
+     * @defaultValue bottom-right
      */
     buttonPosition?: DevtoolsButtonPosition;
     /**
      * The position of the Svelte Query devtools panel.
      * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
+     *
+     * @defaultValue bottom
      */
     position?: DevtoolsPosition;
     /**
@@ -37,6 +39,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 const Devtools: import("svelte").Component<DevtoolsOptions, {}, "">;
 type Devtools = ReturnType<typeof Devtools>;

package/dist/Devtools.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Devtools.svelte.d.ts","sourceRoot":"","sources":["../src/Devtools.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,EACR,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAEjB,MAAM,0BAA0B,CAAC;AAGlC,UAAU,eAAe;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAA;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAqEH,QAAA,MAAM,QAAQ,qDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Devtools.svelte.d.ts","sourceRoot":"","sources":["../src/Devtools.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,EACR,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAEhB,KAAK,EACN,MAAM,0BAA0B,CAAC;AAGlC,UAAU,eAAe;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAA;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AA2EH,QAAA,MAAM,QAAQ,qDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "6.2.1",
+  "version": "6.2.3",
   "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -39,7 +39,7 @@
   ],
   "dependencies": {
     "esm-env": "^1.2.1",
-    "@tanstack/query-devtools": "5.103.1"
+    "@tanstack/query-devtools": "5.103.2"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
@@ -50,11 +50,11 @@
     "svelte": "^5.39.3",
     "svelte-check": "^4.4.5",
     "typescript": "5.9.3",
-    "@tanstack/svelte-query": "6.2.1"
+    "@tanstack/svelte-query": "6.2.3"
   },
   "peerDependencies": {
     "svelte": "^5.25.0",
-    "@tanstack/svelte-query": "^6.2.1"
+    "@tanstack/svelte-query": "^6.2.3"
   },
   "scripts": {
     "clean": "premove ./dist ./coverage ./.svelte-kit ./dist-ts",

package/src/Devtools.svelte

@@ -8,6 +8,7 @@
     DevtoolsErrorType,
     DevtoolsPosition,
     TanstackQueryDevtools,
+    Theme,
   } from '@tanstack/query-devtools'
 
   interface DevtoolsOptions {
@@ -18,13 +19,15 @@
     /**
      * The position of the TanStack logo to open and close the devtools panel.
      * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-     * Defaults to 'bottom-right'.
+     *
+     * @defaultValue bottom-right
      */
     buttonPosition?: DevtoolsButtonPosition
     /**
      * The position of the Svelte Query devtools panel.
      * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
+     *
+     * @defaultValue bottom
      */
     position?: DevtoolsPosition
     /**
@@ -47,6 +50,11 @@
      * 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
   }
 
   let {
@@ -58,6 +66,7 @@
     styleNonce = undefined,
     shadowDOMTarget = undefined,
     hideDisabledQueries = false,
+    theme = 'system',
   }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
@@ -80,6 +89,7 @@
           styleNonce,
           shadowDOMTarget,
           hideDisabledQueries,
+          theme,
         })
 
         devtools.mount(ref)
@@ -102,6 +112,10 @@
     $effect(() => {
       devtools?.setErrorTypes(errorTypes)
     })
+
+    $effect(() => {
+      devtools?.setTheme(theme)
+    })
   }
 </script>