feat(devtools): extract theme to devtool components#366
feat(devtools): extract theme to devtool components#366harry-whorlow wants to merge 1 commit intomainfrom
Conversation
🦋 Changeset detectedLatest commit: f7e0eaf The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
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 |
📝 WalkthroughWalkthroughThe devtools theme management is relocated from a higher-level context to the component level by introducing a ThemeContextProvider wrapper. The Devtools component now accepts a theme prop, which is passed to the provider to prevent theme mismatches between the devtools and its content. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip You can customize the high-level summary generated by CodeRabbit.Configure the |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:sherif,test:knip,tes... |
❌ Failed | 16s | View ↗ |
nx run-many --targets=build --exclude=examples/** |
❌ Failed | 7s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-03-12 21:19:33 UTC
|
do note merge till TanStack/devtools#386 is merged, it won't build anyways 😄... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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/moody-wings-type.md:
- Line 5: Replace the typo "miss-match" with the correct single-word "mismatch"
in the changeset text (search for the string "miss-match" in
.changeset/moody-wings-type.md and update it to "mismatch") so the sentence
reads "Moves devtools theme to the component to avoid theme mismatch."
In `@packages/typescript/ai-devtools/src/components/Shell.tsx`:
- Around line 1-6: The named imports from 'solid-js' are not in the order
required by the sort-imports rule; reorder the import specifiers so they are
alphabetically sorted (adjust the placement of ThemeContextProvider among
createSignal, onCleanup and onMount) so the import list in Shell.tsx satisfies
the linter.
- Around line 5-7: The import of ThemeContextProvider from 'solid-js' is
invalid; remove ThemeContextProvider from the solid-js import list and either
import the actual provider from its correct package (e.g., the real source or a
package like `@solid-primitives/context`) or create a local provider using
createContext() and export a ThemeContextProvider wrapper used by the Shell
component; update any usage of ThemeContextProvider in this file to the newly
imported/defined provider so the build no longer fails.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: af840485-8d5a-4699-852f-dc1fb9e8dbfb
📒 Files selected for processing (2)
.changeset/moody-wings-type.mdpackages/typescript/ai-devtools/src/components/Shell.tsx
| '@tanstack/ai-devtools-core': patch | ||
| --- | ||
|
|
||
| Moves devtools theme to the component to avoid theme miss-match. |
There was a problem hiding this comment.
Fix typo: "miss-match" should be "mismatch".
The word should be "mismatch" (one word, no hyphen).
📝 Proposed 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.
| 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/moody-wings-type.md at line 5, Replace the typo "miss-match" with
the correct single-word "mismatch" in the changeset text (search for the string
"miss-match" in .changeset/moody-wings-type.md and update it to "mismatch") so
the sentence reads "Moves devtools theme to the component to avoid theme
mismatch."
| import { | ||
| createSignal, | ||
| onCleanup, | ||
| onMount, | ||
| ThemeContextProvider, | ||
| } from 'solid-js' |
There was a problem hiding this comment.
Fix import member ordering to clear lint failure.
ThemeContextProvider placement in the named import list violates sort-imports and will keep lint red.
Proposed fix
import {
+ ThemeContextProvider,
createSignal,
onCleanup,
onMount,
- ThemeContextProvider,
} from 'solid-js'📝 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.
| import { | |
| createSignal, | |
| onCleanup, | |
| onMount, | |
| ThemeContextProvider, | |
| } from 'solid-js' | |
| import { | |
| ThemeContextProvider, | |
| createSignal, | |
| onCleanup, | |
| onMount, | |
| } from 'solid-js' |
🧰 Tools
🪛 ESLint
[error] 5-5: Member 'ThemeContextProvider' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/typescript/ai-devtools/src/components/Shell.tsx` around lines 1 - 6,
The named imports from 'solid-js' are not in the order required by the
sort-imports rule; reorder the import specifiers so they are alphabetically
sorted (adjust the placement of ThemeContextProvider among createSignal,
onCleanup and onMount) so the import list in Shell.tsx satisfies the linter.
| ThemeContextProvider, | ||
| } from 'solid-js' | ||
| import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate all uses/imports of ThemeContextProvider
rg -n -C3 '\bThemeContextProvider\b' packages
# Locate exports/definitions to confirm owning module
rg -n -C3 'export .*ThemeContextProvider|const ThemeContextProvider|function ThemeContextProvider' packagesRepository: TanStack/ai
Length of output: 1548
🏁 Script executed:
# Check what's exported from `@tanstack/devtools-ui` package
rg -n 'export.*ThemeContextProvider|export.*from.*theme' packages/typescript/ai-devtools -A2 -B2
# Check the actual devtools-ui index or main export files
fd -e ts -e tsx -e js packages/typescript/ai-devtools/node_modules/@tanstack/devtools-ui 2>/dev/null | head -20
# Try to find the devtools-ui package.json or exports
find packages -name 'package.json' -path '*devtools-ui*' 2>/dev/nullRepository: TanStack/ai
Length of output: 37
🌐 Web query:
solid-js ThemeContextProvider export
💡 Result:
solid-js does not export a built-in ThemeContextProvider. In Solid, you create a context with createContext(), and the returned context object contains a .Provider component you use in your own exported provider. (docs.solidjs.com)
// theme-context.ts
import { createContext, useContext, type ParentComponent } from "solid-js";
type ThemeCtx = { theme: () => "light" | "dark"; setTheme: (t: "light" | "dark") => void };
const ThemeContext = createContext<ThemeCtx>();
export const ThemeProvider: ParentComponent<{ value: ThemeCtx }> = (props) => (
<ThemeContext.Provider value={props.value}>
{props.children}
</ThemeContext.Provider>
);
export const useTheme = () => useContext(ThemeContext);If what you want is a ready-made “export both provider + hook” helper, @solid-primitives/context provides createContextProvider(), which returns a Provider component plus a useContext helper you can export. (primitives.solidjs.community)
Citations:
- 1: https://docs.solidjs.com/reference/component-apis/create-context?utm_source=openai
- 2: https://primitives.solidjs.community/package/context/?utm_source=openai
Remove ThemeContextProvider from solid-js import—it does not exist in that package.
solid-js only exports createContext() for creating provider components, not a ready-made ThemeContextProvider. This import will fail at build time. The component needs to be either imported from its actual source (likely a local file or @solid-primitives/context) or defined locally using createContext().
🧰 Tools
🪛 ESLint
[error] 5-5: Member 'ThemeContextProvider' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/typescript/ai-devtools/src/components/Shell.tsx` around lines 5 - 7,
The import of ThemeContextProvider from 'solid-js' is invalid; remove
ThemeContextProvider from the solid-js import list and either import the actual
provider from its correct package (e.g., the real source or a package like
`@solid-primitives/context`) or create a local provider using createContext() and
export a ThemeContextProvider wrapper used by the Shell component; update any
usage of ThemeContextProvider in this file to the newly imported/defined
provider so the build no longer fails.
1 participant
Moves devtool theme from the utils to the component to avoid the theme miss-match error.
Summary by CodeRabbit
New Features
Bug Fixes