snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

packages/preact-query-devtools/.attw.json

@@ -0,0 +1,3 @@
+{
+  "ignoreRules": ["no-resolution"]
+}

packages/preact-query-devtools/CHANGELOG.md

@@ -0,0 +1,356 @@
+# @tanstack/preact-query-devtools
+
+## 5.102.8
+
+### Patch Changes
+
+- Updated dependencies [[`6c27607`](https://github.com/TanStack/query/commit/6c27607d7ffc87612a8f1222a95f28bf5f9a045e)]:
+  - @tanstack/preact-query@5.102.8
+  - @tanstack/query-devtools@5.102.8
+
+## 5.102.7
+
+### Patch Changes
+
+- Updated dependencies [[`67fddee`](https://github.com/TanStack/query/commit/67fddee6310ca0dd87749ed7a1b4a7178c6e6aae)]:
+  - @tanstack/preact-query@5.102.7
+  - @tanstack/query-devtools@5.102.7
+
+## 5.102.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.102.6
+  - @tanstack/query-devtools@5.102.6
+
+## 5.102.5
+
+### Patch Changes
+
+- Updated dependencies [[`ef1eff1`](https://github.com/TanStack/query/commit/ef1eff1b62a657d6ff6f2af819c1cb8b73ad2af5)]:
+  - @tanstack/query-devtools@5.102.5
+  - @tanstack/preact-query@5.102.5
+
+## 5.102.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.102.4
+  - @tanstack/query-devtools@5.102.4
+
+## 5.102.3
+
+### Patch Changes
+
+- Updated dependencies [[`714c285`](https://github.com/TanStack/query/commit/714c2856e09bbaf7448ccc02364887e36c18b37c)]:
+  - @tanstack/preact-query@5.102.3
+  - @tanstack/query-devtools@5.102.3
+
+## 5.102.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.102.2
+  - @tanstack/query-devtools@5.102.2
+
+## 5.102.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.102.1
+  - @tanstack/query-devtools@5.102.1
+
+## 5.102.0
+
+### Patch Changes
+
+- Updated dependencies [[`4e48c58`](https://github.com/TanStack/query/commit/4e48c581b70216e9c66a72cc328b61789194db4f), [`37127db`](https://github.com/TanStack/query/commit/37127dbe479a4892dbbe28ac8ceabf8832b5f1a3), [`6e3d521`](https://github.com/TanStack/query/commit/6e3d521fe54f78624e53c1c6f9cadd678504bee8), [`294d4e6`](https://github.com/TanStack/query/commit/294d4e62c4f7d674574a4903eef2a1bc3dd1413b), [`cb6c9d3`](https://github.com/TanStack/query/commit/cb6c9d3725db0fed94fb5133820e41b7c326d2ef), [`2215bb0`](https://github.com/TanStack/query/commit/2215bb031139cdc8a84751b37a485c38ca9d2b6e), [`4913802`](https://github.com/TanStack/query/commit/49138028953f38097cfac4a6e9843c987705325f), [`1ef4208`](https://github.com/TanStack/query/commit/1ef42087c9a266c2137d2ef645cbcc662f60ac93), [`b866a95`](https://github.com/TanStack/query/commit/b866a95adde7e8465462526df5870ebc12340b36), [`e546d03`](https://github.com/TanStack/query/commit/e546d03bef116c66a05dbf42ccfd70b6d8600a8f)]:
+  - @tanstack/preact-query@5.102.0
+  - @tanstack/query-devtools@5.102.0
+
+## 5.101.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.101.4
+  - @tanstack/query-devtools@5.101.4
+
+## 5.101.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.101.3
+  - @tanstack/query-devtools@5.101.3
+
+## 5.101.2
+
+### Patch Changes
+
+- Updated dependencies [[`f5bf180`](https://github.com/TanStack/query/commit/f5bf180d933d8b8d9d9e7b845e55b26a3a413b07), [`25cdd97`](https://github.com/TanStack/query/commit/25cdd975fed4703d2ca5b600ca5ccd2b600b3dd8), [`ecd89c8`](https://github.com/TanStack/query/commit/ecd89c8faf7acc226f00633ea3a761d3ab842c1d), [`01c7634`](https://github.com/TanStack/query/commit/01c763444e3cf3dfa9744f13911aa1533cac3c29), [`49012db`](https://github.com/TanStack/query/commit/49012dbd5192dfe483d3b108b72ffaa7f2849e0f)]:
+  - @tanstack/query-devtools@5.101.2
+  - @tanstack/preact-query@5.101.2
+
+## 5.101.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.101.1
+  - @tanstack/query-devtools@5.101.1
+
+## 5.101.0
+
+### Patch Changes
+
+- Updated dependencies [[`3042860`](https://github.com/TanStack/query/commit/3042860e3c8731c94ca4dec0e277e415d0484fce), [`e631dc3`](https://github.com/TanStack/query/commit/e631dc3fa17bff71f413246b7a770a730016d346)]:
+  - @tanstack/query-devtools@5.101.0
+  - @tanstack/preact-query@5.101.0
+
+## 5.100.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.14
+  - @tanstack/query-devtools@5.100.14
+
+## 5.100.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.13
+  - @tanstack/query-devtools@5.100.13
+
+## 5.100.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.12
+  - @tanstack/query-devtools@5.100.12
+
+## 5.100.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.11
+  - @tanstack/query-devtools@5.100.11
+
+## 5.100.10
+
+### Patch Changes
+
+- Updated dependencies [[`4d130b9`](https://github.com/TanStack/query/commit/4d130b992d2ac396d75f921bfc530dd3a9d50577)]:
+  - @tanstack/query-devtools@5.100.10
+  - @tanstack/preact-query@5.100.10
+
+## 5.100.9
+
+### Patch Changes
+
+- Updated dependencies [[`3d21cac`](https://github.com/TanStack/query/commit/3d21cacdec3028b700c4c2e3e0ff8dbe7a235e8c)]:
+  - @tanstack/query-devtools@5.100.9
+  - @tanstack/preact-query@5.100.9
+
+## 5.100.8
+
+### Patch Changes
+
+- refactor(preact-query-devtools): replace deprecated 'JSX.CSSProperties' with 'CSSProperties' from Preact namespace ([#10622](https://github.com/TanStack/query/pull/10622))
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.8
+  - @tanstack/query-devtools@5.100.8
+
+## 5.100.7
+
+### Patch Changes
+
+- docs(devtools): align logo, panel, and 'buttonPosition' union descriptions across docs and JSDoc ([#10617](https://github.com/TanStack/query/pull/10617))
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.7
+  - @tanstack/query-devtools@5.100.7
+
+## 5.100.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.6
+  - @tanstack/query-devtools@5.100.6
+
+## 5.100.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.5
+  - @tanstack/query-devtools@5.100.5
+
+## 5.100.4
+
+### Patch Changes
+
+- Updated dependencies [[`3d1a62e`](https://github.com/TanStack/query/commit/3d1a62e63bd864359e369bb21356fa80d043f2ba)]:
+  - @tanstack/query-devtools@5.100.4
+  - @tanstack/preact-query@5.100.4
+
+## 5.100.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.3
+  - @tanstack/query-devtools@5.100.3
+
+## 5.100.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.2
+  - @tanstack/query-devtools@5.100.2
+
+## 5.100.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.1
+  - @tanstack/query-devtools@5.100.1
+
+## 5.100.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.100.0
+  - @tanstack/query-devtools@5.100.0
+
+## 5.99.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.99.2
+  - @tanstack/query-devtools@5.99.2
+
+## 5.99.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.99.1
+  - @tanstack/query-devtools@5.99.1
+
+## 5.99.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.99.0
+  - @tanstack/query-devtools@5.99.0
+
+## 5.98.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.98.0
+  - @tanstack/query-devtools@5.98.0
+
+## 5.97.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.97.0
+  - @tanstack/query-devtools@5.97.0
+
+## 5.96.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.96.2
+  - @tanstack/query-devtools@5.96.2
+
+## 5.96.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.96.1
+  - @tanstack/query-devtools@5.96.1
+
+## 5.96.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.96.0
+  - @tanstack/query-devtools@5.96.0
+
+## 5.95.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.95.2
+  - @tanstack/query-devtools@5.95.2
+
+## 5.95.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.95.1
+  - @tanstack/query-devtools@5.95.1
+
+## 5.95.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/preact-query@5.95.0
+  - @tanstack/query-devtools@5.95.0
+
+## 5.94.5
+
+### Patch Changes
+
+- fix(\*): resolve issue about excluded build directory ([#10312](https://github.com/TanStack/query/pull/10312))
+
+- Updated dependencies [[`4b6536d`](https://github.com/TanStack/query/commit/4b6536dfce99036f4e37f52943c6fed3ad0e0a18)]:
+  - @tanstack/preact-query@5.94.5
+  - @tanstack/query-devtools@5.94.5
+
+## 5.94.4
+
+### Patch Changes
+
+- chore: fixed version ([#10064](https://github.com/TanStack/query/pull/10064))
+
+- Updated dependencies [[`4c75210`](https://github.com/TanStack/query/commit/4c75210ce8235fe3d39b67e1029eff11278927cc)]:
+  - @tanstack/query-devtools@5.94.4
+  - @tanstack/preact-query@5.94.4
+
+## 5.92.0
+
+### Minor Changes
+
+- feat: Add preact query devtools ([#10119](https://github.com/TanStack/query/pull/10119))
+
+### Patch Changes
+
+- Updated dependencies [[`8fb3a5a`](https://github.com/TanStack/query/commit/8fb3a5a6f1b367f4bf4f148fa1ac073fbc1dcfbd)]:
+  - @tanstack/preact-query@5.92.0

packages/preact-query-devtools/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-devtools/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@tanstack/preact-query-devtools",
+  "version": "5.102.8",
+  "description": "Developer tools to interact with and visualize the TanStack/preact-query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/query.git",
+    "directory": "packages/preact-query-devtools"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "scripts": {
+    "clean": "premove ./build ./coverage ./dist-ts ./.cache/test-types",
+    "compile": "tsc --project tsconfig.json",
+    "test:eslint": "eslint --concurrency=auto ./src",
+    "test:types": "npm-run-all --serial test:types:*",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts56 --tsBuildInfoFile .cache/test-types/ts56.tsbuildinfo",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts59 --tsBuildInfoFile .cache/test-types/ts59.tsbuildinfo",
+    "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo",
+    "test:types:ts70": "node ../../node_modules/typescript70/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts70 --tsBuildInfoFile .cache/test-types/ts70.tsbuildinfo",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict && attw --pack",
+    "build": "tsdown --tsconfig tsconfig.prod.json",
+    "build:dev": "tsdown --watch"
+  },
+  "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"
+      }
+    },
+    "./production": {
+      "import": {
+        "types": "./build/modern/production.d.ts",
+        "default": "./build/modern/production.js"
+      },
+      "require": {
+        "types": "./build/modern/production.d.cts",
+        "default": "./build/modern/production.cjs"
+      }
+    },
+    "./build/modern/production.js": {
+      "import": {
+        "types": "./build/modern/production.d.ts",
+        "default": "./build/modern/production.js"
+      },
+      "require": {
+        "types": "./build/modern/production.d.cts",
+        "default": "./build/modern/production.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src",
+    "!src/__tests__"
+  ],
+  "dependencies": {
+    "@tanstack/query-devtools": "workspace:*"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@tanstack/preact-query": "workspace:*",
+    "@testing-library/preact": "^3.2.4",
+    "eslint-config-preact": "^2.0.0",
+    "npm-run-all2": "^5.0.0",
+    "preact": "^10.28.0",
+    "typescript": "6.0.3",
+    "typescript-eslint": "^8.54.0"
+  },
+  "peerDependencies": {
+    "@tanstack/preact-query": "workspace:^",
+    "preact": "^10.0.0"
+  }
+}

packages/preact-query-devtools/root.eslint.config.js

@@ -0,0 +1,64 @@
+// @ts-check
+
+// @ts-ignore Needed due to moduleResolution Node vs Bundler
+import { tanstackConfig } from '@tanstack/eslint-config'
+import pluginCspell from '@cspell/eslint-plugin'
+import vitest from '@vitest/eslint-plugin'
+
+export default [
+  ...tanstackConfig,
+  {
+    name: 'tanstack/temp',
+    plugins: {
+      cspell: pluginCspell,
+    },
+    rules: {
+      'cspell/spellchecker': [
+        'warn',
+        {
+          cspell: {
+            words: [
+              'Promisable', // Our public interface
+              'TSES', // @typescript-eslint package's interface
+              'codemod', // We support our codemod
+              'combinate', // Library name
+              'datatag', // Query options tagging
+              'extralight', // Our public interface
+              'jscodeshift',
+              'refetches', // Query refetch operations
+              'retryer', // Our public interface
+              'solidjs', // Our target framework
+              'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+              'tanstack', // Our package scope
+              'todos', // Too general word to be caught as error
+              'tsqd', // Our public interface (TanStack Query Devtools shorthand)
+              'tsdown', // We use tsdown as builder
+              'typecheck', // Field of vite.config.ts
+              'vue-demi', // dependency of @tanstack/vue-query
+              'ɵkind', // Angular specific
+              'ɵproviders', // Angular specific
+            ],
+          },
+        },
+      ],
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      'no-case-declarations': 'off',
+      'prefer-const': 'off',
+    },
+  },
+  {
+    files: ['**/*.spec.ts*', '**/*.test.ts*', '**/*.test-d.ts*'],
+    plugins: { vitest },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      'vitest/no-standalone-expect': [
+        'error',
+        {
+          additionalTestBlockFunctions: ['testIf'],
+        },
+      ],
+    },
+    settings: { vitest: { typecheck: true } },
+  },
+]

packages/preact-query-devtools/root.tsdown.config.js

@@ -0,0 +1,37 @@
+// @ts-check
+
+/**
+ * @param {Object} opts - Options for building configurations.
+ * @param {string[]} opts.entry - The entry array.
+ * @returns {import('tsdown').UserConfig}
+ */
+export function modernConfig(opts) {
+  return {
+    entry: opts.entry,
+    format: ['cjs', 'esm'],
+    target: ['chrome91', 'firefox90', 'edge91', 'safari15', 'ios15', 'opera77'],
+    outDir: 'build/modern',
+    dts: true,
+    fixedExtension: false,
+    sourcemap: true,
+    clean: true,
+  }
+}
+
+/**
+ * @param {Object} opts - Options for building configurations.
+ * @param {string[]} opts.entry - The entry array.
+ * @returns {import('tsdown').UserConfig}
+ */
+export function legacyConfig(opts) {
+  return {
+    entry: opts.entry,
+    format: ['cjs', 'esm'],
+    target: ['es2020', 'node16'],
+    outDir: 'build/legacy',
+    dts: true,
+    fixedExtension: false,
+    sourcemap: true,
+    clean: true,
+  }
+}

packages/preact-query-devtools/src/PreactQueryDevtools.tsx

@@ -0,0 +1,129 @@
+import { useRef, useState, useEffect } from 'preact/hooks'
+import { onlineManager, useQueryClient } from '@tanstack/preact-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+  Theme,
+} from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/preact-query'
+import type { VNode } from 'preact'
+
+export interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * The position of the TanStack logo to open and close the devtools panel.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
+   * Defaults to 'bottom-right'.
+   */
+  buttonPosition?: DevtoolsButtonPosition
+  /**
+   * The position of the Preact Query devtools panel.
+   * 'top' | 'bottom' | 'left' | 'right'
+   * Defaults to 'bottom'.
+   */
+  position?: DevtoolsPosition
+  /**
+   * Use this to provide a custom QueryClient. Otherwise, the one from the
+   * nearest QueryClientProvider will be used.
+   */
+  client?: QueryClient
+  /**
+   * Use this to provide custom error type handlers for the devtools panel.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document
+   * head. This is useful if you are using a Content Security Policy (CSP)
+   * nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this to render the devtools inside a Shadow DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Use this to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Use this to set the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export function PreactQueryDevtools(props: DevtoolsOptions): VNode | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
+  const [devtools] = useState(
+    () =>
+      new TanstackQueryDevtools({
+        client: queryClient,
+        queryFlavor: 'Preact Query',
+        version: '5',
+        onlineManager,
+        buttonPosition,
+        position,
+        initialIsOpen,
+        errorTypes,
+        styleNonce,
+        shadowDOMTarget,
+        hideDisabledQueries,
+        theme,
+      }),
+  )
+
+  useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  useEffect(() => {
+    if (buttonPosition) {
+      devtools.setButtonPosition(buttonPosition)
+    }
+  }, [buttonPosition, devtools])
+
+  useEffect(() => {
+    if (position) {
+      devtools.setPosition(position)
+    }
+  }, [position, devtools])
+
+  useEffect(() => {
+    devtools.setInitialIsOpen(initialIsOpen || false)
+  }, [initialIsOpen, devtools])
+
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return <div dir="ltr" className="tsqd-parent-container" ref={ref} />
+}

packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx

@@ -0,0 +1,110 @@
+import { useRef, useState, useEffect } from 'preact/hooks'
+import { onlineManager, useQueryClient } from '@tanstack/preact-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/preact-query'
+import type { CSSProperties, VNode } from 'preact'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Use this to provide a custom QueryClient. Otherwise, the one from the
+   * nearest QueryClientProvider will be used.
+   */
+  client?: QueryClient
+  /**
+   * Custom error types to be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document
+   * head. This is useful if you are using a Content Security Policy (CSP)
+   * nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this to render the devtools inside a Shadow DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Custom styles for the devtools panel container.
+   */
+  style?: CSSProperties
+  /**
+   * Callback function when the devtools panel is closed.
+   */
+  onClose?: () => unknown
+  /**
+   * Use this to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Use this to set the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export function PreactQueryDevtoolsPanel(
+  props: DevtoolsPanelOptions,
+): VNode | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
+  const [devtools] = useState(
+    () =>
+      new TanstackQueryDevtoolsPanel({
+        client: queryClient,
+        queryFlavor: 'Preact Query',
+        version: '5',
+        onlineManager,
+        buttonPosition: 'bottom-left',
+        position: 'bottom',
+        initialIsOpen: true,
+        errorTypes,
+        styleNonce,
+        shadowDOMTarget,
+        onClose: props.onClose,
+        hideDisabledQueries,
+        theme,
+      }),
+  )
+
+  useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  }, [props.onClose, devtools])
+
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      className="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}

packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx

@@ -0,0 +1,236 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/preact'
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type { PreactQueryDevtools as PreactQueryDevtoolsComponent } from '../PreactQueryDevtools'
+
+const mountMock = vi.fn()
+const unmountMock = vi.fn()
+const setClientMock = vi.fn()
+const setButtonPositionMock = vi.fn()
+const setPositionMock = vi.fn()
+const setInitialIsOpenMock = vi.fn()
+const setErrorTypesMock = vi.fn()
+const setThemeMock = vi.fn()
+
+vi.mock('@tanstack/query-devtools', () => ({
+  TanstackQueryDevtools: vi.fn(function (this: TanstackQueryDevtools) {
+    this.mount = mountMock
+    this.unmount = unmountMock
+    this.setClient = setClientMock
+    this.setButtonPosition = setButtonPositionMock
+    this.setPosition = setPositionMock
+    this.setInitialIsOpen = setInitialIsOpenMock
+    this.setErrorTypes = setErrorTypesMock
+    this.setTheme = setThemeMock
+  }),
+}))
+
+describe('PreactQueryDevtools', () => {
+  let PreactQueryDevtools: typeof PreactQueryDevtoolsComponent
+  let queryClient: QueryClient
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    ;({ PreactQueryDevtools } = await import('../PreactQueryDevtools'))
+    queryClient = new QueryClient()
+  })
+
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(<PreactQueryDevtools />)).toThrow(
+      'No QueryClient set, use QueryClientProvider to set one',
+    )
+  })
+
+  it('should not throw an error if query client is provided via context', () => {
+    expect(() =>
+      render(
+        <QueryClientProvider client={queryClient}>
+          <PreactQueryDevtools />
+        </QueryClientProvider>,
+      ),
+    ).not.toThrow()
+    expect(mountMock).toHaveBeenCalled()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    expect(() =>
+      render(<PreactQueryDevtools client={queryClient} />),
+    ).not.toThrow()
+    expect(mountMock).toHaveBeenCalled()
+  })
+
+  it('should forward "buttonPosition" to the devtools instance', () => {
+    render(
+      <PreactQueryDevtools client={queryClient} buttonPosition="top-left" />,
+    )
+
+    expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward "position" to the devtools instance', () => {
+    render(<PreactQueryDevtools client={queryClient} position="left" />)
+
+    expect(setPositionMock).toHaveBeenCalledWith('left')
+  })
+
+  it('should forward "initialIsOpen" to the devtools instance', () => {
+    render(<PreactQueryDevtools client={queryClient} initialIsOpen={true} />)
+
+    expect(setInitialIsOpenMock).toHaveBeenCalledWith(true)
+  })
+
+  it('should default "initialIsOpen" to "false" when the prop is omitted', () => {
+    render(<PreactQueryDevtools client={queryClient} />)
+
+    expect(setInitialIsOpenMock).toHaveBeenCalledWith(false)
+  })
+
+  it('should forward "errorTypes" to the devtools instance', () => {
+    const errorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+
+    render(<PreactQueryDevtools client={queryClient} errorTypes={errorTypes} />)
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
+  })
+
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
+    render(<PreactQueryDevtools client={queryClient} />)
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', () => {
+    render(<PreactQueryDevtools client={queryClient} theme="dark" />)
+
+    expect(setThemeMock).toHaveBeenCalledWith('dark')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
+    render(<PreactQueryDevtools client={queryClient} />)
+
+    expect(setClientMock).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should forward "styleNonce" to the devtools constructor', () => {
+    render(<PreactQueryDevtools client={queryClient} styleNonce="abc" />)
+
+    expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+      expect.objectContaining({ styleNonce: 'abc' }),
+    )
+  })
+
+  it('should forward "shadowDOMTarget" to the devtools constructor', () => {
+    const shadowDOMTarget = document
+      .createElement('div')
+      .attachShadow({ mode: 'open' })
+
+    render(
+      <PreactQueryDevtools
+        client={queryClient}
+        shadowDOMTarget={shadowDOMTarget}
+      />,
+    )
+
+    expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+      expect.objectContaining({ shadowDOMTarget }),
+    )
+  })
+
+  it('should forward "hideDisabledQueries" to the devtools constructor', () => {
+    render(
+      <PreactQueryDevtools client={queryClient} hideDisabledQueries={true} />,
+    )
+
+    expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+      expect.objectContaining({ hideDisabledQueries: true }),
+    )
+  })
+
+  it('should forward a "buttonPosition" change to the devtools instance after mount', () => {
+    const { rerender } = render(
+      <PreactQueryDevtools
+        client={queryClient}
+        buttonPosition="bottom-right"
+      />,
+    )
+    setButtonPositionMock.mockClear()
+
+    rerender(
+      <PreactQueryDevtools client={queryClient} buttonPosition="top-left" />,
+    )
+
+    expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward a "position" change to the devtools instance after mount', () => {
+    const { rerender } = render(
+      <PreactQueryDevtools client={queryClient} position="bottom" />,
+    )
+    setPositionMock.mockClear()
+
+    rerender(<PreactQueryDevtools client={queryClient} position="top" />)
+
+    expect(setPositionMock).toHaveBeenCalledWith('top')
+  })
+
+  it('should forward an "initialIsOpen" change to the devtools instance after mount', () => {
+    const { rerender } = render(
+      <PreactQueryDevtools client={queryClient} initialIsOpen={false} />,
+    )
+    setInitialIsOpenMock.mockClear()
+
+    rerender(<PreactQueryDevtools client={queryClient} initialIsOpen={true} />)
+
+    expect(setInitialIsOpenMock).toHaveBeenCalledWith(true)
+  })
+
+  it('should forward an "errorTypes" change to the devtools instance after mount', () => {
+    const { rerender } = render(
+      <PreactQueryDevtools client={queryClient} errorTypes={[]} />,
+    )
+    setErrorTypesMock.mockClear()
+
+    const errorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+    rerender(
+      <PreactQueryDevtools client={queryClient} errorTypes={errorTypes} />,
+    )
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
+  })
+
+  it('should forward a "theme" change to the devtools instance after mount', () => {
+    const { rerender } = render(
+      <PreactQueryDevtools client={queryClient} theme="light" />,
+    )
+    setThemeMock.mockClear()
+
+    rerender(<PreactQueryDevtools client={queryClient} theme="dark" />)
+
+    expect(setThemeMock).toHaveBeenCalledWith('dark')
+  })
+
+  it('should call "unmount" on the devtools instance when the component unmounts', () => {
+    const { unmount } = render(<PreactQueryDevtools client={queryClient} />)
+    unmount()
+
+    expect(unmountMock).toHaveBeenCalled()
+  })
+
+  it('should return null in non-development environments', async () => {
+    vi.stubEnv('NODE_ENV', 'production')
+    vi.resetModules()
+
+    try {
+      const { PreactQueryDevtools: ProductionDevtools } = await import('..')
+      expect(ProductionDevtools({})).toBeNull()
+    } finally {
+      vi.unstubAllEnvs()
+      vi.resetModules()
+    }
+  })
+})

packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx

@@ -0,0 +1,196 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/preact'
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { PreactQueryDevtoolsPanel as PreactQueryDevtoolsPanelComponent } from '../PreactQueryDevtoolsPanel'
+
+const mountMock = vi.fn()
+const unmountMock = vi.fn()
+const setClientMock = vi.fn()
+const setOnCloseMock = vi.fn()
+const setErrorTypesMock = vi.fn()
+const setThemeMock = vi.fn()
+
+vi.mock('@tanstack/query-devtools', () => ({
+  TanstackQueryDevtoolsPanel: vi.fn(function (
+    this: TanstackQueryDevtoolsPanel,
+  ) {
+    this.mount = mountMock
+    this.unmount = unmountMock
+    this.setClient = setClientMock
+    this.setOnClose = setOnCloseMock
+    this.setErrorTypes = setErrorTypesMock
+    this.setTheme = setThemeMock
+  }),
+}))
+
+describe('PreactQueryDevtoolsPanel', () => {
+  let PreactQueryDevtoolsPanel: typeof PreactQueryDevtoolsPanelComponent
+  let queryClient: QueryClient
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    ;({ PreactQueryDevtoolsPanel } =
+      await import('../PreactQueryDevtoolsPanel'))
+    queryClient = new QueryClient()
+  })
+
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(<PreactQueryDevtoolsPanel />)).toThrow(
+      'No QueryClient set, use QueryClientProvider to set one',
+    )
+  })
+
+  it('should not throw an error if query client is provided via context', () => {
+    expect(() =>
+      render(
+        <QueryClientProvider client={queryClient}>
+          <PreactQueryDevtoolsPanel />
+        </QueryClientProvider>,
+      ),
+    ).not.toThrow()
+    expect(mountMock).toHaveBeenCalled()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    expect(() =>
+      render(<PreactQueryDevtoolsPanel client={queryClient} />),
+    ).not.toThrow()
+    expect(mountMock).toHaveBeenCalled()
+  })
+
+  it('should forward "onClose" to the devtools instance', () => {
+    const onClose = vi.fn()
+
+    render(<PreactQueryDevtoolsPanel client={queryClient} onClose={onClose} />)
+
+    expect(setOnCloseMock).toHaveBeenCalledWith(onClose)
+  })
+
+  it('should default "onClose" to a no-op function when the prop is omitted', () => {
+    render(<PreactQueryDevtoolsPanel client={queryClient} />)
+
+    const forwarded = setOnCloseMock.mock.calls[0]?.[0]
+    expect(forwarded).toBeInstanceOf(Function)
+    expect(forwarded()).toBeUndefined()
+  })
+
+  it('should forward "errorTypes" to the devtools instance', () => {
+    const errorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+
+    render(
+      <PreactQueryDevtoolsPanel client={queryClient} errorTypes={errorTypes} />,
+    )
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
+  })
+
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
+    render(<PreactQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', () => {
+    render(<PreactQueryDevtoolsPanel client={queryClient} theme="dark" />)
+
+    expect(setThemeMock).toHaveBeenCalledWith('dark')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
+    render(<PreactQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setClientMock).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should forward "styleNonce" to the devtools constructor', () => {
+    render(<PreactQueryDevtoolsPanel client={queryClient} styleNonce="abc" />)
+
+    expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+      expect.objectContaining({ styleNonce: 'abc' }),
+    )
+  })
+
+  it('should forward "shadowDOMTarget" to the devtools constructor', () => {
+    const shadowDOMTarget = document
+      .createElement('div')
+      .attachShadow({ mode: 'open' })
+
+    render(
+      <PreactQueryDevtoolsPanel
+        client={queryClient}
+        shadowDOMTarget={shadowDOMTarget}
+      />,
+    )
+
+    expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+      expect.objectContaining({ shadowDOMTarget }),
+    )
+  })
+
+  it('should forward "hideDisabledQueries" to the devtools constructor', () => {
+    render(
+      <PreactQueryDevtoolsPanel
+        client={queryClient}
+        hideDisabledQueries={true}
+      />,
+    )
+
+    expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+      expect.objectContaining({ hideDisabledQueries: true }),
+    )
+  })
+
+  it('should preserve the default container height when "style" omits "height"', () => {
+    const { container } = render(
+      <PreactQueryDevtoolsPanel
+        client={queryClient}
+        style={{ width: '300px' }}
+      />,
+    )
+
+    expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
+      height: '500px',
+      width: '300px',
+    })
+  })
+
+  it('should let "style" override the default container height on the rendered element', () => {
+    const { container } = render(
+      <PreactQueryDevtoolsPanel
+        client={queryClient}
+        style={{ width: '300px', height: '300px' }}
+      />,
+    )
+
+    expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
+      height: '300px',
+      width: '300px',
+    })
+  })
+
+  it('should call "unmount" on the devtools instance when the component unmounts', () => {
+    const { unmount } = render(
+      <PreactQueryDevtoolsPanel client={queryClient} />,
+    )
+    unmount()
+
+    expect(unmountMock).toHaveBeenCalled()
+  })
+
+  it('should return null in non-development environments', async () => {
+    vi.stubEnv('NODE_ENV', 'production')
+    vi.resetModules()
+
+    try {
+      const { PreactQueryDevtoolsPanel: ProductionDevtoolsPanel } =
+        await import('..')
+      expect(ProductionDevtoolsPanel({})).toBeNull()
+    } finally {
+      vi.unstubAllEnvs()
+      vi.resetModules()
+    }
+  })
+})

packages/preact-query-devtools/src/index.ts

@@ -0,0 +1,18 @@
+import * as Devtools from './PreactQueryDevtools'
+import * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
+
+export const PreactQueryDevtools: (typeof Devtools)['PreactQueryDevtools'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : Devtools.PreactQueryDevtools
+
+export const PreactQueryDevtoolsPanel: (typeof DevtoolsPanel)['PreactQueryDevtoolsPanel'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : DevtoolsPanel.PreactQueryDevtoolsPanel
+
+export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions

packages/preact-query-devtools/src/production.ts

@@ -0,0 +1,5 @@
+import * as Devtools from './PreactQueryDevtools'
+import * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
+
+export const PreactQueryDevtools = Devtools.PreactQueryDevtools
+export const PreactQueryDevtoolsPanel = DevtoolsPanel.PreactQueryDevtoolsPanel

packages/preact-query-devtools/test-setup.ts

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom/vitest'
+import { act, cleanup as cleanupRTL } from '@testing-library/preact'
+import { notifyManager } from '@tanstack/preact-query'
+import { afterEach } from 'vitest'
+
+// https://testing-library.com/docs/preact-testing-library/api#cleanup
+afterEach(() => {
+  cleanupRTL()
+})
+
+// Wrap notifications with act to make sure Preact knows about Query updates
+notifyManager.setNotifyFunction((fn) => {
+  act(fn)
+})

packages/preact-query-devtools/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist-ts",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": [
+    "src",
+    "test-setup.ts",
+    "*.config.ts",
+    "*.config.js",
+    "package.json"
+  ],
+  "references": [{ "path": "../query-devtools" }, { "path": "../preact-query" }]
+}

packages/preact-query-devtools/tsconfig.legacy.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "outDir": "./dist-ts/legacy"
+  },
+  "include": ["src"],
+  "exclude": ["src/__tests__"],
+  "references": [{ "path": "../query-devtools" }, { "path": "../preact-query" }]
+}

packages/preact-query-devtools/tsconfig.prod.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "incremental": false,
+    "composite": false,
+    "rootDir": "../../",
+    "customConditions": []
+  },
+  "include": ["src"],
+  "exclude": ["src/__tests__"]
+}

packages/preact-query-devtools/tsdown.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsdown'
+import { legacyConfig, modernConfig } from './root.tsdown.config.js'
+
+export default defineConfig([
+  modernConfig({ entry: ['src/*.ts', 'src/*.tsx'] }),
+  legacyConfig({ entry: ['src/*.ts', 'src/*.tsx'] }),
+])

packages/preact-query-devtools/vite.config.ts

@@ -0,0 +1,27 @@
+import preact from '@preact/preset-vite'
+import { defineConfig } from 'vitest/config'
+import packageJson from './package.json'
+import type { UserConfig as ViteUserConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [preact() as ViteUserConfig['plugins']],
+  resolve: { conditions: ['@tanstack/custom-condition'] },
+  environments: {
+    ssr: { resolve: { conditions: ['@tanstack/custom-condition'] } },
+  },
+  test: {
+    name: packageJson.name,
+    dir: './src',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['test-setup.ts'],
+    coverage: {
+      enabled: !!process.env.CI,
+      provider: 'istanbul',
+      include: ['src/**/*'],
+      exclude: ['src/__tests__/**'],
+    },
+    typecheck: { enabled: true },
+    restoreMocks: true,
+  },
+})