Add preact persist plugin

docs/config.json

@@ -1585,6 +1585,31 @@
               "to": "framework/vue/plugins/createPersister"
             }
           ]
+        },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "persistQueryClient",
+              "to": "framework/preact/plugins/persistQueryClient"
+            },
+            {
+              "label": "createSyncStoragePersister",
+              "to": "framework/preact/plugins/createSyncStoragePersister"
+            },
+            {
+              "label": "createAsyncStoragePersister",
+              "to": "framework/preact/plugins/createAsyncStoragePersister"
+            },
+            {
+              "label": "broadcastQueryClient (Experimental)",
+              "to": "framework/preact/plugins/broadcastQueryClient"
+            },
+            {
+              "label": "createPersister (Experimental)",
+              "to": "framework/preact/plugins/createPersister"
+            }
+          ]
         }
       ]
     }

docs/framework/preact/plugins/createAsyncStoragePersister.md

@@ -0,0 +1,6 @@
+---
+id: createAsyncStoragePersister
+title: createAsyncStoragePersister
+ref: docs/framework/react/plugins/createAsyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---

docs/framework/preact/plugins/createPersister.md

@@ -0,0 +1,6 @@
+---
+id: createPersister
+title: experimental_createPersister
+ref: docs/framework/react/plugins/createPersister.md
+replace: { 'react-query': 'preact-query' }
+---

docs/framework/preact/plugins/createSyncStoragePersister.md

@@ -0,0 +1,6 @@
+---
+id: createSyncStoragePersister
+title: createSyncStoragePersister
+ref: docs/framework/react/plugins/createSyncStoragePersister.md
+replace: { 'react-query': 'preact-query' }
+---

packages/preact-query-persist-client/eslint.config.js

@@ -0,0 +1,38 @@
+// @ts-check
+// @ts-ignore: no types for eslint-config-preact
+import preact from 'eslint-config-preact'
+// eslint-config-preact uses typescript-eslint under the hood
+import tseslint from 'typescript-eslint'
+
+import rootConfig from './root.eslint.config.js'
+
+export default [
+  ...rootConfig,
+  ...preact,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: true,
+      },
+    },
+    plugins: {
+      'typescript-eslint': tseslint.plugin,
+    },
+    rules: {
+      // Disable base rule to prevent overload false positives
+      'no-redeclare': 'off',
+      'no-duplicate-imports': 'off',
+      'no-unused-vars': 'off',
+      'import/order': 'off',
+      'sort-imports': 'off',
+      'no-import-assign': 'off',
+      // TS-aware version handles overloads correctly
+      '@typescript-eslint/no-redeclare': 'error',
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+    },
+  },
+]

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

@@ -0,0 +1,77 @@
+{
+  "name": "@tanstack/preact-query-persist-client",
+  "version": "5.91.0",
+  "description": "Preact bindings to work with persisters in TanStack/preact-query",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/query.git",
+    "directory": "packages/preact-query-persist-client"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "scripts": {
+    "clean": "premove ./build ./coverage ./dist-ts",
+    "compile": "tsc --build",
+    "test:eslint": "eslint --concurrency=auto ./src",
+    "test:types": "npm-run-all --serial test:types:*",
+    "test:types:ts50": "node ../../node_modules/typescript50/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:tscurrent": "tsc --build",
+    "test:lib": "vitest --retry=3",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict && attw --pack",
+    "build": "tsup --tsconfig tsconfig.prod.json"
+  },
+  "type": "module",
+  "types": "build/legacy/index.d.ts",
+  "main": "build/legacy/index.cjs",
+  "module": "build/legacy/index.js",
+  "exports": {
+    ".": {
+      "@tanstack/custom-condition": "./src/index.ts",
+      "import": {
+        "types": "./build/modern/index.d.ts",
+        "default": "./build/modern/index.js"
+      },
+      "require": {
+        "types": "./build/modern/index.d.cts",
+        "default": "./build/modern/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src",
+    "!src/__tests__"
+  ],
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@tanstack/preact-query": "workspace:*",
+    "@tanstack/query-test-utils": "workspace:*",
+    "@testing-library/preact": "^3.2.4",
+    "eslint-config-preact": "^2.0.0",
+    "npm-run-all2": "^5.0.0",
+    "preact": "^10.28.0",
+    "typescript-eslint": "^8.54.0"
+  },
+  "peerDependencies": {
+    "@tanstack/preact-query": "workspace:^",
+    "preact": "^10.0.0"
+  }
+}

packages/preact-query-persist-client/root.eslint.config.js

@@ -0,0 +1 @@
+../../eslint.config.js

packages/preact-query-persist-client/root.tsup.config.js

@@ -0,0 +1 @@
+../../scripts/getTsupConfig.js

packages/preact-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import type { VNode } from 'preact'
+
+import {
+  persistQueryClientRestore,
+  persistQueryClientSubscribe,
+} from '@tanstack/query-persist-client-core'
+import {
+  IsRestoringProvider,
+  QueryClientProvider,
+} from '@tanstack/preact-query'
+import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+import type {
+  OmitKeyof,
+  QueryClientProviderProps,
+} from '@tanstack/preact-query'
+
+export type PersistQueryClientProviderProps = QueryClientProviderProps & {
+  persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
+  onSuccess?: () => Promise<unknown> | unknown
+  onError?: () => Promise<unknown> | unknown
+}
+
+export const PersistQueryClientProvider = ({
+  children,
+  persistOptions,
+  onSuccess,
+  onError,
+  ...props
+}: PersistQueryClientProviderProps): VNode => {
+  const [isRestoring, setIsRestoring] = useState(true)
+  const refs = useRef({ persistOptions, onSuccess, onError })
+  const didRestore = useRef(false)
+
+  useEffect(() => {
+    refs.current = { persistOptions, onSuccess, onError }
+  })
+
+  useEffect(() => {
+    const options = {
+      ...refs.current.persistOptions,
+      queryClient: props.client,
+    }
+    if (!didRestore.current) {
+      didRestore.current = true
+      persistQueryClientRestore(options)
+        .then(() => refs.current.onSuccess?.())
+        .catch(() => refs.current.onError?.())
+        .finally(() => {
+          setIsRestoring(false)
+        })
+    }
+    return isRestoring ? undefined : persistQueryClientSubscribe(options)
+  }, [props.client, isRestoring])
+
+  return (
+    <QueryClientProvider {...props}>
+      <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>
+    </QueryClientProvider>
+  )
+}

packages/preact-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -0,0 +1,126 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import '@testing-library/jest-dom/vitest'
+
+import type {
+  PersistedClient,
+  Persister,
+} from '../../../query-persist-client-core/src'
+import { persistQueryClientSave } from '../../../query-persist-client-core/src'
+import { notifyManager } from '../../../query-core/src'
+import { act, cleanup, render } from '@testing-library/preact'
+import type { UseQueryResult } from '../../../preact-query/src'
+import { QueryClient, useQuery } from '../../../preact-query/src'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+
+import { PersistQueryClientProvider } from './testPersistProvider'
+
+notifyManager.setNotifyFunction((fn) => {
+  act(fn)
+})
+
+const createMockPersister = (): Persister => {
+  let storedState: PersistedClient | undefined
+
+  return {
+    persistClient(persistClient: PersistedClient) {
+      storedState = persistClient
+      return Promise.resolve()
+    },
+    async restoreClient() {
+      return sleep(10).then(() => storedState)
+    },
+    removeClient() {
+      storedState = undefined
+      return Promise.resolve()
+    },
+  }
+}
+
+describe('PersistQueryClientProvider (preact)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  test('restores cache from persister and refetches', async () => {
+    const key = queryKey()
+    const states: Array<UseQueryResult<string>> = []
+
+    const queryClient = new QueryClient()
+    queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => sleep(10).then(() => 'hydrated'),
+    })
+    await vi.advanceTimersByTimeAsync(10)
+
+    const persister = createMockPersister()
+
+    persistQueryClientSave({ queryClient, persister })
+    await vi.advanceTimersByTimeAsync(0)
+
+    queryClient.clear()
+
+    function Page() {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => sleep(10).then(() => 'fetched'),
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>{state.data}</h1>
+          <h2>fetchStatus: {state.fetchStatus}</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
+        <Page />
+      </PersistQueryClientProvider>,
+    )
+
+    expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument()
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10)
+    })
+    expect(rendered.getByText('hydrated')).toBeInTheDocument()
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(11)
+    })
+    expect(rendered.getByText('fetched')).toBeInTheDocument()
+
+    expect(states.length).toBeGreaterThanOrEqual(3)
+    expect(states[0]).toMatchObject({
+      status: 'pending',
+      fetchStatus: 'idle',
+      data: undefined,
+    })
+
+    expect(
+      states.some(
+        (state) =>
+          state.fetchStatus === 'fetching' && state.data === 'hydrated',
+      ),
+    ).toBe(true)
+
+    expect(states.at(-1)).toMatchObject({
+      status: 'success',
+      fetchStatus: 'idle',
+      data: 'fetched',
+    })
+  })
+})