@tanstack/react-router-devtools 0.0.1-alpha.6 → 0.0.1-alpha.8

package/build/umd/index.development.js

@@ -1101,6 +1101,41 @@
     }));
   }
 
+  function multiSortBy(arr, accessors) {
+    if (accessors === void 0) {
+      accessors = [d => d];
+    }
+
+    return arr.map((d, i) => [d, i]).sort((_ref3, _ref4) => {
+      let [a, ai] = _ref3;
+      let [b, bi] = _ref4;
+
+      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(_ref5 => {
+      let [d] = _ref5;
+      return d;
+    });
+  }
+
   const Panel = styled('div', (_props, theme) => ({
     fontSize: 'clamp(12px, 1.5vw, 14px)',
     fontFamily: "sans-serif",
@@ -1407,9 +1442,7 @@
   const _excluded = ["style"],
         _excluded2 = ["style", "onClick"],
         _excluded3 = ["style", "onClick"],
-        _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"],
-        _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "loadMatches", "invalidateRoute", "resolvePath", "matchRoute", "buildLink", "__experimental__createSnapshot", "destroy"],
-        _excluded6 = ["cancel", "load", "router", "Link", "MatchRoute", "buildLink", "linkProps", "matchRoute", "navigate"];
+        _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
   const isServer = typeof window === 'undefined';
   function TanStackRouterDevtools(_ref) {
     let {
@@ -1645,7 +1678,7 @@
     })) : null);
   }
   const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-    var _router$state$matches, _router$state$pending, _last, _last2, _last3, _last4, _last5, _last6;
+    var _Object$values$find$m, _Object$values, _Object$values$find, _router$state$matches, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
 
     const {
       isOpen = true,
@@ -1654,15 +1687,10 @@
     } = props,
           panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-    const routerExplorerValue = React__default["default"].useMemo(() => {
-      const rest = _objectWithoutPropertiesLoose(router, _excluded5);
-
-      return rest;
-    }, [router.state]);
     const rerender = React__default["default"].useReducer(() => ({}), {})[1];
     React__default["default"].useEffect(() => {
       let interval = setInterval(() => {
-        router.cleanPreloadCache(); // router.notify()
+        router.cleanMatchCache(); // router.notify()
 
         rerender();
       }, 250);
@@ -1671,16 +1699,15 @@
       };
     }, []);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const activeMatch = (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
-    const activeMatchExplorerValue = React__default["default"].useMemo(() => {
-      if (!activeMatch) {
-        return {};
-      }
-
-      const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-      return rest;
-    }, [activeMatch]);
+    const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
+    React__default["default"].useEffect(() => {
+      setActiveMatchId('');
+    }, [activeRouteId]);
+    const activeMatch = (_Object$values$find$m = (_Object$values = Object.values(router.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) != null ? _Object$values$find$m : (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
+    const matchCacheValues = multiSortBy(Object.keys(router.matchCache).filter(key => {
+      const cacheEntry = router.matchCache[key];
+      return cacheEntry.gc > Date.now();
+    }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -1746,7 +1773,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Router",
-      value: routerExplorerValue,
+      value: router,
       defaultExpanded: {}
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1766,7 +1793,7 @@
         top: 0,
         zIndex: 1
       }
-    }, "Current Matches"), router.state.matches.map((match, i) => {
+    }, "Active Matches"), router.state.matches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
         role: "button",
@@ -1797,7 +1824,7 @@
           padding: '.5em'
         }
       }, "" + match.matchId));
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), (_router$state$pending = router.state.pending) != null && _router$state$pending.matches.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
@@ -1806,7 +1833,7 @@
         top: 0,
         zIndex: 1
       }
-    }, "Pending Matches"), (_router$state$pending = router.state.pending) == null ? void 0 : _router$state$pending.matches.map((match, i) => {
+    }, "Pending Matches"), (_router$state$pending2 = router.state.pending) == null ? void 0 : _router$state$pending2.matches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
         role: "button",
@@ -1836,32 +1863,34 @@
           padding: '.5em'
         }
       }, "" + match.matchId));
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    })) : null, matchCacheValues.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
-        zIndex: 1
+        bottom: 0,
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
       }
-    }, "Preloading Matches"), Object.keys(router.preloadCache).filter(key => {
-      var _cacheEntry$match$upd;
-
-      const cacheEntry = router.preloadCache[key];
-      return ((_cacheEntry$match$upd = cacheEntry.match.updatedAt) != null ? _cacheEntry$match$upd : Date.now()) + cacheEntry.maxAge > Date.now();
-    }).map((key, i) => {
-      var _match$updatedAt;
-
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, "Match Cache"), /*#__PURE__*/React__default["default"].createElement(Button, {
+      onClick: () => {
+        router.matchCache = {};
+        router.notify();
+      }
+    }, "Clear")), matchCacheValues.map((d, i) => {
       const {
         match,
-        maxAge
-      } = router.preloadCache[key];
+        gc
+      } = d;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.matchId || i,
         role: "button",
         "aria-label": "Open match details for " + match.matchId,
-        onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
+        onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
         style: {
           display: 'flex',
           borderBottom: "solid 1px " + defaultTheme.grayAlt,
@@ -1895,17 +1924,20 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(Code, null, "" + match.matchId)), /*#__PURE__*/React__default["default"].createElement("span", {
         style: {
-          opacity: '.5'
+          fontSize: '.7rem',
+          opacity: '.5',
+          lineHeight: 1
         }
-      }, "Expires", ' ', formatDistanceStrict(new Date(), new Date(((_match$updatedAt = match.updatedAt) != null ? _match$updatedAt : Date.now()) + maxAge), {
+      }, "Expires", ' ', formatDistanceStrict(new Date(gc), new Date(), {
         addSuffix: true
       }))));
-    })), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
+        bottom: 0,
         zIndex: 1
       }
     }, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
@@ -1938,6 +1970,7 @@
         padding: '.5em',
         position: 'sticky',
         top: 0,
+        bottom: 0,
         zIndex: 1
       }
     }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1966,6 +1999,7 @@
         padding: '.5em',
         position: 'sticky',
         top: 0,
+        bottom: 0,
         zIndex: 1
       }
     }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1974,7 +2008,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Match",
-      value: activeMatchExplorerValue,
+      value: activeMatch,
       defaultExpanded: {}
     }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1992,9 +2026,10 @@
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
+        bottom: 0,
         zIndex: 1
       }
-    }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "All Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em'
       }
@@ -2014,6 +2049,7 @@
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
+        bottom: 0,
         zIndex: 1
       }
     }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {