Conversation
|
github-actions
bot
added
the
documentation
📝 WalkthroughWalkthroughThis PR introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Preact Component
participant PreactQueryDevtools as PreactQueryDevtools
participant TanstackQueryDevtools as TanstackQueryDevtools Instance
participant QueryClient as QueryClient
participant DOM as DOM
Component->>PreactQueryDevtools: Mount with props
PreactQueryDevtools->>QueryClient: useQueryClient(props.client)
QueryClient-->>PreactQueryDevtools: Return or resolve client
PreactQueryDevtools->>TanstackQueryDevtools: Create instance
activate TanstackQueryDevtools
TanstackQueryDevtools->>TanstackQueryDevtools: Initialize state
TanstackQueryDevtools-->>PreactQueryDevtools: Instance ready
PreactQueryDevtools->>DOM: Create div container
TanstackQueryDevtools->>DOM: Mount into ref
Note over DOM: Devtools rendered in floating mode
Component->>PreactQueryDevtools: Update props (buttonPosition, theme, etc.)
PreactQueryDevtools->>TanstackQueryDevtools: Sync prop changes via effects
TanstackQueryDevtools->>TanstackQueryDevtools: Update configuration state
TanstackQueryDevtools->>DOM: Re-render with new state
Component->>PreactQueryDevtools: Unmount
TanstackQueryDevtools->>DOM: Unmount from ref
deactivate TanstackQueryDevtools
PreactQueryDevtools->>DOM: Remove container
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).
1 participant
🎯 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