Skip to content

feat(devtools): extract theme to devtool components#173

Open
harry-whorlow wants to merge 5 commits intomainfrom
extract-devtool-theme
Open

feat(devtools): extract theme to devtool components#173
harry-whorlow wants to merge 5 commits intomainfrom
extract-devtool-theme

Conversation

@harry-whorlow
Copy link
Collaborator

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

Moves devtool theme from the utils to the component to avoid the theme miss-match error we previously had.

Summary by CodeRabbit

  • Bug Fixes
    • Resolved theme mismatch in Pacer Devtools by moving theme handling into the component for consistent styling.
  • Improvements
    • Improved devtools initialization so the correct component module loads at runtime, enhancing reliability.
  • Chores
    • Released a patch version for pacer-devtools (changeset added).

@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Latest commit: 028d4b8

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

This PR includes changesets to release 4 packages
Name Type
@tanstack/pacer-devtools Patch
@tanstack/preact-pacer-devtools Patch
@tanstack/react-pacer-devtools Patch
@tanstack/solid-pacer-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

@harry-whorlow
Copy link
Collaborator Author

Do not merge until TanStack/devtools#386 is merged.

@nx-cloud
Copy link

nx-cloud bot commented Mar 12, 2026

View your CI Pipeline Execution ↗ for commit 028d4b8

Command Status Duration Result
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 9s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-16 10:00:49 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 12, 2026

More templates

@tanstack/angular-pacer

npm i https://pkg.pr.new/@tanstack/angular-pacer@173

@tanstack/pacer

npm i https://pkg.pr.new/@tanstack/pacer@173

@tanstack/pacer-devtools

npm i https://pkg.pr.new/@tanstack/pacer-devtools@173

@tanstack/pacer-lite

npm i https://pkg.pr.new/@tanstack/pacer-lite@173

@tanstack/preact-pacer

npm i https://pkg.pr.new/@tanstack/preact-pacer@173

@tanstack/preact-pacer-devtools

npm i https://pkg.pr.new/@tanstack/preact-pacer-devtools@173

@tanstack/react-pacer

npm i https://pkg.pr.new/@tanstack/react-pacer@173

@tanstack/react-pacer-devtools

npm i https://pkg.pr.new/@tanstack/react-pacer-devtools@173

@tanstack/solid-pacer

npm i https://pkg.pr.new/@tanstack/solid-pacer@173

@tanstack/solid-pacer-devtools

npm i https://pkg.pr.new/@tanstack/solid-pacer-devtools@173

commit: 028d4b8

@harry-whorlow harry-whorlow changed the title Extract devtool theme feat(devtools): extract theme to devtool components Mar 12, 2026
@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: a61f9074-4f66-4eca-bf1c-ebffbc37ae05

📥 Commits

Reviewing files that changed from the base of the PR and between e4605f6 and 028d4b8.

📒 Files selected for processing (2)
  • .changeset/long-corners-repair.md
  • packages/pacer-devtools/src/components/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • .changeset/long-corners-repair.md

📝 Walkthrough

Walkthrough

Move the devtools entrypoint to a new components module, adjust dynamic import to load ./components, rename the props interface, update relative imports for providers and Shell, and add a changeset marking a patch release for the theme move.

Changes

Cohort / File(s) Summary
Changeset
\.changeset/long-corners-repair.md
Add changeset for a patch release describing moving the devtools theme into the component to avoid theme mismatches.
Component entry & props
packages/pacer-devtools/src/components/index.tsx
Rename exported props interface (PacerDevtoolsDevtoolsProps), update default component signature to use DevtoolsProps, and adjust imports to ../PacerContextProvider and ./Shell.
Runtime import / core
packages/pacer-devtools/src/core.tsx
Change dynamic import target from ./PacerDevtools to ./components so the runtime loads the new components entrypoint.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through files and twitched my nose,
The theme now nests where the devtool grows,
Imports rerouted, props renamed with care,
A tidy move—soft fur and flair. 🥕✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description is minimal and does not follow the provided template structure; it lacks the required 'Changes' section detail, checklist completion, and release impact confirmation. Complete the PR description by filling out all template sections: detailed 'Changes' section, checking off the contributor checklist items, and confirming changeset generation status.
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.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: extracting/moving theme to devtool components, which matches the core refactoring work shown in the changeset and file modifications.

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

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch extract-devtool-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

You can disable the changed files summary in the walkthrough.

Disable the reviews.changed_files_summary setting to disable the changed files summary in the walkthrough.

@harry-whorlow harry-whorlow marked this pull request as ready for review March 16, 2026 09:49
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: 2

🤖 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/long-corners-repair.md:
- Line 5: Typo in the changeset description: find the exact string "miss-match"
and replace it with the correct spelling "mismatch" in the changeset text;
update the line containing "Moves devtools theme to the component to avoid theme
miss-match." so it reads "Moves devtools theme to the component to avoid theme
mismatch." and save the .changeset entry.

In `@packages/pacer-devtools/src/components/index.tsx`:
- Around line 1-6: Reorder the imports so external packages come before local
modules to satisfy import/order: move the ThemeContextProvider import from
'@tanstack/devtools-ui' above the relative imports (PacerContextProvider and
Shell); keep the type import DevtoolProps where appropriate (it can remain after
external imports or grouped with other external/type imports) and ensure imports
are grouped as: external packages first (e.g., ThemeContextProvider,
DevtoolProps), then local modules (PacerContextProvider, Shell).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ae5129b9-dcf6-4d08-9a9f-40491497f336

📥 Commits

Reviewing files that changed from the base of the PR and between 97c878a and e4605f6.

📒 Files selected for processing (3)
  • .changeset/long-corners-repair.md
  • packages/pacer-devtools/src/components/index.tsx
  • packages/pacer-devtools/src/core.tsx

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