Skip to content

feat(devtools):Extract devtools theme #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KevinVandy merged 4 commits into from
Mar 16, 2026
Merged

feat(devtools):Extract devtools theme #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc41267
feat(devtools): extract theme to devtool components
harry-whorlow Mar 12, 2026
3cd3bb6
chore: bump versions
harry-whorlow Mar 15, 2026
1b7be22
update lock file
KevinVandy Mar 16, 2026
7654109
remove extra devtools-utils dep from solid examples
KevinVandy Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/honest-moose-throw.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/hotkeys-devtools': patch
---

Moves devtools theme to the component to avoid theme miss-match.
Copy link

@coderabbitai coderabbitai bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Minor typo: "miss-match" should be "mismatch".

📝 Suggested fix 
-Moves devtools theme to the component to avoid theme miss-match.
+Moves devtools theme to the component to avoid theme mismatch.
📝 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
Moves devtools theme to the component to avoid theme miss-match.
Moves devtools theme to the component to avoid theme mismatch.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.changeset/honest-moose-throw.md at line 5, Replace the typo "miss-match" in
the changeset description with the correct word "mismatch" (look for the string
"miss-match" in the .changeset/honest-moose-throw.md content and update it to
"mismatch").

1 change: 0 additions & 1 deletion examples/solid/createHeldKeys/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
Expand Down
1 change: 0 additions & 1 deletion examples/solid/createHotkey/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
Expand Down
1 change: 0 additions & 1 deletion examples/solid/createHotkeyRecorder/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
Expand Down
1 change: 0 additions & 1 deletion examples/solid/createHotkeySequence/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
Expand Down
1 change: 0 additions & 1 deletion examples/solid/createKeyHold/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/solid-devtools": "0.7.30",
"@tanstack/solid-hotkeys": "^0.4.1",
"@tanstack/solid-hotkeys-devtools": "^0.4.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/hotkeys-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
"@tanstack/hotkeys": "workspace:*"
},
"dependencies": {
"@tanstack/devtools-ui": "^0.5.0",
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-ui": "^0.5.1",
"@tanstack/devtools-utils": "^0.4.0",
"clsx": "^2.1.1",
"goober": "^2.1.18",
"solid-js": "^1.9.11"
Expand Down
10 changes: 0 additions & 10 deletions packages/hotkeys-devtools/src/HotkeysDevtools.tsx
View file
Open in desktop

This file was deleted.

19 changes: 19 additions & 0 deletions packages/hotkeys-devtools/src/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { ThemeContextProvider } from '@tanstack/devtools-ui'
import { HotkeysContextProvider } from '../HotkeysContextProvider'
import { Shell } from './Shell'

import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'

interface DevtoolsProps {
theme: TanStackDevtoolsTheme
}

export default function HotkeysDevtools(props: DevtoolsProps) {
return (
<ThemeContextProvider theme={props.theme}>
<HotkeysContextProvider>
<Shell />
</HotkeysContextProvider>
</ThemeContextProvider>
)
}
2 changes: 1 addition & 1 deletion packages/hotkeys-devtools/src/core.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { constructCoreClass } from '@tanstack/devtools-utils/solid'

const loadComponent = () => import('./HotkeysDevtools')
const loadComponent = () => import('./components/index')

export interface HotkeysDevtoolsInit {}

Expand Down
2 changes: 1 addition & 1 deletion packages/preact-hotkeys-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"preact": ">=10.0.0"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-hotkeys-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"react-dom": ">=16.8"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-utils": "^0.4.0",
Copy link

@coderabbitai coderabbitai bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

In @tanstack/devtools-utils0.4.0, didcreateReactPanelorcreateReactPlugin change signatures or return types compared with 0.3.2?

💡 Result:

There isn’t an @tanstack/devtools-utils 0.4.0 release on npm (as of March 15, 2026). The published versions go up through 0.3.4 (and include 0.3.2), so there’s no 0.4.0 API to compare against 0.3.2. [1]

If you meant a different package (e.g. @tanstack/devtools / @tanstack/devtools-event-client 0.4.0) or a git/tag build, tell me which source (npm vs repo tag/commit) and I’ll diff the createReactPanel / createReactPlugin types.

Sources: [1] https://socket.dev/npm/package/%40tanstack/devtools-utils

🏁 Script executed:

cat -n packages/react-hotkeys-devtools/package.json | sed -n '50,65p'

Repository: TanStack/hotkeys

Length of output: 661

Remove or update @tanstack/devtools-utils version—0.4.0 does not exist on npm.

The specified version ^0.4.0 cannot be resolved. The latest published version on npm is 0.3.4 (as of March 2026). Update the dependency to an available version, such as ^0.3.4.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/react-hotkeys-devtools/package.json` at line 57, Update the
dependency entry for `@tanstack/devtools-utils` in package.json because the pinned
version ^0.4.0 does not exist; change it to a valid published version (for
example ^0.3.4) and run your package manager to update lockfiles (npm/yarn/pnpm)
so the resolved version is consistent; ensure the modified package.json
dependency line for "@tanstack/devtools-utils" and the lockfile are committed.

"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/solid-hotkeys-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"solid-js": ">=1.7.0"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-hotkeys-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"vue": ">=3.0.0"
},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-utils": "^0.4.0",
"@tanstack/hotkeys-devtools": "workspace:*"
},
"devDependencies": {
Expand Down
63 changes: 30 additions & 33 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading