@tanstack/pacer-devtools 1.1.5 → 1.2.0

package/src/components/StateHeader.tsx

@@ -1,7 +1,12 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
-import { createSignal, onCleanup, onMount } from 'solid-js'
+import { Show, createSignal, onCleanup, onMount } from 'solid-js'
+import { useStore } from '@tanstack/solid-store'
 import { useStyles } from '../styles/use-styles'
+import {
+  getPacerUtilStoreState,
+  isPacerUtilTanStackStore,
+} from '../utils/read-pacer-store-state'
 
 dayjs.extend(relativeTime)
 
@@ -10,97 +15,122 @@ type StateHeaderProps = {
   utilState: () => { lastUpdatedByKey: Record<string, number> }
 }
 
-export function StateHeader(props: StateHeaderProps) {
-  const styles = useStyles()
-  const [now, setNow] = createSignal(Date.now())
+function reductionFromState(
+  entry: { type: string },
+  state: Record<string, unknown> | null | undefined,
+): number {
+  if (!state) return 0
+
+  const isAsync = entry.type.toLowerCase().includes('async')
+  const completedExecutions = isAsync
+    ? Number(state.settleCount) || 0
+    : Number(state.executionCount) || 0
+
+  if (entry.type.toLowerCase().includes('batcher')) {
+    const totalItemsProcessed = Number(state.totalItemsProcessed) || 0
+    if (totalItemsProcessed === 0) return 0
+    return Math.round(
+      ((totalItemsProcessed - completedExecutions) / totalItemsProcessed) * 100,
+    )
+  }
 
-  onMount(() => {
-    const interval = setInterval(() => {
-      setNow(Date.now())
-    }, 1000)
+  let requestCount = 0
 
-    onCleanup(() => {
-      clearInterval(interval)
-    })
-  })
+  if (state.maybeExecuteCount !== undefined) {
+    requestCount = Number(state.maybeExecuteCount) || 0
+  } else if (state.addItemCount !== undefined) {
+    requestCount = Number(state.addItemCount) || 0
+  } else {
+    return 0
+  }
+
+  if (requestCount === 0) return 0
 
-  const entry = props.selectedInstance()
-  if (!entry) return null
+  const reduction = requestCount - completedExecutions
+  return Math.round((reduction / requestCount) * 100)
+}
 
-  const key = entry.instance.key as string
-  const updatedAt = props.utilState().lastUpdatedByKey[key] ?? Date.now()
+function StateHeaderInner(props: {
+  entry: { instance: any; type: string }
+  styles: ReturnType<ReturnType<typeof useStyles>>
+  now: () => number
+  utilState: () => { lastUpdatedByKey: Record<string, number> }
+}) {
+  const key = props.entry.instance.key as string
+  const updatedAt = () => props.utilState().lastUpdatedByKey[key] ?? Date.now()
 
   const getRelativeTime = () => {
-    const diffMs = now() - updatedAt
+    const at = updatedAt()
+    const diffMs = props.now() - at
     const diffSeconds = Math.floor(diffMs / 1000)
 
     if (diffSeconds < 60) {
       return `${diffSeconds} second${diffSeconds !== 1 ? 's' : ''} ago`
     }
 
-    return dayjs(updatedAt).fromNow()
+    return dayjs(at).fromNow()
   }
 
-  const getReductionPercentage = () => {
-    const state = entry.instance.store?.state || entry.instance.state
-
-    if (!state) return 0
-
-    // Use settleCount for async utilities, executionCount for sync utilities
-    const isAsync = entry.type.toLowerCase().includes('async')
-    const completedExecutions = isAsync
-      ? state.settleCount || 0
-      : state.executionCount || 0
-
-    // For batchers, calculate reduction based on items processed vs executions
-    if (entry.type.toLowerCase().includes('batcher')) {
-      const totalItemsProcessed = state.totalItemsProcessed || 0
-      if (totalItemsProcessed === 0) return 0
-      return Math.round(
-        ((totalItemsProcessed - completedExecutions) / totalItemsProcessed) *
-          100,
+  const store = props.entry.instance?.store
+  const stateAccessor = isPacerUtilTanStackStore(store)
+    ? useStore(store as never, (s: unknown) =>
+        s !== null && s !== undefined && typeof s === 'object'
+          ? (s as Record<string, unknown>)
+          : {},
       )
-    }
-
-    // For other utilities, calculate reduction based on request tracking
-    let requestCount = 0
-
-    if (state.maybeExecuteCount !== undefined) {
-      requestCount = state.maybeExecuteCount
-    } else if (state.addItemCount !== undefined) {
-      requestCount = state.addItemCount
-    } else {
-      // For utilities that don't track requests, show 0%
-      return 0
-    }
-
-    if (requestCount === 0) return 0
-
-    const reduction = requestCount - completedExecutions
-    return Math.round((reduction / requestCount) * 100)
-  }
+    : () =>
+        getPacerUtilStoreState(props.entry.instance) as Record<string, unknown>
 
-  const reductionPercentage = getReductionPercentage()
+  const reductionPercentage = () =>
+    reductionFromState(props.entry, stateAccessor())
 
   return (
-    <div class={styles().stateHeader}>
-      <div class={styles().stateTitle}>{entry.type}</div>
+    <div class={props.styles.stateHeader}>
+      <div class={props.styles.stateTitle}>{props.entry.type}</div>
       <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
-        <div class={styles().infoGrid}>
-          <div class={styles().infoLabel}>Key</div>
-          <div class={styles().infoValueMono}>{key}</div>
-          <div class={styles().infoLabel}>Last Updated</div>
-          <div class={styles().infoValueMono}>
-            {new Date(updatedAt).toLocaleTimeString()} ({getRelativeTime()})
+        <div class={props.styles.infoGrid}>
+          <div class={props.styles.infoLabel}>Key</div>
+          <div class={props.styles.infoValueMono}>{key}</div>
+          <div class={props.styles.infoLabel}>Last Updated</div>
+          <div class={props.styles.infoValueMono}>
+            {new Date(updatedAt()).toLocaleTimeString()} ({getRelativeTime()})
           </div>
         </div>
         <div
-          class={styles().infoValueMono}
+          class={props.styles.infoValueMono}
           style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
         >
-          {reductionPercentage}% reduction
+          {reductionPercentage()}% reduction
         </div>
       </div>
     </div>
   )
 }
+
+export function StateHeader(props: StateHeaderProps) {
+  const styles = useStyles()
+  const [now, setNow] = createSignal(Date.now())
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now())
+    }, 1000)
+
+    onCleanup(() => {
+      clearInterval(interval)
+    })
+  })
+
+  return (
+    <Show when={props.selectedInstance()}>
+      {(entry) => (
+        <StateHeaderInner
+          entry={entry()}
+          styles={styles()}
+          now={now}
+          utilState={props.utilState}
+        />
+      )}
+    </Show>
+  )
+}

