feat: devtools setup

bart-krakowski · bart-krakowski · commit 63b149b7d7da · 2026-02-09T09:45:02.000+01:00
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -9,7 +9,9 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.9.5",
     "@tanstack/react-time": "^0.0.0",
+    "@tanstack/react-time-devtools": "^0.0.0",
     "@tanstack/time": "^0.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
diff --git a/examples/react/basic/src/index.tsx b/examples/react/basic/src/index.tsx
diff --git a/packages/react-time-devtools/package.json b/packages/react-time-devtools/package.json
@@ -48,6 +48,7 @@
     "src"
   ],
   "dependencies": {
+    "@tanstack/devtools-utils": "^0.3.0",
     "@tanstack/time-devtools": "workspace:*"
   },
   "devDependencies": {
@@ -56,7 +57,8 @@
     "@vitejs/plugin-react": "^5.1.2",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "react": "^19.2.3"
+    "react": "^19.2.3",
+    "solid-js": "^1.9.10"
   },
   "peerDependencies": {
     "react": ">=16.8",
diff --git a/packages/react-time-devtools/src/TimeDevtools.tsx b/packages/react-time-devtools/src/TimeDevtools.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react'
+import { TimeDevtoolsCore } from '@tanstack/time-devtools'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
+
+export interface TimeDevtoolsReactInit extends DevtoolsPanelProps {}
+
+function TimeDevtoolsPanel(props: TimeDevtoolsReactInit) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const devtoolsRef = useRef<InstanceType<typeof TimeDevtoolsCore> | null>(null)
+
+  useEffect(() => {
+    if (containerRef.current && !devtoolsRef.current) {
+      const devtools = new TimeDevtoolsCore()
+      devtoolsRef.current = devtools
+      devtools.mount(containerRef.current, props.theme ?? 'dark')
+    }
+
+    return () => {
+      if (devtoolsRef.current) {
+        devtoolsRef.current.unmount()
+        devtoolsRef.current = null
+      }
+    }
+  }, [props.theme])
+
+  return <div ref={containerRef} style={{ height: '100%' }} />
+}
+
+function TimeDevtoolsPanelNoOp(_props: TimeDevtoolsReactInit) {
+  return null
+}
+
+export { TimeDevtoolsPanel, TimeDevtoolsPanelNoOp }
diff --git a/packages/react-time-devtools/src/index.ts b/packages/react-time-devtools/src/index.ts
@@ -0,0 +1,19 @@
+'use client'
+
+import type { createSolidPanel } from '@tanstack/devtools-utils/solid'
+import * as Devtools from './TimeDevtools'
+import * as plugin from './plugin'
+
+type SolidPanelComponent = ReturnType<typeof createSolidPanel>[0]
+
+export const TimeDevtoolsPanel: SolidPanelComponent =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.TimeDevtoolsPanelNoOp
+    : Devtools.TimeDevtoolsPanel
+
+export const timeDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.timeDevtoolsNoOpPlugin
+    : plugin.timeDevtoolsPlugin
+
+export type { TimeDevtoolsReactInit } from './TimeDevtools'
diff --git a/packages/react-time-devtools/src/plugin.tsx b/packages/react-time-devtools/src/plugin.tsx
@@ -0,0 +1,11 @@
+import { createReactPlugin } from '@tanstack/devtools-utils/react'
+import { TimeDevtoolsPanel } from './TimeDevtools'
+
+const [timeDevtoolsPlugin, timeDevtoolsNoOpPlugin] = createReactPlugin({
+  Component: TimeDevtoolsPanel,
+  name: 'TanStack Time',
+  id: 'tanstack-time',
+  defaultOpen: true,
+})
+
+export { timeDevtoolsPlugin, timeDevtoolsNoOpPlugin }
diff --git a/packages/react-time-devtools/src/production.ts b/packages/react-time-devtools/src/production.ts
@@ -0,0 +1,7 @@
+'use client'
+
+export { TimeDevtoolsPanel } from './TimeDevtools'
+
+export type { TimeDevtoolsReactInit } from './TimeDevtools'
+
+export { TimeDevtoolsPlugin } from './plugin'
diff --git a/packages/solid-time-devtools/package.json b/packages/solid-time-devtools/package.json
@@ -48,6 +48,7 @@
     "src"
   ],
   "dependencies": {
+    "@tanstack/devtools-utils": "^0.3.0",
     "@tanstack/time-devtools": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/solid-time-devtools/src/TimeDevtools.tsx b/packages/solid-time-devtools/src/TimeDevtools.tsx
@@ -1,8 +1,10 @@
-import { template } from 'solid-js/web'
+import { createSolidPanel } from '@tanstack/devtools-utils/solid'
+import { TimeDevtoolsCore } from '@tanstack/time-devtools'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'
 
-const _tmpl$ = /* @__PURE__ */ template(`<div>Solid Time Devtools</div>`)
+const [TimeDevtoolsPanel, TimeDevtoolsPanelNoOp] =
+  createSolidPanel(TimeDevtoolsCore)
 
-export function TimeDevtools() {
-  console.log('Hello from @tanstack/solid-time-devtools!')
-  return _tmpl$()
-}
+export interface TimeDevtoolsSolidInit extends DevtoolsPanelProps {}
+
+export { TimeDevtoolsPanel, TimeDevtoolsPanelNoOp }
diff --git a/packages/solid-time-devtools/src/index.ts b/packages/solid-time-devtools/src/index.ts
@@ -1 +1,14 @@
-export * from './TimeDevtools'
+import * as Devtools from './TimeDevtools'
+import * as plugin from './plugin'
+
+export const TimeDevtools =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.TimeDevtoolsPanelNoOp
+    : Devtools.TimeDevtoolsPanel
+
+export const timeDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.timeDevtoolsNoOpPlugin
+    : plugin.timeDevtoolsPlugin
+
+export type { TimeDevtoolsSolidInit } from './TimeDevtools'
diff --git a/packages/solid-time-devtools/src/plugin.tsx b/packages/solid-time-devtools/src/plugin.tsx
@@ -0,0 +1,11 @@
+import { createSolidPlugin } from '@tanstack/devtools-utils/solid'
+import { TimeDevtoolsPanel } from './TimeDevtools'
+
+const [timeDevtoolsPlugin, timeDevtoolsNoOpPlugin] = createSolidPlugin({
+  Component: TimeDevtoolsPanel,
+  name: 'TanStack Time',
+  id: 'tanstack-time',
+  defaultOpen: true,
+})
+
+export { timeDevtoolsPlugin, timeDevtoolsNoOpPlugin }
diff --git a/packages/solid-time-devtools/src/production.ts b/packages/solid-time-devtools/src/production.ts
@@ -0,0 +1,5 @@
+export { TimeDevtoolsPanel } from './TimeDevtools'
+
+export type { TimeDevtoolsSolidInit } from './TimeDevtools'
+
+export { timeDevtoolsPlugin } from './plugin'
diff --git a/packages/time-devtools/package.json b/packages/time-devtools/package.json
@@ -48,6 +48,13 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/time": "workspace:*"
+    "@tanstack/devtools-ui": "^0.4.4",
+    "@tanstack/devtools-utils": "^0.3.0",
+    "@tanstack/time": "workspace:*",
+    "goober": "^2.1.18",
+    "solid-js": "^1.9.10"
+  },
+  "devDependencies": {
+    "rolldown-plugin-solid": "^0.2.1"
   }
 }
diff --git a/packages/time-devtools/src/components/Shell.tsx b/packages/time-devtools/src/components/Shell.tsx
@@ -0,0 +1,26 @@
+import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
+import { useStyles } from '../styles/use-styles'
+import { TimeProvider } from '../store/time-context'
+
+export default function Devtools() {
+  return (
+    <TimeProvider>
+      <DevtoolsContent />
+    </TimeProvider>
+  )
+}
+
+function DevtoolsContent() {
+  const styles = useStyles()
+  return (
+    <MainPanel>
+      <Header>
+        <HeaderLogo flavor={{ light: '#ec4899', dark: '#ec4899' }}>
+          TanStack Time
+        </HeaderLogo>
+      </Header>
+
+      <div class={styles().mainContainer}></div>
+    </MainPanel>
+  )
+}
diff --git a/packages/time-devtools/src/core.tsx b/packages/time-devtools/src/core.tsx
@@ -0,0 +1,10 @@
+import { lazy } from 'solid-js'
+import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+
+const Component = lazy(() => import('./components/Shell'))
+
+export interface TimeDevtoolsInit {}
+
+const [TimeDevtoolsCore, TimeDevtoolsCoreNoOp] = constructCoreClass(Component)
+
+export { TimeDevtoolsCore, TimeDevtoolsCoreNoOp }
diff --git a/packages/time-devtools/src/devtools.ts b/packages/time-devtools/src/devtools.ts
diff --git a/packages/time-devtools/src/index.ts b/packages/time-devtools/src/index.ts
@@ -1 +1,8 @@
-export * from './devtools'
+import * as Devtools from './core'
+
+export const TimeDevtoolsCore =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.TimeDevtoolsCoreNoOp
+    : Devtools.TimeDevtoolsCore
+
+export type { TimeDevtoolsInit } from './core'
diff --git a/packages/time-devtools/src/production.ts b/packages/time-devtools/src/production.ts
@@ -0,0 +1,3 @@
+export { TimeDevtoolsCore } from './core'
+
+export type { TimeDevtoolsInit } from './core'
diff --git a/packages/time-devtools/src/store/time-context.tsx b/packages/time-devtools/src/store/time-context.tsx
@@ -0,0 +1,36 @@
+import { createContext, useContext } from 'solid-js'
+import { createStore } from 'solid-js/store'
+import type { ParentComponent } from 'solid-js'
+
+interface TimeStoreState {}
+
+interface TimeContextValue {
+  state: TimeStoreState
+}
+
+const TimeContext = createContext<TimeContextValue>()
+
+export function useTimeStore(): TimeContextValue {
+  const context = useContext(TimeContext)
+  if (!context) {
+    throw new Error('useTimeStore must be used within an TimeProvider')
+  }
+  return context
+}
+
+export const TimeProvider: ParentComponent = (props) => {
+  const [state, setState] = createStore<TimeStoreState>({
+    conversations: {},
+    activeConversationId: null,
+  })
+
+  const contextValue: TimeContextValue = {
+    state,
+  }
+
+  return (
+    <TimeContext.Provider value={contextValue}>
+      {props.children}
+    </TimeContext.Provider>
+  )
+}
diff --git a/packages/time-devtools/src/styles/tokens.ts b/packages/time-devtools/src/styles/tokens.ts
diff --git a/packages/time-devtools/src/styles/use-styles.ts b/packages/time-devtools/src/styles/use-styles.ts
diff --git a/packages/time-devtools/tsconfig.json b/packages/time-devtools/tsconfig.json
diff --git a/packages/time-devtools/tsdown.config.ts b/packages/time-devtools/tsdown.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
