@tanstack/router-devtools 0.0.1-beta.278 → 0.0.1-beta.280

package/build/cjs/devtools.js

@@ -265,8 +265,8 @@ function TanStackRouterDevtools({
 function RouteComp({
   route,
   isRoot,
-  activeRouteId,
-  setActiveRouteId
+  activeId,
+  setActiveId
 }) {
   const routerState = reactRouter.useRouterState();
   const matches = routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches;
@@ -276,7 +276,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: {
@@ -284,14 +284,15 @@ function RouteComp({
       borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
       cursor: match ? 'pointer' : 'default',
       alignItems: 'center',
-      background: route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined
+      background: route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,
+      padding: '.25rem .5rem',
+      gap: '.5rem'
     }
   }, isRoot ? null : /*#__PURE__*/React.createElement("div", {
     style: {
       flex: '0 0 auto',
       width: '.7rem',
       height: '.7rem',
-      margin: '.5rem .75rem',
       alignItems: 'center',
       justifyContent: 'center',
       fontWeight: 'bold',
@@ -300,21 +301,29 @@ function RouteComp({
       background: utils.getRouteStatusColor(matches, route, theme.defaultTheme),
       opacity: match ? 1 : 0.3
     }
-  }), /*#__PURE__*/React.createElement(styledComponents.Code, {
+  }), /*#__PURE__*/React.createElement("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'
     }
-  }, /*#__PURE__*/React.createElement("span", null, route.path || reactRouter.trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(styledComponents.Code, null, route.path || reactRouter.trimPath(route.id), " "), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
+    }
+  }, match ? /*#__PURE__*/React.createElement(styledComponents.Code, {
     style: {
       opacity: 0.3
     }
-  }, match.id) : null)), route.children?.length ? /*#__PURE__*/React.createElement("div", {
+  }, match.id) : null, /*#__PURE__*/React.createElement(AgeTicker, {
+    match: match
+  })))), route.children?.length ? /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: isRoot ? 0 : '1rem',
       borderLeft: isRoot ? '' : `solid 1px ${theme.defaultTheme.grayAlt}`
@@ -324,8 +333,8 @@ function RouteComp({
   }).map(r => /*#__PURE__*/React.createElement(RouteComp, {
     key: r.id,
     route: r,
-    activeRouteId: activeRouteId,
-    setActiveRouteId: setActiveRouteId
+    activeId: activeId,
+    setActiveId: setActiveId
   }))) : null);
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
@@ -338,31 +347,19 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
   } = props;
   const router = reactRouter.useRouter();
   const routerState = reactRouter.useRouterState();
-  const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches];
+  const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches, ...routerState.cachedMatches];
   reactRouter.invariant(router, '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.');
 
   // useStore(router.__store)
 
   const [showMatches, setShowMatches] = useLocalStorage.default('tanstackRouterDevtoolsShowMatches', true);
