@tanstack/react-router-devtools 0.0.1-alpha.5 → 0.0.1-alpha.7

package/build/esm/index.js

@@ -10,7 +10,7 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { last, useRouter } from '@tanstack/react-router';
+import { last } from '@tanstack/react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1076,6 +1076,41 @@ function scheduleMicrotask(callback) {
   }));
 }
 
+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",
@@ -1382,9 +1417,7 @@ function Logo(props) {
 const _excluded = ["style"],
       _excluded2 = ["style", "onClick"],
       _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
-      _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 {
@@ -1394,7 +1427,7 @@ function TanStackRouterDevtools(_ref) {
     toggleButtonProps = {},
     position = 'bottom-left',
     containerElement: Container = 'footer',
-    useRouter: useRouterImpl = useRouter
+    router
   } = _ref;
   const rootRef = React__default.useRef(null);
   const panelRef = React__default.useRef(null);
@@ -1530,7 +1563,7 @@ function TanStackRouterDevtools(_ref) {
   }, /*#__PURE__*/React__default.createElement(TanStackRouterDevtoolsPanel, _extends({
     ref: panelRef
   }, otherPanelProps, {
-    useRouter: useRouterImpl,
+    router: router,
     style: _extends({
       position: 'fixed',
       bottom: '0',
@@ -1620,25 +1653,19 @@ function TanStackRouterDevtools(_ref) {
   })) : null);
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__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,
     handleDragStart,
-    useRouter
+    router
   } = props,
         panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-  const router = useRouter();
-  const routerExplorerValue = React__default.useMemo(() => {
-    const rest = _objectWithoutPropertiesLoose(router, _excluded5);
-
-    return rest;
-  }, [router.state]);
   const rerender = React__default.useReducer(() => ({}), {})[1];
   React__default.useEffect(() => {
     let interval = setInterval(() => {
-      router.cleanPreloadCache(); // router.notify()
+      router.cleanMatchCache(); // router.notify()
 
       rerender();
     }, 250);
@@ -1647,16 +1674,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     };
   }, []);
   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.useMemo(() => {
-    if (!activeMatch) {
-      return {};
-    }
-
-    const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-    return rest;
-  }, [activeMatch]);
+  const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
+  React__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.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -1722,7 +1748,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Router",
-    value: routerExplorerValue,
+    value: router,
     defaultExpanded: {}
   })))), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1742,7 +1768,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Current Matches"), router.state.matches.map((match, i) => {
+  }, "Active Matches"), router.state.matches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
       key: match.routeId || i,
       role: "button",
@@ -1773,7 +1799,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         padding: '.5em'
       }
     }, "" + match.matchId));
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), (_router$state$pending = router.state.pending) != null && _router$state$pending.matches.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
@@ -1782,7 +1808,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       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.createElement("div", {
       key: match.routeId || i,
       role: "button",
@@ -1812,32 +1838,33 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         padding: '.5em'
       }
     }, "" + match.matchId));
-  }), /*#__PURE__*/React__default.createElement("div", {
+  })) : null, matchCacheValues.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
       background: defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
+      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.createElement("div", null, "Match Cache"), /*#__PURE__*/React__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.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,
@@ -1873,10 +1900,10 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         opacity: '.5'
       }
-    }, "Expires", ' ', formatDistanceStrict(new Date(), new Date(((_match$updatedAt = match.updatedAt) != null ? _match$updatedAt : Date.now()) + maxAge), {
+    }, "Expires", ' ', formatDistanceStrict(new Date(), new Date(gc), {
       addSuffix: true
     }))));
-  })), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
+  })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
       background: defaultTheme.backgroundAlt,
@@ -1923,7 +1950,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     onClick: () => {
-      router.invalidateRoute(activeMatch);
+      activeMatch.invalidate();
       router.notify();
     },
     style: {
@@ -1932,7 +1959,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
-    onClick: () => router.reload(),
+    onClick: () => activeMatch.load(),
     style: {
       background: defaultTheme.gray
     }
@@ -1950,7 +1977,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Match",
-    value: activeMatchExplorerValue,
+    value: activeMatch,
     defaultExpanded: {}
   }))) : null, /*#__PURE__*/React__default.createElement("div", {
     style: {