feat: extract theme provider (#386)

* feat: extract theme provider

* chore: export type

* chore: unify types

* fix:lock

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

examples/solid/devtools-ui/src/index.tsx

@@ -1,8 +1,9 @@
 import { createEffect, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
-
 import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'
 
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
 import './index.css'
 
 const JsonTreeDate = {
@@ -20,7 +21,7 @@ const JsonTreePath = {
 const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
 
 function App() {
-  const [theme, setTheme] = createSignal<'light' | 'dark'>(
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(
     darkThemeMq.matches ? 'dark' : 'light',
   )
 

packages/devtools-a11y/src/core/styles/styles.ts

@@ -2,6 +2,7 @@ import * as goober from 'goober'
 import { useTheme } from '@tanstack/devtools-ui'
 import { createMemo } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 import type { RuleCategory, SeverityThreshold } from '../types/types'
 
 const SEVERITY_COLORS: Record<SeverityThreshold, string> = {
@@ -49,7 +50,7 @@ const css = goober.css
 const FONT_SCALE = 1.1
 const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`
 
-function createA11yPanelStyles(theme: 'light' | 'dark') {
+function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   const bg = t('#f9fafb;', '#191c24')

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

@@ -1,5 +1,7 @@
 // import { Show, createUniqueId } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from './theme'
+
 /* export function Search() {
   return (
     <svg
@@ -39,7 +41,7 @@ export function Trash() {
     </svg>
   )
 } */
-/* 
+/*
 export function ChevronDown() {
   return (
     <svg
@@ -466,7 +468,7 @@ export function Link() {
     </svg>
   )
 }
-/* 
+/*
 
 export function Pencil() {
   return (
@@ -696,7 +698,7 @@ export function PiP() {
   )
 }
 
-export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
+export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
   return (
     <svg
       width="24"
@@ -735,7 +737,7 @@ export function ErrorCopier() {
     </svg>
   )
 }
-/* 
+/*
 export function List() {
   return (
     <svg
@@ -755,7 +757,7 @@ export function List() {
   )
 }
 
-export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
+export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme }) {
   return (
     <>
       <Show when={props.checked}>
@@ -884,7 +886,7 @@ export function PauseCircle() {
     </svg>
   )
 } */
-/* 
+/*
 export function TanstackLogo() {
   const id = createUniqueId()
   return (

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 TanStackDevtoolsTheme = 'light' | 'dark'
 
 type ThemeContextValue = {
-  theme: Accessor<Theme>
-  setTheme: (theme: Theme) => void
+  theme: Accessor<TanStackDevtoolsTheme>
+  setTheme: (theme: TanStackDevtoolsTheme) => void
 }
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export const ThemeContextProvider = (props: {
   children: JSX.Element
-  theme: Theme
+  theme: TanStackDevtoolsTheme
 }) => {
-  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(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 { TanStackDevtoolsTheme } from './components/theme'
 export {
   CheckCircleIcon,
   ChevronDownIcon,

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

@@ -2,8 +2,9 @@ import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
 import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
+
+import type { TanStackDevtoolsTheme } from '../components/theme'
 import type { ButtonVariant } from '../components/button'
-import type { Theme } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
@@ -118,7 +119,7 @@ const buttonVariantColors: Record<
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: Theme = 'dark') => {
+const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   const { colors, font, size, border } = tokens
   const { fontFamily } = font
 

packages/devtools-utils/package.json

@@ -72,9 +72,6 @@
   "engines": {
     "node": ">=18"
   },
-  "dependencies": {
-    "@tanstack/devtools-ui": "workspace:^"
-  },
   "devDependencies": {
     "@tanstack/devtools": "workspace:^",
     "tsup": "^8.5.0",

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>
     ),

packages/devtools/src/context/devtools-context.tsx

@@ -11,9 +11,10 @@ import {
 import { initialState } from './devtools-store'
 import type { DevtoolsStore } from './devtools-store'
 import type { JSX, Setter } from 'solid-js'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 
 export interface TanStackDevtoolsPluginProps {
-  theme: DevtoolsStore['settings']['theme']
+  theme: TanStackDevtoolsTheme
   devtoolsOpen: boolean
 }
 export interface TanStackDevtoolsPlugin {