@tanstack/pacer-devtools 1.3.1 → 1.5.0

package/src/components/ActionButtons.tsx

@@ -1,170 +0,0 @@
-import { emitChange } from '@tanstack/pacer'
-import { shallow, useSelector } 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 = {
-  instance: any
-  utilName: string
-}
-
-export function ActionButtons(props: ActionButtonsProps) {
-  const styles = useStyles()
-  const utilInstance = props.instance
-  const store = utilInstance?.store
-
-  const stateAccessor = isPacerUtilTanStackStore(store)
-    ? useSelector(
-        store as never,
-        (s: unknown) =>
-          s !== null && s !== undefined && typeof s === 'object'
-            ? (s as Record<string, unknown>)
-            : {},
-        { compare: shallow },
-      )
-    : () => 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'
-  const hasReset = typeof utilInstance.reset === 'function'
-  const hasClear = typeof utilInstance.clear === 'function'
-  const hasStart = typeof utilInstance.start === 'function'
-  const hasStop = typeof utilInstance.stop === 'function'
-  const hasStartStop = hasStart && hasStop
-
-  const isRunning = () => {
-    const u = getState()
-    return 'isRunning' in u ? !!u.isRunning : true
-  }
-
-  if (!hasPending() && !hasFlush && !hasCancel && !hasReset && !hasClear) {
-    return (
-      <div class={styles().sectionEmpty}>
-        No actions available for this util
-      </div>
-    )
-  }
-
-  const emitName = `d-${props.utilName}` as PacerEventName
-  const utilNameLower = props.utilName.toLowerCase()
-
-  return (
-    <div class={styles().actionsRow}>
-      {hasPending() && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            const next = !isPending()
-            utilInstance.store.setState((prev: any) => ({
-              ...prev,
-              isPending: next,
-            }))
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotBlue} />
-          {isPending() ? 'Restore Pending' : 'Trigger Pending'}
-        </button>
-      )}
-      {hasFlush && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.flush()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('debouncer') && !isPending()) ||
-            (utilNameLower.includes('throttler') && !isPending()) ||
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotGreen} />
-          Flush
-        </button>
-      )}
-      {hasCancel && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.cancel()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('debouncer') && !isPending()) ||
-            (utilNameLower.includes('throttler') && !isPending()) ||
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotRed} />
-          Cancel
-        </button>
-      )}
-      {hasReset && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.reset()
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotYellow} />
-          Reset
-        </button>
-      )}
-      {hasClear && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.clear()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotOrange} />
-          Clear
-        </button>
-      )}
-      {hasStartStop && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            if (isRunning()) {
-              utilInstance.stop()
-            } else {
-              utilInstance.start()
-            }
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotPurple} />
-          {isRunning() ? 'Stop' : 'Start'}
-        </button>
-      )}
-    </div>
-  )
-}

package/src/components/DetailsPanel.tsx

@@ -1,62 +0,0 @@
-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
-  utilState: () => { lastUpdatedByKey: Record<string, number> }
-}
-
-export function DetailsPanel(props: DetailsPanelProps) {
-  const styles = useStyles()
-
-  return (
-    <div class={styles().stateDetails}>
-      {(() => {
-        const entry = props.selectedInstance()
-        if (!entry) {
-          return (
-            <div class={styles().noSelection}>
-              Select a util from the left panel to view its state
-            </div>
-          )
-        }
-
-        return (
-          <>
-            <StateHeader
-              selectedInstance={props.selectedInstance}
-              utilState={props.utilState}
-            />
-
-            <div class={styles().detailsGrid}>
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>Actions</div>
-                <ActionButtons
-                  instance={entry.instance}
-                  utilName={entry.type}
-                />
-              </div>
-
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>State</div>
-                <div class={styles().stateContent}>
-                  <UtilStateJsonTree instance={entry.instance} />
-                </div>
-              </div>
-
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>Options</div>
-                <div class={styles().stateContent}>
-                  <JsonTree value={entry.instance.options as unknown} />
-                </div>
-              </div>
-            </div>
-          </>
-        )
-      })()}
-    </div>
-  )
-}

package/src/components/Shell.tsx

@@ -1,176 +0,0 @@
-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'
-import { UTIL_GROUPS } from './util-groups'
-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()
-  const utilState = () => state
-  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()
-    if (!key) return null
-    for (const group of UTIL_GROUPS) {
-      const instance = (utilState() as unknown as Record<StateKey, Array<any>>)[
-        group.key
-      ].find((inst) => inst.key === key)
-      if (instance) return { instance, type: group.displayName }
-    }
-    return null
-  })
-
-  let dragStartX = 0
-  let dragStartWidth = 0
-
-  const handleMouseDown = (e: MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(true)
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
-    dragStartX = e.clientX
-    dragStartWidth = leftPanelWidth()
-  }
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging()) return
-
-    e.preventDefault()
-    const deltaX = e.clientX - dragStartX
-    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))
-    setLeftPanelWidth(newWidth)
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-  }
-
-  onMount(() => {
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-  })
-
-  onCleanup(() => {
-    document.removeEventListener('mousemove', handleMouseMove)
-    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 (
-    <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().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().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>
-      </MainPanel>
-    </div>
-  )
-}

package/src/components/StateHeader.tsx

@@ -1,139 +0,0 @@
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime.js'
-import { Show, createSignal, onCleanup, onMount } from 'solid-js'
-import { shallow, useSelector } from '@tanstack/solid-store'
-import { useStyles } from '../styles/use-styles'
-import {
-  getPacerUtilStoreState,
-  isPacerUtilTanStackStore,
-} from '../utils/read-pacer-store-state'
-
-dayjs.extend(relativeTime)
-
-type StateHeaderProps = {
-  selectedInstance: () => { instance: any; type: string } | null
-  utilState: () => { lastUpdatedByKey: Record<string, number> }
-}
-
-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,
-    )
-  }
-
-  let requestCount = 0
-
-  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 reduction = requestCount - completedExecutions
-  return Math.round((reduction / requestCount) * 100)
-}
-
-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 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(at).fromNow()
-  }
-
-  const store = props.entry.instance?.store
-  const stateAccessor = isPacerUtilTanStackStore(store)
-    ? useSelector(
-        store as never,
-        (s: unknown) =>
-          s !== null && s !== undefined && typeof s === 'object'
-            ? (s as Record<string, unknown>)
-            : {},
-        { compare: shallow },
-      )
-    : () =>
-        getPacerUtilStoreState(props.entry.instance) as Record<string, unknown>
-
-  const reductionPercentage = () =>
-    reductionFromState(props.entry, stateAccessor())
-
-  return (
-    <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={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={props.styles.infoValueMono}
-          style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
-        >
-          {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/UtilList.tsx

@@ -1,62 +0,0 @@
-import { For } from 'solid-js'
-import { useSelector } from '@tanstack/solid-store'
-import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
-import { UTIL_GROUPS } from './util-groups'
-import type { StateKey } from './util-groups'
-
-type UtilListProps = {
-  selectedKey: () => string | null
-  setSelectedKey: (key: string | null) => void
-  utilState: () => Record<StateKey, Array<any>>
-}
-
-export function UtilList(props: UtilListProps) {
-  const styles = useStyles()
-
-  return (
-    <div class={styles().utilList}>
-      <For each={UTIL_GROUPS}>
-        {(group) => (
-          <>
-            {props.utilState()[group.key].length > 0 && (
-              <div class={styles().utilGroup}>
-                <div class={styles().utilGroupHeader}>{group.label}</div>
-                <For each={props.utilState()[group.key]}>
-                  {(instance) => {
-                    const status = (() => {
-                      try {
-                        const statusAccessor = useSelector(
-                          instance.store,
-                          (s: any) => s.status,
-                        )
-                        return () => statusAccessor() ?? 'unknown'
-                      } catch {
-                        return () => 'unknown'
-                      }
-                    })()
-                    return (
-                      <div
-                        class={clsx(
-                          styles().utilRow,
-                          props.selectedKey() === instance.key &&
-                            styles().utilRowSelected,
-                        )}
-                        onClick={() =>
-                          props.setSelectedKey(instance.key ?? null)
-                        }
-                      >
-                        <div class={styles().utilKey}>{instance.key}</div>
-                        <div class={styles().utilStatus}>{status()}</div>
-                      </div>
-                    )
-                  }}
-                </For>
-              </div>
-            )}
-          </>
-        )}
-      </For>
-    </div>
-  )
-}

package/src/components/UtilStateJsonTree.tsx

@@ -1,25 +0,0 @@
-import { JsonTree } from '@tanstack/devtools-ui'
-import { useSelector } 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 = useSelector(store as never, (s: unknown) => s)
-    return <JsonTree value={snapshot()} />
-  }
-  return <JsonTree value={getPacerUtilStoreState(props.instance)} />
-}

package/src/components/index.tsx

@@ -1,19 +0,0 @@
-import { ThemeContextProvider } from '@tanstack/devtools-ui'
-import { PacerContextProvider } from '../PacerContextProvider'
-import { Shell } from './Shell'
-
-import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
-
-interface DevtoolsProps {
-  theme: TanStackDevtoolsTheme
-}
-
-export default function PacerDevtools(props: DevtoolsProps) {
-  return (
-    <ThemeContextProvider theme={props.theme}>
-      <PacerContextProvider>
-        <Shell />
-      </PacerContextProvider>
-    </ThemeContextProvider>
-  )
-}