@tanstack/router-devtools 1.22.5 → 1.22.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/Explorer.cjs +1 -1
  2. package/dist/cjs/Explorer.cjs.map +1 -1
  3. package/dist/cjs/Explorer.d.cts +4 -4
  4. package/dist/cjs/devtools.cjs +37 -35
  5. package/dist/cjs/devtools.cjs.map +1 -1
  6. package/dist/cjs/devtools.d.cts +1 -2
  7. package/dist/cjs/utils.cjs.map +1 -1
  8. package/dist/cjs/utils.d.cts +4 -4
  9. package/dist/esm/Explorer.d.ts +4 -4
  10. package/dist/esm/Explorer.js +1 -1
  11. package/dist/esm/Explorer.js.map +1 -1
  12. package/dist/esm/devtools.d.ts +1 -2
  13. package/dist/esm/devtools.js +37 -35
  14. package/dist/esm/devtools.js.map +1 -1
  15. package/dist/esm/utils.d.ts +4 -4
  16. package/dist/esm/utils.js.map +1 -1
  17. package/package.json +3 -2
  18. package/src/Explorer.tsx +8 -8
  19. package/src/devtools.tsx +46 -45
  20. package/src/useMediaQuery.ts +2 -0
  21. package/src/utils.ts +12 -7
