@tanstack/router-devtools 0.0.1-beta.119 → 0.0.1-beta.121

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.119",
+  "version": "0.0.1-beta.121",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "date-fns": "^2.29.1",
-    "@tanstack/router": "0.0.1-beta.119"
+    "@tanstack/router": "0.0.1-beta.121"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Explorer.tsx

@@ -77,6 +77,7 @@ type RendererProps = {
   toggleExpanded: () => void
   pageSize: number
   renderer?: Renderer
+  filterSubEntries?: (subEntries: Property[]) => Property[]
 }
 
 /**
@@ -216,6 +217,7 @@ export default function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
+  filterSubEntries,
   ...rest
 }: ExplorerProps) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
@@ -266,6 +268,8 @@ export default function Explorer({
     )
   }
 
+  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries
+
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
@@ -274,6 +278,7 @@ export default function Explorer({
         key={entry.label}
         value={value}
         renderer={renderer}
+        filterSubEntries={filterSubEntries}
         {...rest}
         {...entry}
       />

package/src/devtools.tsx

@@ -10,13 +10,13 @@ import {
   AnyRootRoute,
   RouteMatch,
   trimPath,
+  useRouterState,
 } from '@tanstack/router'
 
 import useLocalStorage from './useLocalStorage'
 import {
   getRouteStatusColor,
   getStatusColor,
-  multiSortBy,
   useIsMounted,
   useSafeState,
 } from './utils'
@@ -422,7 +422,8 @@ function RouteComp({
   activeRouteId: string | undefined
   setActiveRouteId: (id: string) => void
 }) {
-  const isActive = matches.find((d) => d.route === route)
+  const isActive = matches.find((d) => d.routeId === route.id)
+
   return (
     <div>
       <div
@@ -505,7 +506,8 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   } = props
 
   const routerContextValue = React.useContext(routerContext)
-  const router = userRouter ?? routerContextValue?.router
+  const router = userRouter ?? routerContextValue
+  const routerState = useRouterState()
 
   invariant(
     router,
@@ -525,15 +527,13 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   )
 
   const allMatches: RouteMatch[] = React.useMemo(
-    () => [...Object.values(router.state.matches)],
-    [router.state.matches],
+    () => [...Object.values(routerState.matches)],
+    [routerState.matches],
   )
 
-  const activeMatch = allMatches?.find((d) => d.route.id === activeRouteId)
+  const activeMatch = allMatches?.find((d) => d.routeId === activeRouteId)
 
-  const hasSearch = Object.keys(
-    last(router.state.matches)?.state.search || {},
-  ).length
+  const hasSearch = Object.keys(routerState.location.search || {}).length
 
   return (
     <ThemeProvider theme={theme}>
@@ -646,7 +646,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '.5em',
               }}
             >
-              <Explorer label="Router" value={router} defaultExpanded={{}} />
+              <Explorer
+                label="Router"
+                value={router}
+                defaultExpanded={{ state: {} as any, context: {} as any }}
+                filterSubEntries={(subEntries) => {
+                  return subEntries.filter((d) => typeof d.value !== 'function')
+                }}
+              />
             </div>
           </div>
         </div>
@@ -680,7 +687,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               }}
               disabled={!showMatches}
               style={{
+                appearance: 'none',
                 opacity: showMatches ? 0.5 : 1,
+                border: 0,
+                background: 'transparent',
+                color: 'inherit',
+                cursor: 'pointer',
               }}
             >
               Routes
@@ -693,7 +705,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               }}
               disabled={showMatches}
               style={{
+                appearance: 'none',
                 opacity: !showMatches ? 0.5 : 1,
+                border: 0,
+                background: 'transparent',
+                color: 'inherit',
+                cursor: 'pointer',
               }}
             >
               Matches
@@ -709,15 +726,15 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             />
           ) : (
             <div>
-              {router.state.matches.map((match, i) => {
+              {routerState.matches.map((match, i) => {
                 return (
                   <div
-                    key={match.route.id || i}
+                    key={match.routeId || i}
                     role="button"
-                    aria-label={`Open match details for ${match.route.id}`}
+                    aria-label={`Open match details for ${match.routeId}`}
                     onClick={() =>
                       setActiveRouteId(
-                        activeRouteId === match.route.id ? '' : match.route.id,
+                        activeRouteId === match.routeId ? '' : match.routeId,
                       )
                     }
                     style={{
@@ -790,7 +807,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Status</td>
-                    <td>{activeMatch.state.status}</td>
+                    <td>{activeMatch.status}</td>
                   </tr>
                   {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
@@ -799,9 +816,9 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
-                      {activeMatch.state.updatedAt
+                      {activeMatch.updatedAt
                         ? new Date(
-                            activeMatch.state.updatedAt as number,
+                            activeMatch.updatedAt as number,
                           ).toLocaleTimeString()
                         : 'N/A'}
                     </td>
@@ -891,9 +908,9 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               }}
             >
               <Explorer
-                value={last(router.state.matches)?.state.search || {}}
+                value={routerState.location.search || {}}
                 defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.state.search as {}) || {},
+                  (routerState.location.search as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj

package/src/utils.ts

@@ -1,10 +1,5 @@
 import React from 'react'
-import {
-  AnyRootRoute,
-  AnyRoute,
-  AnyRouteMatch,
-  RouteMatch,
-} from '@tanstack/router'
+import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/router'
 
 import { Theme, useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
@@ -31,11 +26,11 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: AnyRouteMatch, theme: Theme) {
-  return match.state.status === 'pending'
+  return match.status === 'pending'
     ? theme.active
-    : match.state.status === 'error'
+    : match.status === 'error'
     ? theme.danger
-    : match.state.status === 'success'
+    : match.status === 'success'
     ? theme.success
     : theme.gray
 }
@@ -45,14 +40,14 @@ export function getRouteStatusColor(
   route: AnyRoute | AnyRootRoute,
   theme: Theme,
 ) {
-  const found = matches.find((d) => d.route === route)
+  const found = matches.find((d) => d.routeId === route.id)
 
   return found
-    ? found.route.status === 'pending'
+    ? found.status === 'pending'
       ? theme.active
-      : found.state.status === 'error'
+      : found.status === 'error'
       ? theme.danger
-      : found.state.status === 'success'
+      : found.status === 'success'
       ? theme.success
       : theme.gray
     : theme.gray