@tanstack/svelte-query-devtools 5.90.2 → 6.0.0

package/dist/Devtools.svelte

@@ -10,14 +10,55 @@
     TanstackQueryDevtools,
   } from '@tanstack/query-devtools'
 
-  export let initialIsOpen = false
-  export let buttonPosition: DevtoolsButtonPosition = 'bottom-right'
-  export let position: DevtoolsPosition = 'bottom'
-  export let client: QueryClient = useQueryClient()
-  export let errorTypes: Array<DevtoolsErrorType> = []
-  export let styleNonce: string | undefined = undefined
-  export let shadowDOMTarget: ShadowRoot | undefined = undefined
-  export let hideDisabledQueries: boolean = false
+  interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean
+    /**
+     * The position of the TanStack Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition
+    /**
+     * The position of the TanStack Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean
+  }
+
+  let {
+    initialIsOpen = false,
+    buttonPosition = 'bottom-right',
+    position = 'bottom',
+    client = useQueryClient(),
+    errorTypes = [],
+    styleNonce = undefined,
+    shadowDOMTarget = undefined,
+    hideDisabledQueries = false,
+  }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
   let devtools: TanstackQueryDevtools | undefined
@@ -43,20 +84,24 @@
 
         devtools.mount(ref)
       })
+      return () => devtools?.unmount()
+    })
 
-      return () => {
-        devtools?.unmount()
-      }
+    $effect(() => {
+      devtools?.setButtonPosition(buttonPosition)
     })
-  }
 
-  $: {
-    if (devtools) {
-      devtools.setButtonPosition(buttonPosition)
-      devtools.setPosition(position)
-      devtools.setInitialIsOpen(initialIsOpen)
-      devtools.setErrorTypes(errorTypes)
-    }
+    $effect(() => {
+      devtools?.setPosition(position)
+    })
+
+    $effect(() => {
+      devtools?.setInitialIsOpen(initialIsOpen)
+    })
+
+    $effect(() => {
+      devtools?.setErrorTypes(errorTypes)
+    })
   }
 </script>
 

package/dist/Devtools.svelte.d.ts

@@ -1,26 +1,44 @@
-import { SvelteComponentTyped } from "svelte";
 import type { QueryClient } from '@tanstack/svelte-query';
 import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
-declare const __propDef: {
-    props: {
-        initialIsOpen?: boolean;
-        buttonPosition?: DevtoolsButtonPosition;
-        position?: DevtoolsPosition;
-        client?: QueryClient;
-        errorTypes?: Array<DevtoolsErrorType>;
-        styleNonce?: string | undefined;
-        shadowDOMTarget?: ShadowRoot | undefined;
-        hideDisabledQueries?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DevtoolsProps = typeof __propDef.props;
-export type DevtoolsEvents = typeof __propDef.events;
-export type DevtoolsSlots = typeof __propDef.slots;
-export default class Devtools extends SvelteComponentTyped<DevtoolsProps, DevtoolsEvents, DevtoolsSlots> {
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the TanStack Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the TanStack Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
 }
-export {};
+declare const Devtools: import("svelte").Component<DevtoolsOptions, {}, "">;
+type Devtools = ReturnType<typeof Devtools>;
+export default Devtools;
 //# sourceMappingURL=Devtools.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Devtools.svelte.d.ts","sourceRoot":"","sources":["../src/Devtools.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,EACR,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAEjB,MAAM,0BAA0B,CAAC;AA+DpC,QAAA,MAAM,SAAS;;;yBADkS,sBAAsB;mBAAa,gBAAgB;iBAAW,WAAW;qBAAe,KAAK,CAAC,iBAAiB,CAAC;qBAAe,MAAM,GAAG,SAAS;0BAAoB,UAAU,GAAG,SAAS;8BAAwB,OAAO;;;;;;CACld,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "5.90.2",
+  "version": "6.0.0",
   "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -14,6 +14,11 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
+  "keywords": [
+    "tanstack",
+    "query",
+    "svelte"
+  ],
   "type": "module",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -39,14 +44,15 @@
   "devDependencies": {
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "eslint-plugin-svelte": "^3.11.0",
     "svelte": "^5.39.3",
     "svelte-check": "^4.3.1",
-    "@tanstack/svelte-query": "5.90.2"
+    "@tanstack/svelte-query": "6.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
-    "@tanstack/svelte-query": "^5.90.2"
+    "svelte": "^5.25.0",
+    "@tanstack/svelte-query": "^6.0.0"
   },
   "scripts": {
     "clean": "premove ./dist ./coverage ./.svelte-kit ./dist-ts",

package/src/Devtools.svelte

@@ -10,14 +10,55 @@
     TanstackQueryDevtools,
   } from '@tanstack/query-devtools'
 
-  export let initialIsOpen = false
-  export let buttonPosition: DevtoolsButtonPosition = 'bottom-right'
-  export let position: DevtoolsPosition = 'bottom'
-  export let client: QueryClient = useQueryClient()
-  export let errorTypes: Array<DevtoolsErrorType> = []
-  export let styleNonce: string | undefined = undefined
-  export let shadowDOMTarget: ShadowRoot | undefined = undefined
-  export let hideDisabledQueries: boolean = false
+  interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean
+    /**
+     * The position of the TanStack Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition
+    /**
+     * The position of the TanStack Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean
+  }
+
+  let {
+    initialIsOpen = false,
+    buttonPosition = 'bottom-right',
+    position = 'bottom',
+    client = useQueryClient(),
+    errorTypes = [],
+    styleNonce = undefined,
+    shadowDOMTarget = undefined,
+    hideDisabledQueries = false,
+  }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
   let devtools: TanstackQueryDevtools | undefined
@@ -43,20 +84,24 @@
 
         devtools.mount(ref)
       })
+      return () => devtools?.unmount()
+    })
 
-      return () => {
-        devtools?.unmount()
-      }
+    $effect(() => {
+      devtools?.setButtonPosition(buttonPosition)
     })
-  }
 
-  $: {
-    if (devtools) {
-      devtools.setButtonPosition(buttonPosition)
-      devtools.setPosition(position)
-      devtools.setInitialIsOpen(initialIsOpen)
-      devtools.setErrorTypes(errorTypes)
-    }
+    $effect(() => {
+      devtools?.setPosition(position)
+    })
+
+    $effect(() => {
+      devtools?.setInitialIsOpen(initialIsOpen)
+    })
+
+    $effect(() => {
+      devtools?.setErrorTypes(errorTypes)
+    })
   }
 </script>