@tanstack/router-devtools 0.0.1-beta.279 → 0.0.1-beta.281

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.279",
+  "version": "0.0.1-beta.281",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "date-fns": "^2.29.1",
-    "@tanstack/react-router": "0.0.1-beta.279"
+    "@tanstack/react-router": "0.0.1-beta.281"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/devtools.tsx

@@ -8,12 +8,14 @@ import {
   trimPath,
   useRouter,
   useRouterState,
+  AnyRouteMatch,
 } from '@tanstack/react-router'
 
 import useLocalStorage from './useLocalStorage'
 import {
   getRouteStatusColor,
   getStatusColor,
+  multiSortBy,
   useIsMounted,
   useSafeState,
 } from './utils'
@@ -409,13 +411,13 @@ export function TanStackRouterDevtools({
 function RouteComp({
   route,
   isRoot,
-  activeRouteId,
-  setActiveRouteId,
+  activeId,
+  setActiveId,
 }: {
   route: AnyRootRoute | AnyRoute
   isRoot?: boolean
-  activeRouteId: string | undefined
-  setActiveRouteId: (id: string) => void
+  activeId: string | undefined
+  setActiveId: (id: string) => void
 }) {
   const routerState = useRouterState()
   const matches =
@@ -432,7 +434,7 @@ function RouteComp({
         aria-label={`Open match details for ${route.id}`}
         onClick={() => {
           if (match) {
-            setActiveRouteId(activeRouteId === route.id ? '' : route.id)
+            setActiveId(activeId === route.id ? '' : route.id)
           }
         }}
         style={{
@@ -441,7 +443,9 @@ function RouteComp({
           cursor: match ? 'pointer' : 'default',
           alignItems: 'center',
           background:
-            route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined,
+            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,
+          padding: '.25rem .5rem',
+          gap: '.5rem',
         }}
       >
         {isRoot ? null : (
@@ -450,7 +454,6 @@ function RouteComp({
               flex: '0 0 auto',
               width: '.7rem',
               height: '.7rem',
-              margin: '.5rem .75rem',
               alignItems: 'center',
               justifyContent: 'center',
               fontWeight: 'bold',
@@ -461,20 +464,29 @@ function RouteComp({
             }}
           />
         )}
-        <Code
+        <div
           style={{
             flex: '1 0 auto',
             display: 'flex',
             justifyContent: 'space-between',
-            padding: '.25rem .5rem .25rem 0',
-            paddingLeft: isRoot ? '.5rem' : 0,
+            alignItems: 'center',
+            padding: isRoot ? '0 .25rem' : 0,
             opacity: match ? 1 : 0.7,
             fontSize: '0.7rem',
           }}
         >
-          <span>{route.path || trimPath(route.id)} </span>
-          {match ? <span style={{ opacity: 0.3 }}>{match.id}</span> : null}
-        </Code>
+          <Code>{route.path || trimPath(route.id)} </Code>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '.5rem',
+            }}
+          >
+            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}
+            <AgeTicker match={match} />
+          </div>
+        </div>
       </div>
       {(route.children as Route[])?.length ? (
         <div
@@ -491,8 +503,8 @@ function RouteComp({
               <RouteComp
                 key={r.id}
                 route={r}
-                activeRouteId={activeRouteId}
-                setActiveRouteId={setActiveRouteId}
+                activeId={activeId}
+                setActiveId={setActiveId}
               />
             ))}
         </div>
@@ -519,6 +531,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   const matches = [
     ...(routerState.pendingMatches ?? []),
     ...routerState.matches,
+    ...routerState.cachedMatches,
   ]
 
   invariant(
@@ -533,32 +546,22 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     true,
   )
 
-  const [activeRouteId, setActiveRouteId] = useLocalStorage(
+  const [activeId, setActiveId] = useLocalStorage(
     'tanstackRouterDevtoolsActiveRouteId',
     '',
   )
 
   const activeMatch = React.useMemo(
-    () => matches.find((d) => d.routeId === activeRouteId),
-    [matches, activeRouteId],
+    () => matches.find((d) => d.routeId === activeId || d.id === activeId),
+    [matches, activeId],
   )
 
   const hasSearch = Object.keys(routerState.location.search || {}).length
 
-  // const preloadMatches = matches.filter((match) => {
-  //   return (
-  //     !state.matchIds.includes(match.id) &&
-  //     !state.pendingMatchIds.includes(match.id)
-  //   )
-  // })
-
-  // React.useEffect(() => {
-  //   const interval = setInterval(() => {
-  //     router.cleanMatches()
-  //   }, 1000)
-
-  //   return () => clearInterval(interval)
-  // }, [router])
+  const explorerState = {
+    ...router,
+    state: router.state,
+  }
 
   return (
     <ThemeProvider theme={theme}>
@@ -673,8 +676,43 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             >
               <Explorer
                 label="Router"
-                value={router}
-                defaultExpanded={{ state: {} as any, context: {} as any }}
+                value={Object.fromEntries(
+                  multiSortBy(
+                    Object.keys(explorerState),
+                    (
+                      [
+                        'state',
+                        'routesById',
+                        'routesByPath',
+                        'flatRoutes',
+                        'options',
+                      ] as const
+                    ).map((d) => (dd) => dd !== d),
+                  )
+                    .map((key) => [key, (explorerState as any)[key]])
+                    .filter(
+                      (d) =>
+                        typeof d[1] !== 'function' &&
+                        ![
+                          '__store',
+                          'basepath',
+                          'injectedHtml',
+                          'subscribers',
+                          'latestLoadPromise',
+                          'navigateTimeout',
+                          'resetNextScroll',
+                          'tempLocationKey',
+                          'latestLocation',
+                          'routeTree',
+                          'history',
+                        ].includes(d[0]),
+                    ),
+                )}
+                defaultExpanded={{
+                  state: {} as any,
+                  context: {} as any,
+                  options: {} as any,
+                }}
                 filterSubEntries={(subEntries) => {
                   return subEntries.filter((d) => typeof d.value !== 'function')
                 }}
@@ -761,52 +799,70 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 zIndex: 1,
                 display: 'flex',
                 alignItems: 'center',
+                justifyContent: 'space-between',
                 gap: '.5rem',
                 fontWeight: 'bold',
               }}
             >
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMatches(false)
-                }}
-                disabled={!showMatches}
+              <div
                 style={{
-                  appearance: 'none',
-                  opacity: showMatches ? 0.5 : 1,
-                  border: 0,
-                  background: 'transparent',
-                  color: 'inherit',
-                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '.5rem',
                 }}
               >
-                Routes
-              </button>
-              /
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMatches(true)
-                }}
-                disabled={showMatches}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowMatches(false)
+                  }}
+                  disabled={!showMatches}
+                  style={{
+                    appearance: 'none',
+                    opacity: showMatches ? 0.5 : 1,
+                    border: 0,
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Routes
+                </button>
+                /
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowMatches(true)
+                  }}
+                  disabled={showMatches}
+                  style={{
+                    appearance: 'none',
+                    opacity: !showMatches ? 0.5 : 1,
+                    border: 0,
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Matches
+                </button>
+              </div>
+              <div
                 style={{
-                  appearance: 'none',
-                  opacity: !showMatches ? 0.5 : 1,
-                  border: 0,
-                  background: 'transparent',
-                  color: 'inherit',
-                  cursor: 'pointer',
+                  opacity: 0.3,
+                  fontSize: '0.7rem',
+                  fontWeight: 'normal',
                 }}
               >
-                Matches
-              </button>
+                age / staleTime / gcTime
+              </div>
             </div>
             {!showMatches ? (
               <RouteComp
                 route={router.routeTree}
                 isRoot
-                activeRouteId={activeRouteId}
-                setActiveRouteId={setActiveRouteId}
+                activeId={activeId}
+                setActiveId={setActiveId}
               />
             ) : (
               <div>
@@ -816,13 +872,11 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 ).map((match, i) => {
                   return (
                     <div
-                      key={match.routeId || i}
+                      key={match.id || i}
                       role="button"
-                      aria-label={`Open match details for ${match.routeId}`}
+                      aria-label={`Open match details for ${match.id}`}
                       onClick={() =>
-                        setActiveRouteId(
-                          activeRouteId === match.routeId ? '' : match.routeId,
-                        )
+                        setActiveId(activeId === match.id ? '' : match.id)
                       }
                       style={{
                         display: 'flex',
@@ -858,13 +912,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                       >
                         {`${match.id}`}
                       </Code>
+                      <AgeTicker match={match} />
                     </div>
                   )
                 })}
               </div>
             )}
           </div>
-          {/* {preloadMatches?.length ? (
+          {routerState.cachedMatches?.length ? (
             <div
               style={{
                 flex: '1 1 auto',
@@ -881,62 +936,76 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   zIndex: 1,
                   display: 'flex',
                   alignItems: 'center',
+                  justifyContent: 'space-between',
                   gap: '.5rem',
                   fontWeight: 'bold',
                 }}
               >
-                Preloaded Matches
+                <div>Cached Matches</div>
+                <div
+                  style={{
+                    opacity: 0.3,
+                    fontSize: '0.7rem',
+                    fontWeight: 'normal',
+                  }}
+                >
+                  age / staleTime / gcTime
+                </div>
               </div>
-              {preloadMatches.map((match) => {
-                return (
-                  <div
-                    key={match.id}
-                    role="button"
-                    aria-label={`Open match details for ${match.routeId}`}
-                    onClick={() =>
-                      setActiveMatchId(
-                        activeMatchId === match.id ? '' : match.id,
-                      )
-                    }
-                    style={{
-                      display: 'flex',
-                      borderBottom: `solid 1px ${theme.grayAlt}`,
-                      cursor: 'pointer',
-                      alignItems: 'center',
-                      background:
-                        match === activeMatch
-                          ? 'rgba(255,255,255,.1)'
-                          : undefined,
-                    }}
-                  >
+              <div>
+                {routerState.cachedMatches.map((match) => {
+                  return (
                     <div
+                      key={match.id}
+                      role="button"
+                      aria-label={`Open match details for ${match.id}`}
+                      onClick={() =>
+                        setActiveId(activeId === match.id ? '' : match.id)
+                      }
                       style={{
-                        flex: '0 0 auto',
-                        width: '1.3rem',
-                        height: '1.3rem',
-                        marginLeft: '.25rem',
-                        background: getStatusColor(match, theme),
+                        display: 'flex',
+                        borderBottom: `solid 1px ${theme.grayAlt}`,
+                        cursor: 'pointer',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        fontWeight: 'bold',
-                        borderRadius: '.25rem',
-                        transition: 'all .2s ease-out',
-                      }}
-                    />
-
-                    <Code
-                      style={{
-                        padding: '.5em',
+                        background:
+                          match === activeMatch
+                            ? 'rgba(255,255,255,.1)'
+                            : undefined,
                         fontSize: '0.7rem',
                       }}
                     >
-                      {`${match.id}`}
-                    </Code>
-                  </div>
-                )
-              })}
+                      <div
+                        style={{
+                          flex: '0 0 auto',
+                          width: '.75rem',
+                          height: '.75rem',
+                          marginLeft: '.25rem',
+                          background: getStatusColor(match, theme),
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontWeight: 'bold',
+                          borderRadius: '100%',
+                          transition: 'all 1s ease-out',
+                        }}
+                      />
+
+                      <Code
+                        style={{
+                          padding: '.5em',
+                        }}
+                      >
+                        {`${match.id}`}
+                      </Code>
+
+                      <div style={{ marginLeft: 'auto' }}>
+                        <AgeTicker match={match} />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
             </div>
-          ) : null} */}
+          ) : null}
         </div>
         {activeMatch ? (
           <ActivePanel>
@@ -953,7 +1022,11 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               Match Details
             </div>
             <div>
-              <table>
+              <table
+                style={{
+                  fontSize: '0.8rem',
+                }}
+              >
                 <tbody>
                   <tr>
                     <td style={{ opacity: '.5' }}>ID</td>
@@ -969,7 +1042,18 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Status</td>
-                    <td>{activeMatch.status}</td>
+                    <td>
+                      {routerState.pendingMatches?.find(
+                        (d) => d.id === activeMatch.id,
+                      )
+                        ? 'Pending'
+                        : routerState.matches?.find(
+                              (d) => d.id === activeMatch.id,
+                            )
+                          ? 'Active'
+                          : 'Cached'}{' '}
+                      - {activeMatch.status}
+                    </td>
                   </tr>
                   {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
@@ -1113,3 +1197,74 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     </ThemeProvider>
   )
 })
+
+function AgeTicker({ match }: { match?: AnyRouteMatch }) {
+  const router = useRouter()
+
+  const rerender = React.useReducer(
+    () => ({}),
+    () => ({}),
+  )[1]
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      rerender()
+    }, 1000)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  if (!match) {
+    return null
+  }
+
+  const route = router.looseRoutesById[match?.routeId]!
+
+  if (!route.options.loader) {
+    return null
+  }
+
+  const age = Date.now() - match?.updatedAt
+  const staleTime =
+    route.options.staleTime ?? router.options.defaultStaleTime ?? 0
+  const gcTime =
+    route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1000
+
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '.25rem',
+        color: age > staleTime ? theme.warning : undefined,
+      }}
+    >
+      <div style={{}}>{formatTime(age)}</div>
+      <div>/</div>
+      <div>{formatTime(staleTime)}</div>
+      <div>/</div>
+      <div>{formatTime(gcTime)}</div>
+    </div>
+  )
+}
+
+function formatTime(ms: number) {
+  const units = ['s', 'min', 'h', 'd']
+  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]
+
+  let chosenUnitIndex = 0
+  for (let i = 1; i < values.length; i++) {
+    if (values[i]! < 1) break
+    chosenUnitIndex = i
+  }
+
+  const formatter = new Intl.NumberFormat(navigator.language, {
+    compactDisplay: 'short',
+    notation: 'compact',
+    maximumFractionDigits: 0,
+  })
+
+  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]
+}