Conversation
|
github-actions
bot
added
the
documentation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a new Changes
Sequence Diagram(s)sequenceDiagram
participant App as App
participant PDev as PreactQueryDevtools
participant QC as QueryClient
participant TD as TanStackDevtools
participant DOM as DOM
App->>PDev: mount(props)
PDev->>QC: resolve client (useQueryClient)
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, position, etc.)
PDev->>TD: sync prop changes
TD->>DOM: reflect updates
App->>PDev: unmount
PDev->>TD: unmount & cleanup
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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).
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 | 37s | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 9s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-02-26 17:27:44 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.
e303464 to
3a58351
Compare
JoviDeCroock
force-pushed
the
add-preact-devtools-package
branch
from
3a58351 to
66a90f4
Compare
…anStack#10158) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/preact-query-devtools/vite.config.ts (1)
3-4:⚠️ Potential issue | 🟡 MinorImport order lint failure is still present.
import/orderexpectsimport packageJson from './package.json'before the type import fromvite(Line 4 should come before Line 3).🔧 Suggested 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'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/preact-query-devtools/vite.config.ts` around lines 3 - 4, Reorder the top-level imports to satisfy import/order by moving the local packageJson import before the type import from Vite; specifically, place "import packageJson from './package.json'" above "import type { UserConfig as ViteUserConfig } from 'vite'". This keeps the import of packageJson before the external/type import and resolves the lint failure.
🧹 Nitpick comments (1)
packages/preact-query-devtools/root.tsup.config.js (1)
10-39: Consider extracting shared tsup options to reduce duplication.
Both builders repeat the same base fields; a small shared base object would make future updates safer.♻️ Suggested DRY refactor
export function modernConfig(opts) { + const shared = { + format: ['cjs', 'esm'], + dts: true, + sourcemap: true, + clean: true, + esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })], + } + return { + ...shared, entry: opts.entry, - format: ['cjs', 'esm'], target: ['chrome91', 'firefox90', 'edge91', 'safari15', 'ios15', 'opera77'], outDir: 'build/modern', - dts: true, - sourcemap: true, - clean: true, - esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })], } } export function legacyConfig(opts) { + const shared = { + format: ['cjs', 'esm'], + dts: true, + sourcemap: true, + clean: true, + esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })], + } + return { + ...shared, entry: opts.entry, - format: ['cjs', 'esm'], target: ['es2020', 'node16'], outDir: 'build/legacy', - dts: true, - sourcemap: true, - clean: true, - esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })], } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/preact-query-devtools/root.tsup.config.js` around lines 10 - 39, Extract the duplicated tsup options into a shared base object and have modernConfig and legacyConfig spread/merge that base, keeping only the differing fields (target and outDir) in each function; move common keys like entry, format, dts, sourcemap, clean, and esbuildPlugins (esbuildPluginFilePathExtensions call) into the base, then in modernConfig and legacyConfig return {...base, target: [...], outDir: 'build/modern'|'build/legacy'} while preserving the existing JSDoc on legacyConfig and the function signatures.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/framework/preact/devtools.md`:
- Around line 71-82: Update the documented prop signatures to match the
component API: change `initialIsOpen: boolean` to `initialIsOpen?: boolean` and
change `errorTypes?: { name: string; initializer: (query: Query) => TError}` to
`errorTypes?: Array<DevtoolsErrorType>` (or a short inline shape matching the
exported DevtoolsErrorType) and remove the undeclared `TError`; reference the
exported type name `DevtoolsErrorType` (or show its fields) so consumers see the
correct optional types for `initialIsOpen` and `errorTypes` as used by the
component.
In `@packages/preact-query-devtools/src/production.ts`:
- Around line 1-5: The production entry currently imports and re-exports live
runtime components (Devtools.PreactQueryDevtools and
DevtoolsPanel.PreactQueryDevtoolsPanel); change this to type-only imports and
no-op exports so no devtools runtime ships: import the modules only for types
using `typeof` (referencing PreactQueryDevtools and PreactQueryDevtoolsPanel
types from the original modules) and export lightweight no-op functions/objects
that match the same exported symbols (PreactQueryDevtools,
PreactQueryDevtoolsPanel) so consumers keep correct types but no runtime code is
included.
---
Duplicate comments:
In `@packages/preact-query-devtools/vite.config.ts`:
- Around line 3-4: Reorder the top-level imports to satisfy import/order by
moving the local packageJson import before the type import from Vite;
specifically, place "import packageJson from './package.json'" above "import
type { UserConfig as ViteUserConfig } from 'vite'". This keeps the import of
packageJson before the external/type import and resolves the lint failure.
---
Nitpick comments:
In `@packages/preact-query-devtools/root.tsup.config.js`:
- Around line 10-39: Extract the duplicated tsup options into a shared base
object and have modernConfig and legacyConfig spread/merge that base, keeping
only the differing fields (target and outDir) in each function; move common keys
like entry, format, dts, sourcemap, clean, and esbuildPlugins
(esbuildPluginFilePathExtensions call) into the base, then in modernConfig and
legacyConfig return {...base, target: [...], outDir:
'build/modern'|'build/legacy'} while preserving the existing JSDoc on
legacyConfig and the function signatures.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (17)
docs/config.jsondocs/framework/preact/devtools.mdpackages/preact-query-devtools/.attw.jsonpackages/preact-query-devtools/eslint.config.jspackages/preact-query-devtools/package.jsonpackages/preact-query-devtools/root.eslint.config.jspackages/preact-query-devtools/root.tsup.config.jspackages/preact-query-devtools/src/PreactQueryDevtools.tsxpackages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsxpackages/preact-query-devtools/src/index.tspackages/preact-query-devtools/src/production.tspackages/preact-query-devtools/test-setup.tspackages/preact-query-devtools/tsconfig.jsonpackages/preact-query-devtools/tsconfig.legacy.jsonpackages/preact-query-devtools/tsconfig.prod.jsonpackages/preact-query-devtools/tsup.config.tspackages/preact-query-devtools/vite.config.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/preact-query-devtools/eslint.config.js
- packages/preact-query-devtools/tsconfig.legacy.json
- packages/preact-query-devtools/test-setup.ts
- docs/config.json
- packages/preact-query-devtools/src/index.ts
- packages/preact-query-devtools/package.json
- packages/preact-query-devtools/tsconfig.json
- packages/preact-query-devtools/tsconfig.prod.json
| - `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. |
There was a problem hiding this comment.
Align the documented option signatures with the actual component API.
initialIsOpen is documented as required, and errorTypes is documented as a single object with an undeclared TError. The exported options in this PR use initialIsOpen?: boolean and errorTypes?: Array<DevtoolsErrorType>, so the docs should match to avoid integration mistakes.
Suggested doc fix
-- `initialIsOpen: boolean`
+- `initialIsOpen?: boolean`
- Set this `true` if you want the dev tools to default to being open
@@
-- `errorTypes?: { name: string; initializer: (query: Query) => TError}`
+- `errorTypes?: Array<DevtoolsErrorType>`
- 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.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/framework/preact/devtools.md` around lines 71 - 82, Update the
documented prop signatures to match the component API: change `initialIsOpen:
boolean` to `initialIsOpen?: boolean` and change `errorTypes?: { name: string;
initializer: (query: Query) => TError}` to `errorTypes?:
Array<DevtoolsErrorType>` (or a short inline shape matching the exported
DevtoolsErrorType) and remove the undeclared `TError`; reference the exported
type name `DevtoolsErrorType` (or show its fields) so consumers see the correct
optional types for `initialIsOpen` and `errorTypes` as used by the component.
| import * as Devtools from './PreactQueryDevtools' | ||
| import * as DevtoolsPanel from './PreactQueryDevtoolsPanel' | ||
|
|
||
| export const PreactQueryDevtools = Devtools.PreactQueryDevtools | ||
| export const PreactQueryDevtoolsPanel = DevtoolsPanel.PreactQueryDevtoolsPanel |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== preact-query-devtools package.json (full) =="
pkg="$(fd -p 'package.json' packages/preact-query-devtools | head -n1)"
cat "$pkg"
echo
echo "== preact-query-devtools production.ts =="
prod_file="$(fd -p 'production\.tsx?$' packages/preact-query-devtools | head -n1)"
cat "$prod_file"
echo
echo "== Comparing production files across query-devtools packages =="
for dir in packages/*/; do
name=$(basename "$dir")
if [[ $name == *"query-devtools" ]]; then
prod="$dir/src/production.ts"
if [ -f "$prod" ] || [ -f "${prod%.*}.tsx" ]; then
echo "---- $name (production file) ----"
cat "${prod%.*}.ts" "${prod%.*}.tsx" 2>/dev/null | head -20
fi
fi
doneRepository: TanStack/query
Length of output: 4121
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Production implementations across all query-devtools packages =="
for dir in packages/*/query-devtools/src/production.* packages/preact-query-devtools/src/production.* packages/solid-query-devtools/src/production.* packages/vue-query-devtools/src/production.* packages/svelte-query-devtools/src/production.* packages/angular-query-devtools/src/production.*; do
if [ -f "$dir" ]; then
echo "---- $(echo $dir | sed 's|packages/||;s|/src.*||') ----"
cat "$dir"
echo
fi
done
echo "== Check for index.tsx/production.tsx pattern in solid-query-devtools =="
if [ -d packages/solid-query-devtools/src ]; then
echo "---- solid-query-devtools/src/index.tsx ----"
head -20 packages/solid-query-devtools/src/index.tsx 2>/dev/null || echo "Not found"
echo
echo "---- solid-query-devtools/src/production.tsx ----"
head -20 packages/solid-query-devtools/src/production.tsx 2>/dev/null || echo "Not found"
fiRepository: TanStack/query
Length of output: 1265
Production entry should not re-export live devtools components.
The ./production export points to build/modern/production.js and currently re-exports live devtools components, which will ship real devtools runtime code in production builds. Follow the pattern established in solid-query-devtools by using type-only imports with typeof annotations and no-op function exports:
Suggested fix
-import * as Devtools from './PreactQueryDevtools'
-import * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
+import type * as Devtools from './PreactQueryDevtools'
+import type * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
-export const PreactQueryDevtools = Devtools.PreactQueryDevtools
-export const PreactQueryDevtoolsPanel = DevtoolsPanel.PreactQueryDevtoolsPanel
+export const PreactQueryDevtools: (typeof Devtools)['PreactQueryDevtools'] = () =>
+ null
+export const PreactQueryDevtoolsPanel: (typeof DevtoolsPanel)['PreactQueryDevtoolsPanel'] =
+ () => null📝 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 * as Devtools from './PreactQueryDevtools' | |
| import * as DevtoolsPanel from './PreactQueryDevtoolsPanel' | |
| export const PreactQueryDevtools = Devtools.PreactQueryDevtools | |
| export const PreactQueryDevtoolsPanel = DevtoolsPanel.PreactQueryDevtoolsPanel | |
| import type * as Devtools from './PreactQueryDevtools' | |
| import type * as DevtoolsPanel from './PreactQueryDevtoolsPanel' | |
| export const PreactQueryDevtools: (typeof Devtools)['PreactQueryDevtools'] = () => | |
| null | |
| export const PreactQueryDevtoolsPanel: (typeof DevtoolsPanel)['PreactQueryDevtoolsPanel'] = | |
| () => null |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/preact-query-devtools/src/production.ts` around lines 1 - 5, The
production entry currently imports and re-exports live runtime components
(Devtools.PreactQueryDevtools and DevtoolsPanel.PreactQueryDevtoolsPanel);
change this to type-only imports and no-op exports so no devtools runtime ships:
import the modules only for types using `typeof` (referencing
PreactQueryDevtools and PreactQueryDevtoolsPanel types from the original
modules) and export lightweight no-op functions/objects that match the same
exported symbols (PreactQueryDevtools, PreactQueryDevtoolsPanel) so consumers
keep correct types but no runtime code is included.
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