Conversation
|
github-actions
bot
added
the
documentation
📝 WalkthroughWalkthroughAdds a new Changes
Sequence Diagram(s)sequenceDiagram
participant App as AppComponent
participant PDev as PreactQueryDevtools
participant QC as QueryClient
participant TD as TanstackQueryDevtools
participant DOM as DOMContainer
App->>PDev: Mount(props)
PDev->>QC: useQueryClient(props.client)
QC-->>PDev: client
PDev->>TD: create Devtools instance (client, config)
TD-->>PDev: instance ready
PDev->>DOM: create container div
TD->>DOM: mount UI into container
App->>PDev: Update props (theme, positions, etc.)
PDev->>TD: sync prop changes
TD->>DOM: re-render/reflect updates
App->>PDev: Unmount
PDev->>TD: unmount & cleanup
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
JoviDeCroock
force-pushed
the
add-preact-devtools-package
branch
from
359aade to
1e3d386
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx`:
- Line 1: The import members are not alphabetically ordered; update the named
import from 'preact/hooks' so the specifiers are sorted alphabetically (e.g.,
ensure useEffect comes before useRef and useState) in the statement that
currently imports useRef, useState, useEffect to satisfy ESLint for the
PreactQueryDevtools component.
- Around line 33-38: The JSDoc for the prop errorTypes is wrong (copied from
styleNonce); update the comment above the errorTypes property (type
Array<DevtoolsErrorType>) to describe what errorTypes does — e.g., that it
accepts an array of DevtoolsErrorType values to filter or categorize which error
kinds the devtools should display or highlight (mention valid enum/members if
applicable), and clarify default behavior when the array is empty or omitted;
edit the JSDoc near the errorTypes declaration to reflect this intent.
In `@packages/preact-query-devtools/vite.config.ts`:
- Around line 1-4: The import order violates ESLint: move the packageJson import
before the type import from 'vite' so that "import packageJson from
'./package.json'" appears above "import type { UserConfig as ViteUserConfig }
from 'vite'"; update the top of the file to list imports as preact, packageJson,
then the vite type import (keeping existing symbols preact, defineConfig,
ViteUserConfig, and packageJson intact).
🧹 Nitpick comments (1)
packages/preact-query-devtools/root.eslint.config.js (1)
20-40: Cspell word list contains terms irrelevant to the Preact package.Words like
solidjs,vue-demi,ɵkind, andɵprovidersappear to be copy-pasted from another package's config. They're harmless but add noise — consider trimming to only Preact-relevant terms.
| @@ -0,0 +1,131 @@ | |||
| import { useRef, useState, useEffect } from 'preact/hooks' | |||
There was a problem hiding this comment.
Sort import members alphabetically to satisfy ESLint.
ESLint reports that useEffect should come before useRef in the import declaration.
Proposed fix
-import { useRef, useState, useEffect } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useRef, useState, useEffect } from 'preact/hooks' | |
| import { useEffect, useRef, useState } from 'preact/hooks' |
🧰 Tools
🪛 ESLint
[error] 1-1: Member 'useEffect' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx` at line 1, The
import members are not alphabetically ordered; update the named import from
'preact/hooks' so the specifiers are sorted alphabetically (e.g., ensure
useEffect comes before useRef and useState) in the statement that currently
imports useRef, useState, useEffect to satisfy ESLint for the
PreactQueryDevtools component.
| /** | ||
| * 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. | ||
| */ | ||
| errorTypes?: Array<DevtoolsErrorType> |
There was a problem hiding this comment.
Copy-paste error in JSDoc for errorTypes.
The docstring for errorTypes is identical to the one for styleNonce ("Use this to pass a nonce to the style tag…"). It should describe the error types functionality instead.
Proposed fix
/**
- * 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.
+ * Use this to provide custom error type handlers for the devtools panel.
*/
errorTypes?: Array<DevtoolsErrorType>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** | |
| * 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. | |
| */ | |
| errorTypes?: Array<DevtoolsErrorType> | |
| /** | |
| * Use this to provide custom error type handlers for the devtools panel. | |
| */ | |
| errorTypes?: Array<DevtoolsErrorType> |
🤖 Prompt for AI Agents
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx` around lines 33 -
38, The JSDoc for the prop errorTypes is wrong (copied from styleNonce); update
the comment above the errorTypes property (type Array<DevtoolsErrorType>) to
describe what errorTypes does — e.g., that it accepts an array of
DevtoolsErrorType values to filter or categorize which error kinds the devtools
should display or highlight (mention valid enum/members if applicable), and
clarify default behavior when the array is empty or omitted; edit the JSDoc near
the errorTypes declaration to reflect this intent.
| import preact from '@preact/preset-vite' | ||
| import { defineConfig } from 'vitest/config' | ||
| import type { UserConfig as ViteUserConfig } from 'vite' | ||
| import packageJson from './package.json' |
There was a problem hiding this comment.
Fix import order to satisfy ESLint.
ESLint flags that the ./package.json import should occur before the type import of vite. This is reported as an error and may fail CI.
🔧 Proposed fix
import preact from '@preact/preset-vite'
import { defineConfig } from 'vitest/config'
-import type { UserConfig as ViteUserConfig } from 'vite'
import packageJson from './package.json'
+import type { UserConfig as ViteUserConfig } from 'vite'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import preact from '@preact/preset-vite' | |
| import { defineConfig } from 'vitest/config' | |
| import type { UserConfig as ViteUserConfig } from 'vite' | |
| import packageJson from './package.json' | |
| import preact from '@preact/preset-vite' | |
| import { defineConfig } from 'vitest/config' | |
| import packageJson from './package.json' | |
| import type { UserConfig as ViteUserConfig } from 'vite' |
🧰 Tools
🪛 ESLint
[error] 4-4: ./package.json import should occur before type import of vite
(import/order)
🤖 Prompt for AI Agents
In `@packages/preact-query-devtools/vite.config.ts` around lines 1 - 4, The import
order violates ESLint: move the packageJson import before the type import from
'vite' so that "import packageJson from './package.json'" appears above "import
type { UserConfig as ViteUserConfig } from 'vite'"; update the top of the file
to list imports as preact, packageJson, then the vite type import (keeping
existing symbols preact, defineConfig, ViteUserConfig, and packageJson intact).
1e3d386 to
d631591
Compare
JoviDeCroock
force-pushed
the
add-preact-devtools-package
branch
from
d631591 to
fd22045
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@docs/framework/preact/devtools.md`:
- Around line 69-87: The Options docs omit the hideDisabledQueries and theme
props present on the DevtoolsOptions interface in PreactQueryDevtools.tsx;
update this Options section to document both: add a `hideDisabledQueries?:
boolean` entry describing that it hides queries in the UI that are disabled, and
add a `theme?: "light" | "dark" | string` (or whatever variants the
implementation accepts) entry describing theme selection and default. Reference
the DevtoolsOptions interface/props in PreactQueryDevtools.tsx to ensure wording
and default values match the implementation.
In `@packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx`:
- Line 1: The import list in PreactQueryDevtoolsPanel (the import from
'preact/hooks') is not alphabetized; reorder the imported members so they are
alphabetical (useEffect, useRef, useState) in the import declaration to satisfy
ESLint (update the import that currently declares useRef, useState, useEffect).
🧹 Nitpick comments (1)
packages/preact-query-devtools/src/index.ts (1)
18-18: ExportDevtoolsOptionstype alongsideDevtoolsPanelOptions.
DevtoolsPanelOptionsis re-exported from the index, butDevtoolsOptions(defined inPreactQueryDevtools.tsx) is not. Consumers typing props forPreactQueryDevtoolsmust import from the component file directly instead of the main entry point, creating an asymmetric and less discoverable API.Suggested fix
export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions +export type DevtoolsOptions = Devtools.DevtoolsOptions
| ### Options | ||
|
|
||
| - `initialIsOpen: boolean` | ||
| - Set this `true` if you want the dev tools to default to being open | ||
| - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"` | ||
| - Defaults to `bottom-right` | ||
| - The position of the Preact Query logo to open and close the devtools panel | ||
| - `position?: "top" | "bottom" | "left" | "right"` | ||
| - Defaults to `bottom` | ||
| - The position of the Preact Query devtools panel | ||
| - `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. | ||
| - `styleNonce?: string` | ||
| - 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. | ||
| - `shadowDOMTarget?: ShadowRoot` | ||
| - Default behavior will apply the devtool's styles to the head tag within the DOM. | ||
| - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. |
There was a problem hiding this comment.
Documentation is missing hideDisabledQueries and theme options.
The DevtoolsOptions interface in PreactQueryDevtools.tsx includes hideDisabledQueries and theme props, but this Options section doesn't list them. Consider adding them for completeness.
🤖 Prompt for AI Agents
In `@docs/framework/preact/devtools.md` around lines 69 - 87, The Options docs
omit the hideDisabledQueries and theme props present on the DevtoolsOptions
interface in PreactQueryDevtools.tsx; update this Options section to document
both: add a `hideDisabledQueries?: boolean` entry describing that it hides
queries in the UI that are disabled, and add a `theme?: "light" | "dark" |
string` (or whatever variants the implementation accepts) entry describing theme
selection and default. Reference the DevtoolsOptions interface/props in
PreactQueryDevtools.tsx to ensure wording and default values match the
implementation.
| @@ -0,0 +1,110 @@ | |||
| import { useRef, useState, useEffect } from 'preact/hooks' | |||
There was a problem hiding this comment.
Sort import members alphabetically to satisfy ESLint.
ESLint reports that useEffect should come before useRef in the import declaration.
Proposed fix
-import { useRef, useState, useEffect } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useRef, useState, useEffect } from 'preact/hooks' | |
| import { useEffect, useRef, useState } from 'preact/hooks' |
🧰 Tools
🪛 ESLint
[error] 1-1: Member 'useEffect' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
In `@packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx` at line 1,
The import list in PreactQueryDevtoolsPanel (the import from 'preact/hooks') is
not alphabetized; reorder the imported members so they are alphabetical
(useEffect, useRef, useState) in the import declaration to satisfy ESLint
(update the import that currently declares useRef, useState, useEffect).
|
Can we have some of those simple tests that just test open/close state? Like is done in other devtool packages |
|
This LGTM! Just addressing those two comments about docs and tests can take us to merging. |
|
@theVedanta Most others just have stub tests https://github.com/TanStack/query/blob/main/packages/react-query-devtools/src/__tests__/devtools.test.tsx#L5 I would prefer not to add those. The devtools packages are largely untested and adding a specfic one for that production stuff feels a bit overdone |
Understandable! |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:sherif,test:knip,tes... |
❌ Failed | 1m | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 8s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-02-23 06:15:49 UTC
|
Can you get those lockfile errors, please? I don't expect |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/preact-query-devtools/src/PreactQueryDevtools.tsx (1)
113-115:setThemeis called without a guard whilesetButtonPosition/setPositionboth guard againstundefined.
themeis optional, sodevtools.setTheme(undefined)will fire on every render wherethemeis not provided. The adjacent effects forbuttonPositionandpositionskip the setter when the prop is absent. IfsetThemedoesn't treatundefinedas "reset to system default", this could cause an unintended override.♻️ Proposed fix for consistent guard
useEffect(() => { - devtools.setTheme(theme) + if (theme) { + devtools.setTheme(theme) + } }, [theme, devtools])🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx` around lines 113 - 115, The useEffect calls devtools.setTheme(theme) without guarding for undefined; mirror the existing guards used for setButtonPosition and setPosition by only invoking devtools.setTheme when the incoming prop is defined (e.g., check theme !== undefined) inside the useEffect that currently depends on [theme, devtools]; update the effect that calls devtools.setTheme to skip calling setTheme when theme is absent so it won't unintentionally override the devtools theme.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx`:
- Line 1: The import members are not alphabetized; reorder the named imports in
the import from 'preact/hooks' so they are sorted alphabetically (useEffect,
useRef, useState) to satisfy ESLint — update the import line that currently
lists useRef, useState, useEffect accordingly.
---
Nitpick comments:
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx`:
- Around line 113-115: The useEffect calls devtools.setTheme(theme) without
guarding for undefined; mirror the existing guards used for setButtonPosition
and setPosition by only invoking devtools.setTheme when the incoming prop is
defined (e.g., check theme !== undefined) inside the useEffect that currently
depends on [theme, devtools]; update the effect that calls devtools.setTheme to
skip calling setTheme when theme is absent so it won't unintentionally override
the devtools theme.
There was a problem hiding this comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/preact-query-devtools/src/PreactQueryDevtools.tsx`:
- Line 1: The named imports in PreacQueryDevtools.tsx are not alphabetized which
trips the ESLint sort-imports rule; reorder the specifiers in the import from
'preact/hooks' so they are alphabetically sorted (useEffect, useRef, useState)
to satisfy the linter and keep the import statement consistent.
In `@packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx`:
- Line 1: The import members in the top-level import from 'preact/hooks' are not
alphabetically ordered and violate the sort-imports rule; update the import
statement (the line importing useRef, useState, useEffect) so the imported
identifiers are sorted alphabetically (e.g., useEffect, useRef, useState) to
satisfy ESLint.
2 participants
🎯 Changes
This adds the preact-query devtools package similar to the existing vue/solid/svelte/react ones
✅ Checklist
pnpm run test:pr.🚀 Release Impact
This is the initial release of the package.
Summary by CodeRabbit
New Features
Documentation
Tests