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

package/build/umd/index.development.js

@@ -534,6 +534,25 @@
       throw error;
     }));
   }
+  function multiSortBy(arr, accessors = [d => d]) {
+    return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
+      for (const accessor of accessors) {
+        const ao = accessor(a);
+        const bo = accessor(b);
+        if (typeof ao === 'undefined') {
+          if (typeof bo === 'undefined') {
+            continue;
+          }
+          return 1;
+        }
+        if (ao === bo) {
+          continue;
+        }
+        return ao > bo ? 1 : -1;
+      }
+      return ai - bi;
+    }).map(([d]) => d);
+  }
 
   const Panel = styled('div', (_props, theme) => ({
     fontSize: 'clamp(12px, 1.5vw, 14px)',
@@ -1007,8 +1026,8 @@
   function RouteComp({
     route,
     isRoot,
-    activeRouteId,
-    setActiveRouteId
+    activeId,
+    setActiveId
   }) {
     const routerState = useRouterState();
     const matches = routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches;
@@ -1018,7 +1037,7 @@
       "aria-label": `Open match details for ${route.id}`,
       onClick: () => {
         if (match) {
-          setActiveRouteId(activeRouteId === route.id ? '' : route.id);
+          setActiveId(activeId === route.id ? '' : route.id);
         }
       },
       style: {
@@ -1026,14 +1045,15 @@
         borderBottom: `solid 1px ${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',
@@ -1042,21 +1062,29 @@
         background: getRouteStatusColor(matches, route, defaultTheme),
         opacity: match ? 1 : 0.3
       }
-    }), /*#__PURE__*/React.createElement(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 || trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(Code, null, route.path || trimPath(route.id), " "), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, match ? /*#__PURE__*/React.createElement(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 ${defaultTheme.grayAlt}`
@@ -1066,8 +1094,8 @@
     }).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) {
@@ -1080,31 +1108,19 @@
     } = props;
     const router = useRouter();
     const routerState = useRouterState();
-    const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches];
+    const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches, ...routerState.cachedMatches];
     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('tanstackRouterDevtoolsShowMatches', true);
-    const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
+    const [activeId, setActiveId] = useLocalStorage('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(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React.createElement(Panel, _extends({
@@ -1209,10 +1225,11 @@
       }
     }, /*#__PURE__*/React.createElement(Explorer, {
       label: "Router",
-      value: router,
+      value: Object.fromEntries(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');
@@ -1276,9 +1293,16 @@
         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: () => {
@@ -1307,17 +1331,23 @@
         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 ${defaultTheme.grayAlt}`,
@@ -1343,8 +1373,73 @@
           padding: '.5em',
           fontSize: '0.7rem'
         }
-      }, `${match.id}`));
-    })))), activeMatch ? /*#__PURE__*/React.createElement(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: 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 ${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: getStatusColor(match, defaultTheme),
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontWeight: 'bold',
+          borderRadius: '100%',
+          transition: 'all 1s ease-out'
+        }
+      }), /*#__PURE__*/React.createElement(Code, {
+        style: {
+          padding: '.5em'
+        }
+      }, `${match.id}`), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginLeft: 'auto'
+        }
+      }, /*#__PURE__*/React.createElement(AgeTicker, {
+        match: match
+      })));
+    }))) : null), activeMatch ? /*#__PURE__*/React.createElement(ActivePanel, null, /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
@@ -1353,7 +1448,11 @@
         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'
       }
@@ -1365,7 +1464,7 @@
       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'
       }
@@ -1435,6 +1534,55 @@
       }, {})
     }))) : null));
   });
+  function AgeTicker({
+    match
+  }) {
+    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 /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '.25rem',
+        color: age > staleTime ? 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;