feat: extract theme provider by harry-whorlow · Pull Request #386 · TanStack/devtools

harry-whorlow · 2026-03-12T18:46:49Z

Moves theme provider out of utils. Currently a mismatch of devtools and devtools utils will result in breaking an application. Relocating the theme provider to the respective devtools will stop these errors.

Summary by CodeRabbit

Bug Fixes
- Resolved theme mismatch issues by refactoring theme handling across devtools packages.
New Features
- Extracted theme utilities into a separate package for improved consistency and reliability.

changeset-bot · 2026-03-12T18:46:56Z

🦋 Changeset detected

Latest commit: cd63494

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

This PR includes changesets to release 7 packages

Name	Type
@tanstack/devtools-utils	Minor
@tanstack/devtools-ui	Patch
@tanstack/devtools	Patch
@tanstack/preact-devtools	Patch
@tanstack/react-devtools	Patch
@tanstack/solid-devtools	Patch
@tanstack/vue-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

nx-cloud · 2026-03-12T18:47:50Z

View your CI Pipeline Execution ↗ for commit cd63494

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:sherif,t...`	✅ Succeeded	21s	View ↗
`nx run-many --targets=build --exclude=examples/**`	✅ Succeeded	12s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-13 08:39:00 UTC

pkg-pr-new · 2026-03-12T18:48:05Z

More templates

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@386

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@386

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@386

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@386

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@386

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@386

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@386

@tanstack/preact-devtools

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

@tanstack/react-devtools

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

@tanstack/solid-devtools

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

@tanstack/vue-devtools

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

commit: a7dc23e

packages/devtools-utils/src/solid/class-mount-impl.tsx

harry-whorlow · 2026-03-12T21:49:45Z

packages/devtools-utils/src/solid/class.ts

 */
 export function constructCoreClass(
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  importFn: () => Promise<{ default: (props: DevtoolProps) => JSX.Element }>,


nts: perhaps make a generic extending DevtoolProps

coderabbitai · 2026-03-13T08:37:43Z

📝 Walkthrough

Walkthrough

Refactors theme architecture by renaming the Theme type to ThemeType across devtools-ui packages, extracting theme handling from devtools-utils. Updates component mounting to accept theme as a prop rather than wrapping with ThemeContextProvider. Bumps package versions accordingly.

Changes

Cohort / File(s)	Summary
Theme Type Rename `packages/devtools-ui/src/components/theme.tsx`, `packages/devtools-ui/src/index.ts`, `packages/devtools-ui/src/styles/use-styles.ts`	Renames the public `Theme` type to `ThemeType` throughout theme-related files and re-exports it as public API. Updates all related type signatures including `ThemeContextValue`, `ThemeContextProvider`, and `stylesFactory`.
Component Mount Restructuring `packages/devtools-utils/src/solid/class-mount-impl.tsx`, `packages/devtools-utils/src/solid/class.ts`	Changes theme passing mechanism from literal union type `'light' \| 'dark'` to `ThemeType`. Introduces `DevtoolProps` type and updates dynamic import signatures to pass theme directly as a component prop instead of wrapping with `ThemeContextProvider`.
Dependency & Versioning `.changeset/cyan-times-marry.md`, `packages/devtools-utils/package.json`	Creates changeset documenting version bumps (`@tanstack/devtools-utils` minor, `@tanstack/devtools-ui` patch). Updates `@tanstack/devtools-ui` dependency spec from `workspace:^` to `workspace:*` in devtools-utils.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A theme type, renamed with care,
No more Theme, just ThemeType fair!
Props now passed with lighter grace,
Devtools-ui finds its rightful place. 🎨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description clearly explains the motivation (preventing mismatch errors) but lacks the structured template sections including explicit checklist items and changeset confirmation required by the repository template.	Use the provided template structure: add 'Changes' section with detailed changes, mark checklist items, and confirm changeset generation for versioning.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.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 'feat: extract theme provider' directly describes the main change: moving the theme provider from devtools-utils to devtools package to prevent mismatch issues.

_{✏️ 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-theme-provider

📝 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 use OpenGrep to find security vulnerabilities and bugs across 17+ programming languages.

OpenGrep is compatible with Semgrep configurations. Add an opengrep.yml or semgrep.yml configuration file to your project to enable OpenGrep analysis.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/devtools-utils/src/solid/class.ts (1)

26-26: Consider using ThemeType for consistency.

The mount method uses the literal type 'light' | 'dark' while DevtoolProps uses ThemeType. For consistency and maintainability, consider using ThemeType here as well.

♻️ Suggested change

-    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+    async mount<T extends HTMLElement>(el: T, theme: ThemeType) {

And similarly on line 68:

-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
+    async mount<T extends HTMLElement>(_el: T, _theme: ThemeType) {}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-utils/src/solid/class.ts` at line 26, The mount method and
its other occurrences use the literal type 'light' | 'dark' instead of the
shared ThemeType; update the signature of async mount<T extends HTMLElement>(el:
T, theme: 'light' | 'dark') to use ThemeType, and replace any other literal
occurrences (e.g., the usage around line 68) with ThemeType so the code
consistently imports and references the same ThemeType used by DevtoolProps
(ensure ThemeType is imported where needed).

🤖 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/cyan-times-marry.md:
- Line 6: Typo in the changeset description: locate the changeset entry whose
summary reads "Extract devtools-ui from devtools-utils to avoid theme
miss-match" and correct the word "miss-match" to "mismatch" so the summary reads
"Extract devtools-ui from devtools-utils to avoid theme mismatch".

---

Nitpick comments:
In `@packages/devtools-utils/src/solid/class.ts`:
- Line 26: The mount method and its other occurrences use the literal type
'light' | 'dark' instead of the shared ThemeType; update the signature of async
mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') to use ThemeType,
and replace any other literal occurrences (e.g., the usage around line 68) with
ThemeType so the code consistently imports and references the same ThemeType
used by DevtoolProps (ensure ThemeType is imported where needed).

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f526506c-03ef-4c24-94d6-2fabe60212f9

📥 Commits

Reviewing files that changed from the base of the PR and between a120650 and cd63494.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

.changeset/cyan-times-marry.md
packages/devtools-ui/src/components/theme.tsx
packages/devtools-ui/src/index.ts
packages/devtools-ui/src/styles/use-styles.ts
packages/devtools-utils/bin/intent.js
packages/devtools-utils/package.json
packages/devtools-utils/src/solid/class-mount-impl.tsx
packages/devtools-utils/src/solid/class.ts

coderabbitai · 2026-03-13T09:24:34Z

.changeset/cyan-times-marry.md

+'@tanstack/devtools-ui': patch
+---
+
+Extract devtools-ui from devtools-utils to avoid theme miss-match


⚠️ Potential issue | 🟡 Minor

Typo in changeset description.

"miss-match" should be "mismatch".

-Extract devtools-ui from devtools-utils to avoid theme miss-match +Extract devtools-ui from devtools-utils 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

Extract devtools-ui from devtools-utils to avoid theme miss-match

Extract devtools-ui from devtools-utils to avoid theme mismatch

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In @.changeset/cyan-times-marry.md at line 6, Typo in the changeset description: locate the changeset entry whose summary reads "Extract devtools-ui from devtools-utils to avoid theme miss-match" and correct the word "miss-match" to "mismatch" so the summary reads "Extract devtools-ui from devtools-utils to avoid theme mismatch".

feat: extract theme provider

c233db1

harry-whorlow added 2 commits March 12, 2026 19:56

fix: sherif

a3ea8b3

chore: export theme type

2c03299

harry-whorlow force-pushed the extract-theme-provider branch from cddbb15 to 2c03299 Compare March 12, 2026 19:20

chore: share types

b3eb71c

This was referenced Mar 12, 2026

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

Draft

feat(devtools): extract theme to devtool components TanStack/form#2079

Draft

feat(devtools): extract theme to devtool components TanStack/ai#366

Draft

harry-whorlow commented Mar 12, 2026

View reviewed changes

packages/devtools-utils/src/solid/class-mount-impl.tsx Outdated Show resolved Hide resolved

harry-whorlow commented Mar 12, 2026

View reviewed changes

chore: change set

8048d9d

harry-whorlow marked this pull request as draft March 12, 2026 21:55

harry-whorlow force-pushed the extract-theme-provider branch from b0fb67b to 8048d9d Compare March 12, 2026 21:55

harry-whorlow and others added 2 commits March 13, 2026 09:35

fix: reuse types

9e62df2

ci: apply automated fixes

cd63494

harry-whorlow marked this pull request as ready for review March 13, 2026 09:18

coderabbitai bot reviewed Mar 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: extract theme provider#386

feat: extract theme provider#386
harry-whorlow wants to merge 7 commits intomainfrom
extract-theme-provider

harry-whorlow commented Mar 12, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

harry-whorlow Mar 12, 2026

Uh oh!

coderabbitai bot commented Mar 13, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	Extract devtools-ui from devtools-utils to avoid theme miss-match
	Extract devtools-ui from devtools-utils to avoid theme mismatch

Uh oh!

Conversation

harry-whorlow commented Mar 12, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nx-cloud bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

harry-whorlow Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

harry-whorlow commented Mar 12, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 12, 2026 •

edited

Loading

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 12, 2026 •

edited

Loading

coderabbitai bot commented Mar 13, 2026 •

edited

Loading