feat: Svelte implementation of client persistence (#5928)

Co-authored-by: Lachlan Collins <[email protected]>

Author: aadito123

packages/svelte-query-persist-client/.eslintrc.cjs

@@ -0,0 +1,23 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ['plugin:svelte/recommended'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+    extraFileExtensions: ['.svelte'],
+  },
+  ignorePatterns: ['*.config.*', '*.setup.*', '**/dist/*'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+}
+
+module.exports = config

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

@@ -0,0 +1,55 @@
+{
+  "name": "@tanstack/svelte-query-persist-client",
+  "version": "5.0.0-beta.20",
+  "description": "Svelte bindings to work with persisters in TanStack/svelte-query",
+  "author": "Lachlan Collins",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:eslint": "eslint --ext .svelte,.ts ./src",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist"
+  },
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tanstack/svelte-query": "workspace:*",
+    "@testing-library/svelte": "^4.0.3",
+    "eslint-plugin-svelte": "^2.32.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4"
+  },
+  "peerDependencies": {
+    "@tanstack/svelte-query": "workspace:^",
+    "svelte": ">=3 <5"
+  }
+}

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { persistQueryClient } from '@tanstack/query-persist-client-core'
+  import {
+    QueryClientProvider,
+    setIsRestoringContext,
+  } from '@tanstack/svelte-query'
+  import { writable } from 'svelte/store'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { QueryClient } from '@tanstack/svelte-query'
+
+  export let client: QueryClient
+  export let onSuccess: () => Promise<unknown> | unknown = () => undefined
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+
+  const isRestoring = writable(true)
+  setIsRestoringContext(isRestoring)
+  $: {
+    let isStale = false
+    isRestoring.set(true)
+    const [unsubscribe, promise] = persistQueryClient({
+      ...persistOptions,
+      queryClient: client,
+    })
+    promise.then(async () => {
+      if (!isStale) {
+        try {
+          await onSuccess()
+        } finally {
+          isRestoring.set(false)
+        }
+      }
+    })
+    onDestroy(() => {
+      isStale = true
+      unsubscribe()
+    })
+  }
+</script>
+
+<QueryClientProvider {client}>
+  <slot />
+</QueryClientProvider>

packages/svelte-query-persist-client/src/__tests__/AwaitOnSuccess/AwaitOnSuccess.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+
+  export let key: Array<string>
+  export let states: Writable<Array<string>>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      states.update((s) => [...s, 'fetching'])
+      await sleep(10)
+      states.update((s) => [...s, 'fetched'])
+      return 'fetched'
+    },
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

packages/svelte-query-persist-client/src/__tests__/AwaitOnSuccess/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import AwaitOnSuccess from './AwaitOnSuccess.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let onSuccess: () => Promise<void>
+  export let states: Writable<Array<string>>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
+  <AwaitOnSuccess {key} {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/src/__tests__/FreshData/FreshData.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+  export let fetched: Writable<boolean>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      fetched.set(true)
+      await sleep(10)
+      return 'fetched'
+    },
+
+    staleTime: Infinity,
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    states.update((prev) => [
+      ...prev,
+      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
+    ])
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>data: {data ?? 'null'}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

packages/svelte-query-persist-client/src/__tests__/FreshData/Provider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import FreshData from './FreshData.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+  export let fetched: Writable<boolean>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <FreshData {key} {states} {fetched} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/src/__tests__/InitialData/InitialData.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      await sleep(10)
+      return 'fetched'
+    },
+
+    initialData: 'initial',
+    // make sure that initial data is older than the hydration data
+    // otherwise initialData would be newer and takes precedence
+    initialDataUpdatedAt: 1,
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    states.update((prev) => [
+      ...prev,
+      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
+    ])
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>

packages/svelte-query-persist-client/src/__tests__/InitialData/Provider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import PersistQueryClientProvider from '../../PersistQueryClientProvider.svelte'
+  import InitialData from './InitialData.svelte'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import type { Writable } from 'svelte/store'
+  import type { StatusResult } from '../utils'
+
+  export let queryClient: QueryClient
+  export let persistOptions: Omit<PersistQueryClientOptions, 'queryClient'>
+  export let key: Array<string>
+  export let states: Writable<Array<StatusResult<string>>>
+</script>
+
+<PersistQueryClientProvider client={queryClient} {persistOptions}>
+  <InitialData {key} {states} />
+</PersistQueryClientProvider>

packages/svelte-query-persist-client/src/__tests__/OnSuccess/OnSuccess.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { get } from 'svelte/store'
+  import { sleep } from '../utils'
+
+  export let key: Array<string>
+
+  const state = createQuery({
+    queryKey: key,
+    queryFn: async () => {
+      await sleep(10)
+      return 'fetched'
+    },
+  })
+
+  let data = get(state).data
+  let fetchStatus = get(state).fetchStatus
+  state.subscribe((s) => {
+    data = s.data
+    fetchStatus = s.fetchStatus
+  })
+</script>
+
+<div>
+  <h1>{data}</h1>
+  <h2>fetchStatus: {fetchStatus}</h2>
+</div>