@tanstack/router-devtools 0.0.1-beta.174 → 0.0.1-beta.175

package/build/umd/index.development.js

@@ -115,6 +115,16 @@
   function trimPath(path) {
     return trimPathRight(trimPathLeft(path));
   }
+  function isMatchInvalid(match, opts) {
+    const now = Date.now();
+    if (match.invalid) {
+      return true;
+    }
+    if (opts?.preload) {
+      return match.preloadMaxAge < 0 ? false : match.updatedAt + match.preloadMaxAge < now;
+    }
+    return match.maxAge < 0 ? false : match.updatedAt + match.maxAge < now;
+  }
 
   /**
    * @tanstack/react-router/src/index.tsx
@@ -228,14 +238,12 @@
 
   const isServer$1 = typeof window === 'undefined';
   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;
+    return match.status === 'pending' || match.isFetching ? theme.active : isMatchInvalid(match) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
   }
   function getRouteStatusColor(matches, route, theme, router) {
     const found = matches.find(d => d.routeId === route.id);
     if (!found) return theme.gray;
-    return getStatusColor(found, theme, router);
+    return getStatusColor(found, theme);
   }
   function styled(type, newStyles, queries = {}) {
     return /*#__PURE__*/React__default["default"].forwardRef(({
@@ -819,7 +827,7 @@
         fontWeight: 'bold',
         borderRadius: '100%',
         transition: 'all .2s ease-out',
-        background: getRouteStatusColor(matches, route, defaultTheme, router),
+        background: getRouteStatusColor(matches, route, defaultTheme),
         opacity: match ? 1 : 0.3
       }
     }), /*#__PURE__*/React__default["default"].createElement(Code, {
@@ -873,12 +881,15 @@
     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]);
+
+    // React.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({
@@ -1072,7 +1083,7 @@
           width: '1.3rem',
           height: '1.3rem',
           marginLeft: '.25rem',
-          background: getStatusColor(match, defaultTheme, router),
+          background: getStatusColor(match, defaultTheme),
           alignItems: 'center',
           justifyContent: 'center',
           fontWeight: 'bold',
@@ -1121,7 +1132,7 @@
           width: '1.3rem',
           height: '1.3rem',
           marginLeft: '.25rem',
-          background: getStatusColor(match, defaultTheme, router),
+          background: getStatusColor(match, defaultTheme),
           alignItems: 'center',
           justifyContent: 'center',
           fontWeight: 'bold',