@tanstack/react-router-devtools 0.0.1-beta.49 → 0.0.1-beta.56

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.49",
+  "version": "0.0.1-beta.56",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -42,9 +42,6 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "date-fns": "^2.29.1",
-    "@tanstack/react-router": "0.0.1-beta.49"
-  },
-  "devDependencies": {
-    "babel-plugin-transform-async-to-promises": "^0.8.18"
+    "@tanstack/react-router": "0.0.1-beta.56"
   }
 }

package/src/devtools.tsx

@@ -440,25 +440,31 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     setActiveMatchId('')
   }, [activeRouteId])
 
-  const activeMatch =
-    Object.values(router.store.state.matchCache)?.find(
-      (d) => d.match.id === activeMatchId,
-    )?.match ??
-    router.store.state.currentMatches?.find((d) => d.route.id === activeRouteId)
-
-  const matchCacheValues = multiSortBy(
-    Object.keys(router.store.state.matchCache)
-      .filter((key) => {
-        const cacheEntry = router.store.state.matchCache[key]!
-        return cacheEntry.gc > Date.now()
-      })
-      .map((key) => router.store.state.matchCache[key]!),
-    [
-      (d) => (d.match.store.state.isFetching ? -1 : 1),
-      (d) => -d.match.store.state.updatedAt!,
+  const allMatches = React.useMemo(
+    () => [
+      ...Object.values(router.store.state.currentMatches),
+      ...Object.values(router.store.state.pendingMatches ?? []),
     ],
+    [router.store.state.currentMatches, router.store.state.pendingMatches],
   )
 
+  const activeMatch =
+    allMatches?.find((d) => d.id === activeMatchId) ||
+    allMatches?.find((d) => d.route.id === activeRouteId)
+
+  // const matchCacheValues = multiSortBy(
+  //   Object.keys(router.store.state.matchCache)
+  //     .filter((key) => {
+  //       const cacheEntry = router.store.state.matchCache[key]!
+  //       return cacheEntry.gc > Date.now()
+  //     })
+  //     .map((key) => router.store.state.matchCache[key]!),
+  //   [
+  //     (d) => (d.match.store.state.isFetching ? -1 : 1),
+  //     (d) => -d.match.store.state.updatedAt!,
+  //   ],
+  // )
+
   return (
     <ThemeProvider theme={theme}>
       <Panel ref={ref} className="TanStackRouterDevtoolsPanel" {...panelProps}>
@@ -703,7 +709,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               })}
             </>
           ) : null}
-          {matchCacheValues.length ? (
+          {/* {matchCacheValues.length ? (
             <>
               <div
                 style={{
@@ -798,7 +804,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 )
               })}
             </>
-          ) : null}
+          ) : null} */}
         </div>
 
         {activeMatch ? (
@@ -834,10 +840,10 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                     <td style={{ opacity: '.5' }}>Status</td>
                     <td>{activeMatch.store.state.status}</td>
                   </tr>
-                  <tr>
+                  {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
                     <td>{activeMatch.getIsInvalid().toString()}</td>
-                  </tr>
+                  </tr> */}
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
@@ -868,18 +874,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '0.5em',
               }}
             >
-              <Button
-                type="button"
-                onClick={() => {
-                  activeMatch.invalidate()
-                }}
-                style={{
-                  background: theme.warning,
-                  color: theme.inputTextColor,
-                }}
-              >
-                Invalidate
-              </Button>{' '}
               <Button
                 type="button"
                 onClick={() => activeMatch.load()}
@@ -926,7 +920,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             flexDirection: 'column',
           }}
         >
-          <div
+          {/* <div
             style={{
               padding: '.5em',
               background: theme.backgroundAlt,
@@ -963,7 +957,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             ) : (
               <em style={{ opacity: 0.5 }}>{'{ }'}</em>
             )}
-          </div>
+          </div> */}
           <div
             style={{
               padding: '.5em',

package/src/utils.ts

@@ -26,7 +26,7 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: RouteMatch, theme: Theme) {
-  return match.store.state.isFetching
+  return match.store.state.status === 'pending'
     ? theme.active
     : match.store.state.status === 'error'
     ? theme.danger
@@ -35,16 +35,6 @@ export function getStatusColor(match: RouteMatch, theme: Theme) {
     : theme.gray
 }
 
-// export function getQueryStatusLabel(query: Query) {
-//   return query.state.isFetching
-//     ? 'fetching'
-//     : !query.getObserversCount()
-//     ? 'inactive'
-//     : query.isStale()
-//     ? 'stale'
-//     : 'fresh'
-// }
-
 type Styles =
   | React.CSSProperties
   | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)