docs(framework/{preact,solid}/devtools): add the 'Embedded Mode' section#10853
Merged
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughDocumentation for Embedded Mode is added to both Preact and Solid framework devtools guides. Each includes a code example showing conditional panel rendering and a configuration reference documenting styling, callbacks, client options, error types, security settings, and theming. ChangesEmbedded Mode DevTools Documentation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit 3cc8772
☁️ Nx Cloud last updated this comment at |
Contributor
🚀 Changeset Version Preview2 package(s) bumped directly, 23 bumped as dependents. 🟩 Patch bumps
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/framework/preact/devtools.md`:
- Line 94: The sentence describing "Embedded mode" is misleading by saying it
"will show the development tools as a fixed element"; update the text for the
Embedded mode description to state that the panel is rendered into a container
you provide rather than implying CSS fixed positioning — for example, replace
"fixed element" with wording such as "rendered inside a container you place in
your app" or "embedded into a normal container you provide (not a fixed-position
overlay by default)" so it accurately reflects the behavior of Embedded mode.
- Around line 117-137: The Embedded Mode options list is missing the
hideDisabledQueries prop used by PreactQueryDevtoolsPanel; add an entry
documenting hideDisabledQueries?: boolean, describe that when true it hides
disabled queries from the panel (when false or omitted they are shown), include
the default behavior (if none specified in PreactQueryDevtoolsPanel clarify
default is false or match the component's default), and reference the prop name
and component (PreactQueryDevtoolsPanel) so readers can find the implementation.
In `@docs/framework/solid/devtools.md`:
- Around line 119-139: The docs options table is missing the hideDisabledQueries
prop used by SolidQueryDevtoolsPanel; add an entry for `hideDisabledQueries?:
boolean` to the Options list (near other props like client and theme),
describing that it toggles whether disabled queries are hidden in Embedded Mode,
include the default value (e.g. `false`) and a short example, and ensure the
name matches the prop in packages/solid-query-devtools/src/devtoolsPanel.tsx
(SolidQueryDevtoolsPanel / hideDisabledQueries) so the docs reflect the actual
API.
- Line 94: Update the sentence that currently reads "Embedded mode will show the
development tools as a fixed element in your application, so you can use our
panel in your own development tools." to remove the phrase "fixed element" and
clarify that the panel is rendered/mounted into the container you provide; e.g.,
say "Embedded mode renders the development tools inside the container you
provide, so you can use our panel within your own development tools" to avoid
implying fixed positioning.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e450cbe3-56c1-4f88-a0b6-6c5134adff47
📒 Files selected for processing (2)
docs/framework/preact/devtools.mddocs/framework/solid/devtools.md
|
|
||
| ## Embedded Mode | ||
|
|
||
| Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools. |
Contributor
There was a problem hiding this comment.
Embedded Mode description is behaviorally inaccurate.
“fixed element” is misleading here: the panel renders into a normal container where you place it, not as a fixed-position overlay by default. Please reword to avoid implying CSS fixed positioning.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/framework/preact/devtools.md` at line 94, The sentence describing
"Embedded mode" is misleading by saying it "will show the development tools as a
fixed element"; update the text for the Embedded mode description to state that
the panel is rendered into a container you provide rather than implying CSS
fixed positioning — for example, replace "fixed element" with wording such as
"rendered inside a container you place in your app" or "embedded into a normal
container you provide (not a fixed-position overlay by default)" so it
accurately reflects the behavior of Embedded mode.
Comment on lines
+117
to
+137
| ### Options | ||
|
|
||
| - `style?: CSSProperties` | ||
| - Custom styles for the devtools panel | ||
| - Default: `{ height: '500px' }` | ||
| - Example: `{ height: '100%' }` | ||
| - Example: `{ height: '100%', width: '100%' }` | ||
| - `onClose?: () => void` | ||
| - Callback function that is called when the devtools panel is closed | ||
| - `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. | ||
| - `theme?: "light" | "dark" | "system"` | ||
| - Defaults to `system`. | ||
| - Set this to change the theme of the devtools panel. |
Contributor
There was a problem hiding this comment.
Embedded options list is missing a supported panel prop (hideDisabledQueries).
PreactQueryDevtoolsPanel supports hideDisabledQueries?: boolean (see packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx), but it is not documented in this new Embedded Mode options section.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/framework/preact/devtools.md` around lines 117 - 137, The Embedded Mode
options list is missing the hideDisabledQueries prop used by
PreactQueryDevtoolsPanel; add an entry documenting hideDisabledQueries?:
boolean, describe that when true it hides disabled queries from the panel (when
false or omitted they are shown), include the default behavior (if none
specified in PreactQueryDevtoolsPanel clarify default is false or match the
component's default), and reference the prop name and component
(PreactQueryDevtoolsPanel) so readers can find the implementation.
|
|
||
| ## Embedded Mode | ||
|
|
||
| Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools. |
Contributor
There was a problem hiding this comment.
Embedded Mode wording suggests incorrect layout behavior.
“fixed element” is not accurate for this panel; it mounts into the container you render. Please adjust wording to avoid implying fixed positioning.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/framework/solid/devtools.md` at line 94, Update the sentence that
currently reads "Embedded mode will show the development tools as a fixed
element in your application, so you can use our panel in your own development
tools." to remove the phrase "fixed element" and clarify that the panel is
rendered/mounted into the container you provide; e.g., say "Embedded mode
renders the development tools inside the container you provide, so you can use
our panel within your own development tools" to avoid implying fixed
positioning.
Comment on lines
+119
to
+139
| ### Options | ||
|
|
||
| - `style?: JSX.CSSProperties` | ||
| - Custom styles for the devtools panel | ||
| - Default: `{ height: '500px' }` | ||
| - Example: `{ height: '100%' }` | ||
| - Example: `{ height: '100%', width: '100%' }` | ||
| - `onClose?: () => void` | ||
| - Callback function that is called when the devtools panel is closed | ||
| - `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. | ||
| - `theme?: "light" | "dark" | "system"` | ||
| - Defaults to `system`. | ||
| - Set this to change the theme of the devtools panel. |
Contributor
There was a problem hiding this comment.
Options docs omit hideDisabledQueries for SolidQueryDevtoolsPanel.
hideDisabledQueries?: boolean exists in packages/solid-query-devtools/src/devtoolsPanel.tsx but isn’t listed in this Embedded Mode options table.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/framework/solid/devtools.md` around lines 119 - 139, The docs options
table is missing the hideDisabledQueries prop used by SolidQueryDevtoolsPanel;
add an entry for `hideDisabledQueries?: boolean` to the Options list (near other
props like client and theme), describing that it toggles whether disabled
queries are hidden in Embedded Mode, include the default value (e.g. `false`)
and a short example, and ensure the name matches the prop in
packages/solid-query-devtools/src/devtoolsPanel.tsx (SolidQueryDevtoolsPanel /
hideDisabledQueries) so the docs reflect the actual API.
Contributor
size-limit report 📦
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Changes
Add the
## Embedded Modesection to the Preact and Solid devtools docs, mirroring the section that already exists for React and Vue.Both adapters expose a
DevtoolsPanelcomponent (PreactQueryDevtoolsPanel,SolidQueryDevtoolsPanel), but the Embedded Mode usage and options were never documented. Users had to discover the component and infer its options from the source.The new sections follow the same shape as the React/Vue sections:
useStatefrompreact/hooksfor Preact, andcreateSignal+Showfor Solid)### Optionslist coveringstyle,onClose,client,errorTypes,styleNonce,shadowDOMTarget, andthemeThe option types use each adapter's own type alias (
CSSPropertiesfor Preact,JSX.CSSPropertiesfor Solid) to match the production components.✅ Checklist
🚀 Release Impact
Summary by CodeRabbit
Documentation