package/src/components/UtilStateJsonTree.tsx

@@ -0,0 +1,25 @@
+import { JsonTree } from '@tanstack/devtools-ui'
+import { useStore } from '@tanstack/solid-store'
+import {
+  getPacerUtilStoreState,
+  isPacerUtilTanStackStore,
+} from '../utils/read-pacer-store-state'
+import type { JSX } from 'solid-js'
+
+type UtilStateJsonTreeProps = {
+  instance: any
+}
+
+/**
+ * Subscribes to the util's TanStack Store so the tree updates live (same
+ * idea as {@link UtilList} status). A plain snapshot would only refresh when the
+ * devtools shell re-renders, which does not happen on nested store updates.
+ */
+export function UtilStateJsonTree(props: UtilStateJsonTreeProps): JSX.Element {
+  const store = props.instance?.store
+  if (isPacerUtilTanStackStore(store)) {
+    const snapshot = useStore(store as never, (s: unknown) => s)
+    return <JsonTree value={snapshot()} />
+  }
+  return <JsonTree value={getPacerUtilStoreState(props.instance)} />
+}

package/src/core.tsx

@@ -1,9 +1,9 @@
 import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+import type { ClassType } from '@tanstack/devtools-utils/solid'
 
 export interface PacerDevtoolsInit {}
 
-const [PacerDevtoolsCore, PacerDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./components'),
-)
+const coreClasses = constructCoreClass(() => import('./components'))
 
-export { PacerDevtoolsCore, PacerDevtoolsCoreNoOp }
+export const PacerDevtoolsCore: ClassType = coreClasses[0]
+export const PacerDevtoolsCoreNoOp: ClassType = coreClasses[1]

package/src/index.ts

@@ -2,7 +2,7 @@
 
 import * as Devtools from './core'
 
-export const PacerDevtoolsCore =
+export const PacerDevtoolsCore: typeof Devtools.PacerDevtoolsCore =
   process.env.NODE_ENV !== 'development'
     ? Devtools.PacerDevtoolsCoreNoOp
     : Devtools.PacerDevtoolsCore

package/src/styles/use-styles.ts

@@ -10,9 +10,30 @@ const stylesFactory = (theme: 'light' | 'dark') => {
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
+    /**
+     * Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
+     * gets a real flex height budget (not just height: 100% without a flex chain).
+     */
+    shellRoot: css`
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    `,
+    /** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
+    mainPanelShell: css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: hidden !important;
+    `,
     mainContainer: css`
       display: flex;
-      flex: 1;
+      flex: 1 1 0%;
       min-height: 0;
       overflow: hidden;
       padding: ${size[2]};

package/src/utils/read-pacer-store-state.ts

@@ -0,0 +1,33 @@
+/** TanStack Store (`@tanstack/store`) used by pacer utils. */
+export function isPacerUtilTanStackStore(x: unknown): x is {
+  subscribe: (cb: (s: unknown) => void) => { unsubscribe: () => void }
+  get: () => unknown
+} {
+  return (
+    typeof x === 'object' &&
+    x !== null &&
+    'subscribe' in x &&
+    typeof (x as { subscribe: unknown }).subscribe === 'function' &&
+    'get' in x &&
+    typeof (x as { get: unknown }).get === 'function'
+  )
+}
+
+/**
+ * Core pacer utils expose TanStack `Store` (`get()` / `state`). React hooks may
+ * also expose a reactive `state` field. Use this for devtools UI that needs a
+ * plain snapshot (e.g. JsonTree).
+ */
+export function getPacerUtilStoreState(instance: {
+  store?: { get?: () => unknown; state?: unknown }
+  state?: unknown
+}): unknown {
+  const store = instance.store
+  if (store && typeof store.get === 'function') {
+    return store.get()
+  }
+  if (store && store.state !== undefined) {
+    return store.state
+  }
+  return instance.state
+}