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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.174",
+  "version": "0.0.1-beta.176",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -12,7 +12,6 @@
   "keywords": [
     "react",
     "location",
-    "@tanstack/router",
     "router",
     "routing",
     "async",
@@ -42,7 +41,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "date-fns": "^2.29.1",
-    "@tanstack/react-router": "0.0.1-beta.174"
+    "@tanstack/react-router": "0.0.1-beta.176"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/devtools.tsx

@@ -461,7 +461,7 @@ function RouteComp({
               fontWeight: 'bold',
               borderRadius: '100%',
               transition: 'all .2s ease-out',
-              background: getRouteStatusColor(matches, route, theme, router),
+              background: getRouteStatusColor(matches, route, theme),
               opacity: match ? 1 : 0.3,
             }}
           />
@@ -563,13 +563,13 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     },
   )
 
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      router.cleanMatches()
-    }, 1000)
+  // React.useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     router.cleanMatches()
+  //   }, 1000)
 
-    return () => clearInterval(interval)
-  }, [router])
+  //   return () => clearInterval(interval)
+  // }, [router])
 
   return (
     <ThemeProvider theme={theme}>
@@ -798,7 +798,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                           width: '1.3rem',
                           height: '1.3rem',
                           marginLeft: '.25rem',
-                          background: getStatusColor(match, theme, router),
+                          background: getStatusColor(match, theme),
                           alignItems: 'center',
                           justifyContent: 'center',
                           fontWeight: 'bold',
@@ -871,7 +871,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                         width: '1.3rem',
                         height: '1.3rem',
                         marginLeft: '.25rem',
-                        background: getStatusColor(match, theme, router),
+                        background: getStatusColor(match, theme),
                         alignItems: 'center',
                         justifyContent: 'center',
                         fontWeight: 'bold',

package/src/utils.ts

@@ -4,6 +4,7 @@ import {
   AnyRoute,
   AnyRouteMatch,
   AnyRouter,
+  isMatchInvalid,
 } from '@tanstack/react-router'
 
 import { Theme, useTheme } from './theme'
@@ -30,16 +31,10 @@ type StyledComponent<T> = T extends 'button'
   ? React.HTMLAttributes<HTMLElementTagNameMap[T]>
   : never
 
-export function getStatusColor(
-  match: AnyRouteMatch,
-  theme: Theme,
-  router: AnyRouter,
-) {
+export function getStatusColor(match: AnyRouteMatch, theme: Theme) {
   return match.status === 'pending' || match.isFetching
     ? theme.active
-    : router.getIsInvalid({
-        matchId: match.id,
-      })
+    : isMatchInvalid(match)
     ? theme.warning
     : match.status === 'error'
     ? theme.danger
@@ -52,11 +47,10 @@ export function getRouteStatusColor(
   matches: AnyRouteMatch[],
   route: AnyRoute | AnyRootRoute,
   theme: Theme,
-  router: AnyRouter,
 ) {
   const found = matches.find((d) => d.routeId === route.id)
   if (!found) return theme.gray
-  return getStatusColor(found, theme, router)
+  return getStatusColor(found, theme)
 }
 
 type Styles =