@tanstack/svelte-query-persist-client 5.90.2 → 6.0.0

package/dist/PersistQueryClientProvider.svelte

@@ -1,51 +1,56 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte'
-  import { persistQueryClient } from '@tanstack/query-persist-client-core'
+  import {
+    persistQueryClientRestore,
+    persistQueryClientSubscribe,
+  } from '@tanstack/query-persist-client-core'
   import {
     QueryClientProvider,
     setIsRestoringContext,
   } from '@tanstack/svelte-query'
-  import { writable } from 'svelte/store'
+  import { box } from './utils.svelte.js'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type {
+    OmitKeyof,
+    QueryClientProviderProps,
+  } from '@tanstack/svelte-query'
+
+  type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess?: () => void
+    onError?: () => void
+  }
+
+  let {
+    client,
+    children,
+    persistOptions,
+    ...props
+  }: PersistQueryClientProviderProps = $props()
 
-  export let client: QueryClient
-  export let onSuccess: () => Promise<unknown> | unknown = () => undefined
-  export let onError: () => Promise<unknown> | unknown = () => undefined
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+  let isRestoring = box(true)
 
-  const isRestoring = writable(true)
   setIsRestoringContext(isRestoring)
-  $: {
-    let isStale = false
-    isRestoring.set(true)
-    const [unsubscribe, promise] = persistQueryClient({
-      ...persistOptions,
-      queryClient: client,
-    })
-    promise
-      .then(async () => {
-        if (!isStale) {
-          await onSuccess()
-        }
-      })
-      .catch(async () => {
-        if (!isStale) {
-          await onError()
-        }
-      })
+
+  const options = $derived({
+    ...persistOptions,
+    queryClient: client,
+  })
+
+  $effect(() => {
+    return isRestoring.current ? () => {} : persistQueryClientSubscribe(options)
+  })
+
+  $effect(() => {
+    isRestoring.current = true
+    persistQueryClientRestore(options)
+      .then(() => props.onSuccess?.())
+      .catch(() => props.onError?.())
       .finally(() => {
-        if (!isStale) {
-          isRestoring.set(false)
-        }
+        isRestoring.current = false
       })
-    onDestroy(() => {
-      isStale = true
-      unsubscribe()
-    })
-  }
+  })
 </script>
 
-<QueryClientProvider {client}>
-  <slot />
+<QueryClientProvider {client} {...props}>
+  {@render children()}
 </QueryClientProvider>

package/dist/PersistQueryClientProvider.svelte.d.ts

@@ -1,24 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
 import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core';
-import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query';
-declare const __propDef: {
-    props: {
-        client: QueryClient;
-        onSuccess?: () => Promise<unknown> | unknown;
-        onError?: () => Promise<unknown> | unknown;
-        persistOptions: OmitKeyof<PersistQueryClientOptions, "queryClient">;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { OmitKeyof, QueryClientProviderProps } from '@tanstack/svelte-query';
+type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>;
+    onSuccess?: () => void;
+    onError?: () => void;
 };
-export type PersistQueryClientProviderProps = typeof __propDef.props;
-export type PersistQueryClientProviderEvents = typeof __propDef.events;
-export type PersistQueryClientProviderSlots = typeof __propDef.slots;
-export default class PersistQueryClientProvider extends SvelteComponentTyped<PersistQueryClientProviderProps, PersistQueryClientProviderEvents, PersistQueryClientProviderSlots> {
-}
-export {};
+declare const PersistQueryClientProvider: import("svelte").Component<PersistQueryClientProviderProps, {}, "">;
+type PersistQueryClientProvider = ReturnType<typeof PersistQueryClientProvider>;
+export default PersistQueryClientProvider;
 //# sourceMappingURL=PersistQueryClientProvider.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PersistQueryClientProvider.svelte.d.ts","sourceRoot":"","sources":["../src/PersistQueryClientProvider.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAQD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAqDrE,QAAA,MAAM,SAAS;;gBADyG,WAAW;oBAAc,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO;kBAAY,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO;wBAAkB,SAAS,CAAC,yBAAyB,EAAE,aAAa,CAAC;;;;;;;;CACzO,CAAC;AAC1D,MAAM,MAAM,+BAA+B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrE,MAAM,MAAM,gCAAgC,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvE,MAAM,MAAM,+BAA+B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErE,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,oBAAoB,CAAC,+BAA+B,EAAE,gCAAgC,EAAE,+BAA+B,CAAC;CAC/K"}
+{"version":3,"file":"PersistQueryClientProvider.svelte.d.ts","sourceRoot":"","sources":["../src/PersistQueryClientProvider.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,KAAK,EACR,SAAS,EACT,wBAAwB,EACzB,MAAM,wBAAwB,CAAC;AAGhC,KAAK,+BAA+B,GAAG,wBAAwB,GAAG;IAChE,cAAc,EAAE,SAAS,CAAC,yBAAyB,EAAE,aAAa,CAAC,CAAA;IACnE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AA8CJ,QAAA,MAAM,0BAA0B,qEAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/utils.svelte.d.ts

@@ -0,0 +1,6 @@
+type Box<T> = {
+    current: T;
+};
+export declare function box<T>(initial: T): Box<T>;
+export {};
+//# sourceMappingURL=utils.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../src/utils.svelte.ts"],"names":[],"mappings":"AAAA,KAAK,GAAG,CAAC,CAAC,IAAI;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,CAAA;AAE5B,wBAAgB,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAWzC"}

package/dist/utils.svelte.js

@@ -0,0 +1,11 @@
+export function box(initial) {
+    let current = $state(initial);
+    return {
+        get current() {
+            return current;
+        },
+        set current(newValue) {
+            current = newValue;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-persist-client",
-  "version": "5.90.2",
+  "version": "6.0.0",
   "description": "Svelte bindings to work with persisters in TanStack/svelte-query",
   "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",
@@ -40,15 +45,16 @@
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@testing-library/svelte": "^5.2.8",
+    "@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/query-test-utils": "0.0.0"
+    "@tanstack/query-test-utils": "0.0.0",
+    "@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/PersistQueryClientProvider.svelte

@@ -1,51 +1,56 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte'
-  import { persistQueryClient } from '@tanstack/query-persist-client-core'
+  import {
+    persistQueryClientRestore,
+    persistQueryClientSubscribe,
+  } from '@tanstack/query-persist-client-core'
   import {
     QueryClientProvider,
     setIsRestoringContext,
   } from '@tanstack/svelte-query'
-  import { writable } from 'svelte/store'
+  import { box } from './utils.svelte.js'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
+  import type {
+    OmitKeyof,
+    QueryClientProviderProps,
+  } from '@tanstack/svelte-query'
+
+  type PersistQueryClientProviderProps = QueryClientProviderProps & {
+    persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+    onSuccess?: () => void
+    onError?: () => void
+  }
+
+  let {
+    client,
+    children,
+    persistOptions,
+    ...props
+  }: PersistQueryClientProviderProps = $props()
 
-  export let client: QueryClient
-  export let onSuccess: () => Promise<unknown> | unknown = () => undefined
-  export let onError: () => Promise<unknown> | unknown = () => undefined
-  export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+  let isRestoring = box(true)
 
-  const isRestoring = writable(true)
   setIsRestoringContext(isRestoring)
-  $: {
-    let isStale = false
-    isRestoring.set(true)
-    const [unsubscribe, promise] = persistQueryClient({
-      ...persistOptions,
-      queryClient: client,
-    })
-    promise
-      .then(async () => {
-        if (!isStale) {
-          await onSuccess()
-        }
-      })
-      .catch(async () => {
-        if (!isStale) {
-          await onError()
-        }
-      })
+
+  const options = $derived({
+    ...persistOptions,
+    queryClient: client,
+  })
+
+  $effect(() => {
+    return isRestoring.current ? () => {} : persistQueryClientSubscribe(options)
+  })
+
+  $effect(() => {
+    isRestoring.current = true
+    persistQueryClientRestore(options)
+      .then(() => props.onSuccess?.())
+      .catch(() => props.onError?.())
       .finally(() => {
-        if (!isStale) {
-          isRestoring.set(false)
-        }
+        isRestoring.current = false
       })
-    onDestroy(() => {
-      isStale = true
-      unsubscribe()
-    })
-  }
+  })
 </script>
 
-<QueryClientProvider {client}>
-  <slot />
+<QueryClientProvider {client} {...props}>
+  {@render children()}
 </QueryClientProvider>

package/src/utils.svelte.ts

@@ -0,0 +1,14 @@
+type Box<T> = { current: T }
+
+export function box<T>(initial: T): Box<T> {
+  let current = $state(initial)
+
+  return {
+    get current() {
+      return current
+    },
+    set current(newValue) {
+      current = newValue
+    },
+  }
+}