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

package/build/types/index.d.ts

@@ -9,6 +9,7 @@
  * @license MIT
  */
 import React from 'react';
+import { Router } from '@tanstack/react-router';
 
 declare type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 interface DevtoolsOptions {
@@ -42,7 +43,7 @@ interface DevtoolsOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    useRouter?: () => unknown;
+    router: Router<any, any>;
 }
 interface DevtoolsPanelOptions {
     /**
@@ -68,9 +69,9 @@ interface DevtoolsPanelOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    useRouter: () => unknown;
+    router: Router<any, any>;
 }
-declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, useRouter: useRouterImpl, }: DevtoolsOptions): React.ReactElement | null;
+declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
 declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
 
 export { PartialKeys, TanStackRouterDevtools, TanStackRouterDevtoolsPanel };

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", "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 {
@@ -1419,7 +1452,7 @@
       toggleButtonProps = {},
       position = 'bottom-left',
       containerElement: Container = 'footer',
-      useRouter: useRouterImpl = reactRouter.useRouter
+      router
     } = _ref;
     const rootRef = React__default["default"].useRef(null);
     const panelRef = React__default["default"].useRef(null);
@@ -1555,7 +1588,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _extends({
       ref: panelRef
     }, otherPanelProps, {
-      useRouter: useRouterImpl,
+      router: router,
       style: _extends({
         position: 'fixed',
         bottom: '0',
@@ -1645,25 +1678,19 @@
     })) : 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,
       handleDragStart,
-      useRouter
+      router
     } = props,
           panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-    const router = useRouter();
-    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);
@@ -1672,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({
@@ -1747,7 +1773,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Router",
-      value: routerExplorerValue,
+      value: router,
       defaultExpanded: {}
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1767,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",
@@ -1798,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',
@@ -1807,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",
@@ -1837,32 +1863,33 @@
           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
+        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,
@@ -1898,10 +1925,10 @@
         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["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,
@@ -1948,7 +1975,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       onClick: () => {
-        router.invalidateRoute(activeMatch);
+        activeMatch.invalidate();
         router.notify();
       },
       style: {
@@ -1957,7 +1984,7 @@
       }
     }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
-      onClick: () => router.reload(),
+      onClick: () => activeMatch.load(),
       style: {
         background: defaultTheme.gray
       }
@@ -1975,7 +2002,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Match",
-      value: activeMatchExplorerValue,
+      value: activeMatch,
       defaultExpanded: {}
     }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {