feat: More tests, back to thunks, fixed svelte-query-persist-client

Author: elliott-with-the-longest-name-on-github

packages/svelte-query-persist-client/package.json

@@ -19,8 +19,8 @@
     "compile": "tsc --build",
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:eslint": "eslint ./src",
-    "test:lib": "vitest",
-    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:lib": "vitest run",
+    "test:lib:dev": "vitest",
     "test:build": "publint --strict && attw --pack",
     "build": "svelte-package --input ./src --output ./dist"
   },

packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte

@@ -12,6 +12,7 @@
     OmitKeyof,
     QueryClientProviderProps,
   } from '@tanstack/svelte-query'
+  import { box } from './utils.svelte'
 
   type PersistQueryClientProviderProps = QueryClientProviderProps & {
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
@@ -25,9 +26,9 @@
     ...props
   }: PersistQueryClientProviderProps = $props()
 
-  let isRestoring = $state(true)
+  let isRestoring = box(true)
 
-  setIsRestoringContext(() => isRestoring)
+  setIsRestoringContext(isRestoring)
 
   const options = $derived({
     ...persistOptions,
@@ -39,12 +40,12 @@
   })
 
   $effect(() => {
-    isRestoring = true
+    isRestoring.current = true
     persistQueryClientRestore(options).then(async () => {
       try {
         await props.onSuccess?.()
       } finally {
-        isRestoring = false
+        isRestoring.current = false
       }
     })
   })

packages/svelte-query-persist-client/src/utils.svelte.ts

@@ -0,0 +1,14 @@
+export 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
+    },
+  }
+}

packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.svelte.js'
+  import { sleep, StatelessRef } from '../utils.svelte.js'
 
-  let { states }: { states: Array<string> } = $props()
+  let { states }: { states: StatelessRef<Array<string>> } = $props()
 
   const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
-      states.push('fetching')
+      states.current.push('fetching')
       await sleep(5)
-      states.push('fetched')
+      states.current.push('fetched')
       return 'fetched'
     },
   }))

packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte

@@ -3,12 +3,13 @@
   import AwaitOnSuccess from './AwaitOnSuccess.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import { StatelessRef } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     onSuccess: () => Promise<void>
-    states: Array<string>
+    states: StatelessRef<Array<string>>
   }
 
   let { queryClient, persistOptions, onSuccess, states }: Props = $props()

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte

@@ -1,34 +1,26 @@
 <script lang="ts">
-  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.svelte.js'
-  import type { StatusResult } from '../utils.svelte.js'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
 
   let {
     states,
-    fetched,
   }: {
-    states: { value: Array<StatusResult<string>> }
-    fetched: boolean
+    states: StatelessRef<Array<StatusResult<string>>>
   } = $props()
 
   const query = createQuery(() => ({
     queryKey: ['test'],
-    queryFn: async () => {
-      fetched = true
-      await sleep(5)
-      return 'fetched'
-    },
+    queryFn: () => Promise.resolve('fetched'),
 
     staleTime: Infinity,
   }))
 
   $effect(() => {
     // svelte-ignore state_snapshot_uncloneable
-    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
   })
 </script>
 
 <div>data: {query.data ?? 'undefined'}</div>
 <div>fetchStatus: {query.fetchStatus}</div>
-<div>fetched: {fetched}</div>

packages/svelte-query-persist-client/tests/FreshData/Provider.svelte

@@ -3,18 +3,17 @@
   import FreshData from './FreshData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils.svelte.js'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-    states: { value: Array<StatusResult<string>> }
-    fetched: boolean
+    states: StatelessRef<Array<StatusResult<string>>>
   }
 
-  let { queryClient, persistOptions, states, fetched }: Props = $props()
+  let { queryClient, persistOptions, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <FreshData {states} {fetched} />
+  <FreshData {states} />
 </PersistQueryClientProvider>

packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils.svelte.js'
-  import type { StatusResult } from '../utils.svelte.js'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
 
-  let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
+  let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
+    $props()
 
   const query = createQuery(() => ({
     queryKey: ['test'],
@@ -21,7 +21,8 @@
 
   $effect(() => {
     // svelte-ignore state_snapshot_uncloneable
-    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
   })
 </script>
 

packages/svelte-query-persist-client/tests/InitialData/Provider.svelte

@@ -3,12 +3,12 @@
   import InitialData from './InitialData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils.svelte.js'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-    states: { value: Array<StatusResult<string>> }
+    states: StatelessRef<Array<StatusResult<string>>>
   }
 
   let { queryClient, persistOptions, states }: Props = $props()

packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.svelte.js'
 
   const query = createQuery(() => ({
     queryKey: ['test'],
-    queryFn: async () => {
-      await sleep(5)
-      return 'fetched'
-    },
+    queryFn: () => Promise.resolve('fetched'),
   }))
 </script>