package/dist/esm/devtools.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n invariant,\n AnyRouter,\n Route,\n AnyRoute,\n AnyRootRoute,\n trimPath,\n useRouter,\n useRouterState,\n AnyRouteMatch,\n rootRouteId,\n} from '@tanstack/react-router'\n\nimport useLocalStorage from './useLocalStorage'\nimport {\n getRouteStatusColor,\n getStatusColor,\n multiSortBy,\n useIsMounted,\n useSafeState,\n} from './utils'\nimport { css } from 'goober'\nimport { clsx as cx } from 'clsx'\nimport Explorer from './Explorer'\nimport { tokens } from './tokens'\nimport { TanStackLogo } from './logo'\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\ninterface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >\n /**\n * 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.\n */\n closeButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n /**\n * 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.\n */\n toggleButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: React.CSSProperties\n /**\n * The standard React className property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLAttributes<HTMLButtonElement>) {\n const { className, ...rest } = props\n return (\n <button {...rest} className={cx(getStyles().logo, className)}>\n <div className={getStyles().tanstackLogo}>TANSTACK</div>\n <div className={getStyles().routerLogo}>React Router v1</div>\n </button>\n )\n}\n\nconst DevtoolsOnCloseContext = React.createContext<\n | {\n onCloseClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n }\n | undefined\n>(undefined)\n\nconst useDevtoolsOnClose = () => {\n const context = React.useContext(DevtoolsOnCloseContext)\n if (!context) {\n throw new Error(\n 'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',\n )\n }\n return context\n}\n\nexport function TanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n}: DevtoolsOptions): React.ReactElement | null {\n const [rootEl, setRootEl] = React.useState<HTMLDivElement>(null!)\n const panelRef = React.useRef<HTMLDivElement>(null)\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n const [isResizing, setIsResizing] = useSafeState(false)\n const isMounted = useIsMounted()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | null,\n startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo?.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen ?? false\n\n React.useEffect(() => {\n setIsResolvedOpen(isOpen ?? false)\n }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n React.useEffect(() => {\n if (isResolvedOpen) {\n const previousValue = rootEl?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef.current?.getBoundingClientRect().height\n if (rootEl?.parentElement) {\n rootEl.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl?.parentElement && typeof previousValue === 'string') {\n rootEl.parentElement.style.paddingBottom = previousValue\n }\n }\n }\n }\n return\n }, [isResolvedOpen])\n\n React.useEffect(() => {\n if (rootEl) {\n const el = rootEl\n const fontSize = getComputedStyle(el).fontSize\n el.style.setProperty('--tsrd-font-size', fontSize)\n }\n }, [rootEl])\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n style: toggleButtonStyle = {},\n onClick: onToggleClick,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = devtoolsHeight ?? 500\n\n return (\n <Container ref={setRootEl} className=\"TanStackRouterDevtools\">\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef as any}\n {...otherPanelProps}\n router={router}\n className={cx(\n getStyles().devtoolsPanelContainer,\n getStyles().devtoolsPanelContainerVisibility(!!isOpen),\n getStyles().devtoolsPanelContainerResizing(isResizing),\n getStyles().devtoolsPanelContainerAnimation(\n isResolvedOpen,\n resolvedHeight + 16,\n ),\n )}\n style={{\n height: resolvedHeight,\n ...panelStyle,\n }}\n isOpen={isResolvedOpen}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n />\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n className={cx(\n getStyles().mainCloseBtn,\n getStyles().mainCloseBtnPosition(position),\n getStyles().mainCloseBtnAnimation(!isButtonClosed),\n )}\n >\n <div className={getStyles().mainCloseBtnIconContainer}>\n <div className={getStyles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div className={getStyles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div className={getStyles().mainCloseBtnDivider}>-</div>\n <div className={getStyles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Container>\n )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref) {\n return (\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: () => {},\n }}\n >\n <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />\n </DevtoolsOnCloseContext.Provider>\n )\n})\n\nfunction RouteComp({\n router,\n route,\n isRoot,\n activeId,\n setActiveId,\n}: {\n router: AnyRouter\n route: AnyRootRoute | AnyRoute\n isRoot?: boolean\n activeId: string | undefined\n setActiveId: (id: string) => void\n}) {\n const routerState = useRouterState({\n router,\n } as any)\n const matches =\n routerState.status === 'pending'\n ? routerState.pendingMatches ?? []\n : routerState.matches\n\n const match = routerState.matches.find((d) => d.routeId === route.id)\n\n const param = React.useMemo(() => {\n try {\n if (match?.params) {\n const p = match.params\n const r: string = route.path || trimPath(route.id)\n if (r.startsWith('$')) {\n const trimmed = r.slice(1)\n if (p[trimmed]) {\n return `(${p[trimmed]})`\n }\n }\n }\n return ''\n } catch (error) {\n return ''\n }\n }, [match, route])\n\n return (\n <div>\n <div\n role=\"button\"\n aria-label={`Open match details for ${route.id}`}\n onClick={() => {\n if (match) {\n setActiveId(activeId === route.id ? '' : route.id)\n }\n }}\n className={cx(\n getStyles().routesRowContainer(route.id === activeId, !!match),\n )}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getRouteStatusColor(matches, route)),\n )}\n />\n <div className={cx(getStyles().routesRow(!!match))}>\n <div>\n <code className={getStyles().code}>\n {isRoot ? rootRouteId : route.path || trimPath(route.id)}{' '}\n </code>\n <code className={getStyles().routeParamInfo}>{param}</code>\n </div>\n <AgeTicker match={match} router={router} />\n </div>\n </div>\n {(route.children as Route[])?.length ? (\n <div className={getStyles().nestedRouteRow(!!isRoot)}>\n {[...(route.children as Route[])]\n .sort((a, b) => {\n return a.rank - b.rank\n })\n .map((r) => (\n <RouteComp\n key={r.id}\n router={router}\n route={r}\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ))}\n </div>\n ) : null}\n </div>\n )\n}\n\nconst BaseTanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function BaseTanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n const {\n isOpen = true,\n setIsOpen,\n handleDragStart,\n router: userRouter,\n ...panelProps\n } = props\n\n const { onCloseClick } = useDevtoolsOnClose()\n const { className, ...otherPanelProps } = panelProps\n\n const contextRouter = useRouter({ warn: false })\n const router = userRouter ?? contextRouter\n const routerState = useRouterState({\n router,\n } as any)\n\n const matches = [\n ...(routerState.pendingMatches ?? []),\n ...routerState.matches,\n ...routerState.cachedMatches,\n ]\n\n invariant(\n router,\n 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',\n )\n\n // useStore(router.__store)\n\n const [showMatches, setShowMatches] = useLocalStorage(\n 'tanstackRouterDevtoolsShowMatches',\n true,\n )\n\n const [activeId, setActiveId] = useLocalStorage(\n 'tanstackRouterDevtoolsActiveRouteId',\n '',\n )\n\n const activeMatch = React.useMemo(\n () => matches.find((d) => d.routeId === activeId || d.id === activeId),\n [matches, activeId],\n )\n\n const hasSearch = Object.keys(routerState.location.search || {}).length\n\n const explorerState = {\n ...router,\n state: router.state,\n }\n\n return (\n <div\n ref={ref}\n className={cx(\n getStyles().devtoolsPanel,\n 'TanStackRouterDevtoolsPanel',\n className,\n )}\n {...otherPanelProps}\n >\n {handleDragStart ? (\n <div\n className={getStyles().dragHandle}\n onMouseDown={handleDragStart}\n ></div>\n ) : null}\n <button\n className={getStyles().panelCloseBtn}\n onClick={(e) => {\n setIsOpen(false)\n onCloseClick(e)\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"6\"\n fill=\"none\"\n viewBox=\"0 0 10 6\"\n className={getStyles().panelCloseBtnIcon}\n >\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.667\"\n d=\"M1 1l4 4 4-4\"\n ></path>\n </svg>\n </button>\n <div className={getStyles().firstContainer}>\n <div className={getStyles().row}>\n <Logo\n aria-hidden\n onClick={(e) => {\n setIsOpen(false)\n onCloseClick(e)\n }}\n />\n </div>\n <div className={getStyles().routerExplorerContainer}>\n <div className={getStyles().routerExplorer}>\n <Explorer\n label=\"Router\"\n value={Object.fromEntries(\n multiSortBy(\n Object.keys(explorerState),\n (\n [\n 'state',\n 'routesById',\n 'routesByPath',\n 'flatRoutes',\n 'options',\n ] as const\n ).map((d) => (dd) => dd !== d),\n )\n .map((key) => [key, (explorerState as any)[key]])\n .filter(\n (d) =>\n typeof d[1] !== 'function' &&\n ![\n '__store',\n 'basepath',\n 'injectedHtml',\n 'subscribers',\n 'latestLoadPromise',\n 'navigateTimeout',\n 'resetNextScroll',\n 'tempLocationKey',\n 'latestLocation',\n 'routeTree',\n 'history',\n ].includes(d[0]),\n ),\n )}\n defaultExpanded={{\n state: {} as any,\n context: {} as any,\n options: {} as any,\n }}\n filterSubEntries={(subEntries) => {\n return subEntries.filter((d) => typeof d.value !== 'function')\n }}\n />\n </div>\n </div>\n </div>\n <div className={getStyles().secondContainer}>\n <div className={getStyles().matchesContainer}>\n <div className={getStyles().detailsHeader}>\n <span>Pathname</span>\n {routerState.location.maskedLocation ? (\n <div className={getStyles().maskedBadgeContainer}>\n <span className={getStyles().maskedBadge}>masked</span>\n </div>\n ) : null}\n </div>\n <div className={getStyles().detailsContent}>\n <code>{routerState.location.pathname}</code>\n {routerState.location.maskedLocation ? (\n <code className={getStyles().maskedLocation}>\n {routerState.location.maskedLocation.pathname}\n </code>\n ) : null}\n </div>\n <div className={getStyles().detailsHeader}>\n <div className={getStyles().routeMatchesToggle}>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(false)\n }}\n disabled={!showMatches}\n className={cx(\n getStyles().routeMatchesToggleBtn(!showMatches, true),\n )}\n >\n Routes\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(true)\n }}\n disabled={showMatches}\n className={cx(\n getStyles().routeMatchesToggleBtn(!!showMatches, false),\n )}\n >\n Matches\n </button>\n </div>\n <div className={getStyles().detailsHeaderInfo}>\n <div>age / staleTime / gcTime</div>\n </div>\n </div>\n <div className={cx(getStyles().routesContainer)}>\n {!showMatches ? (\n <RouteComp\n router={router}\n route={router.routeTree}\n isRoot\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ) : (\n <div>\n {(routerState.status === 'pending'\n ? routerState.pendingMatches ?? []\n : routerState.matches\n ).map((match, i) => {\n return (\n <div\n key={match.id || i}\n role=\"button\"\n aria-label={`Open match details for ${match.id}`}\n onClick={() =>\n setActiveId(activeId === match.id ? '' : match.id)\n }\n className={cx(\n getStyles().matchRow(match === activeMatch),\n )}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code\n className={getStyles().matchID}\n >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>\n <AgeTicker match={match} router={router} />\n </div>\n )\n })}\n </div>\n )}\n </div>\n </div>\n {routerState.cachedMatches?.length ? (\n <div className={getStyles().cachedMatchesContainer}>\n <div className={getStyles().detailsHeader}>\n <div>Cached Matches</div>\n <div className={getStyles().detailsHeaderInfo}>\n age / staleTime / gcTime\n </div>\n </div>\n <div>\n {routerState.cachedMatches.map((match) => {\n return (\n <div\n key={match.id}\n role=\"button\"\n aria-label={`Open match details for ${match.id}`}\n onClick={() =>\n setActiveId(activeId === match.id ? '' : match.id)\n }\n className={cx(getStyles().matchRow(match === activeMatch))}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code className={getStyles().matchID}>{`${match.id}`}</code>\n\n <AgeTicker match={match} router={router} />\n </div>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n {activeMatch ? (\n <div className={getStyles().thirdContainer}>\n <div className={getStyles().detailsHeader}>Match Details</div>\n <div>\n <div className={getStyles().matchDetails}>\n <div\n className={getStyles().matchStatus(\n activeMatch.status,\n activeMatch.isFetching,\n )}\n >\n <div>\n {activeMatch.status === 'success' && activeMatch.isFetching\n ? 'fetching'\n : activeMatch.status}\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>ID:</div>\n <div className={getStyles().matchDetailsInfo}>\n <code>{activeMatch.id}</code>\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>State:</div>\n <div className={getStyles().matchDetailsInfo}>\n {routerState.pendingMatches?.find(\n (d) => d.id === activeMatch.id,\n )\n ? 'Pending'\n : routerState.matches?.find((d) => d.id === activeMatch.id)\n ? 'Active'\n : 'Cached'}\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>Last Updated:</div>\n <div className={getStyles().matchDetailsInfo}>\n {activeMatch.updatedAt\n ? new Date(\n activeMatch.updatedAt as number,\n ).toLocaleTimeString()\n : 'N/A'}\n </div>\n </div>\n </div>\n </div>\n {activeMatch.loaderData ? (\n <>\n <div className={getStyles().detailsHeader}>Loader Data</div>\n <div className={getStyles().detailsContent}>\n <Explorer\n label=\"loaderData\"\n value={activeMatch.loaderData}\n defaultExpanded={{}}\n />\n </div>\n </>\n ) : null}\n <div className={getStyles().detailsHeader}>Explorer</div>\n <div className={getStyles().detailsContent}>\n <Explorer label=\"Match\" value={activeMatch} defaultExpanded={{}} />\n </div>\n </div>\n ) : null}\n {hasSearch ? (\n <div className={getStyles().fourthContainer}>\n <div className={getStyles().detailsHeader}>Search Params</div>\n <div className={getStyles().detailsContent}>\n <Explorer\n value={routerState.location.search || {}}\n defaultExpanded={Object.keys(\n (routerState.location.search as {}) || {},\n ).reduce((obj: any, next) => {\n obj[next] = {}\n return obj\n }, {})}\n />\n </div>\n </div>\n ) : null}\n </div>\n )\n})\n\nfunction AgeTicker({\n match,\n router,\n}: {\n match?: AnyRouteMatch\n router: AnyRouter\n}) {\n const rerender = React.useReducer(\n () => ({}),\n () => ({}),\n )[1]\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n rerender()\n }, 1000)\n\n return () => {\n clearInterval(interval)\n }\n }, [])\n\n if (!match) {\n return null\n }\n\n const route = router.looseRoutesById[match?.routeId]!\n\n if (!route.options.loader) {\n return null\n }\n\n const age = Date.now() - match?.updatedAt\n const staleTime =\n route.options.staleTime ?? router.options.defaultStaleTime ?? 0\n const gcTime =\n route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1000\n\n return (\n <div className={cx(getStyles().ageTicker(age > staleTime))}>\n <div>{formatTime(age)}</div>\n <div>/</div>\n <div>{formatTime(staleTime)}</div>\n <div>/</div>\n <div>{formatTime(gcTime)}</div>\n </div>\n )\n}\n\nfunction formatTime(ms: number) {\n const units = ['s', 'min', 'h', 'd']\n const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n let chosenUnitIndex = 0\n for (let i = 1; i < values.length; i++) {\n if (values[i]! < 1) break\n chosenUnitIndex = i\n }\n\n const formatter = new Intl.NumberFormat(navigator.language, {\n compactDisplay: 'short',\n notation: 'compact',\n maximumFractionDigits: 0,\n })\n\n return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n\n return {\n devtoolsPanelContainer: css`\n direction: ltr;\n position: fixed;\n bottom: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n max-height: 90%;\n border-top: 1px solid ${colors.gray[700]};\n transform-origin: top;\n `,\n devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n return css`\n visibility: ${isOpen ? 'visible' : 'hidden'};\n `\n },\n devtoolsPanelContainerResizing: (isResizing: boolean) => {\n if (isResizing) {\n return css`\n transition: none;\n `\n }\n\n return css`\n transition: all 0.4s ease;\n `\n },\n devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n if (isOpen) {\n return css`\n pointer-events: auto;\n transform: translateY(0);\n `\n }\n return css`\n pointer-events: none;\n transform: translateY(${height}px);\n `\n },\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${colors.gray[300]};\n `,\n routerLogo: css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, #84cc16, #10b981);\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n devtoolsPanel: css`\n display: flex;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n background-color: ${colors.darkGray[700]};\n color: ${colors.gray[300]};\n\n @media (max-width: 700px) {\n flex-direction: column;\n }\n @media (max-width: 600px) {\n font-size: ${fontSize.xs};\n }\n `,\n dragHandle: css`\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 4px;\n cursor: row-resize;\n z-index: 100000;\n &:hover {\n background-color: ${colors.purple[400]}${alpha[90]};\n }\n `,\n firstContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n border-right: 1px solid ${colors.gray[700]};\n display: flex;\n flex-direction: column;\n `,\n routerExplorerContainer: css`\n overflow-y: auto;\n flex: 1;\n `,\n routerExplorer: css`\n padding: ${tokens.size[2]};\n `,\n row: css`\n display: flex;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${colors.darkGray[500]} 1px solid;\n align-items: center;\n `,\n detailsHeader: css`\n font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;\n position: sticky;\n top: 0;\n z-index: 2;\n background-color: ${colors.darkGray[600]};\n padding: 0px ${tokens.size[2]};\n font-weight: ${font.weight.medium};\n font-size: ${font.size.xs};\n min-height: ${tokens.size[8]};\n line-height: ${font.lineHeight.xs};\n text-align: left;\n display: flex;\n align-items: center;\n `,\n maskedBadge: css`\n background: ${colors.yellow[900]}${alpha[70]};\n color: ${colors.yellow[300]};\n display: inline-block;\n padding: ${tokens.size[0]} ${tokens.size[2.5]};\n border-radius: ${border.radius.full};\n font-size: ${font.size.xs};\n font-weight: ${font.weight.normal};\n border: 1px solid ${colors.yellow[300]};\n `,\n maskedLocation: css`\n color: ${colors.yellow[300]};\n `,\n detailsContent: css`\n padding: ${tokens.size[1.5]} ${tokens.size[2]};\n display: flex;\n align-items: center;\n font-size: ${font.size.xs};\n `,\n routeMatchesToggle: css`\n display: flex;\n align-items: center;\n border: 1px solid ${colors.gray[500]};\n border-radius: ${border.radius.sm};\n overflow: hidden;\n `,\n routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => {\n const base = css`\n appearance: none;\n border: none;\n font-size: 12px;\n padding: 4px 8px;\n background: transparent;\n cursor: pointer;\n font-family: ${fontFamily.sans};\n font-weight: ${font.weight.medium};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[400]};\n color: ${colors.gray[300]};\n `\n classes.push(activeStyles)\n } else {\n const inactiveStyles = css`\n color: ${colors.gray[500]};\n background: ${colors.darkGray[800]}${alpha[20]};\n `\n classes.push(inactiveStyles)\n }\n\n if (showBorder) {\n const border = css`\n border-right: 1px solid ${tokens.colors.gray[500]};\n `\n classes.push(border)\n }\n\n return classes\n },\n detailsHeaderInfo: css`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n align-items: center;\n font-weight: ${font.weight.normal};\n color: ${colors.gray[400]};\n `,\n matchRow: (active: boolean) => {\n const base = css`\n display: flex;\n border-bottom: 1px solid ${colors.darkGray[400]};\n cursor: pointer;\n align-items: center;\n padding: ${size[1]} ${size[2]};\n gap: ${size[2]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[300]};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[500]};\n `\n classes.push(activeStyles)\n }\n\n return classes\n },\n matchIndicator: (color: 'green' | 'red' | 'yellow' | 'gray' | 'blue') => {\n const base = css`\n flex: 0 0 auto;\n width: ${size[3]};\n height: ${size[3]};\n background: ${colors[color][900]};\n border: 1px solid ${colors[color][500]};\n border-radius: ${border.radius.full};\n transition: all 0.25s ease-out;\n box-sizing: border-box;\n `\n const classes = [base]\n\n if (color === 'gray') {\n const grayStyles = css`\n background: ${colors.gray[700]};\n border-color: ${colors.gray[400]};\n `\n classes.push(grayStyles)\n }\n\n return classes\n },\n matchID: css`\n flex: 1;\n line-height: ${lineHeight['xs']};\n `,\n ageTicker: (showWarning: boolean) => {\n const base = css`\n display: flex;\n gap: ${size[1]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[400]};\n font-variant-numeric: tabular-nums;\n line-height: ${lineHeight['xs']};\n `\n\n const classes = [base]\n\n if (showWarning) {\n const warningStyles = css`\n color: ${colors.yellow[400]};\n `\n classes.push(warningStyles)\n }\n\n return classes\n },\n secondContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n border-right: 1px solid ${colors.gray[700]};\n display: flex;\n flex-direction: column;\n `,\n thirdContainer: css`\n flex: 1 1 500px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n border-right: 1px solid ${colors.gray[700]};\n\n @media (max-width: 700px) {\n border-top: 2px solid ${colors.gray[700]};\n }\n `,\n fourthContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n routesContainer: css`\n overflow-x: auto;\n overflow-y: visible;\n `,\n routesRowContainer: (active: boolean, isMatch: boolean) => {\n const base = css`\n display: flex;\n border-bottom: 1px solid ${colors.darkGray[400]};\n align-items: center;\n padding: ${size[1]} ${size[2]};\n gap: ${size[2]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[300]};\n cursor: ${isMatch ? 'pointer' : 'default'};\n line-height: ${lineHeight['xs']};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[500]};\n `\n classes.push(activeStyles)\n }\n\n return classes\n },\n routesRow: (isMatch: boolean) => {\n const base = css`\n flex: 1 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `\n\n const classes = [base]\n\n if (!isMatch) {\n const matchStyles = css`\n color: ${colors.gray[400]};\n `\n classes.push(matchStyles)\n }\n\n return classes\n },\n routeParamInfo: css`\n color: ${colors.gray[400]};\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `,\n nestedRouteRow: (isRoot: boolean) => {\n const base = css`\n margin-left: ${isRoot ? 0 : size[3.5]};\n border-left: ${isRoot ? '' : `solid 1px ${colors.gray[700]}`};\n `\n return base\n },\n code: css`\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `,\n matchesContainer: css`\n flex: 1 1 auto;\n overflow-y: auto;\n `,\n cachedMatchesContainer: css`\n flex: 1 1 auto;\n overflow-y: auto;\n max-height: 50%;\n `,\n maskedBadgeContainer: css`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n `,\n matchDetails: css`\n display: flex;\n flex-direction: column;\n padding: ${tokens.size[2]};\n font-size: ${tokens.font.size.xs};\n color: ${tokens.colors.gray[300]};\n line-height: ${tokens.font.lineHeight.sm};\n `,\n matchStatus: (\n status: 'pending' | 'success' | 'error' | 'notFound' | 'redirected',\n isFetching: boolean,\n ) => {\n const colorMap = {\n pending: 'yellow',\n success: 'green',\n error: 'red',\n notFound: 'purple',\n redirected: 'gray',\n } as const\n\n const color =\n isFetching && status === 'success' ? 'blue' : colorMap[status]\n\n return css`\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n border-radius: ${tokens.border.radius.sm};\n font-weight: ${tokens.font.weight.normal};\n background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};\n color: ${tokens.colors[color][300]};\n border: 1px solid ${tokens.colors[color][600]};\n margin-bottom: ${tokens.size[2]};\n transition: all 0.25s ease-out;\n `\n },\n matchDetailsInfo: css`\n display: flex;\n justify-content: flex-end;\n flex: 1;\n `,\n matchDetailsInfoLabel: css`\n display: flex;\n `,\n mainCloseBtn: css`\n background: ${colors.darkGray[700]};\n padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};\n border-radius: ${border.radius.md};\n position: fixed;\n z-index: 99999;\n display: inline-flex;\n width: fit-content;\n cursor: pointer;\n appearance: none;\n border: 0;\n gap: 8px;\n align-items: center;\n border: 1px solid ${colors.gray[500]};\n font-size: ${font.size.xs};\n cursor: pointer;\n transition: all 0.25s ease-out;\n\n &:hover {\n background: ${colors.darkGray[500]};\n }\n `,\n mainCloseBtnPosition: (\n position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',\n ) => {\n const base = css`\n ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n ${position === 'bottom-left'\n ? `bottom: ${size[2]}; left: ${size[2]};`\n : ''}\n ${position === 'bottom-right'\n ? `bottom: ${size[2]}; right: ${size[2]};`\n : ''}\n `\n return base\n },\n mainCloseBtnAnimation: (isOpen: boolean) => {\n if (isOpen) {\n return css`\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n `\n }\n return css`\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n `\n },\n routerLogoCloseButton: css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, #98f30c, #00f4a3);\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n mainCloseBtnDivider: css`\n width: 1px;\n background: ${tokens.colors.gray[600]};\n height: 100%;\n border-radius: 999999px;\n color: transparent;\n `,\n mainCloseBtnIconContainer: css`\n position: relative;\n width: ${size[5]};\n height: ${size[5]};\n background: pink;\n border-radius: 999999px;\n overflow: hidden;\n `,\n mainCloseBtnIconOuter: css`\n width: ${size[5]};\n height: ${size[5]};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n filter: blur(3px) saturate(1.8) contrast(2);\n `,\n mainCloseBtnIconInner: css`\n width: ${size[4]};\n height: ${size[4]};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n `,\n panelCloseBtn: css`\n position: absolute;\n cursor: pointer;\n z-index: 100001;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n background-color: ${colors.darkGray[700]};\n &:hover {\n background-color: ${colors.darkGray[500]};\n }\n\n top: 0;\n right: ${size[2]};\n transform: translate(0, -100%);\n border-right: ${colors.darkGray[300]} 1px solid;\n border-left: ${colors.darkGray[300]} 1px solid;\n border-top: ${colors.darkGray[300]} 1px solid;\n border-bottom: none;\n border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;\n padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};\n\n &::after {\n content: ' ';\n position: absolute;\n top: 100%;\n left: -${size[2.5]};\n height: ${size[1.5]};\n width: calc(100% + ${size[5]});\n }\n `,\n panelCloseBtnIcon: css`\n color: ${colors.gray[400]};\n width: ${size[2]};\n height: ${size[2]};\n `,\n }\n}\n\nlet _styles: ReturnType<typeof stylesFactory> | null = null\n\nfunction getStyles() {\n if (_styles) return _styles\n _styles = stylesFactory()\n\n return _styles\n}\n"],"names":["cx","React","_a","TanStackRouterDevtoolsPanel","BaseTanStackRouterDevtoolsPanel","border"],"mappings":"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"}
1
+ {"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n invariant,\n rootRouteId,\n trimPath,\n useRouter,\n useRouterState,\n} from '@tanstack/react-router'\n\nimport { css } from 'goober'\nimport { clsx as cx } from 'clsx'\nimport useLocalStorage from './useLocalStorage'\nimport {\n getRouteStatusColor,\n getStatusColor,\n multiSortBy,\n useIsMounted,\n useSafeState,\n} from './utils'\nimport Explorer from './Explorer'\nimport { tokens } from './tokens'\nimport { TanStackLogo } from './logo'\nimport type {\n AnyRootRoute,\n AnyRoute,\n AnyRouteMatch,\n AnyRouter,\n Route,\n} from '@tanstack/react-router'\n\ninterface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >\n /**\n * 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.\n */\n closeButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n /**\n * 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.\n */\n toggleButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: React.CSSProperties\n /**\n * The standard React className property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLAttributes<HTMLButtonElement>) {\n const { className, ...rest } = props\n return (\n <button {...rest} className={cx(getStyles().logo, className)}>\n <div className={getStyles().tanstackLogo}>TANSTACK</div>\n <div className={getStyles().routerLogo}>React Router v1</div>\n </button>\n )\n}\n\nconst DevtoolsOnCloseContext = React.createContext<\n | {\n onCloseClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n }\n | undefined\n>(undefined)\n\nconst useDevtoolsOnClose = () => {\n const context = React.useContext(DevtoolsOnCloseContext)\n if (!context) {\n throw new Error(\n 'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',\n )\n }\n return context\n}\n\nexport function TanStackRouterDevtools({\n initialIsOpen,\n panelProps = {},\n closeButtonProps = {},\n toggleButtonProps = {},\n position = 'bottom-left',\n containerElement: Container = 'footer',\n router,\n}: DevtoolsOptions): React.ReactElement | null {\n const [rootEl, setRootEl] = React.useState<HTMLDivElement>()\n const panelRef = React.useRef<HTMLDivElement>(null)\n const [isOpen, setIsOpen] = useLocalStorage(\n 'tanstackRouterDevtoolsOpen',\n initialIsOpen,\n )\n const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n 'tanstackRouterDevtoolsHeight',\n null,\n )\n const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n const [isResizing, setIsResizing] = useSafeState(false)\n const isMounted = useIsMounted()\n\n const handleDragStart = (\n panelElement: HTMLDivElement | null,\n startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n ) => {\n if (startEvent.button !== 0) return // Only allow left click for drag\n\n setIsResizing(true)\n\n const dragInfo = {\n originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n pageY: startEvent.pageY,\n }\n\n const run = (moveEvent: MouseEvent) => {\n const delta = dragInfo.pageY - moveEvent.pageY\n const newHeight = dragInfo.originalHeight + delta\n\n setDevtoolsHeight(newHeight)\n\n if (newHeight < 70) {\n setIsOpen(false)\n } else {\n setIsOpen(true)\n }\n }\n\n const unsub = () => {\n setIsResizing(false)\n document.removeEventListener('mousemove', run)\n document.removeEventListener('mouseUp', unsub)\n }\n\n document.addEventListener('mousemove', run)\n document.addEventListener('mouseup', unsub)\n }\n\n const isButtonClosed = isOpen ?? false\n\n React.useEffect(() => {\n setIsResolvedOpen(isOpen ?? false)\n }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n React.useEffect(() => {\n if (isResolvedOpen) {\n const previousValue = rootEl?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef.current?.getBoundingClientRect().height\n if (rootEl?.parentElement) {\n rootEl.parentElement.style.paddingBottom = `${containerHeight}px`\n }\n }\n\n run()\n\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', run)\n\n return () => {\n window.removeEventListener('resize', run)\n if (rootEl?.parentElement && typeof previousValue === 'string') {\n rootEl.parentElement.style.paddingBottom = previousValue\n }\n }\n }\n }\n return\n }, [isResolvedOpen, rootEl?.parentElement])\n\n React.useEffect(() => {\n if (rootEl) {\n const el = rootEl\n const fontSize = getComputedStyle(el).fontSize\n el.style.setProperty('--tsrd-font-size', fontSize)\n }\n }, [rootEl])\n\n const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n const {\n style: closeButtonStyle = {},\n onClick: onCloseClick,\n ...otherCloseButtonProps\n } = closeButtonProps\n\n const {\n style: toggleButtonStyle = {},\n onClick: onToggleClick,\n ...otherToggleButtonProps\n } = toggleButtonProps\n\n // Do not render on the server\n if (!isMounted()) return null\n\n const resolvedHeight = devtoolsHeight ?? 500\n\n return (\n <Container ref={setRootEl} className=\"TanStackRouterDevtools\">\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n <BaseTanStackRouterDevtoolsPanel\n ref={panelRef as any}\n {...otherPanelProps}\n router={router}\n className={cx(\n getStyles().devtoolsPanelContainer,\n getStyles().devtoolsPanelContainerVisibility(!!isOpen),\n getStyles().devtoolsPanelContainerResizing(isResizing),\n getStyles().devtoolsPanelContainerAnimation(\n isResolvedOpen,\n resolvedHeight + 16,\n ),\n )}\n style={{\n height: resolvedHeight,\n ...panelStyle,\n }}\n isOpen={isResolvedOpen}\n setIsOpen={setIsOpen}\n handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n />\n </DevtoolsOnCloseContext.Provider>\n\n <button\n type=\"button\"\n {...otherToggleButtonProps}\n aria-label=\"Open TanStack Router Devtools\"\n onClick={(e) => {\n setIsOpen(true)\n onToggleClick && onToggleClick(e)\n }}\n className={cx(\n getStyles().mainCloseBtn,\n getStyles().mainCloseBtnPosition(position),\n getStyles().mainCloseBtnAnimation(!isButtonClosed),\n )}\n >\n <div className={getStyles().mainCloseBtnIconContainer}>\n <div className={getStyles().mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div className={getStyles().mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div className={getStyles().mainCloseBtnDivider}>-</div>\n <div className={getStyles().routerLogoCloseButton}>TanStack Router</div>\n </button>\n </Container>\n )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref) {\n return (\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: () => {},\n }}\n >\n <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />\n </DevtoolsOnCloseContext.Provider>\n )\n})\n\nfunction RouteComp({\n router,\n route,\n isRoot,\n activeId,\n setActiveId,\n}: {\n router: AnyRouter\n route: AnyRootRoute | AnyRoute\n isRoot?: boolean\n activeId: string | undefined\n setActiveId: (id: string) => void\n}) {\n const routerState = useRouterState({\n router,\n } as any)\n const matches =\n routerState.status === 'pending'\n ? routerState.pendingMatches ?? []\n : routerState.matches\n\n const match = routerState.matches.find((d) => d.routeId === route.id)\n\n const param = React.useMemo(() => {\n try {\n if (match?.params) {\n const p = match.params\n const r: string = route.path || trimPath(route.id)\n if (r.startsWith('$')) {\n const trimmed = r.slice(1)\n if (p[trimmed]) {\n return `(${p[trimmed]})`\n }\n }\n }\n return ''\n } catch (error) {\n return ''\n }\n }, [match, route])\n\n return (\n <div>\n <div\n role=\"button\"\n aria-label={`Open match details for ${route.id}`}\n onClick={() => {\n if (match) {\n setActiveId(activeId === route.id ? '' : route.id)\n }\n }}\n className={cx(\n getStyles().routesRowContainer(route.id === activeId, !!match),\n )}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getRouteStatusColor(matches, route)),\n )}\n />\n <div className={cx(getStyles().routesRow(!!match))}>\n <div>\n <code className={getStyles().code}>\n {isRoot ? rootRouteId : route.path || trimPath(route.id)}{' '}\n </code>\n <code className={getStyles().routeParamInfo}>{param}</code>\n </div>\n <AgeTicker match={match} router={router} />\n </div>\n </div>\n {route.children?.length ? (\n <div className={getStyles().nestedRouteRow(!!isRoot)}>\n {[...(route.children as Array<Route>)]\n .sort((a, b) => {\n return a.rank - b.rank\n })\n .map((r) => (\n <RouteComp\n key={r.id}\n router={router}\n route={r}\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ))}\n </div>\n ) : null}\n </div>\n )\n}\n\nconst BaseTanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function BaseTanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n const {\n isOpen = true,\n setIsOpen,\n handleDragStart,\n router: userRouter,\n ...panelProps\n } = props\n\n const { onCloseClick } = useDevtoolsOnClose()\n const { className, ...otherPanelProps } = panelProps\n\n const contextRouter = useRouter({ warn: false })\n const router = userRouter ?? contextRouter\n const routerState = useRouterState({\n router,\n } as any)\n\n invariant(\n router,\n 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',\n )\n\n // useStore(router.__store)\n\n const [showMatches, setShowMatches] = useLocalStorage(\n 'tanstackRouterDevtoolsShowMatches',\n true,\n )\n\n const [activeId, setActiveId] = useLocalStorage(\n 'tanstackRouterDevtoolsActiveRouteId',\n '',\n )\n\n const activeMatch = React.useMemo(() => {\n const matches = [\n ...(routerState.pendingMatches ?? []),\n ...routerState.matches,\n ...routerState.cachedMatches,\n ]\n return matches.find((d) => d.routeId === activeId || d.id === activeId)\n }, [\n activeId,\n routerState.cachedMatches,\n routerState.matches,\n routerState.pendingMatches,\n ])\n\n const hasSearch = Object.keys(routerState.location.search).length\n\n const explorerState = {\n ...router,\n state: router.state,\n }\n\n return (\n <div\n ref={ref}\n className={cx(\n getStyles().devtoolsPanel,\n 'TanStackRouterDevtoolsPanel',\n className,\n )}\n {...otherPanelProps}\n >\n {handleDragStart ? (\n <div\n className={getStyles().dragHandle}\n onMouseDown={handleDragStart}\n ></div>\n ) : null}\n <button\n className={getStyles().panelCloseBtn}\n onClick={(e) => {\n setIsOpen(false)\n onCloseClick(e)\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"6\"\n fill=\"none\"\n viewBox=\"0 0 10 6\"\n className={getStyles().panelCloseBtnIcon}\n >\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.667\"\n d=\"M1 1l4 4 4-4\"\n ></path>\n </svg>\n </button>\n <div className={getStyles().firstContainer}>\n <div className={getStyles().row}>\n <Logo\n aria-hidden\n onClick={(e) => {\n setIsOpen(false)\n onCloseClick(e)\n }}\n />\n </div>\n <div className={getStyles().routerExplorerContainer}>\n <div className={getStyles().routerExplorer}>\n <Explorer\n label=\"Router\"\n value={Object.fromEntries(\n multiSortBy(\n Object.keys(explorerState),\n (\n [\n 'state',\n 'routesById',\n 'routesByPath',\n 'flatRoutes',\n 'options',\n ] as const\n ).map((d) => (dd) => dd !== d),\n )\n .map((key) => [key, (explorerState as any)[key]])\n .filter(\n (d) =>\n typeof d[1] !== 'function' &&\n ![\n '__store',\n 'basepath',\n 'injectedHtml',\n 'subscribers',\n 'latestLoadPromise',\n 'navigateTimeout',\n 'resetNextScroll',\n 'tempLocationKey',\n 'latestLocation',\n 'routeTree',\n 'history',\n ].includes(d[0]),\n ),\n )}\n defaultExpanded={{\n state: {} as any,\n context: {} as any,\n options: {} as any,\n }}\n filterSubEntries={(subEntries) => {\n return subEntries.filter((d) => typeof d.value !== 'function')\n }}\n />\n </div>\n </div>\n </div>\n <div className={getStyles().secondContainer}>\n <div className={getStyles().matchesContainer}>\n <div className={getStyles().detailsHeader}>\n <span>Pathname</span>\n {routerState.location.maskedLocation ? (\n <div className={getStyles().maskedBadgeContainer}>\n <span className={getStyles().maskedBadge}>masked</span>\n </div>\n ) : null}\n </div>\n <div className={getStyles().detailsContent}>\n <code>{routerState.location.pathname}</code>\n {routerState.location.maskedLocation ? (\n <code className={getStyles().maskedLocation}>\n {routerState.location.maskedLocation.pathname}\n </code>\n ) : null}\n </div>\n <div className={getStyles().detailsHeader}>\n <div className={getStyles().routeMatchesToggle}>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(false)\n }}\n disabled={!showMatches}\n className={cx(\n getStyles().routeMatchesToggleBtn(!showMatches, true),\n )}\n >\n Routes\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(true)\n }}\n disabled={showMatches}\n className={cx(\n getStyles().routeMatchesToggleBtn(!!showMatches, false),\n )}\n >\n Matches\n </button>\n </div>\n <div className={getStyles().detailsHeaderInfo}>\n <div>age / staleTime / gcTime</div>\n </div>\n </div>\n <div className={cx(getStyles().routesContainer)}>\n {!showMatches ? (\n <RouteComp\n router={router}\n route={router.routeTree}\n isRoot\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ) : (\n <div>\n {(routerState.status === 'pending'\n ? routerState.pendingMatches ?? []\n : routerState.matches\n ).map((match, i) => {\n return (\n <div\n key={match.id || i}\n role=\"button\"\n aria-label={`Open match details for ${match.id}`}\n onClick={() =>\n setActiveId(activeId === match.id ? '' : match.id)\n }\n className={cx(\n getStyles().matchRow(match === activeMatch),\n )}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code\n className={getStyles().matchID}\n >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>\n <AgeTicker match={match} router={router} />\n </div>\n )\n })}\n </div>\n )}\n </div>\n </div>\n {routerState.cachedMatches.length ? (\n <div className={getStyles().cachedMatchesContainer}>\n <div className={getStyles().detailsHeader}>\n <div>Cached Matches</div>\n <div className={getStyles().detailsHeaderInfo}>\n age / staleTime / gcTime\n </div>\n </div>\n <div>\n {routerState.cachedMatches.map((match) => {\n return (\n <div\n key={match.id}\n role=\"button\"\n aria-label={`Open match details for ${match.id}`}\n onClick={() =>\n setActiveId(activeId === match.id ? '' : match.id)\n }\n className={cx(getStyles().matchRow(match === activeMatch))}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code className={getStyles().matchID}>{`${match.id}`}</code>\n\n <AgeTicker match={match} router={router} />\n </div>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n {activeMatch ? (\n <div className={getStyles().thirdContainer}>\n <div className={getStyles().detailsHeader}>Match Details</div>\n <div>\n <div className={getStyles().matchDetails}>\n <div\n className={getStyles().matchStatus(\n activeMatch.status,\n activeMatch.isFetching,\n )}\n >\n <div>\n {activeMatch.status === 'success' && activeMatch.isFetching\n ? 'fetching'\n : activeMatch.status}\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>ID:</div>\n <div className={getStyles().matchDetailsInfo}>\n <code>{activeMatch.id}</code>\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>State:</div>\n <div className={getStyles().matchDetailsInfo}>\n {routerState.pendingMatches?.find(\n (d) => d.id === activeMatch.id,\n )\n ? 'Pending'\n : routerState.matches.find((d) => d.id === activeMatch.id)\n ? 'Active'\n : 'Cached'}\n </div>\n </div>\n <div className={getStyles().matchDetailsInfoLabel}>\n <div>Last Updated:</div>\n <div className={getStyles().matchDetailsInfo}>\n {activeMatch.updatedAt\n ? new Date(activeMatch.updatedAt).toLocaleTimeString()\n : 'N/A'}\n </div>\n </div>\n </div>\n </div>\n {activeMatch.loaderData ? (\n <>\n <div className={getStyles().detailsHeader}>Loader Data</div>\n <div className={getStyles().detailsContent}>\n <Explorer\n label=\"loaderData\"\n value={activeMatch.loaderData}\n defaultExpanded={{}}\n />\n </div>\n </>\n ) : null}\n <div className={getStyles().detailsHeader}>Explorer</div>\n <div className={getStyles().detailsContent}>\n <Explorer label=\"Match\" value={activeMatch} defaultExpanded={{}} />\n </div>\n </div>\n ) : null}\n {hasSearch ? (\n <div className={getStyles().fourthContainer}>\n <div className={getStyles().detailsHeader}>Search Params</div>\n <div className={getStyles().detailsContent}>\n <Explorer\n value={routerState.location.search}\n defaultExpanded={Object.keys(routerState.location.search).reduce(\n (obj: any, next) => {\n obj[next] = {}\n return obj\n },\n {},\n )}\n />\n </div>\n </div>\n ) : null}\n </div>\n )\n})\n\nfunction AgeTicker({\n match,\n router,\n}: {\n match?: AnyRouteMatch\n router: AnyRouter\n}) {\n const rerender = React.useReducer(\n () => ({}),\n () => ({}),\n )[1]\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n rerender()\n }, 1000)\n\n return () => {\n clearInterval(interval)\n }\n }, [rerender])\n\n if (!match) {\n return null\n }\n\n const route = router.looseRoutesById[match.routeId]!\n\n if (!route.options.loader) {\n return null\n }\n\n const age = Date.now() - match.updatedAt\n const staleTime =\n route.options.staleTime ?? router.options.defaultStaleTime ?? 0\n const gcTime =\n route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1000\n\n return (\n <div className={cx(getStyles().ageTicker(age > staleTime))}>\n <div>{formatTime(age)}</div>\n <div>/</div>\n <div>{formatTime(staleTime)}</div>\n <div>/</div>\n <div>{formatTime(gcTime)}</div>\n </div>\n )\n}\n\nfunction formatTime(ms: number) {\n const units = ['s', 'min', 'h', 'd']\n const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n let chosenUnitIndex = 0\n for (let i = 1; i < values.length; i++) {\n if (values[i]! < 1) break\n chosenUnitIndex = i\n }\n\n const formatter = new Intl.NumberFormat(navigator.language, {\n compactDisplay: 'short',\n notation: 'compact',\n maximumFractionDigits: 0,\n })\n\n return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nconst stylesFactory = () => {\n const { colors, font, size, alpha, shadow, border } = tokens\n const { fontFamily, lineHeight, size: fontSize } = font\n\n return {\n devtoolsPanelContainer: css`\n direction: ltr;\n position: fixed;\n bottom: 0;\n right: 0;\n z-index: 99999;\n width: 100%;\n max-height: 90%;\n border-top: 1px solid ${colors.gray[700]};\n transform-origin: top;\n `,\n devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n return css`\n visibility: ${isOpen ? 'visible' : 'hidden'};\n `\n },\n devtoolsPanelContainerResizing: (isResizing: boolean) => {\n if (isResizing) {\n return css`\n transition: none;\n `\n }\n\n return css`\n transition: all 0.4s ease;\n `\n },\n devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n if (isOpen) {\n return css`\n pointer-events: auto;\n transform: translateY(0);\n `\n }\n return css`\n pointer-events: none;\n transform: translateY(${height}px);\n `\n },\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${colors.gray[300]};\n `,\n routerLogo: css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, #84cc16, #10b981);\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n devtoolsPanel: css`\n display: flex;\n font-size: ${fontSize.sm};\n font-family: ${fontFamily.sans};\n background-color: ${colors.darkGray[700]};\n color: ${colors.gray[300]};\n\n @media (max-width: 700px) {\n flex-direction: column;\n }\n @media (max-width: 600px) {\n font-size: ${fontSize.xs};\n }\n `,\n dragHandle: css`\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 4px;\n cursor: row-resize;\n z-index: 100000;\n &:hover {\n background-color: ${colors.purple[400]}${alpha[90]};\n }\n `,\n firstContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n border-right: 1px solid ${colors.gray[700]};\n display: flex;\n flex-direction: column;\n `,\n routerExplorerContainer: css`\n overflow-y: auto;\n flex: 1;\n `,\n routerExplorer: css`\n padding: ${tokens.size[2]};\n `,\n row: css`\n display: flex;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${colors.darkGray[500]} 1px solid;\n align-items: center;\n `,\n detailsHeader: css`\n font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;\n position: sticky;\n top: 0;\n z-index: 2;\n background-color: ${colors.darkGray[600]};\n padding: 0px ${tokens.size[2]};\n font-weight: ${font.weight.medium};\n font-size: ${font.size.xs};\n min-height: ${tokens.size[8]};\n line-height: ${font.lineHeight.xs};\n text-align: left;\n display: flex;\n align-items: center;\n `,\n maskedBadge: css`\n background: ${colors.yellow[900]}${alpha[70]};\n color: ${colors.yellow[300]};\n display: inline-block;\n padding: ${tokens.size[0]} ${tokens.size[2.5]};\n border-radius: ${border.radius.full};\n font-size: ${font.size.xs};\n font-weight: ${font.weight.normal};\n border: 1px solid ${colors.yellow[300]};\n `,\n maskedLocation: css`\n color: ${colors.yellow[300]};\n `,\n detailsContent: css`\n padding: ${tokens.size[1.5]} ${tokens.size[2]};\n display: flex;\n align-items: center;\n font-size: ${font.size.xs};\n `,\n routeMatchesToggle: css`\n display: flex;\n align-items: center;\n border: 1px solid ${colors.gray[500]};\n border-radius: ${border.radius.sm};\n overflow: hidden;\n `,\n routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => {\n const base = css`\n appearance: none;\n border: none;\n font-size: 12px;\n padding: 4px 8px;\n background: transparent;\n cursor: pointer;\n font-family: ${fontFamily.sans};\n font-weight: ${font.weight.medium};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[400]};\n color: ${colors.gray[300]};\n `\n classes.push(activeStyles)\n } else {\n const inactiveStyles = css`\n color: ${colors.gray[500]};\n background: ${colors.darkGray[800]}${alpha[20]};\n `\n classes.push(inactiveStyles)\n }\n\n if (showBorder) {\n classes.push(css`\n border-right: 1px solid ${tokens.colors.gray[500]};\n `)\n }\n\n return classes\n },\n detailsHeaderInfo: css`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n align-items: center;\n font-weight: ${font.weight.normal};\n color: ${colors.gray[400]};\n `,\n matchRow: (active: boolean) => {\n const base = css`\n display: flex;\n border-bottom: 1px solid ${colors.darkGray[400]};\n cursor: pointer;\n align-items: center;\n padding: ${size[1]} ${size[2]};\n gap: ${size[2]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[300]};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[500]};\n `\n classes.push(activeStyles)\n }\n\n return classes\n },\n matchIndicator: (color: 'green' | 'red' | 'yellow' | 'gray' | 'blue') => {\n const base = css`\n flex: 0 0 auto;\n width: ${size[3]};\n height: ${size[3]};\n background: ${colors[color][900]};\n border: 1px solid ${colors[color][500]};\n border-radius: ${border.radius.full};\n transition: all 0.25s ease-out;\n box-sizing: border-box;\n `\n const classes = [base]\n\n if (color === 'gray') {\n const grayStyles = css`\n background: ${colors.gray[700]};\n border-color: ${colors.gray[400]};\n `\n classes.push(grayStyles)\n }\n\n return classes\n },\n matchID: css`\n flex: 1;\n line-height: ${lineHeight['xs']};\n `,\n ageTicker: (showWarning: boolean) => {\n const base = css`\n display: flex;\n gap: ${size[1]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[400]};\n font-variant-numeric: tabular-nums;\n line-height: ${lineHeight['xs']};\n `\n\n const classes = [base]\n\n if (showWarning) {\n const warningStyles = css`\n color: ${colors.yellow[400]};\n `\n classes.push(warningStyles)\n }\n\n return classes\n },\n secondContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n border-right: 1px solid ${colors.gray[700]};\n display: flex;\n flex-direction: column;\n `,\n thirdContainer: css`\n flex: 1 1 500px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n height: 100%;\n border-right: 1px solid ${colors.gray[700]};\n\n @media (max-width: 700px) {\n border-top: 2px solid ${colors.gray[700]};\n }\n `,\n fourthContainer: css`\n flex: 1 1 500px;\n min-height: 40%;\n max-height: 100%;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n routesContainer: css`\n overflow-x: auto;\n overflow-y: visible;\n `,\n routesRowContainer: (active: boolean, isMatch: boolean) => {\n const base = css`\n display: flex;\n border-bottom: 1px solid ${colors.darkGray[400]};\n align-items: center;\n padding: ${size[1]} ${size[2]};\n gap: ${size[2]};\n font-size: ${fontSize.xs};\n color: ${colors.gray[300]};\n cursor: ${isMatch ? 'pointer' : 'default'};\n line-height: ${lineHeight['xs']};\n `\n const classes = [base]\n\n if (active) {\n const activeStyles = css`\n background: ${colors.darkGray[500]};\n `\n classes.push(activeStyles)\n }\n\n return classes\n },\n routesRow: (isMatch: boolean) => {\n const base = css`\n flex: 1 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `\n\n const classes = [base]\n\n if (!isMatch) {\n const matchStyles = css`\n color: ${colors.gray[400]};\n `\n classes.push(matchStyles)\n }\n\n return classes\n },\n routeParamInfo: css`\n color: ${colors.gray[400]};\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `,\n nestedRouteRow: (isRoot: boolean) => {\n const base = css`\n margin-left: ${isRoot ? 0 : size[3.5]};\n border-left: ${isRoot ? '' : `solid 1px ${colors.gray[700]}`};\n `\n return base\n },\n code: css`\n font-size: ${fontSize.xs};\n line-height: ${lineHeight['xs']};\n `,\n matchesContainer: css`\n flex: 1 1 auto;\n overflow-y: auto;\n `,\n cachedMatchesContainer: css`\n flex: 1 1 auto;\n overflow-y: auto;\n max-height: 50%;\n `,\n maskedBadgeContainer: css`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n `,\n matchDetails: css`\n display: flex;\n flex-direction: column;\n padding: ${tokens.size[2]};\n font-size: ${tokens.font.size.xs};\n color: ${tokens.colors.gray[300]};\n line-height: ${tokens.font.lineHeight.sm};\n `,\n matchStatus: (\n status: 'pending' | 'success' | 'error' | 'notFound' | 'redirected',\n isFetching: boolean,\n ) => {\n const colorMap = {\n pending: 'yellow',\n success: 'green',\n error: 'red',\n notFound: 'purple',\n redirected: 'gray',\n } as const\n\n const color =\n isFetching && status === 'success' ? 'blue' : colorMap[status]\n\n return css`\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n border-radius: ${tokens.border.radius.sm};\n font-weight: ${tokens.font.weight.normal};\n background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};\n color: ${tokens.colors[color][300]};\n border: 1px solid ${tokens.colors[color][600]};\n margin-bottom: ${tokens.size[2]};\n transition: all 0.25s ease-out;\n `\n },\n matchDetailsInfo: css`\n display: flex;\n justify-content: flex-end;\n flex: 1;\n `,\n matchDetailsInfoLabel: css`\n display: flex;\n `,\n mainCloseBtn: css`\n background: ${colors.darkGray[700]};\n padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};\n border-radius: ${border.radius.md};\n position: fixed;\n z-index: 99999;\n display: inline-flex;\n width: fit-content;\n cursor: pointer;\n appearance: none;\n border: 0;\n gap: 8px;\n align-items: center;\n border: 1px solid ${colors.gray[500]};\n font-size: ${font.size.xs};\n cursor: pointer;\n transition: all 0.25s ease-out;\n\n &:hover {\n background: ${colors.darkGray[500]};\n }\n `,\n mainCloseBtnPosition: (\n position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',\n ) => {\n const base = css`\n ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n ${position === 'bottom-left'\n ? `bottom: ${size[2]}; left: ${size[2]};`\n : ''}\n ${position === 'bottom-right'\n ? `bottom: ${size[2]}; right: ${size[2]};`\n : ''}\n `\n return base\n },\n mainCloseBtnAnimation: (isOpen: boolean) => {\n if (isOpen) {\n return css`\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n `\n }\n return css`\n opacity: 0;\n pointer-events: none;\n visibility: hidden;\n `\n },\n routerLogoCloseButton: css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, #98f30c, #00f4a3);\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n mainCloseBtnDivider: css`\n width: 1px;\n background: ${tokens.colors.gray[600]};\n height: 100%;\n border-radius: 999999px;\n color: transparent;\n `,\n mainCloseBtnIconContainer: css`\n position: relative;\n width: ${size[5]};\n height: ${size[5]};\n background: pink;\n border-radius: 999999px;\n overflow: hidden;\n `,\n mainCloseBtnIconOuter: css`\n width: ${size[5]};\n height: ${size[5]};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n filter: blur(3px) saturate(1.8) contrast(2);\n `,\n mainCloseBtnIconInner: css`\n width: ${size[4]};\n height: ${size[4]};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n `,\n panelCloseBtn: css`\n position: absolute;\n cursor: pointer;\n z-index: 100001;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n background-color: ${colors.darkGray[700]};\n &:hover {\n background-color: ${colors.darkGray[500]};\n }\n\n top: 0;\n right: ${size[2]};\n transform: translate(0, -100%);\n border-right: ${colors.darkGray[300]} 1px solid;\n border-left: ${colors.darkGray[300]} 1px solid;\n border-top: ${colors.darkGray[300]} 1px solid;\n border-bottom: none;\n border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;\n padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};\n\n &::after {\n content: ' ';\n position: absolute;\n top: 100%;\n left: -${size[2.5]};\n height: ${size[1.5]};\n width: calc(100% + ${size[5]});\n }\n `,\n panelCloseBtnIcon: css`\n color: ${colors.gray[400]};\n width: ${size[2]};\n height: ${size[2]};\n `,\n }\n}\n\nlet _styles: ReturnType<typeof stylesFactory> | null = null\n\nfunction getStyles() {\n if (_styles) return _styles\n _styles = stylesFactory()\n\n return _styles\n}\n"],"names":["cx","React","_a","TanStackRouterDevtoolsPanel","BaseTanStackRouterDevtoolsPanel"],"mappings":"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"}
package/dist/esm/utils.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router';
3
- import { Theme } from './theme.js';
2
+ import type { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router';
3
+ import type { Theme } from './theme.js';
4
4
  export declare const isServer: boolean;
5
5
  type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
6
6
  export declare function getStatusColor(match: AnyRouteMatch): "blue" | "yellow" | "red" | "green" | "gray";
7
- export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute): "blue" | "yellow" | "red" | "green" | "gray";
7
+ export declare function getRouteStatusColor(matches: Array<AnyRouteMatch>, route: AnyRoute | AnyRootRoute): "blue" | "yellow" | "red" | "green" | "gray";
8
8
  type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
9
9
  export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
10
10
  export declare function useIsMounted(): () => boolean;
@@ -19,5 +19,5 @@ export declare const displayValue: (value: unknown) => string;
19
19
  * or when the component is not mounted anymore.
20
20
  */
