fix(devtools): rename Solid use* primitives to create* for React Compiler compat#477
Merged
Conversation
…iler compat The devtools packages are Solid but used React-style naming (useStyles, useTheme, useDevtoolsState, ...) for their custom primitives. When an app enables React Compiler, it matches the use* convention and transforms this Solid code as if it were React, breaking the panel. Rename every custom Solid primitive in @tanstack/devtools, devtools-ui, and devtools-a11y from use* to create*, and import Solid's useContext and @solid-primitives' useKeyDownList under non-use aliases (getContext, getKeyDownList). BREAKING(@tanstack/devtools-ui): exported useTheme is renamed to createTheme.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (4)
📝 WalkthroughWalkthroughSolid theme, context, styles, and helper APIs are renamed from ChangesSolid use* → create* Primitive Rename
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
|
View your CI Pipeline Execution ↗ for commit 0022e02
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 0022e02
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/angular-devtools
@tanstack/devtools
@tanstack/devtools-a11y
@tanstack/devtools-client
@tanstack/devtools-ui
@tanstack/devtools-utils
@tanstack/devtools-vite
@tanstack/devtools-event-bus
@tanstack/devtools-event-client
@tanstack/preact-devtools
@tanstack/react-devtools
@tanstack/solid-devtools
@tanstack/svelte-devtools
@tanstack/vue-devtools
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/devtools-a11y/src/core/components/Shell.tsx (1)
22-29: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winInvert the
handleExportguard.Line 23 returns when
allyResult.auditexists, so both export buttons become no-ops in the only state where they are shown. It also leaves Line 28 dereferencingallyResult.audit!on the no-audit path.Suggested fix
const handleExport = (format: 'json' | 'csv') => { - if (allyResult.audit) return + if (!allyResult.audit) return // Keep export logic in runtime via event -> overlay? export is still a direct helper. // We keep this import local to avoid pulling export code into the runtime module. void import('../utils/export-audit.uitls').then((m) => m.exportAuditResults(allyResult.audit!, { format }), ) }🤖 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 `@packages/devtools-a11y/src/core/components/Shell.tsx` around lines 22 - 29, The handleExport guard in Shell.tsx is inverted, causing exports to exit when allyResult.audit exists and leaving exportAuditResults to dereference allyResult.audit! when it is absent. Update handleExport so it only returns early when there is no audit result, then pass the existing audit value into exportAuditResults after the local import resolves, keeping the behavior aligned with the export buttons.
🤖 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 `@packages/devtools/src/components/tabs.tsx`:
- Around line 18-21: The PiP feature string built in handleDetachment is
malformed because the left value includes an extra closing brace, which can
cause the window position to be ignored. Update the requestPipWindow argument in
tabs.tsx to remove the stray character and ensure the width, height, top, and
left entries are formatted consistently.
In `@packages/devtools/src/context/use-devtools-context.ts`:
- Around line 8-16: Update the JSDoc on createDevtoolsContext so it accurately
describes DevtoolsContext and its store/setStore API instead of ShellContext
state/setState, and change the missing-provider error message to reference the
correct DevtoolsContextProvider rather than ShellContextProvider. Keep the
wording aligned with the actual symbols in use (createDevtoolsContext,
DevtoolsContext, store, setStore) so the generated docs and runtime hint match
the implementation.
---
Outside diff comments:
In `@packages/devtools-a11y/src/core/components/Shell.tsx`:
- Around line 22-29: The handleExport guard in Shell.tsx is inverted, causing
exports to exit when allyResult.audit exists and leaving exportAuditResults to
dereference allyResult.audit! when it is absent. Update handleExport so it only
returns early when there is no audit result, then pass the existing audit value
into exportAuditResults after the local import resolves, keeping the behavior
aligned with the export buttons.
🪄 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: 0c7e946c-c2b4-4128-9a8a-5a2a51a3b541
📒 Files selected for processing (45)
.changeset/solid-hook-naming-react-compiler.mdpackages/devtools-a11y/src/core/components/IssueCard.tsxpackages/devtools-a11y/src/core/components/IssueList.tsxpackages/devtools-a11y/src/core/components/Settings.tsxpackages/devtools-a11y/src/core/components/Shell.tsxpackages/devtools-a11y/src/core/contexts/allyContext.tsxpackages/devtools-a11y/src/core/styles/styles.tspackages/devtools-ui/src/components/button.tsxpackages/devtools-ui/src/components/checkbox.tsxpackages/devtools-ui/src/components/header.tsxpackages/devtools-ui/src/components/input.tsxpackages/devtools-ui/src/components/logo.tsxpackages/devtools-ui/src/components/main-panel.tsxpackages/devtools-ui/src/components/section.tsxpackages/devtools-ui/src/components/select.tsxpackages/devtools-ui/src/components/tag.tsxpackages/devtools-ui/src/components/theme.tsxpackages/devtools-ui/src/components/tree.tsxpackages/devtools-ui/src/index.tspackages/devtools-ui/src/styles/use-styles.tspackages/devtools/src/components/content-panel.tsxpackages/devtools/src/components/main-panel.tsxpackages/devtools/src/components/source-inspector.tsxpackages/devtools/src/components/tab-content.tsxpackages/devtools/src/components/tabs.tsxpackages/devtools/src/components/trigger.tsxpackages/devtools/src/context/draw-context.tsxpackages/devtools/src/context/pip-context.tsxpackages/devtools/src/context/use-devtools-context.tspackages/devtools/src/devtools.tsxpackages/devtools/src/hooks/use-disable-tabbing.tspackages/devtools/src/hooks/use-head-changes.tspackages/devtools/src/styles/use-styles.tspackages/devtools/src/tabs/hotkey-config.tsxpackages/devtools/src/tabs/marketplace/marketplace-header.tsxpackages/devtools/src/tabs/marketplace/plugin-card.tsxpackages/devtools/src/tabs/marketplace/plugin-section.tsxpackages/devtools/src/tabs/marketplace/settings-panel.tsxpackages/devtools/src/tabs/marketplace/tag-filters.tsxpackages/devtools/src/tabs/plugin-marketplace.tsxpackages/devtools/src/tabs/plugins-tab.tsxpackages/devtools/src/tabs/seo-tab/index.tsxpackages/devtools/src/tabs/seo-tab/serp-preview.tsxpackages/devtools/src/tabs/seo-tab/social-previews.tsxpackages/devtools/src/tabs/settings-tab.tsx
Comment on lines
18
to
21
| const handleDetachment = () => { | ||
| pipWindow().requestPipWindow( | ||
| `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`, | ||
| ) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Remove the stray } from the PiP feature string.
Line 20 builds left=${window.screenLeft}}, which makes the features string malformed. That can cause the left position to be ignored when the detached window opens.
Suggested fix
const handleDetachment = () => {
pipWindow().requestPipWindow(
- `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
+ `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}`,
)
}📝 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.
Suggested change
| const handleDetachment = () => { | |
| pipWindow().requestPipWindow( | |
| `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`, | |
| ) | |
| const handleDetachment = () => { | |
| pipWindow().requestPipWindow( | |
| `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}`, | |
| ) |
🤖 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 `@packages/devtools/src/components/tabs.tsx` around lines 18 - 21, The PiP
feature string built in handleDetachment is malformed because the left value
includes an extra closing brace, which can cause the window position to be
ignored. Update the requestPipWindow argument in tabs.tsx to remove the stray
character and ensure the width, height, top, and left entries are formatted
consistently.
Comment on lines
8
to
+16
| /** | ||
| * Returns an object containing the current state and setState function of the ShellContext. | ||
| * Throws an error if used outside of a ShellContextProvider. | ||
| */ | ||
| const useDevtoolsContext = () => { | ||
| const context = useContext(DevtoolsContext) | ||
| const createDevtoolsContext = () => { | ||
| const context = getContext(DevtoolsContext) | ||
| if (context === undefined) { | ||
| throw new Error( | ||
| 'useDevtoolsShellContext must be used within a ShellContextProvider', | ||
| 'createDevtoolsContext must be used within a ShellContextProvider', |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the stale context docs and provider hint.
This helper reads DevtoolsContext, which exposes store/setStore, but the JSDoc still documents state/setState from ShellContext, and Line 16 still tells callers to use ShellContextProvider. That will publish incorrect docs and mislead anyone debugging a missing-provider failure.
As per coding guidelines, JSDoc should read like documentation as it gets converted to markdown docs for the website.
🤖 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 `@packages/devtools/src/context/use-devtools-context.ts` around lines 8 - 16,
Update the JSDoc on createDevtoolsContext so it accurately describes
DevtoolsContext and its store/setStore API instead of ShellContext
state/setState, and change the missing-provider error message to reference the
correct DevtoolsContextProvider rather than ShellContextProvider. Keep the
wording aligned with the actual symbols in use (createDevtoolsContext,
DevtoolsContext, store, setStore) so the generated docs and runtime hint match
the implementation.
Source: Coding guidelines
#472 added component tests (tabs.test.tsx, settings-tab.test.tsx) using the old useDevtoolsState/useDevtoolsSettings names, and the devtools-plugin-panel skill docs referenced the renamed devtools-ui export useTheme. Update them to the create* names.
Merged
AlemTuzlak
added a commit
that referenced
this pull request
Jun 24, 2026
nx.json sets `parallel: 5`, which is fine for local dev machines but oversubscribes GitHub-hosted runners: each affected `test:lib` (vitest) and `test:types` (tsc) task spawns its own worker pool, so 5 heavy tasks at once exhaust CPU/RAM and intermittently stall or OOM-kill deterministic tasks. That produced flaky failures across unrelated PRs (#471, #477, #478) that pass on a plain re-run. The team already pins `test:e2e` to `--parallel=1` for the same reason; cap the Test job's nx parallelism via NX_PARALLEL=3 (CI-only, leaves local dev at 5). Combined with the raised vitest timeouts, this keeps tasks within the runner's budget.
AlemTuzlak
added a commit
that referenced
this pull request
Jun 24, 2026
…uts) (#478) * test(devtools): raise vitest timeouts to stop flaky component test:lib in CI The component tests added in #472 render the full Solid + goober tree and take 1-4s locally. Shared CI runners are ~4x slower (the suite runs in ~8s locally but ~31s in CI), which pushes individual tests past vitest's default 5s testTimeout and causes intermittent `@tanstack/devtools:test:lib` failures across unrelated PRs (e.g. #471, #477). Raise testTimeout and hookTimeout to 30s for the devtools package so slow CI runs have headroom. Fast unit tests are unaffected; a real hang still fails (just after 30s instead of 5s). * ci: cap nx parallelism to 3 to fix flaky Test job nx.json sets `parallel: 5`, which is fine for local dev machines but oversubscribes GitHub-hosted runners: each affected `test:lib` (vitest) and `test:types` (tsc) task spawns its own worker pool, so 5 heavy tasks at once exhaust CPU/RAM and intermittently stall or OOM-kill deterministic tasks. That produced flaky failures across unrelated PRs (#471, #477, #478) that pass on a plain re-run. The team already pins `test:e2e` to `--parallel=1` for the same reason; cap the Test job's nx parallelism via NX_PARALLEL=3 (CI-only, leaves local dev at 5). Combined with the raised vitest timeouts, this keeps tasks within the runner's budget.
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.
Problem
The devtools packages are written in Solid, but their custom primitives used React-style
use*naming (useStyles,useTheme,useDevtoolsState, …). When a consuming app enables React Compiler, the compiler matches theuse*naming convention and transforms/optimizes this Solid code as if it were React hooks — which breaks the panel, because it's Solid JSX, not React.Change
Rename every custom Solid primitive across the three Solid packages from
use*→create*, and import the frameworkuse*primitives under non-usealiases so the compiler no longer flags them:useStyles→createStyles,useTheme→createTheme,useDevtoolsContext/useDevtoolsState/useDevtoolsSettings/usePlugins/usePersistOpen/useHeight,useDraw/useDrawContext,usePiPWindow,useHeadChanges,useDisableTabbing,useAllyValue/useAllyContext.useContext→ imported asgetContext(couldn't reusecreateContext— it's a separate Solid export already imported in the same files).@solid-primitives/keyboard'suseKeyDownList→ imported asgetKeyDownList(same compiler risk).Breaking change
@tanstack/devtools-ui(minor): the exporteduseThemeis renamed tocreateTheme. All other renames are internal (not part of any package's public entry).Verification
nx build✅ all 7 affected packages (build emits.d.tsvia tsc, so types are clean)nx test:lib✅ all three packagesnx test:eslint✅ all three packagesChangeset included.
Summary by CodeRabbit
New Features
create*APIs for theming, styles, context, settings, state, and hotkeys across the devtools and UI packages.Bug Fixes
Breaking Changes
useTheme→createTheme.use*→create*(includinguseStyles,usePlugins,useDevtoolsState,useDevtoolsSettings,usePersistOpen,useHeight,useDrawContext,usePiPWindow, anduseHeadChanges).