@tanstack/react-router-devtools 0.0.1-beta.13 → 0.0.1-beta.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.19",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -36,7 +36,7 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "@tanstack/react-router": "0.0.1-beta.13",
+    "@tanstack/react-router": "0.0.1-beta.19",
     "react": ">=16",
     "react-dom": ">=16"
   },

package/src/devtools.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Router, last } from '@tanstack/react-router'
+import { Router, last, routerContext, invariant } from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
 
 import useLocalStorage from './useLocalStorage'
@@ -56,7 +56,7 @@ interface DevtoolsOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  router: Router<any, any>
+  router?: Router<any, any>
 }
 
 interface DevtoolsPanelOptions {
@@ -83,7 +83,7 @@ interface DevtoolsPanelOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  router: Router<any, any>
+  router?: Router<any, any>
 }
 
 const isServer = typeof window === 'undefined'
@@ -406,10 +406,18 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     isOpen = true,
     setIsOpen,
     handleDragStart,
-    router,
+    router: userRouter,
     ...panelProps
   } = props
 
+  const routerContextValue = React.useContext(routerContext)
+  const router = userRouter ?? routerContextValue?.router
+
+  invariant(
+    router,
+    'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',
+  )
+
   const rerender = React.useReducer(() => ({}), {})[1]
 
   React.useEffect(() => {

package/src/utils.ts

@@ -26,9 +26,7 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: RouteMatch, theme: Theme) {
-  return match.isPending
-    ? theme.warning
-    : match.isFetching
+  return match.isFetching
     ? theme.active
     : match.status === 'error'
     ? theme.danger