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

packages/solid-query-devtools/CHANGELOG.md

@@ -0,0 +1,386 @@
+# @tanstack/solid-query-devtools
+
+## 5.102.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.8
+  - @tanstack/solid-query@5.102.8
+
+## 5.102.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.7
+  - @tanstack/solid-query@5.102.7
+
+## 5.102.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.6
+  - @tanstack/solid-query@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/solid-query@5.102.5
+
+## 5.102.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.4
+  - @tanstack/solid-query@5.102.4
+
+## 5.102.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.3
+  - @tanstack/solid-query@5.102.3
+
+## 5.102.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.2
+  - @tanstack/solid-query@5.102.2
+
+## 5.102.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.102.1
+  - @tanstack/solid-query@5.102.1
+
+## 5.102.0
+
+### Patch Changes
+
+- Updated dependencies [[`6e3d521`](https://github.com/TanStack/query/commit/6e3d521fe54f78624e53c1c6f9cadd678504bee8), [`294d4e6`](https://github.com/TanStack/query/commit/294d4e62c4f7d674574a4903eef2a1bc3dd1413b), [`2215bb0`](https://github.com/TanStack/query/commit/2215bb031139cdc8a84751b37a485c38ca9d2b6e), [`1ef4208`](https://github.com/TanStack/query/commit/1ef42087c9a266c2137d2ef645cbcc662f60ac93), [`47d49d3`](https://github.com/TanStack/query/commit/47d49d31aa16684811257da071679d08d8726ddc)]:
+  - @tanstack/solid-query@5.102.0
+  - @tanstack/query-devtools@5.102.0
+
+## 5.101.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.101.4
+  - @tanstack/solid-query@5.101.4
+
+## 5.101.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.101.3
+  - @tanstack/solid-query@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/solid-query@5.101.2
+
+## 5.101.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.101.1
+  - @tanstack/solid-query@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/solid-query@5.101.0
+
+## 5.100.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.14
+  - @tanstack/solid-query@5.100.14
+
+## 5.100.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.13
+  - @tanstack/solid-query@5.100.13
+
+## 5.100.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.12
+  - @tanstack/solid-query@5.100.12
+
+## 5.100.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.11
+  - @tanstack/solid-query@5.100.11
+
+## 5.100.10
+
+### Patch Changes
+
+- fix(query-devtools): remove experimentalDts to prevent solid-js type leak ([#10694](https://github.com/TanStack/query/pull/10694))
+
+- Updated dependencies [[`4d130b9`](https://github.com/TanStack/query/commit/4d130b992d2ac396d75f921bfc530dd3a9d50577)]:
+  - @tanstack/query-devtools@5.100.10
+  - @tanstack/solid-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/solid-query@5.100.9
+
+## 5.100.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.8
+  - @tanstack/solid-query@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/query-devtools@5.100.7
+  - @tanstack/solid-query@5.100.7
+
+## 5.100.6
+
+### Patch Changes
+
+- Updated dependencies [[`3af3a5d`](https://github.com/TanStack/query/commit/3af3a5ded3fbaf5a06403d7561b83124dbbcb243)]:
+  - @tanstack/solid-query@5.100.6
+  - @tanstack/query-devtools@5.100.6
+
+## 5.100.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.5
+  - @tanstack/solid-query@5.100.5
+
+## 5.100.4
+
+### Patch Changes
+
+- fix(devtools): change onClose callback type from () => unknown to () => void ([#10118](https://github.com/TanStack/query/pull/10118))
+
+- Updated dependencies [[`3d1a62e`](https://github.com/TanStack/query/commit/3d1a62e63bd864359e369bb21356fa80d043f2ba)]:
+  - @tanstack/query-devtools@5.100.4
+  - @tanstack/solid-query@5.100.4
+
+## 5.100.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.3
+  - @tanstack/solid-query@5.100.3
+
+## 5.100.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.2
+  - @tanstack/solid-query@5.100.2
+
+## 5.100.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.1
+  - @tanstack/solid-query@5.100.1
+
+## 5.100.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.100.0
+  - @tanstack/solid-query@5.100.0
+
+## 5.99.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.99.2
+  - @tanstack/solid-query@5.99.2
+
+## 5.99.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.99.1
+  - @tanstack/solid-query@5.99.1
+
+## 5.99.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.99.0
+  - @tanstack/solid-query@5.99.0
+
+## 5.98.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.98.0
+  - @tanstack/solid-query@5.98.0
+
+## 5.97.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.97.0
+  - @tanstack/solid-query@5.97.0
+
+## 5.96.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.96.2
+  - @tanstack/solid-query@5.96.2
+
+## 5.96.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.96.1
+  - @tanstack/solid-query@5.96.1
+
+## 5.96.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.96.0
+  - @tanstack/solid-query@5.96.0
+
+## 5.95.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.95.2
+  - @tanstack/solid-query@5.95.2
+
+## 5.95.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.95.1
+  - @tanstack/solid-query@5.95.1
+
+## 5.95.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @tanstack/query-devtools@5.95.0
+  - @tanstack/solid-query@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/query-devtools@5.94.5
+  - @tanstack/solid-query@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/solid-query@5.94.4
+
+## 5.91.3
+
+### Patch Changes
+
+- Updated dependencies [[`83366c4`](https://github.com/TanStack/query/commit/83366c46a6825b5c591399c705d8128743c527dd)]:
+  - @tanstack/query-devtools@5.93.0
+
+## 5.91.2
+
+### Patch Changes
+
+- Updated dependencies [[`f9fc56a`](https://github.com/TanStack/query/commit/f9fc56a9b8724bcfae46f8f6cb229123478eb4db), [`0b29b6f`](https://github.com/TanStack/query/commit/0b29b6f877d4b3a6d05b1c85fb9cb1e6ea736291)]:
+  - @tanstack/query-devtools@5.92.0
+  - @tanstack/solid-query@5.90.17
+
+## 5.91.1
+
+### Patch Changes
+
+- Updated dependencies [[`b261b6f`](https://github.com/TanStack/query/commit/b261b6f29eee2a9bdbe1bc20035fe9b83b15376b)]:
+  - @tanstack/query-devtools@5.91.1
+
+## 5.91.0
+
+### Minor Changes
+
+- feat(devtools): allow passing a theme via prop ([#9887](https://github.com/TanStack/query/pull/9887))
+
+### Patch Changes
+
+- Updated dependencies [[`0e9d5b5`](https://github.com/TanStack/query/commit/0e9d5b565276f0de2a1a14ffbb079b5988581c27)]:
+  - @tanstack/query-devtools@5.91.0
+
+## 5.90.4
+
+### Patch Changes
+
+- Fixed client prop not working on SolidQueryDevtools and SolidQueryDevtoolsPanel ([#9763](https://github.com/TanStack/query/pull/9763))

packages/solid-query-devtools/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from './root.eslint.config.js'
+
+export default [...rootConfig]

packages/solid-query-devtools/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@tanstack/solid-query-devtools",
+  "version": "5.102.8",
+  "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/query.git",
+    "directory": "packages/solid-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.json --outDir .cache/test-types/ts56 --tsBuildInfoFile .cache/test-types/ts56.tsbuildinfo",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --project tsconfig.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --project tsconfig.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --project tsconfig.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.json --outDir .cache/test-types/ts70 --tsBuildInfoFile .cache/test-types/ts70.tsbuildinfo",
+    "test:build": "publint --strict && attw --pack",
+    "test:lib": "vitest --retry=3",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "build": "tsdown --tsconfig tsconfig.prod.json",
+    "build:dev": "tsdown --watch"
+  },
+  "type": "module",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "browser": {},
+  "exports": {
+    "@tanstack/custom-condition": "./src/index.tsx",
+    "solid": {
+      "development": "./build/dev.jsx",
+      "import": "./build/index.jsx"
+    },
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": "./build/dev.cjs"
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": "./build/index.cjs"
+  },
+  "files": [
+    "build",
+    "src",
+    "!src/__tests__"
+  ],
+  "dependencies": {
+    "@tanstack/query-devtools": "workspace:*"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
+    "@tanstack/solid-query": "workspace:*",
+    "npm-run-all2": "^5.0.0",
+    "solid-js": "^1.9.7",
+    "unplugin-solid": "^2.0.0",
+    "vite-plugin-solid": "^2.11.6"
+  },
+  "peerDependencies": {
+    "@tanstack/solid-query": "workspace:^",
+    "solid-js": "^1.6.0"
+  }
+}

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

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

packages/solid-query-devtools/src/__tests__/devtools.test.tsx

@@ -0,0 +1,250 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createSignal } from 'solid-js'
+import { render } from '@solidjs/testing-library'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import SolidQueryDevtools from '../devtools'
+import type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+  Theme,
+} from '@tanstack/query-devtools'
+
+describe('SolidQueryDevtools', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(() => <SolidQueryDevtools />)).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}>
+          <SolidQueryDevtools />
+        </QueryClientProvider>
+      )),
+    ).not.toThrow()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    expect(() =>
+      render(() => <SolidQueryDevtools client={queryClient} />),
+    ).not.toThrow()
+  })
+
+  it('should forward "buttonPosition" to the devtools instance', () => {
+    const setButtonPosition = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setButtonPosition',
+    )
+    render(() => (
+      <SolidQueryDevtools client={queryClient} buttonPosition="top-left" />
+    ))
+
+    expect(setButtonPosition).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward "position" to the devtools instance', () => {
+    const setPosition = vi.spyOn(TanstackQueryDevtools.prototype, 'setPosition')
+    render(() => <SolidQueryDevtools client={queryClient} position="left" />)
+
+    expect(setPosition).toHaveBeenCalledWith('left')
+  })
+
+  it('should forward "initialIsOpen" to the devtools instance', () => {
+    const setInitialIsOpen = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setInitialIsOpen',
+    )
+    render(() => (
+      <SolidQueryDevtools client={queryClient} initialIsOpen={true} />
+    ))
+
+    expect(setInitialIsOpen).toHaveBeenCalledWith(true)
+  })
+
+  it('should default "initialIsOpen" to "false" when the prop is omitted', () => {
+    const setInitialIsOpen = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setInitialIsOpen',
+    )
+    render(() => <SolidQueryDevtools client={queryClient} />)
+
+    expect(setInitialIsOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('should forward "errorTypes" to the devtools instance', () => {
+    const setErrorTypes = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setErrorTypes',
+    )
+    const errorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+
+    render(() => (
+      <SolidQueryDevtools client={queryClient} errorTypes={errorTypes} />
+    ))
+
+    expect(setErrorTypes).toHaveBeenCalledWith(errorTypes)
+  })
+
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
+    const setErrorTypes = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setErrorTypes',
+    )
+    render(() => <SolidQueryDevtools client={queryClient} />)
+
+    expect(setErrorTypes).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', () => {
+    const setTheme = vi.spyOn(TanstackQueryDevtools.prototype, 'setTheme')
+    render(() => <SolidQueryDevtools client={queryClient} theme="dark" />)
+
+    expect(setTheme).toHaveBeenCalledWith('dark')
+  })
+
+  it('should default "theme" to "system" when the prop is omitted', () => {
+    const setTheme = vi.spyOn(TanstackQueryDevtools.prototype, 'setTheme')
+    render(() => <SolidQueryDevtools client={queryClient} />)
+
+    expect(setTheme).toHaveBeenCalledWith('system')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
+    const setClient = vi.spyOn(TanstackQueryDevtools.prototype, 'setClient')
+    render(() => <SolidQueryDevtools client={queryClient} />)
+
+    expect(setClient).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should forward a "buttonPosition" change to the devtools instance after mount', () => {
+    const setButtonPosition = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setButtonPosition',
+    )
+    const [buttonPosition, setButtonPositionSignal] =
+      createSignal<DevtoolsButtonPosition>('bottom-right')
+
+    render(() => (
+      <SolidQueryDevtools
+        client={queryClient}
+        buttonPosition={buttonPosition()}
+      />
+    ))
+    setButtonPosition.mockClear()
+
+    setButtonPositionSignal('top-left')
+
+    expect(setButtonPosition).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward a "position" change to the devtools instance after mount', () => {
+    const setPosition = vi.spyOn(TanstackQueryDevtools.prototype, 'setPosition')
+    const [position, setPositionSignal] =
+      createSignal<DevtoolsPosition>('bottom')
+
+    render(() => (
+      <SolidQueryDevtools client={queryClient} position={position()} />
+    ))
+    setPosition.mockClear()
+
+    setPositionSignal('top')
+
+    expect(setPosition).toHaveBeenCalledWith('top')
+  })
+
+  it('should forward an "initialIsOpen" change to the devtools instance after mount', () => {
+    const setInitialIsOpen = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setInitialIsOpen',
+    )
+    const [initialIsOpen, setInitialIsOpenSignal] = createSignal(false)
+
+    render(() => (
+      <SolidQueryDevtools
+        client={queryClient}
+        initialIsOpen={initialIsOpen()}
+      />
+    ))
+    setInitialIsOpen.mockClear()
+
+    setInitialIsOpenSignal(true)
+
+    expect(setInitialIsOpen).toHaveBeenCalledWith(true)
+  })
+
+  it('should forward an "errorTypes" change to the devtools instance after mount', () => {
+    const setErrorTypes = vi.spyOn(
+      TanstackQueryDevtools.prototype,
+      'setErrorTypes',
+    )
+    const [errorTypes, setErrorTypesSignal] = createSignal<
+      Array<DevtoolsErrorType>
+    >([])
+
+    render(() => (
+      <SolidQueryDevtools client={queryClient} errorTypes={errorTypes()} />
+    ))
+    setErrorTypes.mockClear()
+
+    const nextErrorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+    setErrorTypesSignal(nextErrorTypes)
+
+    expect(setErrorTypes).toHaveBeenCalledWith(nextErrorTypes)
+  })
+
+  it('should forward a "theme" change to the devtools instance after mount', () => {
+    const setTheme = vi.spyOn(TanstackQueryDevtools.prototype, 'setTheme')
+    const [theme, setThemeSignal] = createSignal<Theme>('light')
+
+    render(() => <SolidQueryDevtools client={queryClient} theme={theme()} />)
+    setTheme.mockClear()
+
+    setThemeSignal('dark')
+
+    expect(setTheme).toHaveBeenCalledWith('dark')
+  })
+
+  it('should call "unmount" on the devtools instance when the component unmounts', () => {
+    const unmount = vi.spyOn(TanstackQueryDevtools.prototype, 'unmount')
+    const { unmount: unmountComponent } = render(() => (
+      <SolidQueryDevtools client={queryClient} />
+    ))
+    unmountComponent()
+
+    expect(unmount).toHaveBeenCalled()
+  })
+
+  it('should return null in non-development environments', async () => {
+    vi.doMock('solid-js/web', async (importOriginal) => {
+      const actual = await importOriginal()
+      return Object.assign({}, actual, { isDev: false })
+    })
+    vi.resetModules()
+
+    try {
+      const { SolidQueryDevtools: ProductionDevtools } = await import('..')
+      expect(ProductionDevtools({})).toBeNull()
+    } finally {
+      vi.doUnmock('solid-js/web')
+      vi.resetModules()
+    }
+  })
+})

packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx

@@ -0,0 +1,170 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import SolidQueryDevtoolsPanel from '../devtoolsPanel'
+
+describe('SolidQueryDevtoolsPanel', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should throw an error if no query client has been set', () => {
+    expect(() => render(() => <SolidQueryDevtoolsPanel />)).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}>
+          <SolidQueryDevtoolsPanel />
+        </QueryClientProvider>
+      )),
+    ).not.toThrow()
+  })
+
+  it('should not throw an error if query client is provided via props', () => {
+    expect(() =>
+      render(() => <SolidQueryDevtoolsPanel client={queryClient} />),
+    ).not.toThrow()
+  })
+
+  it('should forward "onClose" to the devtools instance', () => {
+    const setOnClose = vi.spyOn(
+      TanstackQueryDevtoolsPanel.prototype,
+      'setOnClose',
+    )
+    const onClose = vi.fn()
+
+    render(() => (
+      <SolidQueryDevtoolsPanel client={queryClient} onClose={onClose} />
+    ))
+
+    expect(setOnClose).toHaveBeenCalledWith(onClose)
+  })
+
+  it('should default "onClose" to a no-op function when the prop is omitted', () => {
+    const setOnClose = vi.spyOn(
+      TanstackQueryDevtoolsPanel.prototype,
+      'setOnClose',
+    )
+    render(() => <SolidQueryDevtoolsPanel client={queryClient} />)
+
+    const forwarded = setOnClose.mock.calls[0]![0]
+    expect(forwarded).toBeInstanceOf(Function)
+    expect(forwarded()).toBeUndefined()
+  })
+
+  it('should forward "errorTypes" to the devtools instance', () => {
+    const setErrorTypes = vi.spyOn(
+      TanstackQueryDevtoolsPanel.prototype,
+      'setErrorTypes',
+    )
+    const errorTypes = [
+      { name: 'Network', initializer: () => new Error('Network') },
+    ]
+
+    render(() => (
+      <SolidQueryDevtoolsPanel client={queryClient} errorTypes={errorTypes} />
+    ))
+
+    expect(setErrorTypes).toHaveBeenCalledWith(errorTypes)
+  })
+
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
+    const setErrorTypes = vi.spyOn(
+      TanstackQueryDevtoolsPanel.prototype,
+      'setErrorTypes',
+    )
+    render(() => <SolidQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setErrorTypes).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', () => {
+    const setTheme = vi.spyOn(TanstackQueryDevtoolsPanel.prototype, 'setTheme')
+    render(() => <SolidQueryDevtoolsPanel client={queryClient} theme="dark" />)
+
+    expect(setTheme).toHaveBeenCalledWith('dark')
+  })
+
+  it('should default "theme" to "system" when the prop is omitted', () => {
+    const setTheme = vi.spyOn(TanstackQueryDevtoolsPanel.prototype, 'setTheme')
+    render(() => <SolidQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setTheme).toHaveBeenCalledWith('system')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
+    const setClient = vi.spyOn(
+      TanstackQueryDevtoolsPanel.prototype,
+      'setClient',
+    )
+    render(() => <SolidQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setClient).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should preserve the default container height when "style" omits "height"', () => {
+    const { container } = render(() => (
+      <SolidQueryDevtoolsPanel
+        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(() => (
+      <SolidQueryDevtoolsPanel
+        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 = vi.spyOn(TanstackQueryDevtoolsPanel.prototype, 'unmount')
+    const { unmount: unmountComponent } = render(() => (
+      <SolidQueryDevtoolsPanel client={queryClient} />
+    ))
+    unmountComponent()
+
+    expect(unmount).toHaveBeenCalled()
+  })
+
+  it('should return null in non-development environments', async () => {
+    vi.doMock('solid-js/web', async (importOriginal) => {
+      const actual = await importOriginal()
+      return Object.assign({}, actual, { isDev: false })
+    })
+    vi.resetModules()
+
+    try {
+      const { SolidQueryDevtoolsPanel: ProductionDevtoolsPanel } =
+        await import('..')
+      expect(ProductionDevtoolsPanel({})).toBeNull()
+    } finally {
+      vi.doUnmock('solid-js/web')
+      vi.resetModules()
+    }
+  })
+})

packages/solid-query-devtools/src/clientOnly.tsx

@@ -0,0 +1,43 @@
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack,
+} from 'solid-js'
+import { isServer } from 'solid-js/web'
+import type { Component, ComponentProps, JSX } from 'solid-js'
+
+/*
+  This function has been taken from solid-start's codebase
+  This allows the devtools to be loaded only on the client and bypasses any server side rendering
+  https://github.com/solidjs/solid-start/blob/2967fc2db3f0df826f061020231dbdafdfa0746b/packages/start/islands/clientOnly.tsx
+*/
+export default function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{
+    default: T
+  }>,
+) {
+  if (isServer)
+    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>
+      props.fallback
+
+  const [comp, setComp] = createSignal<T>()
+  fn().then((m) => setComp(() => m.default))
+  return (props: ComponentProps<T>) => {
+    let Comp: T | undefined
+    let m: boolean
+    const [, rest] = splitProps(props, ['fallback'])
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
+    const [mounted, setMounted] = createSignal(!sharedConfig.context)
+    onMount(() => setMounted(true))
+    return createMemo(
+      () => (
+        (Comp = comp()),
+        (m = mounted()),
+        untrack(() => (Comp && m ? Comp(rest) : props.fallback))
+      ),
+    )
+  }
+}

packages/solid-query-devtools/src/devtools.tsx

@@ -0,0 +1,111 @@
+import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { onlineManager, useQueryClient } from '@tanstack/solid-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+  Theme,
+} from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+
+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 Solid Query devtools panel.
+   * 'top' | 'bottom' | 'left' | 'right'
+   * Defaults to 'bottom'.
+   */
+  position?: DevtoolsPosition
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can 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 so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export default function SolidQueryDevtools(props: DevtoolsOptions) {
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
+  let ref!: HTMLDivElement
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: 'Solid Query',
+    version: '5',
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+    styleNonce: props.styleNonce,
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme,
+  })
+
+  createEffect(() => {
+    devtools.setClient(client())
+  })
+
+  createEffect(() => {
+    const buttonPos = props.buttonPosition
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos)
+    }
+  })
+
+  createEffect(() => {
+    const pos = props.position
+    if (pos) {
+      devtools.setPosition(pos)
+    }
+  })
+
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false)
+  })
+
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || [])
+  })
+
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
+  onMount(() => {
+    devtools.mount(ref)
+    onCleanup(() => devtools.unmount())
+  })
+
+  return <div class="tsqd-parent-container" ref={ref}></div>
+}

packages/solid-query-devtools/src/devtoolsPanel.tsx

@@ -0,0 +1,96 @@
+import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { onlineManager, useQueryClient } from '@tanstack/solid-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+import type { JSX } from 'solid-js'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can 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 so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+
+  /**
+   * Custom styles for the devtools panel
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: JSX.CSSProperties
+
+  /**
+   * Callback function that is called when the devtools panel is closed
+   */
+  onClose?: () => void
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
+  const queryClient = useQueryClient(props.client)
+  const client = createMemo(() => queryClient)
+  let ref!: HTMLDivElement
+  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
+  const devtools = new TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: 'Solid Query',
+    version: '5',
+    onlineManager,
+    buttonPosition: 'bottom-left',
+    position: 'bottom',
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+    theme: props.theme,
+  })
+  createEffect(() => {
+    devtools.setClient(client())
+  })
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  })
+
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || [])
+  })
+
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
+  onMount(() => {
+    devtools.mount(ref)
+    onCleanup(() => devtools.unmount())
+  })
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      class="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}

packages/solid-query-devtools/src/index.tsx

@@ -0,0 +1,18 @@
+import { isDev } from 'solid-js/web'
+import clientOnly from './clientOnly'
+import type SolidQueryDevtoolsComp from './devtools'
+import type SolidQueryDevtoolsCompPanel from './devtoolsPanel'
+
+export const SolidQueryDevtools: typeof SolidQueryDevtoolsComp = isDev
+  ? clientOnly(() => import('./devtools'))
+  : function () {
+      return null
+    }
+
+export const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsCompPanel = isDev
+  ? clientOnly(() => import('./devtoolsPanel'))
+  : function () {
+      return null
+    }
+
+export type { DevtoolsPanelOptions } from './devtoolsPanel'

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

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@solidjs/testing-library'
+import { afterEach } from 'vitest'
+
+// https://github.com/solidjs/solid-testing-library
+afterEach(() => cleanup())

packages/solid-query-devtools/tsconfig.json

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

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

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

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

@@ -0,0 +1,58 @@
+import { defineConfig } from 'tsdown'
+import solid from 'unplugin-solid/rolldown'
+
+const baseConfig = {
+  target: 'esnext',
+  platform: 'browser' as const,
+  format: ['esm', 'cjs'] as ['esm', 'cjs'],
+  outDir: 'build',
+  fixedExtension: false,
+}
+
+const environment = (development: boolean) => ({
+  NODE_ENV: development ? 'development' : 'production',
+  PROD: !development,
+  DEV: development,
+  SSR: false,
+})
+
+const compiledConfig = (
+  entry: Record<string, string>,
+  development: boolean,
+  clean: boolean,
+) => ({
+  ...baseConfig,
+  entry,
+  clean,
+  dts: !development,
+  env: environment(development),
+  ...(development
+    ? {}
+    : {
+        minify: {
+          compress: {
+            dropConsole: true,
+            dropDebugger: true,
+          },
+        },
+      }),
+  plugins: [solid()],
+})
+
+const jsxConfig = (entry: Record<string, string>, development: boolean) => ({
+  ...baseConfig,
+  entry,
+  format: 'esm' as const,
+  clean: false,
+  dts: false,
+  env: environment(development),
+  outExtensions: () => ({ js: '.jsx' }),
+  plugins: [],
+})
+
+export default defineConfig([
+  compiledConfig({ index: 'src/index.tsx' }, false, true),
+  jsxConfig({ index: 'src/index.tsx' }, false),
+  compiledConfig({ dev: 'src/index.tsx' }, true, false),
+  jsxConfig({ dev: 'src/index.tsx' }, true),
+])

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

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vitest/config'
+import solid from 'vite-plugin-solid'
+
+import packageJson from './package.json'
+
+export default defineConfig({
+  plugins: [solid()],
+  // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660
+  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,
+  },
+})