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

package/build/esm/index.js

@@ -126,12 +126,15 @@ function useMediaQuery(query) {
 }
 
 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.forwardRef(({
@@ -680,16 +683,22 @@ function TanStackRouterDevtools({
 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.createElement("div", null, /*#__PURE__*/React__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',
@@ -709,7 +718,7 @@ function RouteComp({
       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.createElement(Code, {
@@ -719,7 +728,8 @@ function RouteComp({
       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.createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default.createElement("span", {
     style: {
@@ -735,9 +745,11 @@ function RouteComp({
   }).map(r => /*#__PURE__*/React__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.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
@@ -754,9 +766,18 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   useStore(router.__store);
   const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-  const allMatches = React__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.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.useEffect(() => {
+    const interval = setInterval(() => {
+      router.cleanMatches();
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [router]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -879,6 +900,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       display: 'flex',
       flexDirection: 'column'
     }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: '1 1 auto',
+      overflowY: 'auto'
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
@@ -920,10 +946,12 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, "Matches")), !showMatches ? /*#__PURE__*/React__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.createElement("div", null, router.state.matches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
       key: match.routeId || i,
@@ -943,7 +971,56 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         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.createElement(Code, {
+      style: {
+        padding: '.5em',
+        fontSize: '0.7rem'
+      }
+    }, `${match.id}`));
+  }))), preloadMatches?.length ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: '1 1 auto',
+      overflowY: 'auto',
+      maxHeight: '50%'
+    }
+  }, /*#__PURE__*/React__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.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.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',
@@ -952,10 +1029,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       }
     }), /*#__PURE__*/React__default.createElement(Code, {
       style: {
-        padding: '.5em'
+        padding: '.5em',
+        fontSize: '0.7rem'
       }
     }, `${match.id}`));
-  }))), 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,