feat(devtools): Add framework agnostic devtools draft

babel.config.js

@@ -34,11 +34,16 @@ module.exports = {
   ].filter(Boolean),
   overrides: [
     {
-      exclude: ['./packages/solid-query/**', './packages/svelte-query/**', './packages/vue-query/**'],
+      exclude: [
+        './packages/solid-query/**',
+        './packages/query-devtools/**',
+        './packages/svelte-query/**',
+        './packages/vue-query/**',
+      ],
       presets: ['@babel/react'],
     },
     {
-      include: './packages/solid-query/**',
+      include: ['./packages/solid-query/**', './packages/query-devtools/**'],
       presets: ['babel-preset-solid'],
     },
   ],

packages/query-devtools/.eslintrc.cjs

@@ -0,0 +1,17 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+    sourceType: 'module',
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react-hooks/rules-of-hooks': 'off',
+    'react/jsx-key': 'off',
+  },
+}
+
+module.exports = config

packages/query-devtools/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@tanstack/query-devtools",
+  "version": "5.0.0-alpha.23",
+  "description": "Developer tools to interact with and visualize the TanStack Query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "types": "./build/types/index.d.ts",
+  "main": "./build/umd/index.js",
+  "module": "./build/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./build/esm/index.js",
+      "require": "./build/umd/index.js"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "build:types": "tsc --build"
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "devDependencies": {
+    "vite-plugin-solid": "^2.5.0"
+  },
+  "dependencies": {
+    "@tanstack/query-core": "workspace:*",
+    "@emotion/css": "^11.10.5",
+    "@solid-primitives/keyed": "^1.1.4",
+    "@solid-primitives/resize-observer": "^2.0.15",
+    "@solid-primitives/storage": "^1.3.9",
+    "@tanstack/match-sorter-utils": "^8.8.4",
+    "solid-js": "^1.6.10",
+    "solid-transition-group": "^0.2.2",
+    "superjson": "^1.12.1"
+  },
+  "peerDependencies": {},
+  "peerDependenciesMeta": {}
+}

packages/query-devtools/src/Context.ts

@@ -0,0 +1,41 @@
+import type { QueryClient, onlineManager, Query } from '@tanstack/query-core'
+import { createContext, useContext } from 'solid-js'
+
+type XPosition = 'left' | 'right'
+type YPosition = 'top' | 'bottom'
+export type DevtoolsPosition = XPosition | YPosition
+export type DevtoolsButtonPosition = `${YPosition}-${XPosition}`
+
+export interface DevToolsErrorType {
+  /**
+   * The name of the error.
+   */
+  name: string
+  /**
+   * How the error is initialized.
+   */
+  initializer: (query: Query) => Error
+}
+
+export interface QueryDevtoolsProps {
+  readonly client: QueryClient
+  queryFlavor: string
+  version: string
+  onlineManager: typeof onlineManager
+
+  buttonPosition?: DevtoolsButtonPosition
+  position?: DevtoolsPosition
+  initialIsOpen?: boolean
+  errorTypes?: DevToolsErrorType[]
+}
+
+export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
+  client: undefined as unknown as QueryClient,
+  onlineManager: undefined as unknown as typeof onlineManager,
+  queryFlavor: '',
+  version: '',
+})
+
+export function useQueryDevtoolsContext() {
+  return useContext(QueryDevtoolsContext)
+}