21
21
  export declare function useSafeState<T>(initialState: T): [T, (value: T) => void];
22
- export declare function multiSortBy<T>(arr: T[], accessors?: ((item: T) => any)[]): T[];
22
+ export declare function multiSortBy<T>(arr: Array<T>, accessors?: Array<(item: T) => any>): Array<T>;
23
23
  export {};
package/dist/esm/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getStatusColor(match: AnyRouteMatch) {\n return match.status === 'success' && match.isFetching\n ? 'blue'\n : match.status === 'pending'\n ? 'yellow'\n : match.status === 'error'\n ? 'red'\n : match.status === 'success'\n ? 'green'\n : 'gray'\n}\n\nexport function getRouteStatusColor(\n matches: AnyRouteMatch[],\n route: AnyRoute | AnyRootRoute,\n) {\n const found = matches.find((d) => d.routeId === route.id)\n if (!found) return 'gray'\n return getStatusColor(found)\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n const name = Object.getOwnPropertyNames(Object(value))\n const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n try {\n return JSON.stringify(newValue, name)\n } catch (e) {\n return `unable to stringify`\n }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n const isMounted = useIsMounted()\n const [state, setState] = React.useState(initialState)\n\n const safeSetState = React.useCallback(\n (value: T) => {\n scheduleMicrotask(() => {\n if (isMounted()) {\n setState(value)\n }\n })\n },\n [isMounted],\n )\n\n return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n Promise.resolve()\n .then(callback)\n .catch((error) =>\n setTimeout(() => {\n throw error\n }),\n )\n}\n\nexport function multiSortBy<T>(\n arr: T[],\n accessors: ((item: T) => any)[] = [(d) => d],\n): T[] {\n return arr\n .map((d, i) => [d, i] as const)\n .sort(([a, ai], [b, bi]) => {\n for (const accessor of accessors) {\n const ao = accessor(a)\n const bo = accessor(b)\n\n if (typeof ao === 'undefined') {\n if (typeof bo === 'undefined') {\n continue\n }\n return 1\n }\n\n if (ao === bo) {\n continue\n }\n\n return ao > bo ? 1 : -1\n }\n\n return ai - bi\n })\n .map(([d]) => d)\n}\n"],"names":["React"],"mappings":";AAMa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,SAAO,MAAM,WAAW,aAAa,MAAM,aACvC,SACA,MAAM,WAAW,YACf,WACA,MAAM,WAAW,UACf,QACA,MAAM,WAAW,YACf,UACA;AACZ;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACxD,MAAI,CAAC;AAAc,WAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AA2CO,SAAS,eAAe;AACvB,QAAA,aAAaA,eAAM,OAAO,KAAK;AACrC,QAAM,YAAYA,eAAM,YAAY,MAAM,WAAW,SAAS,CAAA,CAAE;AAEhEA,iBAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,eAAW,UAAU;AACrB,WAAO,MAAM;AACX,iBAAW,UAAU;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAU,CAAA,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EACT;AACF;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY;AAClB,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,YAAY;AAErD,QAAM,eAAeA,eAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,aAAa;AACf,mBAAS,KAAK;AAAA,QAChB;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGL,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IAAA,CACP;AAAA,EAAA;AAEP;AAEO,SAAS,YACd,KACA,YAAkC,CAAC,CAAC,MAAM,CAAC,GACtC;AACL,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QACF;AACO,eAAA;AAAA,MACT;AAEA,UAAI,OAAO,IAAI;AACb;AAAA,MACF;AAEO,aAAA,KAAK,KAAK,IAAI;AAAA,IACvB;AAEA,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;"}
1
+ {"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\nimport type {\n AnyRootRoute,\n AnyRoute,\n AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport type { Theme } from './theme'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getStatusColor(match: AnyRouteMatch) {\n return match.status === 'success' && match.isFetching\n ? 'blue'\n : match.status === 'pending'\n ? 'yellow'\n : match.status === 'error'\n ? 'red'\n : match.status === 'success'\n ? 'green'\n : 'gray'\n}\n\nexport function getRouteStatusColor(\n matches: Array<AnyRouteMatch>,\n route: AnyRoute | AnyRootRoute,\n) {\n const found = matches.find((d) => d.routeId === route.id)\n if (!found) return 'gray'\n return getStatusColor(found)\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n const name = Object.getOwnPropertyNames(Object(value))\n const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n try {\n return JSON.stringify(newValue, name)\n } catch (e) {\n return `unable to stringify`\n }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n const isMounted = useIsMounted()\n const [state, setState] = React.useState(initialState)\n\n const safeSetState = React.useCallback(\n (value: T) => {\n scheduleMicrotask(() => {\n if (isMounted()) {\n setState(value)\n }\n })\n },\n [isMounted],\n )\n\n return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n Promise.resolve()\n .then(callback)\n .catch((error) =>\n setTimeout(() => {\n throw error\n }),\n )\n}\n\nexport function multiSortBy<T>(\n arr: Array<T>,\n accessors: Array<(item: T) => any> = [(d) => d],\n): Array<T> {\n return arr\n .map((d, i) => [d, i] as const)\n .sort(([a, ai], [b, bi]) => {\n for (const accessor of accessors) {\n const ao = accessor(a)\n const bo = accessor(b)\n\n if (typeof ao === 'undefined') {\n if (typeof bo === 'undefined') {\n continue\n }\n return 1\n }\n\n if (ao === bo) {\n continue\n }\n\n return ao > bo ? 1 : -1\n }\n\n return ai - bi\n })\n .map(([d]) => d)\n}\n"],"names":["React"],"mappings":";AAWa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,SAAO,MAAM,WAAW,aAAa,MAAM,aACvC,SACA,MAAM,WAAW,YACf,WACA,MAAM,WAAW,UACf,QACA,MAAM,WAAW,YACf,UACA;AACZ;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACxD,MAAI,CAAC;AAAc,WAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AA2CO,SAAS,eAAe;AACvB,QAAA,aAAaA,eAAM,OAAO,KAAK;AACrC,QAAM,YAAYA,eAAM,YAAY,MAAM,WAAW,SAAS,CAAA,CAAE;AAEhEA,iBAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,eAAW,UAAU;AACrB,WAAO,MAAM;AACX,iBAAW,UAAU;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAU,CAAA,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EACT;AACF;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY;AAClB,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,YAAY;AAErD,QAAM,eAAeA,eAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,aAAa;AACf,mBAAS,KAAK;AAAA,QAChB;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGL,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IAAA,CACP;AAAA,EAAA;AAEP;AAEO,SAAS,YACd,KACA,YAAqC,CAAC,CAAC,MAAM,CAAC,GACpC;AACV,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QACF;AACO,eAAA;AAAA,MACT;AAEA,UAAI,OAAO,IAAI;AACb;AAAA,MACF;AAEO,aAAA,KAAK,KAAK,IAAI;AAAA,IACvB;AAEA,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/router-devtools",
3
- "version": "1.22.5",
3
+ "version": "1.22.6",
4
4
  "description": "",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -52,7 +52,7 @@
