@tanstack/router-devtools 1.17.0 → 1.17.1

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 (11) hide show
  1. package/dist/cjs/Explorer.cjs +19 -13
  2. package/dist/cjs/Explorer.cjs.map +1 -1
  3. package/dist/cjs/devtools.cjs +95 -83
  4. package/dist/cjs/devtools.cjs.map +1 -1
  5. package/dist/esm/Explorer.js +19 -13
  6. package/dist/esm/Explorer.js.map +1 -1
  7. package/dist/esm/devtools.js +95 -83
  8. package/dist/esm/devtools.js.map +1 -1
  9. package/package.json +3 -2
  10. package/src/Explorer.tsx +21 -14
  11. package/src/devtools.tsx +93 -84
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} 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(styles.logo, className)}>\n <div className={styles.tanstackLogo}>TANSTACK</div>\n <div className={styles.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 rootRef = React.useRef<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[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n if (isResolvedOpen) {\n const previousValue = rootRef.current?.parentElement?.style.paddingBottom\n\n const run = () => {\n const containerHeight = panelRef.current?.getBoundingClientRect().height\n if (rootRef.current?.parentElement) {\n rootRef.current.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 (\n rootRef.current?.parentElement &&\n typeof previousValue === 'string'\n ) {\n rootRef.current.parentElement.style.paddingBottom = previousValue\n }\n }\n }\n }\n return\n }, [isResolvedOpen])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n if (rootRef.current) {\n const el = rootRef.current\n const fontSize = getComputedStyle(el).fontSize\n el.style.setProperty('--tsrd-font-size', fontSize)\n }\n }, [rootRef.current])\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={rootRef} className=\"TanStackRouterDevtools\">\n <DevtoolsOnCloseContext.Provider\n value={{\n onCloseClick: onCloseClick ?? (() => {}),\n }}\n >\n <TanStackRouterDevtoolsPanel\n ref={panelRef as any}\n {...otherPanelProps}\n router={router}\n className={cx(\n styles.devtoolsPanelContainer,\n styles.devtoolsPanelContainerVisibility(!!isOpen),\n styles.devtoolsPanelContainerResizing(isResizing),\n styles.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 styles.mainCloseBtn,\n styles.mainCloseBtnPosition(position),\n styles.mainCloseBtnAnimation(!isButtonClosed),\n )}\n >\n <div className={styles.mainCloseBtnIconContainer}>\n <div className={styles.mainCloseBtnIconOuter}>\n <TanStackLogo />\n </div>\n <div className={styles.mainCloseBtnIconInner}>\n <TanStackLogo />\n </div>\n </div>\n <div className={styles.mainCloseBtnDivider}>-</div>\n <div className={styles.routerLogoCloseButton}>React Router</div>\n </button>\n </Container>\n )\n}\n\nfunction RouteComp({\n route,\n isRoot,\n activeId,\n setActiveId,\n}: {\n route: AnyRootRoute | AnyRoute\n isRoot?: boolean\n activeId: string | undefined\n setActiveId: (id: string) => void\n}) {\n const routerState = useRouterState()\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 styles.routesRowContainer(route.id === activeId, !!match),\n )}\n >\n <div\n className={cx(\n styles.matchIndicator(getRouteStatusColor(matches, route)),\n )}\n />\n <div className={cx(styles.routesRow(!!match))}>\n <div>\n <code className={styles.code}>\n {isRoot ? '__root__' : route.path || trimPath(route.id)}{' '}\n </code>\n <code className={styles.routeParamInfo}>{param}</code>\n </div>\n <AgeTicker match={match} />\n </div>\n </div>\n {(route.children as Route[])?.length ? (\n <div className={styles.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 route={r}\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ))}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(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 styles.devtoolsPanel,\n 'TanStackRouterDevtoolsPanel',\n className,\n )}\n {...otherPanelProps}\n >\n {handleDragStart ? (\n <div className={styles.dragHandle} onMouseDown={handleDragStart}></div>\n ) : null}\n <button\n className={styles.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={styles.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={styles.firstContainer}>\n <div className={styles.row}>\n <Logo\n aria-hidden\n onClick={(e) => {\n setIsOpen(false)\n onCloseClick(e)\n }}\n />\n </div>\n <div className={styles.routerExplorerContainer}>\n <div className={styles.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={styles.secondContainer}>\n <div className={styles.matchesContainer}>\n <div className={styles.detailsHeader}>\n <span>Pathname</span>\n {routerState.location.maskedLocation ? (\n <div className={styles.maskedBadgeContainer}>\n <span className={styles.maskedBadge}>masked</span>\n </div>\n ) : null}\n </div>\n <div className={styles.detailsContent}>\n <code>{routerState.location.pathname}</code>\n {routerState.location.maskedLocation ? (\n <code className={styles.maskedLocation}>\n {routerState.location.maskedLocation.pathname}\n </code>\n ) : null}\n </div>\n <div className={styles.detailsHeader}>\n <div className={styles.routeMatchesToggle}>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(false)\n }}\n disabled={!showMatches}\n className={cx(styles.routeMatchesToggleBtn(!showMatches, true))}\n >\n Routes\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setShowMatches(true)\n }}\n disabled={showMatches}\n className={cx(\n styles.routeMatchesToggleBtn(!!showMatches, false),\n )}\n >\n Matches\n </button>\n </div>\n <div className={styles.detailsHeaderInfo}>\n <div>age / staleTime / gcTime</div>\n </div>\n </div>\n {!showMatches ? (\n <RouteComp\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(styles.matchRow(match === activeMatch))}\n >\n <div\n className={cx(\n styles.matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code\n className={styles.matchID}\n >{`${match.routeId === '__root__' ? '__root__' : match.pathname}`}</code>\n <AgeTicker match={match} />\n </div>\n )\n })}\n </div>\n )}\n </div>\n {routerState.cachedMatches?.length ? (\n <div className={styles.cachedMatchesContainer}>\n <div className={styles.detailsHeader}>\n <div>Cached Matches</div>\n <div className={styles.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(styles.matchRow(match === activeMatch))}\n >\n <div\n className={cx(\n styles.matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code className={styles.matchID}>{`${match.id}`}</code>\n\n <AgeTicker match={match} />\n </div>\n )\n })}\n </div>\n </div>\n ) : null}\n </div>\n {activeMatch ? (\n <div className={styles.thirdContainer}>\n <div className={styles.detailsHeader}>Match Details</div>\n <div>\n <div className={styles.matchDetails}>\n <div\n className={styles.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={styles.matchDetailsInfoLabel}>\n <div>ID:</div>\n <div className={styles.matchDetailsInfo}>\n <code>{activeMatch.id}</code>\n </div>\n </div>\n <div className={styles.matchDetailsInfoLabel}>\n <div>State:</div>\n <div className={styles.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={styles.matchDetailsInfoLabel}>\n <div>Last Updated:</div>\n <div className={styles.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={styles.detailsHeader}>Loader Data</div>\n <div className={styles.detailsContent}>\n <Explorer\n label=\"loaderData\"\n value={activeMatch.loaderData}\n defaultExpanded={{}}\n />\n </div>\n </>\n ) : null}\n <div className={styles.detailsHeader}>Explorer</div>\n <div className={styles.detailsContent}>\n <Explorer label=\"Match\" value={activeMatch} defaultExpanded={{}} />\n </div>\n </div>\n ) : null}\n {hasSearch ? (\n <div className={styles.fourthContainer}>\n <div className={styles.detailsHeader}>Search Params</div>\n <div className={styles.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({ match }: { match?: AnyRouteMatch }) {\n const router = useRouter()\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(styles.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 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',\n isFetching: boolean,\n ) => {\n const colorMap = {\n pending: 'yellow',\n success: 'green',\n error: 'red',\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\nconst styles = stylesFactory()\n"],"names":["cx","React","_a","_b","TanStackRouterDevtoolsPanel","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 AnyRouter,\n Route,\n AnyRoute,\n AnyRootRoute,\n trimPath,\n useRouter,\n useRouterState,\n AnyRouteMatch,\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 <TanStackRouterDevtoolsPanel\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}>React Router</div>\n </button>\n </Container>\n )\n}\n\nfunction RouteComp({\n route,\n isRoot,\n activeId,\n setActiveId,\n}: {\n route: AnyRootRoute | AnyRoute\n isRoot?: boolean\n activeId: string | undefined\n setActiveId: (id: string) => void\n}) {\n const routerState = useRouterState()\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 ? '__root__' : route.path || trimPath(route.id)}{' '}\n </code>\n <code className={getStyles().routeParamInfo}>{param}</code>\n </div>\n <AgeTicker match={match} />\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 route={r}\n activeId={activeId}\n setActiveId={setActiveId}\n />\n ))}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n HTMLDivElement,\n DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(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 {!showMatches ? (\n <RouteComp\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(getStyles().matchRow(match === activeMatch))}\n >\n <div\n className={cx(\n getStyles().matchIndicator(getStatusColor(match)),\n )}\n />\n\n <code\n className={getStyles().matchID}\n >{`${match.routeId === '__root__' ? '__root__' : match.pathname}`}</code>\n <AgeTicker match={match} />\n </div>\n )\n })}\n </div>\n )}\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} />\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({ match }: { match?: AnyRouteMatch }) {\n const router = useRouter()\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 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',\n isFetching: boolean,\n ) => {\n const colorMap = {\n pending: 'yellow',\n success: 'green',\n error: 'red',\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","border"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/router-devtools",
3
- "version": "1.17.0",
3
+ "version": "1.17.1",
4
4
  "description": "",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -57,7 +57,8 @@
57
57
  "devDependencies": {
58
58
  "@vitejs/plugin-react": "^4.2.1",
59
59
  "react": "^18.2.0",
60
- "react-dom": "^18.2.0"
60
+ "react-dom": "^18.2.0",
61
+ "vite": "^5.0.12"
61
62
  },
62
63
  "peerDependencies": {
63
64
  "react": ">=16",
package/src/Explorer.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react'
2
- import { css } from 'goober'
3
2
  import { clsx as cx } from 'clsx'
4
3
  import { tokens } from './tokens'
5
4
  import { displayValue, styled } from './utils'
5
+ import { css } from 'goober'
6
6
 
7
7
  type ExpanderProps = {
8
8
  expanded: boolean
@@ -10,14 +10,14 @@ type ExpanderProps = {
10
10
  }
11
11
 
12
12
  export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
13
- <span className={styles.expander}>
13
+ <span className={getStyles().expander}>
14
14
  <svg
15
15
  xmlns="http://www.w3.org/2000/svg"
16
16
  width="12"
17
17
  height="12"
18
18
  fill="none"
19
19
  viewBox="0 0 24 24"
20
- className={cx(styles.expanderIcon(expanded))}
20
+ className={cx(getStyles().expanderIcon(expanded))}
21
21
  >
22
22
  <path
23
23
  stroke="currentColor"
@@ -90,33 +90,33 @@ export const DefaultRenderer: Renderer = ({
90
90
  }
91
91
 
92
92
  return (
93
- <div className={styles.entry}>
93
+ <div className={getStyles().entry}>
94
94
  {subEntryPages.length ? (
95
95
  <>
96
96
  <button
97
- className={styles.expandButton}
97
+ className={getStyles().expandButton}
98
98
  onClick={() => toggleExpanded()}
99
99
  >
100
100
  <Expander expanded={expanded} />
101
101
  {label}
102
- <span className={styles.info}>
102
+ <span className={getStyles().info}>
103
103
  {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
104
104
  {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
105
105
  </span>
106
106
  </button>
107
107
  {expanded ? (
108
108
  subEntryPages.length === 1 ? (
109
- <div className={styles.subEntries}>
109
+ <div className={getStyles().subEntries}>
110
110
  {subEntries.map((entry, index) => handleEntry(entry))}
111
111
  </div>
112
112
  ) : (
113
- <div className={styles.subEntries}>
113
+ <div className={getStyles().subEntries}>
114
114
  {subEntryPages.map((entries, index) => {
115
115
  return (
116
116
  <div key={index}>
117
- <div className={styles.entry}>
117
+ <div className={getStyles().entry}>
118
118
  <button
119
- className={cx(styles.labelButton, 'labelButton')}
119
+ className={cx(getStyles().labelButton, 'labelButton')}
120
120
  onClick={() =>
121
121
  setExpandedPages((old) =>
122
122
  old.includes(index)
@@ -130,7 +130,7 @@ export const DefaultRenderer: Renderer = ({
130
130
  {index * pageSize + pageSize - 1}]
131
131
  </button>
132
132
  {expandedPages.includes(index) ? (
133
- <div className={styles.subEntries}>
133
+ <div className={getStyles().subEntries}>
134
134
  {entries.map((entry) => handleEntry(entry))}
135
135
  </div>
136
136
  ) : null}
@@ -149,7 +149,7 @@ export const DefaultRenderer: Renderer = ({
149
149
  label={
150
150
  <button
151
151
  onClick={refreshValueSnapshot}
152
- className={styles.refreshValueBtn}
152
+ className={getStyles().refreshValueBtn}
153
153
  >
154
154
  <span>{label}</span> 🔄{' '}
155
155
  </button>
@@ -161,7 +161,7 @@ export const DefaultRenderer: Renderer = ({
161
161
  ) : (
162
162
  <>
163
163
  <span>{label}:</span>{' '}
164
- <span className={styles.value}>{displayValue(value)}</span>
164
+ <span className={getStyles().value}>{displayValue(value)}</span>
165
165
  </>
166
166
  )}
167
167
  </div>
@@ -347,4 +347,11 @@ const stylesFactory = () => {
347
347
  }
348
348
  }
349
349
 
350
- const styles = stylesFactory()
350
+ let _styles: ReturnType<typeof stylesFactory> | null = null
351
+
352
+ function getStyles() {
353
+ if (_styles) return _styles
354
+ _styles = stylesFactory()
355
+
356
+ return _styles
357
+ }