@tanstack/pacer-devtools 1.1.5 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/pacer-devtools",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -73,17 +73,17 @@
   "dependencies": {
     "@tanstack/devtools-ui": "0.5.1",
     "@tanstack/devtools-utils": "^0.4.0",
-    "@tanstack/solid-store": "^0.8.1",
+    "@tanstack/solid-store": "^0.9.2",
     "clsx": "^2.1.1",
-    "csstype": "^3.0.10",
-    "dayjs": "^1.11.19",
+    "csstype": "^3.2.3",
+    "dayjs": "^1.11.20",
     "goober": "^2.1.18",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.21.1",
-    "vite-plugin-solid": "^2.11.10"
+    "tsdown": "^0.21.4",
+    "vite-plugin-solid": "^2.11.11"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/PacerContextProvider.tsx

@@ -1,6 +1,9 @@
-import { createStore } from 'solid-js/store'
+import { createStore, produce } from 'solid-js/store'
 import { createContext, createEffect, onCleanup, useContext } from 'solid-js'
-import { pacerEventClient } from '@tanstack/pacer/event-client'
+import {
+  getPacerDevtoolsInstance,
+  pacerEventClient,
+} from '@tanstack/pacer/event-client'
 import type {
   AsyncBatcher,
   AsyncDebouncer,
@@ -9,6 +12,7 @@ import type {
   AsyncThrottler,
   Batcher,
   Debouncer,
+  PacerEventName,
   Queuer,
   RateLimiter,
   Throttler,
@@ -49,18 +53,62 @@ const PacerDevtoolsContext = createContext<
   ]
 >([initialPacerDevtoolsStore, () => {}])
 
-const updateOrAddToArray = <T extends { key: string }>(
-  oldArray: Array<T>,
-  newItem: T,
-) => {
-  const index = oldArray.findIndex((item) => item.key === newItem.key)
-  if (index !== -1) {
-    // Update existing item
-    return oldArray.map((item, i) => (i === index ? newItem : item))
-  }
-  // Add new item
-  return [...oldArray, newItem]
-}
+type UtilListKey = Exclude<keyof PacerDevtoolsContextType, 'lastUpdatedByKey'>
+
+/**
+ * Match TanStack Form devtools: subscribe with {@link pacerEventClient.on} per
+ * event suffix so the same `pacer:${suffix}` channel the library emits on is
+ * observed. `onAllPluginEvents` only sees `tanstack-devtools-global`, which is
+ * not always relayed the same way by the shell.
+ *
+ * `d-*` suffixes are used when the devtools panel pushes state back (see
+ * ActionButtons); those must update the panel store too.
+ */
+const PACER_DEVTOOLS_UTIL_EVENTS: Array<{
+  listKey: UtilListKey
+  suffixes: ReadonlyArray<PacerEventName>
+}> = [
+  {
+    listKey: 'asyncBatchers',
+    suffixes: ['AsyncBatcher', 'd-AsyncBatcher'],
+  },
+  {
+    listKey: 'asyncDebouncers',
+    suffixes: ['AsyncDebouncer', 'd-AsyncDebouncer'],
+  },
+  {
+    listKey: 'asyncQueuers',
+    suffixes: ['AsyncQueuer', 'd-AsyncQueuer'],
+  },
+  {
+    listKey: 'asyncRateLimiters',
+    suffixes: ['AsyncRateLimiter', 'd-AsyncRateLimiter'],
+  },
+  {
+    listKey: 'asyncThrottlers',
+    suffixes: ['AsyncThrottler', 'd-AsyncThrottler'],
+  },
+  {
+    listKey: 'batchers',
+    suffixes: ['Batcher', 'd-Batcher'],
+  },
+  {
+    listKey: 'debouncers',
+    suffixes: ['Debouncer', 'd-Debouncer'],
+  },
+  {
+    listKey: 'queuers',
+    suffixes: ['Queuer', 'd-Queuer'],
+  },
+  {
+    listKey: 'rateLimiters',
+    suffixes: ['RateLimiter', 'd-RateLimiter'],
+  },
+  {
+    listKey: 'throttlers',
+    suffixes: ['Throttler', 'd-Throttler'],
+  },
+]
 
 export function PacerContextProvider(props: { children: any }) {
   const [store, setStore] = createStore<PacerDevtoolsContextType>(
@@ -68,121 +116,42 @@ export function PacerContextProvider(props: { children: any }) {
   )
 
   createEffect(() => {
-    const cleanup = pacerEventClient.onAllPluginEvents((_e) => {
-      const e = _e as unknown as { type: string; payload: any }
-      switch (e.type) {
-        case 'pacer:AsyncBatcher': {
-          setStore({
-            asyncBatchers: updateOrAddToArray(store.asyncBatchers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:AsyncDebouncer': {
-          setStore({
-            asyncDebouncers: updateOrAddToArray(
-              store.asyncDebouncers,
-              e.payload,
-            ),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:AsyncQueuer': {
-          setStore({
-            asyncQueuers: updateOrAddToArray(store.asyncQueuers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:AsyncRateLimiter': {
-          setStore({
-            asyncRateLimiters: updateOrAddToArray(
-              store.asyncRateLimiters,
-              e.payload,
-            ),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:AsyncThrottler': {
-          setStore({
-            asyncThrottlers: updateOrAddToArray(
-              store.asyncThrottlers,
-              e.payload,
-            ),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:Batcher': {
-          setStore({
-            batchers: updateOrAddToArray(store.batchers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:Debouncer': {
-          setStore({
-            debouncers: updateOrAddToArray(store.debouncers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:Queuer': {
-          setStore({
-            queuers: updateOrAddToArray(store.queuers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:RateLimiter': {
-          setStore({
-            rateLimiters: updateOrAddToArray(store.rateLimiters, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
-        case 'pacer:Throttler': {
-          setStore({
-            throttlers: updateOrAddToArray(store.throttlers, e.payload),
-            lastUpdatedByKey: {
-              ...store.lastUpdatedByKey,
-              [e.payload.key]: Date.now(),
-            },
-          })
-          break
-        }
+    const cleanups: Array<() => void> = []
+
+    for (const { listKey, suffixes } of PACER_DEVTOOLS_UTIL_EVENTS) {
+      for (const suffix of suffixes) {
+        cleanups.push(
+          pacerEventClient.on(suffix, (e) => {
+            const payload = e.payload
+            const key = payload.key
+            if (!key) return
+
+            const instance = getPacerDevtoolsInstance(key)
+            if (!instance || typeof instance !== 'object') return
+
+            setStore(
+              produce((draft) => {
+                const list = draft[listKey] as Array<{ key: string }>
+                const index = list.findIndex((item) => item.key === key)
+                const inst = instance as { key: string }
+                if (index !== -1) {
+                  list[index] = inst as (typeof list)[number]
+                } else {
+                  list.push(inst as (typeof list)[number])
+                }
+                draft.lastUpdatedByKey[key] = Date.now()
+              }),
+            )
+          }),
+        )
+      }
+    }
+
+    onCleanup(() => {
+      for (const cleanup of cleanups) {
+        cleanup()
       }
     })
-    onCleanup(cleanup)
   })
   return (
     <PacerDevtoolsContext.Provider value={[store, setStore]}>

package/src/components/ActionButtons.tsx

@@ -1,5 +1,10 @@
-import { pacerEventClient } from '@tanstack/pacer'
+import { emitChange } from '@tanstack/pacer'
+import { useStore } from '@tanstack/solid-store'
 import { useStyles } from '../styles/use-styles'
+import {
+  getPacerUtilStoreState,
+  isPacerUtilTanStackStore,
+} from '../utils/read-pacer-store-state'
 import type { PacerEventName } from '@tanstack/pacer'
 
 type ActionButtonsProps = {
@@ -10,11 +15,30 @@ type ActionButtonsProps = {
 export function ActionButtons(props: ActionButtonsProps) {
   const styles = useStyles()
   const utilInstance = props.instance
-  const utilState = utilInstance?.store?.state
-  const hasPending = utilState && 'isPending' in utilState
-  const hasEmpty = utilState && 'isEmpty' in utilState
-  const isPending = hasPending ? !!utilState.isPending : false
-  const isEmpty = hasEmpty ? utilState.isEmpty : undefined
+  const store = utilInstance?.store
+
+  const stateAccessor = isPacerUtilTanStackStore(store)
+    ? useStore(store as never, (s: unknown) =>
+        s !== null && s !== undefined && typeof s === 'object'
+          ? (s as Record<string, unknown>)
+          : {},
+      )
+    : () => getPacerUtilStoreState(utilInstance) as Record<string, unknown>
+
+  const getState = () => stateAccessor()
+
+  const hasPending = () => {
+    const u = getState()
+    return 'isPending' in u
+  }
+  const isPending = () => {
+    const u = getState()
+    return 'isPending' in u ? !!u.isPending : false
+  }
+  const isEmptyFlag = () => {
+    const u = getState()
+    return 'isEmpty' in u ? !!u.isEmpty : false
+  }
 
   const hasFlush = typeof utilInstance.flush === 'function'
   const hasCancel = typeof utilInstance.cancel === 'function'
@@ -24,9 +48,12 @@ export function ActionButtons(props: ActionButtonsProps) {
   const hasStop = typeof utilInstance.stop === 'function'
   const hasStartStop = hasStart && hasStop
 
-  const isRunning = utilState?.isRunning ?? true
+  const isRunning = () => {
+    const u = getState()
+    return 'isRunning' in u ? !!u.isRunning : true
+  }
 
-  if (!hasPending && !hasFlush && !hasCancel && !hasReset && !hasClear) {
+  if (!hasPending() && !hasFlush && !hasCancel && !hasReset && !hasClear) {
     return (
       <div class={styles().sectionEmpty}>
         No actions available for this util
@@ -35,23 +62,24 @@ export function ActionButtons(props: ActionButtonsProps) {
   }
 
   const emitName = `d-${props.utilName}` as PacerEventName
+  const utilNameLower = props.utilName.toLowerCase()
 
   return (
     <div class={styles().actionsRow}>
-      {hasPending && (
+      {hasPending() && (
         <button
           class={styles().actionButton}
           onMouseDown={() => {
-            const next = !isPending
+            const next = !isPending()
             utilInstance.store.setState((prev: any) => ({
               ...prev,
               isPending: next,
             }))
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
         >
           <span class={styles().actionDotBlue} />
-          {isPending ? 'Restore Pending' : 'Trigger Pending'}
+          {isPending() ? 'Restore Pending' : 'Trigger Pending'}
         </button>
       )}
       {hasFlush && (
@@ -59,15 +87,13 @@ export function ActionButtons(props: ActionButtonsProps) {
           class={styles().actionButton}
           onMouseDown={() => {
             utilInstance.flush()
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
           disabled={
-            (props.utilName.toLowerCase().includes('debouncer') &&
-              !isPending) ||
-            (props.utilName.toLowerCase().includes('throttler') &&
-              !isPending) ||
-            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||
-            (props.utilName.toLowerCase().includes('queuer') && isEmpty)
+            (utilNameLower.includes('debouncer') && !isPending()) ||
+            (utilNameLower.includes('throttler') && !isPending()) ||
+            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
+            (utilNameLower.includes('queuer') && isEmptyFlag())
           }
         >
           <span class={styles().actionDotGreen} />
@@ -79,15 +105,13 @@ export function ActionButtons(props: ActionButtonsProps) {
           class={styles().actionButton}
           onMouseDown={() => {
             utilInstance.cancel()
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
           disabled={
-            (props.utilName.toLowerCase().includes('debouncer') &&
-              !isPending) ||
-            (props.utilName.toLowerCase().includes('throttler') &&
-              !isPending) ||
-            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||
-            (props.utilName.toLowerCase().includes('queuer') && isEmpty)
+            (utilNameLower.includes('debouncer') && !isPending()) ||
+            (utilNameLower.includes('throttler') && !isPending()) ||
+            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
+            (utilNameLower.includes('queuer') && isEmptyFlag())
           }
         >
           <span class={styles().actionDotRed} />
@@ -99,7 +123,7 @@ export function ActionButtons(props: ActionButtonsProps) {
           class={styles().actionButton}
           onMouseDown={() => {
             utilInstance.reset()
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
         >
           <span class={styles().actionDotYellow} />
@@ -111,11 +135,11 @@ export function ActionButtons(props: ActionButtonsProps) {
           class={styles().actionButton}
           onMouseDown={() => {
             utilInstance.clear()
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
           disabled={
-            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||
-            (props.utilName.toLowerCase().includes('queuer') && isEmpty)
+            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
+            (utilNameLower.includes('queuer') && isEmptyFlag())
           }
         >
           <span class={styles().actionDotOrange} />
@@ -126,16 +150,16 @@ export function ActionButtons(props: ActionButtonsProps) {
         <button
           class={styles().actionButton}
           onMouseDown={() => {
-            if (isRunning) {
+            if (isRunning()) {
               utilInstance.stop()
             } else {
               utilInstance.start()
             }
-            pacerEventClient.emit(emitName, utilInstance)
+            emitChange(emitName, utilInstance)
           }}
         >
           <span class={styles().actionDotPurple} />
-          {isRunning ? 'Stop' : 'Start'}
+          {isRunning() ? 'Stop' : 'Start'}
         </button>
       )}
     </div>

package/src/components/DetailsPanel.tsx

@@ -2,6 +2,7 @@ import { JsonTree } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { ActionButtons } from './ActionButtons'
 import { StateHeader } from './StateHeader'
+import { UtilStateJsonTree } from './UtilStateJsonTree'
 
 type DetailsPanelProps = {
   selectedInstance: () => { instance: any; type: string } | null
@@ -42,7 +43,7 @@ export function DetailsPanel(props: DetailsPanelProps) {
               <div class={styles().detailSection}>
                 <div class={styles().detailSectionHeader}>State</div>
                 <div class={styles().stateContent}>
-                  <JsonTree value={entry.instance.store?.state as unknown} />
+                  <UtilStateJsonTree instance={entry.instance} />
                 </div>
               </div>
 

package/src/components/Shell.tsx

@@ -1,4 +1,10 @@
-import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+} from 'solid-js'
 import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { usePacerDevtoolsState } from '../PacerContextProvider'
@@ -7,6 +13,23 @@ import { UtilList } from './UtilList'
 import { DetailsPanel } from './DetailsPanel'
 import type { StateKey } from './util-groups'
 
+function readResizeObserverBlockSize(entry: ResizeObserverEntry): number {
+  const [box] = entry.borderBoxSize
+  if (box !== undefined) return box.blockSize
+  return entry.contentRect.height
+}
+
+/** Outer plugin slot from TanStack Devtools (not the inner React mount div, which can report a tiny height). */
+function resolvePluginHost(el: HTMLElement): HTMLElement | null {
+  const byId = el.closest<HTMLElement>('[id^="plugin-container-"]')
+  if (byId) return byId
+  return (
+    el.parentElement?.parentElement?.parentElement ??
+    el.parentElement?.parentElement ??
+    el.parentElement
+  )
+}
+
 export function Shell() {
   const styles = useStyles()
   const state = usePacerDevtoolsState()
@@ -14,6 +37,12 @@ export function Shell() {
   const [selectedKey, setSelectedKey] = createSignal<string | null>(null)
   const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)
   const [isDragging, setIsDragging] = createSignal(false)
+  const [shellRootEl, setShellRootEl] = createSignal<HTMLDivElement | null>(
+    null,
+  )
+  const [slotHeightPx, setSlotHeightPx] = createSignal<number | undefined>(
+    undefined,
+  )
 
   const selectedInstance = createMemo(() => {
     const key = selectedKey()
@@ -65,43 +94,83 @@ export function Shell() {
     document.removeEventListener('mouseup', handleMouseUp)
   })
 
+  /**
+   * TanStack Devtools plugin slots use height: 100% without min-height: 0 on flex
+   * ancestors, so percentage height often never constrains our tree. Observing the
+   * outer `plugin-container-*` host (not the immediate React mount wrapper) and
+   * setting an explicit pixel height makes inner overflow-y regions scroll without
+   * capping to the mount div’s collapsed height.
+   */
+  createEffect(() => {
+    const el = shellRootEl()
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const pluginSlot = resolvePluginHost(el)
+    if (!pluginSlot) return
+
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const target = entry.target as HTMLElement
+      const h =
+        target.clientHeight > 0
+          ? target.clientHeight
+          : readResizeObserverBlockSize(entry)
+      if (h > 0) setSlotHeightPx(Math.round(h))
+    })
+    ro.observe(pluginSlot)
+    onCleanup(() => ro.disconnect())
+  })
+
   return (
-    <MainPanel>
-      <Header>
-        <HeaderLogo flavor={{ light: '#84cc16', dark: '#84cc16' }}>
-          TanStack Pacer
-        </HeaderLogo>
-      </Header>
-
-      <div class={styles().mainContainer}>
-        <div
-          class={styles().leftPanel}
-          style={{
-            width: `${leftPanelWidth()}px`,
-            'min-width': '150px',
-            'max-width': '800px',
-          }}
-        >
-          <UtilList
-            selectedKey={selectedKey}
-            setSelectedKey={setSelectedKey}
-            utilState={utilState}
-          />
-        </div>
+    <div
+      ref={setShellRootEl}
+      class={styles().shellRoot}
+      style={{
+        ...(slotHeightPx() !== undefined
+          ? {
+              height: `${slotHeightPx()}px`,
+              'max-height': `${slotHeightPx()}px`,
+            }
+          : {}),
+      }}
+    >
+      <MainPanel class={styles().mainPanelShell}>
+        <Header>
+          <HeaderLogo flavor={{ light: '#84cc16', dark: '#84cc16' }}>
+            TanStack Pacer
+          </HeaderLogo>
+        </Header>
 
-        <div
-          class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}
-          onMouseDown={handleMouseDown}
-        />
+        <div class={styles().mainContainer}>
+          <div
+            class={styles().leftPanel}
+            style={{
+              width: `${leftPanelWidth()}px`,
+              'min-width': '150px',
+              'max-width': '800px',
+            }}
+          >
+            <UtilList
+              selectedKey={selectedKey}
+              setSelectedKey={setSelectedKey}
+              utilState={utilState}
+            />
+          </div>
 
-        <div class={styles().rightPanel} style={{ flex: 1 }}>
-          <div class={styles().panelHeader}>Details</div>
-          <DetailsPanel
-            selectedInstance={selectedInstance}
-            utilState={utilState}
+          <div
+            class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}
+            onMouseDown={handleMouseDown}
           />
+
+          <div class={styles().rightPanel} style={{ flex: 1 }}>
+            <div class={styles().panelHeader}>Details</div>
+            <DetailsPanel
+              selectedInstance={selectedInstance}
+              utilState={utilState}
+            />
+          </div>
         </div>
-      </div>
-    </MainPanel>
+      </MainPanel>
+    </div>
   )
 }