@tanstack/svelte-query-devtools 5.71.2 → 5.71.3

package/dist/Devtools.svelte

@@ -1,46 +1,61 @@
-<script>import { onMount } from "svelte";
-import { BROWSER, DEV } from "esm-env";
-import { onlineManager, useQueryClient } from "@tanstack/svelte-query";
-export let initialIsOpen = false;
-export let buttonPosition = "bottom-right";
-export let position = "bottom";
-export let client = useQueryClient();
-export let errorTypes = [];
-export let styleNonce = void 0;
-export let shadowDOMTarget = void 0;
-let ref;
-let devtools;
-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
-      });
-      devtools.mount(ref);
-    });
-    return () => {
-      devtools?.unmount();
-    };
-  });
-}
-$: {
-  if (devtools) {
-    devtools.setButtonPosition(buttonPosition);
-    devtools.setPosition(position);
-    devtools.setInitialIsOpen(initialIsOpen);
-    devtools.setErrorTypes(errorTypes);
+<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'
+
+  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
+
+  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,
+        })
+
+        devtools.mount(ref)
+      })
+
+      return () => {
+        devtools?.unmount()
+      }
+    })
+  }
+
+  $: {
+    if (devtools) {
+      devtools.setButtonPosition(buttonPosition)
+      devtools.setPosition(position)
+      devtools.setInitialIsOpen(initialIsOpen)
+      devtools.setErrorTypes(errorTypes)
+    }
   }
-}
 </script>
 
 <div class="tsqd-parent-container" bind:this={ref}></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "5.71.2",
+  "version": "5.71.3",
   "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -33,19 +33,19 @@
   ],
   "dependencies": {
     "esm-env": "^1.2.1",
-    "@tanstack/query-devtools": "5.71.2"
+    "@tanstack/query-devtools": "5.71.3"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint-plugin-svelte": "^2.46.0",
-    "svelte": "^4.2.18",
+    "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "@tanstack/svelte-query": "5.71.1"
+    "@tanstack/svelte-query": "5.71.3"
   },
   "peerDependencies": {
     "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
-    "@tanstack/svelte-query": "^5.71.1"
+    "@tanstack/svelte-query": "^5.71.3"
   },
   "scripts": {}
 }