-  const [activeRouteId, setActiveRouteId] = useLocalStorage.default('tanstackRouterDevtoolsActiveRouteId', '');
-  const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
+  const [activeId, setActiveId] = useLocalStorage.default('tanstackRouterDevtoolsActiveRouteId', '');
+  const activeMatch = React.useMemo(() => 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 /*#__PURE__*/React.createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
   }, /*#__PURE__*/React.createElement(styledComponents.Panel, _rollupPluginBabelHelpers.extends({
@@ -467,10 +464,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
     }
   }, /*#__PURE__*/React.createElement(Explorer.default, {
     label: "Router",
-    value: router,
+    value: Object.fromEntries(utils.multiSortBy(Object.keys(explorerState), ['state', 'routesById', 'routesByPath', 'flatRoutes', 'options'].map(d => dd => dd !== d)).map(key => [key, explorerState[key]]).filter(d => typeof d[1] !== 'function' && !['__store', 'basepath', 'injectedHtml', 'subscribers', 'latestLoadPromise', 'navigateTimeout', 'resetNextScroll', 'tempLocationKey', 'latestLocation', 'routeTree', 'history'].includes(d[0]))),
     defaultExpanded: {
       state: {},
-      context: {}
+      context: {},
+      options: {}
     },
     filterSubEntries: subEntries => {
       return subEntries.filter(d => typeof d.value !== 'function');
@@ -534,9 +532,16 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
       zIndex: 1,
       display: 'flex',
       alignItems: 'center',
+      justifyContent: 'space-between',
       gap: '.5rem',
       fontWeight: 'bold'
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
+    }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: () => {
@@ -565,17 +570,23 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
       color: 'inherit',
       cursor: 'pointer'
     }
-  }, "Matches")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, {
+  }, "Matches")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: 0.3,
+      fontSize: '0.7rem',
+      fontWeight: 'normal'
+    }
+  }, "age / staleTime / gcTime")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, {
     route: router.routeTree,
     isRoot: true,
-    activeRouteId: activeRouteId,
-    setActiveRouteId: setActiveRouteId
+    activeId: activeId,
+    setActiveId: setActiveId
   }) : /*#__PURE__*/React.createElement("div", null, (routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches).map((match, i) => {
     return /*#__PURE__*/React.createElement("div", {
-      key: match.routeId || i,
+      key: match.id || i,
       role: "button",
-      "aria-label": `Open match details for ${match.routeId}`,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+      "aria-label": `Open match details for ${match.id}`,
+      onClick: () => setActiveId(activeId === match.id ? '' : match.id),
       style: {
         display: 'flex',
         borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
@@ -601,8 +612,73 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
         padding: '.5em',
         fontSize: '0.7rem'
       }
-    }, `${match.id}`));
-  })))), activeMatch ? /*#__PURE__*/React.createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React.createElement("div", {
+    }, `${match.id}`), /*#__PURE__*/React.createElement(AgeTicker, {
+      match: match
+    }));
+  }))), routerState.cachedMatches?.length ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: '1 1 auto',
+      overflowY: 'auto',
+      maxHeight: '50%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '.5rem',
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "Cached Matches"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: 0.3,
+      fontSize: '0.7rem',
+      fontWeight: 'normal'
+    }
+  }, "age / staleTime / gcTime")), /*#__PURE__*/React.createElement("div", null, routerState.cachedMatches.map(match => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: match.id,
+      role: "button",
+      "aria-label": `Open match details for ${match.id}`,
+      onClick: () => setActiveId(activeId === match.id ? '' : match.id),
+      style: {
+        display: 'flex',
+        borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
+        cursor: 'pointer',
+        alignItems: 'center',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+        fontSize: '0.7rem'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '.75rem',
+        height: '.75rem',
+        marginLeft: '.25rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '100%',
+        transition: 'all 1s ease-out'
+      }
+    }), /*#__PURE__*/React.createElement(styledComponents.Code, {
+      style: {
+        padding: '.5em'
+      }
+    }, `${match.id}`), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(AgeTicker, {
+      match: match
+    })));
+  }))) : null), activeMatch ? /*#__PURE__*/React.createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5em',
       background: theme.defaultTheme.backgroundAlt,
@@ -611,7 +687,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
       bottom: 0,
       zIndex: 1
     }
-  }, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  }, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", {
+    style: {
+      fontSize: '0.8rem'
+    }
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     style: {
       opacity: '.5'
     }
@@ -623,7 +703,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
     style: {
       opacity: '.5'
     }
-  }, "Status"), /*#__PURE__*/React.createElement("td", null, activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  }, "Status"), /*#__PURE__*/React.createElement("td", null, routerState.pendingMatches?.find(d => d.id === activeMatch.id) ? 'Pending' : routerState.matches?.find(d => d.id === activeMatch.id) ? 'Active' : 'Cached', ' ', "- ", activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     style: {
       opacity: '.5'
     }
@@ -693,6 +773,55 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanSt
     }, {})
   }))) : null));
 });
+function AgeTicker({
+  match
+}) {
+  const router = reactRouter.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 /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '.25rem',
+      color: age > staleTime ? theme.defaultTheme.warning : undefined
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, formatTime(age)), /*#__PURE__*/React.createElement("div", null, "/"), /*#__PURE__*/React.createElement("div", null, formatTime(staleTime)), /*#__PURE__*/React.createElement("div", null, "/"), /*#__PURE__*/React.createElement("div", null, formatTime(gcTime)));
+}
+function formatTime(ms) {
+  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];
+}
 
 exports.TanStackRouterDevtools = TanStackRouterDevtools;
 exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;