@tanstack/router-devtools 0.0.1-beta.142 → 0.0.1-beta.144

package/build/umd/index.development.js

@@ -216,12 +216,15 @@
   }
 
   const isServer$1 = typeof window === 'undefined';
-  function getStatusColor(match, theme) {
-    return match.status === 'pending' ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+  function getStatusColor(match, theme, router) {
+    return match.status === 'pending' || match.isFetching ? theme.active : router.getIsInvalid({
+      matchId: match.id
+    }) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
   }
-  function getRouteStatusColor(matches, route, theme) {
+  function getRouteStatusColor(matches, route, theme, router) {
     const found = matches.find(d => d.routeId === route.id);
-    return found ? found.status === 'pending' ? theme.active : found.status === 'error' ? theme.danger : found.status === 'success' ? theme.success : theme.gray : theme.gray;
+    if (!found) return theme.gray;
+    return getStatusColor(found, theme, router);
   }
   function styled(type, newStyles, queries = {}) {
     return /*#__PURE__*/React__default["default"].forwardRef(({
@@ -770,16 +773,22 @@
   function RouteComp({
     route,
     isRoot,
-    matches,
+    router,
     activeRouteId,
-    setActiveRouteId
+    activeMatchId,
+    setActiveRouteId,
+    setActiveMatchId
   }) {
-    const match = matches.find(d => d.routeId === route.id);
+    const matches = Object.values(router.state.matchesById);
+    const match = router.state.matches.find(d => d.routeId === route.id);
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       role: "button",
       "aria-label": `Open match details for ${route.id}`,
       onClick: () => {
-        if (match) setActiveRouteId(activeRouteId === route.id ? '' : route.id);
+        if (match) {
+          setActiveRouteId(activeRouteId === route.id ? '' : route.id);
+          setActiveMatchId(match.id);
+        }
       },
       style: {
         display: 'flex',
@@ -799,7 +808,7 @@
         fontWeight: 'bold',
         borderRadius: '100%',
         transition: 'all .2s ease-out',
-        background: getRouteStatusColor(matches, route, defaultTheme),
+        background: getRouteStatusColor(matches, route, defaultTheme, router),
         opacity: match ? 1 : 0.3
       }
     }), /*#__PURE__*/React__default["default"].createElement(Code, {
@@ -809,7 +818,8 @@
         justifyContent: 'space-between',
         padding: '.25rem .5rem .25rem 0',
         paddingLeft: isRoot ? '.5rem' : 0,
-        opacity: match ? 1 : 0.7
+        opacity: match ? 1 : 0.7,
+        fontSize: '0.7rem'
       }
     }, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
@@ -825,9 +835,11 @@
     }).map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, {
       key: r.id,
       route: r,
-      matches: matches,
+      router: router,
       activeRouteId: activeRouteId,
-      setActiveRouteId: setActiveRouteId
+      activeMatchId: activeMatchId,
+      setActiveRouteId: setActiveRouteId,
+      setActiveMatchId: setActiveMatchId
     }))) : null);
   }
   const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
@@ -844,9 +856,18 @@
     useStore(router.__store);
     const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.state.matches)], [router.state.matches]);
-    const activeMatch = allMatches?.find(d => d.routeId === activeRouteId);
+    const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
+    const activeMatch = React__default["default"].useMemo(() => router.state.matchesById[activeRouteId] || router.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]);
     const hasSearch = Object.keys(router.state.location.search || {}).length;
+    const preloadMatches = Object.values(router.state.matchesById).filter(match => {
+      return !router.state.matchIds.includes(match.id) && !router.state.pendingMatchIds.includes(match.id);
+    });
+    React__default["default"].useEffect(() => {
+      const interval = setInterval(() => {
+        router.cleanMatches();
+      }, 1000);
+      return () => clearInterval(interval);
+    }, [router]);
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -969,6 +990,11 @@
         display: 'flex',
         flexDirection: 'column'
       }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '1 1 auto',
+        overflowY: 'auto'
+      }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em',
@@ -1010,10 +1036,12 @@
       }
     }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
       route: router.routeTree,
+      router: router,
       isRoot: true,
-      matches: allMatches,
       activeRouteId: activeRouteId,
-      setActiveRouteId: setActiveRouteId
+      activeMatchId: activeMatchId,
+      setActiveRouteId: setActiveRouteId,
+      setActiveMatchId: setActiveMatchId
     }) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.matches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
@@ -1033,7 +1061,56 @@
           width: '1.3rem',
           height: '1.3rem',
           marginLeft: '.25rem',
-          background: getStatusColor(match, defaultTheme),
+          background: getStatusColor(match, defaultTheme, router),
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontWeight: 'bold',
+          borderRadius: '.25rem',
+          transition: 'all .2s ease-out'
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(Code, {
+        style: {
+          padding: '.5em',
+          fontSize: '0.7rem'
+        }
+      }, `${match.id}`));
+    }))), preloadMatches?.length ? /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '1 1 auto',
+        overflowY: 'auto',
+        maxHeight: '50%'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        padding: '.5em',
+        background: defaultTheme.backgroundAlt,
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, "Preloaded Matches"), preloadMatches.map(match => {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: match.id,
+        role: "button",
+        "aria-label": `Open match details for ${match.routeId}`,
+        onClick: () => setActiveMatchId(activeMatchId === 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
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          flex: '0 0 auto',
+          width: '1.3rem',
+          height: '1.3rem',
+          marginLeft: '.25rem',
+          background: getStatusColor(match, defaultTheme, router),
           alignItems: 'center',
           justifyContent: 'center',
           fontWeight: 'bold',
@@ -1042,10 +1119,11 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(Code, {
         style: {
-          padding: '.5em'
+          padding: '.5em',
+          fontSize: '0.7rem'
         }
       }, `${match.id}`));
-    }))), 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,