feat(devtools): Add framework agnostic devtools (#5347)

* feat(devtools): Add framework agnostic devtools draft

* Fix test

* Move query-devtools build before react-query-devtools

* Fix dimensions bug & add isInitialOpen props

* Fix isOpen state

* Add devtools cutom errorTypes option

* Add explicit close button

* Add keyboard focus for tooltips

* Add query-core to query-devtools peerDependencies

* Update pnpm lock file

* Add overflow hidden to hide filters on top view

* Revert overflow hidden - causing other issues

* Update documentation

* Fix validate-packages script

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: ardeora

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'],
     },
   ],

docs/react/devtools.md

@@ -54,53 +54,17 @@ function App() {
 
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open
-- `panelProps: PropsObject`
-  - Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.
-- `closeButtonProps: PropsObject`
-  - Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
-- `toggleButtonProps: PropsObject`
-  - Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
-- `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-left`
   - The position of the React Query logo to open and close the devtools panel
-- `panelPosition?: "top" | "bottom" | "left" | "right"`
+- `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`
   - The position of the React Query devtools panel
-- `queryClient?: QueryClient`,
+- `client?: QueryClient`,
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 - `errorTypes?: { name: string; initializer: (query: Query) => TError}`
   - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
 
-## Embedded Mode
-
-Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
-
-```tsx
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
-
-function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      {/* The rest of your application */}
-      <ReactQueryDevtoolsPanel style={styles} className={className} />
-    </QueryClientProvider>
-  )
-}
-```
-
-### Options
-
-Use these options to style the dev tools.
-
-- `style: StyleObject`
-  - The standard React style object used to style a component with inline styles
-- `className: string`
-  - The standard React className property used to style a component with classes
-- `showCloseButton?: boolean`
-  - Show a close button inside the devtools panel
-- `closeButtonProps: PropsObject`
-  - Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
-
 ## Devtools in production
 
 Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:

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,52 @@
+{
+  "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",
+      "default": "./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": {
+    "@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": {
+    "@tanstack/query-core": "workspace:*"
+  },
+  "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)
+}