feat: extract theme provider

Author: harry-whorlow

.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,
@@ -118,7 +118,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/src/solid/class-mount-impl.tsx

@@ -2,6 +2,7 @@
 
 import { lazy } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
+
 import type { JSX } from 'solid-js'
 import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
@@ -13,19 +14,12 @@ export function __mountComponent(
   }>,
 ): () => 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={props.theme}>
-            <Component {...props} />
-          </ThemeProvider>
+          <Component {...props} />
         </div>
       </Portal>
     ),