Add preact persist plugin (#10120)

* Add preact persist plugin

* Add docs

* Add tests

* Fix type issue

* ci: apply automated fixes

* Fixes

* Update changeset for preact-query packages

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>

Author: 3 people

.changeset/six-countries-tickle.md

@@ -0,0 +1,6 @@
+---
+"@tanstack/preact-query-persist-client": minor
+"@tanstack/preact-query": minor
+---
+
+feat: Add preact persist plugin

docs/config.json

@@ -1593,6 +1593,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>
+  )
+}