feat: extract theme provider

.changeset/cyan-times-marry.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-utils': minor
+'@tanstack/devtools-ui': patch
+---
+
+Extract devtools-ui from devtools-utils to avoid theme miss-match

packages/devtools-ui/src/components/theme.tsx

@@ -1,19 +1,19 @@
 import { createContext, createEffect, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
-export type Theme = 'light' | 'dark'
+export type ThemeType = 'light' | 'dark'
 
 type ThemeContextValue = {
-  theme: Accessor<Theme>
-  setTheme: (theme: Theme) => void
+  theme: Accessor<ThemeType>
+  setTheme: (theme: ThemeType) => void
 }
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export const ThemeContextProvider = (props: {
   children: JSX.Element
-  theme: Theme
+  theme: ThemeType
 }) => {
-  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  const [theme, setTheme] = createSignal<ThemeType>(props.theme)
   createEffect(() => {
     setTheme(props.theme)
   })

packages/devtools-ui/src/index.ts

@@ -14,6 +14,7 @@ export {
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
 export { useTheme, ThemeContextProvider } from './components/theme'
+export type { ThemeType } from './components/theme'
 export {
   CheckCircleIcon,
   ChevronDownIcon,

packages/devtools-ui/src/styles/use-styles.ts

@@ -3,7 +3,7 @@ import { createEffect, createSignal } from 'solid-js'
 import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
 import type { ButtonVariant } from '../components/button'
-import type { Theme } from '../components/theme'
+import type { ThemeType } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
@@ -53,7 +53,7 @@ const buttonVariantColors: Record<
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: Theme = 'dark') => {
+const stylesFactory = (theme: ThemeType = 'dark') => {
   const { colors, font, size, border } = tokens
   const { fontFamily } = font
 

packages/devtools-utils/package.json

@@ -73,7 +73,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "workspace:^"
+    "@tanstack/devtools-ui": "workspace:*"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",

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

@@ -2,27 +2,24 @@
 
 import { lazy } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
+
 import type { JSX } from 'solid-js'
+import type { ThemeType } from '@tanstack/devtools-ui'
 
 export function __mountComponent(
   el: HTMLElement,
-  theme: 'light' | 'dark',
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  theme: ThemeType,
+  importFn: () => Promise<{
+    default: (props: { theme: ThemeType }) => JSX.Element
+  }>,
 ): () => void {
   const Component = lazy(importFn)
-  const ThemeProvider = lazy(() =>
-    import('@tanstack/devtools-ui').then((m) => ({
-      default: m.ThemeContextProvider,
-    })),
-  )
 
   return render(
     () => (
       <Portal mount={el}>
         <div style={{ height: '100%' }}>
-          <ThemeProvider theme={theme}>
-            <Component />
-          </ThemeProvider>
+          <Component theme={theme} />
         </div>
       </Portal>
     ),

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

@@ -1,5 +1,8 @@
+import type { ThemeType } from '@tanstack/devtools-ui'
 import type { JSX } from 'solid-js'
 
+export type DevtoolProps = { theme: ThemeType }
+
 /**
  * Constructs the core class for the Devtools.
  * This utility is used to construct a lazy loaded Solid component for the Devtools.
@@ -10,7 +13,7 @@ import type { JSX } from 'solid-js'
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
 export function constructCoreClass(
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  importFn: () => Promise<{ default: (props: DevtoolProps) => JSX.Element }>,
 ) {
   class DevtoolsCore {
     #isMounted = false