@tanstack/pacer-devtools 1.4.0 → 1.5.0

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

package/src/components/util-groups.ts

@@ -1,54 +0,0 @@
-export type StateKey =
-  | 'asyncBatchers'
-  | 'asyncDebouncers'
-  | 'asyncQueuers'
-  | 'asyncRateLimiters'
-  | 'asyncThrottlers'
-  | 'batchers'
-  | 'debouncers'
-  | 'queuers'
-  | 'rateLimiters'
-  | 'throttlers'
-
-type UtilGroup = {
-  key: StateKey
-  label: string
-  displayName: string
-}
-
-export const UTIL_GROUPS: Array<UtilGroup> = [
-  { key: 'debouncers', label: 'Debouncers', displayName: 'Debouncer' },
-  { key: 'throttlers', label: 'Throttlers', displayName: 'Throttler' },
-  { key: 'batchers', label: 'Batchers', displayName: 'Batcher' },
-  { key: 'queuers', label: 'Queuers', displayName: 'Queuer' },
-  {
-    key: 'rateLimiters',
-    label: 'Rate Limiters',
-    displayName: 'Rate Limiter',
-  },
-  {
-    key: 'asyncDebouncers',
-    label: 'Async Debouncers',
-    displayName: 'Async Debouncer',
-  },
-  {
-    key: 'asyncThrottlers',
-    label: 'Async Throttlers',
-    displayName: 'Async Throttler',
-  },
-  {
-    key: 'asyncBatchers',
-    label: 'Async Batchers',
-    displayName: 'Async Batcher',
-  },
-  {
-    key: 'asyncQueuers',
-    label: 'Async Queuers',
-    displayName: 'Async Queuer',
-  },
-  {
-    key: 'asyncRateLimiters',
-    label: 'Async Rate Limiters',
-    displayName: 'Async Rate Limiter',
-  },
-]

package/src/core.tsx

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

package/src/index.ts

@@ -1,10 +0,0 @@
-'use client'
-
-import * as Devtools from './core'
-
-export const PacerDevtoolsCore: typeof Devtools.PacerDevtoolsCore =
-  process.env.NODE_ENV !== 'development'
-    ? Devtools.PacerDevtoolsCoreNoOp
-    : Devtools.PacerDevtoolsCore
-
-export type { PacerDevtoolsInit } from './core'

package/src/production.ts

@@ -1,5 +0,0 @@
-'use client'
-
-export { PacerDevtoolsCore } from './core'
-
-export type { PacerDevtoolsInit } from './core'