Skip to content

feat(devtools):Extract devtools theme#67

Merged
KevinVandy merged 4 commits intomainfrom
extract-devtools-theme
Mar 16, 2026
Merged

feat(devtools):Extract devtools theme#67
KevinVandy merged 4 commits intomainfrom
extract-devtools-theme

Conversation

@harry-whorlow
Copy link
Collaborator

@harry-whorlow harry-whorlow commented Mar 15, 2026

Extracts devtools theme to devtools components to prevent theme mismatch.

Summary by CodeRabbit

  • Bug Fixes

    • Improved theme handling in hotkeys devtools to avoid theme mismatches.
  • Chores

    • Bumped @tanstack/devtools-utils to ^0.4.0 and @tanstack/devtools-ui to ^0.5.1 across devtools packages.
    • Removed @tanstack/devtools-utils from several example projects.

@changeset-bot
Copy link

changeset-bot bot commented Mar 15, 2026

🦋 Changeset detected

Latest commit: 7654109

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@tanstack/hotkeys-devtools Patch
@tanstack/preact-hotkeys-devtools Patch
@tanstack/react-hotkeys-devtools Patch
@tanstack/solid-hotkeys-devtools Patch
@tanstack/vue-hotkeys-devtools Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link

coderabbitai bot commented Mar 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0d3184cf-fecb-4add-984b-df7c99d54c15

📥 Commits

Reviewing files that changed from the base of the PR and between 3cd3bb6 and 7654109.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (5)
  • examples/solid/createHeldKeys/package.json
  • examples/solid/createHotkey/package.json
  • examples/solid/createHotkeyRecorder/package.json
  • examples/solid/createHotkeySequence/package.json
  • examples/solid/createKeyHold/package.json
💤 Files with no reviewable changes (5)
  • examples/solid/createHotkey/package.json
  • examples/solid/createHotkeyRecorder/package.json
  • examples/solid/createHotkeySequence/package.json
  • examples/solid/createHeldKeys/package.json
  • examples/solid/createKeyHold/package.json

📝 Walkthrough

Walkthrough

Updates move theme provisioning into the HotkeysDevtools component, relocate the component to src/components/index.tsx and update dynamic import; dependency bumps to @tanstack/devtools-utils@^0.4.0 (and devtools-ui to ^0.5.1) in devtools packages; several Solid example package.json files removed the @tanstack/devtools-utils dependency.

Changes

Cohort / File(s) Summary
Changelog
.changeset/honest-moose-throw.md
Adds a patch changelog entry noting the devtools theme was moved into the component to avoid theme mismatch.
Examples — Solid
examples/solid/createHeldKeys/package.json, examples/solid/createHotkey/package.json, examples/solid/createHotkeyRecorder/package.json, examples/solid/createHotkeySequence/package.json, examples/solid/createKeyHold/package.json
Removed @tanstack/devtools-utils entries from these example package.json files.
Framework Devtools — deps
packages/preact-hotkeys-devtools/package.json, packages/react-hotkeys-devtools/package.json, packages/solid-hotkeys-devtools/package.json, packages/vue-hotkeys-devtools/package.json
Bumps @tanstack/devtools-utils from ^0.3.2^0.4.0.
hotkeys-devtools package.json
packages/hotkeys-devtools/package.json
Bumps @tanstack/devtools-utils ^0.3.2^0.4.0 and @tanstack/devtools-ui ^0.5.0^0.5.1.
Component relocation & theming
packages/hotkeys-devtools/src/HotkeysDevtools.tsx, packages/hotkeys-devtools/src/components/index.tsx, packages/hotkeys-devtools/src/core.tsx
Removes the old root HotkeysDevtools.tsx; adds src/components/index.tsx exporting HotkeysDevtools that composes ThemeContextProviderHotkeysContextProviderShell; updates core.tsx dynamic import target to ./components/index.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant HotkeysDevtools as HotkeysDevtools(Component)
    participant ThemeProv as ThemeContextProvider
    participant HotkeysProv as HotkeysContextProvider
    participant Shell

    App->>HotkeysDevtools: render(props { theme })
    HotkeysDevtools->>ThemeProv: wrap with provided theme
    ThemeProv->>HotkeysProv: provide hotkeys context
    HotkeysProv->>Shell: render UI (devtools shell)
    Shell-->>App: expose UI / interactions
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped the code, moved theme to nest,
Wrapped Shell in care for a smoother rest,
Versions climbed, examples trimmed a line,
Now devtools hum in tidy design — hooray, fine! 🎶

🚥 Pre-merge checks | ✅ 1 | ❌ 4

❌ Failed checks (2 warnings, 2 inconclusive)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is incomplete. While it briefly mentions the purpose, it lacks the required structured sections from the template including 'Changes' details, 'Checklist' items, and 'Release Impact' acknowledgment. Expand the description to include the 'Changes' section with detailed motivation, complete the 'Checklist' section by checking relevant items, and explicitly indicate Release Impact status (a changeset has been added).
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check ❓ Inconclusive No issue references or links are mentioned in the PR description or metadata provided, making it unclear what problem or feature request this addresses. Add a reference to the related issue (e.g., 'Fixes #XX' or 'Relates to #XX') in the PR description for better traceability.
Out of Scope Changes check ❓ Inconclusive The PR includes updates to lock files and dependency bumps across multiple packages beyond the core theme extraction, which may be scope creep. Clarify whether lock file updates and dependency version bumps (@tanstack/devtools-utils ^0.3.2 to ^0.4.0) are necessary for this feature or should be separated into a different PR.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: extracting/moving devtools theme to component level to prevent theme mismatch, which aligns with the actual modifications across the codebase.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch extract-devtools-theme
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

CodeRabbit can approve the review once all CodeRabbit's comments are resolved.

Enable the reviews.request_changes_workflow setting to automatically approve the review once all CodeRabbit's comments are resolved.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/honest-moose-throw.md:
- 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").

In `@packages/preact-hotkeys-devtools/package.json`:
- Line 53: The lockfile is out of sync with the manifest change of
"@tanstack/devtools-utils" to ^0.4.0 in
packages/preact-hotkeys-devtools/package.json; run pnpm install in the repo root
(or in that package) to regenerate pnpm-lock.yaml so the dependency resolves to
the new ^0.4.0 version and commit the updated lockfile.

In `@packages/react-hotkeys-devtools/package.json`:
- 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.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc924d3c-ef21-42ff-a994-97d57349eb5f

📥 Commits

Reviewing files that changed from the base of the PR and between 75ce7c8 and 3cd3bb6.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (14)
  • .changeset/honest-moose-throw.md
  • examples/solid/createHeldKeys/package.json
  • examples/solid/createHotkey/package.json
  • examples/solid/createHotkeyRecorder/package.json
  • examples/solid/createHotkeySequence/package.json
  • examples/solid/createKeyHold/package.json
  • packages/hotkeys-devtools/package.json
  • packages/hotkeys-devtools/src/HotkeysDevtools.tsx
  • packages/hotkeys-devtools/src/components/index.tsx
  • packages/hotkeys-devtools/src/core.tsx
  • packages/preact-hotkeys-devtools/package.json
  • packages/react-hotkeys-devtools/package.json
  • packages/solid-hotkeys-devtools/package.json
  • packages/vue-hotkeys-devtools/package.json
💤 Files with no reviewable changes (1)
  • packages/hotkeys-devtools/src/HotkeysDevtools.tsx

'@tanstack/hotkeys-devtools': patch
---

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

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").

},
"dependencies": {
"@tanstack/devtools-utils": "^0.3.2",
"@tanstack/devtools-utils": "^0.4.0",
Copy link

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.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 16, 2026

Open in StackBlitz

@tanstack/angular-hotkeys

npm i https://pkg.pr.new/@tanstack/angular-hotkeys@67

@tanstack/hotkeys

npm i https://pkg.pr.new/@tanstack/hotkeys@67

@tanstack/hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/hotkeys-devtools@67

@tanstack/preact-hotkeys

npm i https://pkg.pr.new/@tanstack/preact-hotkeys@67

@tanstack/preact-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/preact-hotkeys-devtools@67

@tanstack/react-hotkeys

npm i https://pkg.pr.new/@tanstack/react-hotkeys@67

@tanstack/react-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/react-hotkeys-devtools@67

@tanstack/solid-hotkeys

npm i https://pkg.pr.new/@tanstack/solid-hotkeys@67

@tanstack/solid-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/solid-hotkeys-devtools@67

@tanstack/svelte-hotkeys

npm i https://pkg.pr.new/@tanstack/svelte-hotkeys@67

@tanstack/vue-hotkeys

npm i https://pkg.pr.new/@tanstack/vue-hotkeys@67

@tanstack/vue-hotkeys-devtools

npm i https://pkg.pr.new/@tanstack/vue-hotkeys-devtools@67

commit: 7654109

@KevinVandy KevinVandy merged commit 1f2eae6 into main Mar 16, 2026
5 checks passed
@github-actions github-actions bot mentioned this pull request Mar 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants