@tanstack/router-devtools 1.112.17 → 1.114.0

package/src/Explorer.tsx

@@ -1,362 +0,0 @@
-import * as React from 'react'
-import { clsx as cx } from 'clsx'
-import * as goober from 'goober'
-import { tokens } from './tokens'
-import { displayValue } from './utils'
-import { ShadowDomTargetContext } from './context'
-
-type ExpanderProps = {
-  expanded: boolean
-  style?: React.CSSProperties
-}
-
-export const Expander = ({ expanded, style = {} }: ExpanderProps) => {
-  const styles = useStyles()
-  return (
-    <span className={styles.expander}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        fill="none"
-        viewBox="0 0 24 24"
-        className={cx(styles.expanderIcon(expanded))}
-      >
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M9 18l6-6-6-6"
-        ></path>
-      </svg>
-    </span>
-  )
-}
-
-type Entry = {
-  label: string
-}
-
-type RendererProps = {
-  handleEntry: HandleEntryFn
-  label?: React.ReactNode
-  value: unknown
-  subEntries: Array<Entry>
-  subEntryPages: Array<Array<Entry>>
-  type: string
-  expanded: boolean
-  toggleExpanded: () => void
-  pageSize: number
-  renderer?: Renderer
-  filterSubEntries?: (subEntries: Array<Property>) => Array<Property>
-}
-
-/**
- * Chunk elements in the array by size
- *
- * when the array cannot be chunked evenly by size, the last chunk will be
- * filled with the remaining elements
- *
- * @example
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
- */
-export function chunkArray<T>(array: Array<T>, size: number): Array<Array<T>> {
-  if (size < 1) return []
-  let i = 0
-  const result: Array<Array<T>> = []
-  while (i < array.length) {
-    result.push(array.slice(i, i + size))
-    i = i + size
-  }
-  return result
-}
-
-type Renderer = (props: RendererProps) => React.JSX.Element
-
-export const DefaultRenderer: Renderer = ({
-  handleEntry,
-  label,
-  value,
-  subEntries = [],
-  subEntryPages = [],
-  type,
-  expanded = false,
-  toggleExpanded,
-  pageSize,
-  renderer,
-}) => {
-  const [expandedPages, setExpandedPages] = React.useState<Array<number>>([])
-  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)
-  const styles = useStyles()
-
-  const refreshValueSnapshot = () => {
-    setValueSnapshot((value as () => any)())
-  }
-
-  return (
-    <div className={styles.entry}>
-      {subEntryPages.length ? (
-        <>
-          <button
-            className={styles.expandButton}
-            onClick={() => toggleExpanded()}
-          >
-            <Expander expanded={expanded} />
-            {label}
-            <span className={styles.info}>
-              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
-              {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
-            </span>
-          </button>
-          {expanded ? (
-            subEntryPages.length === 1 ? (
-              <div className={styles.subEntries}>
-                {subEntries.map((entry, index) => handleEntry(entry))}
-              </div>
-            ) : (
-              <div className={styles.subEntries}>
-                {subEntryPages.map((entries, index) => {
-                  return (
-                    <div key={index}>
-                      <div className={styles.entry}>
-                        <button
-                          className={cx(styles.labelButton, 'labelButton')}
-                          onClick={() =>
-                            setExpandedPages((old) =>
-                              old.includes(index)
-                                ? old.filter((d) => d !== index)
-                                : [...old, index],
-                            )
-                          }
-                        >
-                          <Expander expanded={expandedPages.includes(index)} />{' '}
-                          [{index * pageSize} ...{' '}
-                          {index * pageSize + pageSize - 1}]
-                        </button>
-                        {expandedPages.includes(index) ? (
-                          <div className={styles.subEntries}>
-                            {entries.map((entry) => handleEntry(entry))}
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            )
-          ) : null}
-        </>
-      ) : type === 'function' ? (
-        <>
-          <Explorer
-            renderer={renderer}
-            label={
-              <button
-                onClick={refreshValueSnapshot}
-                className={styles.refreshValueBtn}
-              >
-                <span>{label}</span> 🔄{' '}
-              </button>
-            }
-            value={valueSnapshot}
-            defaultExpanded={{}}
-          />
-        </>
-      ) : (
-        <>
-          <span>{label}:</span>{' '}
-          <span className={styles.value}>{displayValue(value)}</span>
-        </>
-      )}
-    </div>
-  )
-}
-
-type HandleEntryFn = (entry: Entry) => React.ReactNode
-
-type ExplorerProps = Partial<RendererProps> & {
-  renderer?: Renderer
-  defaultExpanded?: true | Record<string, boolean>
-}
-
-type Property = {
-  defaultExpanded?: boolean | Record<string, boolean>
-  label: string
-  value: unknown
-}
-
-function isIterable(x: any): x is Iterable<unknown> {
-  return Symbol.iterator in x
-}
-
-export default function Explorer({
-  value,
-  defaultExpanded,
-  renderer = DefaultRenderer,
-  pageSize = 100,
-  filterSubEntries,
-  ...rest
-}: ExplorerProps) {
-  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
-  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])
-
-  let type: string = typeof value
-  let subEntries: Array<Property> = []
-
-  const makeProperty = (sub: { label: string; value: unknown }): Property => {
-    const subDefaultExpanded =
-      defaultExpanded === true
-        ? { [sub.label]: true }
-        : defaultExpanded?.[sub.label]
-    return {
-      ...sub,
-      defaultExpanded: subDefaultExpanded,
-    }
-  }
-
-  if (Array.isArray(value)) {
-    type = 'array'
-    subEntries = value.map((d, i) =>
-      makeProperty({
-        label: i.toString(),
-        value: d,
-      }),
-    )
-  } else if (
-    value !== null &&
-    typeof value === 'object' &&
-    isIterable(value) &&
-    typeof value[Symbol.iterator] === 'function'
-  ) {
-    type = 'Iterable'
-    subEntries = Array.from(value, (val, i) =>
-      makeProperty({
-        label: i.toString(),
-        value: val,
-      }),
-    )
-  } else if (typeof value === 'object' && value !== null) {
-    type = 'object'
-    subEntries = Object.entries(value).map(([key, val]) =>
-      makeProperty({
-        label: key,
-        value: val,
-      }),
-    )
-  }
-
-  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries
-
-  const subEntryPages = chunkArray(subEntries, pageSize)
-
-  return renderer({
-    handleEntry: (entry) => (
-      <Explorer
-        key={entry.label}
-        value={value}
-        renderer={renderer}
-        filterSubEntries={filterSubEntries}
-        {...rest}
-        {...entry}
-      />
-    ),
-    type,
-    subEntries,
-    subEntryPages,
-    value,
-    expanded,
-    toggleExpanded,
-    pageSize,
-    ...rest,
-  })
-}
-
-const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
-  const { colors, font, size, alpha, shadow, border } = tokens
-  const { fontFamily, lineHeight, size: fontSize } = font
-  const css = shadowDOMTarget
-    ? goober.css.bind({ target: shadowDOMTarget })
-    : goober.css
-
-  return {
-    entry: css`
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight.sm};
-      outline: none;
-      word-break: break-word;
-    `,
-    labelButton: css`
-      cursor: pointer;
-      color: inherit;
-      font: inherit;
-      outline: inherit;
-      background: transparent;
-      border: none;
-      padding: 0;
-    `,
-    expander: css`
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: ${size[3]};
-      height: ${size[3]};
-      padding-left: 3px;
-      box-sizing: content-box;
-    `,
-    expanderIcon: (expanded: boolean) => {
-      if (expanded) {
-        return css`
-          transform: rotate(90deg);
-          transition: transform 0.1s ease;
-        `
-      }
-      return css`
-        transform: rotate(0deg);
-        transition: transform 0.1s ease;
-      `
-    },
-    expandButton: css`
-      display: flex;
-      gap: ${size[1]};
-      align-items: center;
-      cursor: pointer;
-      color: inherit;
-      font: inherit;
-      outline: inherit;
-      background: transparent;
-      border: none;
-      padding: 0;
-    `,
-    value: css`
-      color: ${colors.purple[400]};
-    `,
-    subEntries: css`
-      margin-left: ${size[2]};
-      padding-left: ${size[2]};
-      border-left: 2px solid ${colors.darkGray[400]};
-    `,
-    info: css`
-      color: ${colors.gray[500]};
-      font-size: ${fontSize['2xs']};
-      padding-left: ${size[1]};
-    `,
-    refreshValueBtn: css`
-      appearance: none;
-      border: 0;
-      cursor: pointer;
-      background: transparent;
-      color: inherit;
-      padding: 0;
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-    `,
-  }
-}
-
-function useStyles() {
-  const shadowDomTarget = React.useContext(ShadowDomTargetContext)
-  const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))
-  return _styles
-}

package/src/TanStackRouterDevtools.tsx

@@ -1,250 +0,0 @@
-import { clsx as cx } from 'clsx'
-import React from 'react'
-import { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'
-import { useIsMounted, useSafeState } from './utils'
-import { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'
-import useLocalStorage from './useLocalStorage'
-import { TanStackLogo } from './logo'
-import { useStyles } from './useStyles'
-import type { AnyRouter } from '@tanstack/react-router'
-
-interface DevtoolsOptions {
-  /**
-   * Set this true if you want the dev tools to default to being open
-   */
-  initialIsOpen?: boolean
-  /**
-   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
-   */
-  panelProps?: React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  >
-  /**
-   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-   */
-  closeButtonProps?: React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
-  /**
-   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-   */
-  toggleButtonProps?: React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
-  /**
-   * The position of the TanStack Router logo to open and close the devtools panel.
-   * Defaults to 'bottom-left'.
-   */
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-  /**
-   * Use this to render the devtools inside a different type of container element for a11y purposes.
-   * Any string which corresponds to a valid intrinsic JSX element is allowed.
-   * Defaults to 'footer'.
-   */
-  containerElement?: string | any
-  /**
-   * A boolean variable indicating if the "lite" version of the library is being used
-   */
-  router?: AnyRouter
-  /**
-   * Use this to attach the devtool's styles to specific element in the DOM.
-   */
-  shadowDOMTarget?: ShadowRoot
-}
-
-export function TanStackRouterDevtools(
-  props: DevtoolsOptions,
-): React.ReactElement | null {
-  const { shadowDOMTarget } = props
-
-  return (
-    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
-      <FloatingTanStackRouterDevtools {...props} />
-    </ShadowDomTargetContext.Provider>
-  )
-}
-
-function FloatingTanStackRouterDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = 'bottom-left',
-  containerElement: Container = 'footer',
-  router,
-  shadowDOMTarget,
-}: DevtoolsOptions): React.ReactElement | null {
-  const [rootEl, setRootEl] = React.useState<HTMLDivElement>()
-  const panelRef = React.useRef<HTMLDivElement>(null)
-  const [isOpen, setIsOpen] = useLocalStorage(
-    'tanstackRouterDevtoolsOpen',
-    initialIsOpen,
-  )
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(
-    'tanstackRouterDevtoolsHeight',
-    null,
-  )
-  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)
-  const [isResizing, setIsResizing] = useSafeState(false)
-  const isMounted = useIsMounted()
-  const styles = useStyles()
-
-  const handleDragStart = (
-    panelElement: HTMLDivElement | null,
-    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    if (startEvent.button !== 0) return // Only allow left click for drag
-
-    setIsResizing(true)
-
-    const dragInfo = {
-      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
-      pageY: startEvent.pageY,
-    }
-
-    const run = (moveEvent: MouseEvent) => {
-      const delta = dragInfo.pageY - moveEvent.pageY
-      const newHeight = dragInfo.originalHeight + delta
-
-      setDevtoolsHeight(newHeight)
-
-      if (newHeight < 70) {
-        setIsOpen(false)
-      } else {
-        setIsOpen(true)
-      }
-    }
-
-    const unsub = () => {
-      setIsResizing(false)
-      document.removeEventListener('mousemove', run)
-      document.removeEventListener('mouseUp', unsub)
-    }
-
-    document.addEventListener('mousemove', run)
-    document.addEventListener('mouseup', unsub)
-  }
-
-  const isButtonClosed = isOpen ?? false
-
-  React.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false)
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen])
-
-  React.useEffect(() => {
-    if (isResolvedOpen) {
-      const previousValue = rootEl?.parentElement?.style.paddingBottom
-
-      const run = () => {
-        const containerHeight = panelRef.current?.getBoundingClientRect().height
-        if (rootEl?.parentElement) {
-          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`
-        }
-      }
-
-      run()
-
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run)
-
-        return () => {
-          window.removeEventListener('resize', run)
-          if (rootEl?.parentElement && typeof previousValue === 'string') {
-            rootEl.parentElement.style.paddingBottom = previousValue
-          }
-        }
-      }
-    }
-    return
-  }, [isResolvedOpen, rootEl?.parentElement])
-
-  React.useEffect(() => {
-    if (rootEl) {
-      const el = rootEl
-      const fontSize = getComputedStyle(el).fontSize
-      el.style.setProperty('--tsrd-font-size', fontSize)
-    }
-  }, [rootEl])
-
-  const { style: panelStyle = {}, ...otherPanelProps } = panelProps
-
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps
-
-  const {
-    onClick: onToggleClick,
-    className: toggleButtonClassName,
-    ...otherToggleButtonProps
-  } = toggleButtonProps
-
-  // Do not render on the server
-  if (!isMounted) return null
-
-  const resolvedHeight = devtoolsHeight ?? 500
-
-  return (
-    <Container ref={setRootEl} className="TanStackRouterDevtools">
-      <DevtoolsOnCloseContext.Provider
-        value={{
-          onCloseClick: onCloseClick ?? (() => {}),
-        }}
-      >
-        <BaseTanStackRouterDevtoolsPanel
-          ref={panelRef as any}
-          {...otherPanelProps}
-          router={router}
-          className={cx(
-            styles.devtoolsPanelContainer,
-            styles.devtoolsPanelContainerVisibility(!!isOpen),
-            styles.devtoolsPanelContainerResizing(isResizing),
-            styles.devtoolsPanelContainerAnimation(
-              isResolvedOpen,
-              resolvedHeight + 16,
-            ),
-          )}
-          style={{
-            height: resolvedHeight,
-            ...panelStyle,
-          }}
-          isOpen={isResolvedOpen}
-          setIsOpen={setIsOpen}
-          handleDragStart={(e) => handleDragStart(panelRef.current, e)}
-          shadowDOMTarget={shadowDOMTarget}
-        />
-      </DevtoolsOnCloseContext.Provider>
-
-      <button
-        type="button"
-        {...otherToggleButtonProps}
-        aria-label="Open TanStack Router Devtools"
-        onClick={(e) => {
-          setIsOpen(true)
-          onToggleClick && onToggleClick(e)
-        }}
-        className={cx(
-          styles.mainCloseBtn,
-          styles.mainCloseBtnPosition(position),
-          styles.mainCloseBtnAnimation(!isButtonClosed),
-          toggleButtonClassName,
-        )}
-      >
-        <div className={styles.mainCloseBtnIconContainer}>
-          <div className={styles.mainCloseBtnIconOuter}>
-            <TanStackLogo />
-          </div>
-          <div className={styles.mainCloseBtnIconInner}>
-            <TanStackLogo />
-          </div>
-        </div>
-        <div className={styles.mainCloseBtnDivider}>-</div>
-        <div className={styles.routerLogoCloseButton}>TanStack Router</div>
-      </button>
-    </Container>
-  )
-}

package/src/TanStackRouterDevtoolsPanel.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'
-import { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'
-import type { AnyRouter } from '@tanstack/react-router'
-
-export interface DevtoolsPanelOptions {
-  /**
-   * The standard React style object used to style a component with inline styles
-   */
-  style?: React.CSSProperties
-  /**
-   * The standard React className property used to style a component with classes
-   */
-  className?: string
-  /**
-   * A boolean variable indicating whether the panel is open or closed
-   */
-  isOpen?: boolean
-  /**
-   * A function that toggles the open and close state of the panel
-   */
-  setIsOpen: (isOpen: boolean) => void
-  /**
-   * Handles the opening and closing the devtools panel
-   */
-  handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  /**
-   * A boolean variable indicating if the "lite" version of the library is being used
-   */
-  router?: AnyRouter
-  /**
-   * Use this to attach the devtool's styles to specific element in the DOM.
-   */
-  shadowDOMTarget?: ShadowRoot
-}
-
-export const TanStackRouterDevtoolsPanel = React.forwardRef<
-  HTMLDivElement,
-  DevtoolsPanelOptions
->(function TanStackRouterDevtoolsPanel(props, ref) {
-  const { shadowDOMTarget } = props
-
-  return (
-    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
-      <DevtoolsOnCloseContext.Provider
-        value={{
-          onCloseClick: () => {},
-        }}
-      >
-        <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />
-      </DevtoolsOnCloseContext.Provider>
-    </ShadowDomTargetContext.Provider>
-  )
-})

package/src/context.ts

@@ -1,22 +0,0 @@
-import React from 'react'
-
-export const ShadowDomTargetContext = React.createContext<
-  ShadowRoot | undefined
->(undefined)
-
-export const DevtoolsOnCloseContext = React.createContext<
-  | {
-      onCloseClick: (e: React.MouseEvent<HTMLButtonElement>) => void
-    }
-  | undefined
->(undefined)
-
-export const useDevtoolsOnClose = () => {
-  const context = React.useContext(DevtoolsOnCloseContext)
-  if (!context) {
-    throw new Error(
-      'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',
-    )
-  }
-  return context
-}