Skip to content

Commit 492e72c

Browse files
TkDodoTkDodo
authored
Merge branch 'alpha' into add-prevQuery-placeholderFn
2 parents 6fc684f + 0b7235e commit 492e72c

55 files changed

Lines changed: 4764 additions & 3814 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎babel.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,16 @@ module.exports = {
3434
].filter(Boolean),
3535
overrides: [
3636
{
37-
exclude: ['./packages/solid-query/**', './packages/svelte-query/**', './packages/vue-query/**'],
37+
exclude: [
38+
'./packages/solid-query/**',
39+
'./packages/query-devtools/**',
40+
'./packages/svelte-query/**',
41+
'./packages/vue-query/**',
42+
],
3843
presets: ['@babel/react'],
3944
},
4045
{
41-
include: './packages/solid-query/**',
46+
include: ['./packages/solid-query/**', './packages/query-devtools/**'],
4247
presets: ['babel-preset-solid'],
4348
},
4449
],

‎docs/react/devtools.md‎

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -54,53 +54,17 @@ function App() {
5454

5555
- `initialIsOpen: Boolean`
5656
- Set this `true` if you want the dev tools to default to being open
57-
- `panelProps: PropsObject`
58-
- Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.
59-
- `closeButtonProps: PropsObject`
60-
- 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.
61-
- `toggleButtonProps: PropsObject`
62-
- 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.
63-
- `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
57+
- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
6458
- Defaults to `bottom-left`
6559
- The position of the React Query logo to open and close the devtools panel
66-
- `panelPosition?: "top" | "bottom" | "left" | "right"`
60+
- `position?: "top" | "bottom" | "left" | "right"`
6761
- Defaults to `bottom`
6862
- The position of the React Query devtools panel
69-
- `queryClient?: QueryClient`,
63+
- `client?: QueryClient`,
7064
- Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
7165
- `errorTypes?: { name: string; initializer: (query: Query) => TError}`
7266
- 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.
7367

74-
## Embedded Mode
75-
76-
Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
77-
78-
```tsx
79-
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
80-
81-
function App() {
82-
return (
83-
<QueryClientProvider client={queryClient}>
84-
{/* The rest of your application */}
85-
<ReactQueryDevtoolsPanel style={styles} className={className} />
86-
</QueryClientProvider>
87-
)
88-
}
89-
```
90-
91-
### Options
92-
93-
Use these options to style the dev tools.
94-
95-
- `style: StyleObject`
96-
- The standard React style object used to style a component with inline styles
97-
- `className: string`
98-
- The standard React className property used to style a component with classes
99-
- `showCloseButton?: boolean`
100-
- Show a close button inside the devtools panel
101-
- `closeButtonProps: PropsObject`
102-
- 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.
103-
10468
## Devtools in production
10569

10670
Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:

‎packages/query-devtools/.eslintrc.cjs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {
5+
parserOptions: {
6+
tsconfigRootDir: __dirname,
7+
project: './tsconfig.eslint.json',
8+
sourceType: 'module',
9+
},
10+
rules: {
11+
'react/react-in-jsx-scope': 'off',
12+
'react-hooks/rules-of-hooks': 'off',
13+
'react/jsx-key': 'off',
14+
},
15+
}
16+
17+
module.exports = config

‎packages/query-devtools/package.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "@tanstack/query-devtools",
3+
"version": "5.0.0-alpha.30",
4+
"description": "Developer tools to interact with and visualize the TanStack Query cache",
5+
"author": "tannerlinsley",
6+
"license": "MIT",
7+
"repository": "tanstack/query",
8+
"homepage": "https://tanstack.com/query",
9+
"funding": {
10+
"type": "github",
11+
"url": "https://github.com/sponsors/tannerlinsley"
12+
},
13+
"types": "build/types/index.d.ts",
14+
"main": "build/umd/index.js",
15+
"module": "build/esm/index.mjs",
16+
"exports": {
17+
".": {
18+
"types": "./build/types/index.d.ts",
19+
"import": "./build/esm/index.mjs",
20+
"require": "./build/umd/index.js",
21+
"default": "./build/umd/index.js"
22+
},
23+
"./package.json": "./package.json"
24+
},
25+
"scripts": {
26+
"clean": "rimraf ./build",
27+
"test:eslint": "eslint --ext .ts,.tsx ./src",
28+
"test:types": "tsc",
29+
"test:lib": "vitest run --coverage",
30+
"test:lib:dev": "pnpm run test:lib --watch",
31+
"build:types": "tsc --build"
32+
},
33+
"files": [
34+
"build",
35+
"src"
36+
],
37+
"devDependencies": {
38+
"vite-plugin-solid": "^2.5.0",
39+
"@tanstack/query-core": "workspace:*"
40+
},
41+
"dependencies": {
42+
"@emotion/css": "^11.10.5",
43+
"@solid-primitives/keyed": "^1.1.4",
44+
"@solid-primitives/resize-observer": "^2.0.15",
45+
"@solid-primitives/storage": "^1.3.9",
46+
"@tanstack/match-sorter-utils": "^8.8.4",
47+
"solid-js": "^1.6.10",
48+
"solid-transition-group": "^0.2.2",
49+
"superjson": "^1.12.1"
50+
},
51+
"peerDependencies": {
52+
"@tanstack/query-core": "workspace:*"
53+
},
54+
"peerDependenciesMeta": {}
55+
}

‎packages/query-devtools/src/Context.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { QueryClient, onlineManager, Query } from '@tanstack/query-core'
2+
import { createContext, useContext } from 'solid-js'
3+
4+
type XPosition = 'left' | 'right'
5+
type YPosition = 'top' | 'bottom'
6+
export type DevtoolsPosition = XPosition | YPosition
7+
export type DevtoolsButtonPosition = `${YPosition}-${XPosition}`
8+
9+
export interface DevToolsErrorType {
10+
/**
11+
* The name of the error.
12+
*/
13+
name: string
14+
/**
15+
* How the error is initialized.
16+
*/
17+
initializer: (query: Query) => Error
18+
}
19+
20+
export interface QueryDevtoolsProps {
21+
readonly client: QueryClient
22+
queryFlavor: string
23+
version: string
24+
onlineManager: typeof onlineManager
25+
26+
buttonPosition?: DevtoolsButtonPosition
27+
position?: DevtoolsPosition
28+
initialIsOpen?: boolean
29+
errorTypes?: DevToolsErrorType[]
30+
}
31+
32+
export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
33+
client: undefined as unknown as QueryClient,
34+
onlineManager: undefined as unknown as typeof onlineManager,
35+
queryFlavor: '',
36+
version: '',
37+
})
38+
39+
export function useQueryDevtoolsContext() {
40+
return useContext(QueryDevtoolsContext)
41+
}

0 commit comments

Comments
 (0)