@tanstack/router-devtools 0.0.1-beta.213 → 0.0.1-beta.215

package/package.json

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

package/src/devtools.tsx

@@ -409,19 +409,19 @@ function RouteComp({
   route,
   isRoot,
   activeRouteId,
-  activeMatchId,
   setActiveRouteId,
-  setActiveMatchId,
 }: {
   route: AnyRootRoute | AnyRoute
   isRoot?: boolean
   activeRouteId: string | undefined
-  activeMatchId: string | undefined
   setActiveRouteId: (id: string) => void
-  setActiveMatchId: (id: string) => void
 }) {
   const router = useRouter()
-  const matches = [...router.state.pendingMatches, ...router.state.matches]
+  const matches =
+    router.state.status === 'pending'
+      ? router.state.pendingMatches
+      : router.state.matches
+
   const match = router.state.matches.find((d) => d.routeId === route.id)
 
   return (
@@ -432,7 +432,6 @@ function RouteComp({
         onClick={() => {
           if (match) {
             setActiveRouteId(activeRouteId === route.id ? '' : route.id)
-            setActiveMatchId(match.id)
           }
         }}
         style={{
@@ -492,9 +491,7 @@ function RouteComp({
                 key={r.id}
                 route={r}
                 activeRouteId={activeRouteId}
-                activeMatchId={activeMatchId}
                 setActiveRouteId={setActiveRouteId}
-                setActiveMatchId={setActiveMatchId}
               />
             ))}
         </div>
@@ -534,16 +531,10 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     'tanstackRouterDevtoolsActiveRouteId',
     '',
   )
-  const [activeMatchId, setActiveMatchId] = useLocalStorage(
-    'tanstackRouterDevtoolsActiveMatchId',
-    '',
-  )
 
   const activeMatch = React.useMemo(
-    () =>
-      matches.find((d) => d.id === activeRouteId) ||
-      matches.find((d) => d.id === activeMatchId),
-    [activeRouteId, activeMatchId],
+    () => matches.find((d) => d.routeId === activeRouteId),
+    [matches, activeRouteId],
   )
 
   const hasSearch = Object.keys(router.state.location.search || {}).length
@@ -809,13 +800,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 route={router.routeTree}
                 isRoot
                 activeRouteId={activeRouteId}
-                activeMatchId={activeMatchId}
                 setActiveRouteId={setActiveRouteId}
-                setActiveMatchId={setActiveMatchId}
               />
             ) : (
               <div>
-                {router.state.matches.map((match, i) => {
+                {(router.state.status === 'pending'
+                  ? router.state.pendingMatches
+                  : router.state.matches
+                ).map((match, i) => {
                   return (
                     <div
                       key={match.routeId || i}
@@ -1017,6 +1009,33 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 Reload
               </Button>
             </div> */}
+            {activeMatch.loaderData ? (
+              <>
+                <div
+                  style={{
+                    background: theme.backgroundAlt,
+                    padding: '.5em',
+                    position: 'sticky',
+                    top: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                  }}
+                >
+                  Loader Data
+                </div>
+                <div
+                  style={{
+                    padding: '.5em',
+                  }}
+                >
+                  <Explorer
+                    label="loaderData"
+                    value={activeMatch.loaderData}
+                    defaultExpanded={{}}
+                  />
+                </div>
+              </>
+            ) : null}
             <div
               style={{
                 background: theme.backgroundAlt,