52
52
  "clsx": "^2.1.0",
53
53
  "date-fns": "^2.29.1",
54
54
  "goober": "^2.1.14",
55
- "@tanstack/react-router": "1.22.5"
55
+ "@tanstack/react-router": "1.22.6"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@vitejs/plugin-react": "^4.2.1",
@@ -66,6 +66,7 @@
66
66
  },
67
67
  "scripts": {
68
68
  "clean": "rimraf ./dist && rimraf ./coverage",
69
+ "test:eslint": "eslint --ext .ts,.tsx ./src",
69
70
  "test:types": "tsc",
70
71
  "test:build": "publint --strict",
71
72
  "build": "vite build"
package/src/Explorer.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react'
2
2
  import { clsx as cx } from 'clsx'
3
+ import { css } from 'goober'
3
4
  import { tokens } from './tokens'
4
5
  import { displayValue, styled } from './utils'
5
- import { css } from 'goober'
6
6
 
7
7
  type ExpanderProps = {
8
8
  expanded: boolean
@@ -38,14 +38,14 @@ type RendererProps = {
38
38
  handleEntry: HandleEntryFn
39
39
  label?: React.ReactNode
40
40
  value: unknown
41
- subEntries: Entry[]
42
- subEntryPages: Entry[][]
41
+ subEntries: Array<Entry>
42
+ subEntryPages: Array<Array<Entry>>
43
43
  type: string
44
44
  expanded: boolean
45
45
  toggleExpanded: () => void
46
46
  pageSize: number
47
47
  renderer?: Renderer
48
- filterSubEntries?: (subEntries: Property[]) => Property[]
48
+ filterSubEntries?: (subEntries: Array<Property>) => Array<Property>
49
49
  }
50
50
 
51
51
  /**
@@ -57,10 +57,10 @@ type RendererProps = {
57
57
  * @example
58
58
  * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
59
59
  */
60
- export function chunkArray<T>(array: T[], size: number): T[][] {
60
+ export function chunkArray<T>(array: Array<T>, size: number): Array<Array<T>> {
61
61
  if (size < 1) return []
62
62
  let i = 0
63
- const result: T[][] = []
63
+ const result: Array<Array<T>> = []
64
64
  while (i < array.length) {
65
65
  result.push(array.slice(i, i + size))
66
66
  i = i + size
@@ -82,7 +82,7 @@ export const DefaultRenderer: Renderer = ({
82
82
  pageSize,
83
83
  renderer,
84
84
  }) => {
85
- const [expandedPages, setExpandedPages] = React.useState<number[]>([])
85
+ const [expandedPages, setExpandedPages] = React.useState<Array<number>>([])
86
86
  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)
87
87
 
88
88
  const refreshValueSnapshot = () => {
@@ -197,7 +197,7 @@ export default function Explorer({
197
197
  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])
198
198
 
199
199
  let type: string = typeof value
200
- let subEntries: Property[] = []
200
+ let subEntries: Array<Property> = []
201
201
 
202
202
  const makeProperty = (sub: { label: string; value: unknown }): Property => {
203
203
  const subDefaultExpanded =