@tanstack/react-router-devtools 0.0.1-beta.45 → 0.0.1-beta.55

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.45",
+  "version": "0.0.1-beta.55",
   "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.45"
-  },
-  "devDependencies": {
-    "babel-plugin-transform-async-to-promises": "^0.8.18"
+    "@tanstack/react-router": "0.0.1-beta.55"
   }
 }

package/src/devtools.tsx

@@ -4,7 +4,6 @@ import {
   last,
   routerContext,
   invariant,
-  __useStoreValue,
   useRouterStore,
 } from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
@@ -441,25 +440,31 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     setActiveMatchId('')
   }, [activeRouteId])
 
-  const activeMatch =
-    Object.values(router.store.matchCache)?.find(
-      (d) => d.match.matchId === activeMatchId,
-    )?.match ??
-    router.store.currentMatches?.find((d) => d.routeId === activeRouteId)
-
-  const matchCacheValues = multiSortBy(
-    Object.keys(router.store.matchCache)
-      .filter((key) => {
-        const cacheEntry = router.store.matchCache[key]!
-        return cacheEntry.gc > Date.now()
-      })
-      .map((key) => router.store.matchCache[key]!),
-    [
-      (d) => (d.match.store.isFetching ? -1 : 1),
-      (d) => -d.match.store.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}>
@@ -597,15 +602,15 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
           >
             Active Matches
           </div>
-          {router.store.currentMatches.map((match, i) => {
+          {router.store.state.currentMatches.map((match, i) => {
             return (
               <div
-                key={match.routeId || i}
+                key={match.route.id || i}
                 role="button"
-                aria-label={`Open match details for ${match.routeId}`}
+                aria-label={`Open match details for ${match.route.id}`}
                 onClick={() =>
                   setActiveRouteId(
-                    activeRouteId === match.routeId ? '' : match.routeId,
+                    activeRouteId === match.route.id ? '' : match.route.id,
                   )
                 }
                 style={{
@@ -637,12 +642,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                     padding: '.5em',
                   }}
                 >
-                  {`${match.matchId}`}
+                  {`${match.id}`}
                 </Code>
               </div>
             )
           })}
-          {router.store.pendingMatches?.length ? (
+          {router.store.state.pendingMatches?.length ? (
             <>
               <div
                 style={{
@@ -656,15 +661,15 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               >
                 Pending Matches
               </div>
-              {router.store.pendingMatches?.map((match, i) => {
+              {router.store.state.pendingMatches?.map((match, i) => {
                 return (
                   <div
-                    key={match.routeId || i}
+                    key={match.route.id || i}
                     role="button"
-                    aria-label={`Open match details for ${match.routeId}`}
+                    aria-label={`Open match details for ${match.route.id}`}
                     onClick={() =>
                       setActiveRouteId(
-                        activeRouteId === match.routeId ? '' : match.routeId,
+                        activeRouteId === match.route.id ? '' : match.route.id,
                       )
                     }
                     style={{
@@ -697,14 +702,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                         padding: '.5em',
                       }}
                     >
-                      {`${match.matchId}`}
+                      {`${match.id}`}
                     </Code>
                   </div>
                 )
               })}
             </>
           ) : null}
-          {matchCacheValues.length ? (
+          {/* {matchCacheValues.length ? (
             <>
               <div
                 style={{
@@ -723,7 +728,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 <div>Match Cache</div>
                 <Button
                   onClick={() => {
-                    router.setStore((s) => (s.matchCache = {}))
+                    router.store.setState((s) => (s.matchCache = {}))
                   }}
                 >
                   Clear
@@ -734,12 +739,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
 
                 return (
                   <div
-                    key={match.matchId || i}
+                    key={match.id || i}
                     role="button"
-                    aria-label={`Open match details for ${match.matchId}`}
+                    aria-label={`Open match details for ${match.id}`}
                     onClick={() =>
                       setActiveMatchId(
-                        activeMatchId === match.matchId ? '' : match.matchId,
+                        activeMatchId === match.id ? '' : match.id,
                       )
                     }
                     style={{
@@ -780,7 +785,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                             transition: 'all .2s ease-out',
                           }}
                         />
-                        <Code>{`${match.matchId}`}</Code>
+                        <Code>{`${match.id}`}</Code>
                       </div>
                       <span
                         style={{
@@ -799,7 +804,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 )
               })}
             </>
-          ) : null}
+          ) : null} */}
         </div>
 
         {activeMatch ? (
@@ -827,24 +832,24 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                           lineHeight: '1.8em',
                         }}
                       >
-                        {JSON.stringify(activeMatch.matchId, null, 2)}
+                        {JSON.stringify(activeMatch.id, null, 2)}
                       </Code>
                     </td>
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Status</td>
-                    <td>{activeMatch.store.status}</td>
+                    <td>{activeMatch.store.state.status}</td>
                   </tr>
-                  <tr>
+                  {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
-                    <td>{activeMatch.store.isInvalid.toString()}</td>
-                  </tr>
+                    <td>{activeMatch.getIsInvalid().toString()}</td>
+                  </tr> */}
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
-                      {activeMatch.store.updatedAt
+                      {activeMatch.store.state.updatedAt
                         ? new Date(
-                            activeMatch.store.updatedAt as number,
+                            activeMatch.store.state.updatedAt as number,
                           ).toLocaleTimeString()
                         : 'N/A'}
                     </td>
@@ -869,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()}
@@ -927,7 +920,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             flexDirection: 'column',
           }}
         >
-          <div
+          {/* <div
             style={{
               padding: '.5em',
               background: theme.backgroundAlt,
@@ -945,15 +938,17 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             }}
           >
             {Object.keys(
-              last(router.store.currentMatches)?.store.loaderData || {},
+              last(router.store.state.currentMatches)?.store.state.loaderData ||
+                {},
             ).length ? (
               <Explorer
                 value={
-                  last(router.store.currentMatches)?.store.loaderData || {}
+                  last(router.store.state.currentMatches)?.store.state
+                    .loaderData || {}
                 }
                 defaultExpanded={Object.keys(
-                  (last(router.store.currentMatches)?.store.loaderData as {}) ||
-                    {},
+                  (last(router.store.state.currentMatches)?.store.state
+                    .loaderData as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj
@@ -962,7 +957,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             ) : (
               <em style={{ opacity: 0.5 }}>{'{ }'}</em>
             )}
-          </div>
+          </div> */}
           <div
             style={{
               padding: '.5em',
@@ -980,12 +975,17 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               padding: '.5em',
             }}
           >
-            {Object.keys(last(router.store.currentMatches)?.store.search || {})
-              .length ? (
+            {Object.keys(
+              last(router.store.state.currentMatches)?.store.state.search || {},
+            ).length ? (
               <Explorer
-                value={last(router.store.currentMatches)?.store.search || {}}
+                value={
+                  last(router.store.state.currentMatches)?.store.state.search ||
+                  {}
+                }
                 defaultExpanded={Object.keys(
-                  (last(router.store.currentMatches)?.store.search as {}) || {},
+                  (last(router.store.state.currentMatches)?.store.state
+                    .search as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj

package/src/utils.ts

@@ -26,25 +26,15 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: RouteMatch, theme: Theme) {
-  return match.store.isFetching
+  return match.store.state.status === 'pending'
     ? theme.active
-    : match.store.status === 'error'
+    : match.store.state.status === 'error'
     ? theme.danger
-    : match.store.status === 'success'
+    : match.store.state.status === 'success'
     ? theme.success
     : 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)