@tanstack/svelte-query-devtools 6.1.6 → 6.1.8

package/dist/Devtools.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { BROWSER, DEV } from 'esm-env'
+  import { onlineManager, useQueryClient } from '@tanstack/svelte-query'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type {
+    DevtoolsButtonPosition,
+    DevtoolsErrorType,
+    DevtoolsPosition,
+    TanstackQueryDevtools,
+  } from '@tanstack/query-devtools'
+
+  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
+
+  if (DEV && BROWSER) {
+    onMount(() => {
+      import('@tanstack/query-devtools').then((m) => {
+        const QueryDevtools = m.TanstackQueryDevtools
+
+        devtools = new QueryDevtools({
+          client,
+          queryFlavor: 'Svelte Query',
+          version: '5',
+          onlineManager,
+          buttonPosition,
+          position,
+          initialIsOpen,
+          errorTypes,
+          styleNonce,
+          shadowDOMTarget,
+          hideDisabledQueries,
+        })
+
+        devtools.mount(ref)
+      })
+      return () => devtools?.unmount()
+    })
+
+    $effect(() => {
+      devtools?.setButtonPosition(buttonPosition)
+    })
+
+    $effect(() => {
+      devtools?.setPosition(position)
+    })
+
+    $effect(() => {
+      devtools?.setInitialIsOpen(initialIsOpen)
+    })
+
+    $effect(() => {
+      devtools?.setErrorTypes(errorTypes)
+    })
+  }
+</script>
+
+<div class="tsqd-parent-container" bind:this={ref}></div>

package/dist/Devtools.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { QueryClient } from '@tanstack/svelte-query';
+import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
+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;
+}
+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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SvelteQueryDevtools } from './Devtools.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as SvelteQueryDevtools } from './Devtools.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "6.1.6",
+  "version": "6.1.8",
   "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.94.4"
+    "@tanstack/query-devtools": "5.95.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.4.0",
@@ -49,11 +49,11 @@
     "svelte": "^5.39.3",
     "svelte-check": "^4.4.5",
     "typescript": "5.9.3",
-    "@tanstack/svelte-query": "6.1.6"
+    "@tanstack/svelte-query": "6.1.8"
   },
   "peerDependencies": {
     "svelte": "^5.25.0",
-    "@tanstack/svelte-query": "^6.1.6"
+    "@tanstack/svelte-query": "^6.1.8"
   },
   "scripts": {
     "clean": "premove ./dist ./coverage ./.svelte-kit ./dist-ts",