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

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.49",
   "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/react-router": "0.0.1-beta.45"
+    "@tanstack/react-router": "0.0.1-beta.49"
   },
   "devDependencies": {
     "babel-plugin-transform-async-to-promises": "^0.8.18"

package/src/devtools.tsx

@@ -4,7 +4,6 @@ import {
   last,
   routerContext,
   invariant,
-  __useStoreValue,
   useRouterStore,
 } from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
@@ -442,21 +441,21 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   }, [activeRouteId])
 
   const activeMatch =
-    Object.values(router.store.matchCache)?.find(
-      (d) => d.match.matchId === activeMatchId,
+    Object.values(router.store.state.matchCache)?.find(
+      (d) => d.match.id === activeMatchId,
     )?.match ??
-    router.store.currentMatches?.find((d) => d.routeId === activeRouteId)
+    router.store.state.currentMatches?.find((d) => d.route.id === activeRouteId)
 
   const matchCacheValues = multiSortBy(
-    Object.keys(router.store.matchCache)
+    Object.keys(router.store.state.matchCache)
       .filter((key) => {
-        const cacheEntry = router.store.matchCache[key]!
+        const cacheEntry = router.store.state.matchCache[key]!
         return cacheEntry.gc > Date.now()
       })
-      .map((key) => router.store.matchCache[key]!),
+      .map((key) => router.store.state.matchCache[key]!),
     [
-      (d) => (d.match.store.isFetching ? -1 : 1),
-      (d) => -d.match.store.updatedAt!,
+      (d) => (d.match.store.state.isFetching ? -1 : 1),
+      (d) => -d.match.store.state.updatedAt!,
     ],
   )
 
@@ -597,15 +596,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 +636,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 +655,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,7 +696,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                         padding: '.5em',
                       }}
                     >
-                      {`${match.matchId}`}
+                      {`${match.id}`}
                     </Code>
                   </div>
                 )
@@ -723,7 +722,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 +733,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 +779,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                             transition: 'all .2s ease-out',
                           }}
                         />
-                        <Code>{`${match.matchId}`}</Code>
+                        <Code>{`${match.id}`}</Code>
                       </div>
                       <span
                         style={{
@@ -827,24 +826,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>
                     <td style={{ opacity: '.5' }}>Invalid</td>
-                    <td>{activeMatch.store.isInvalid.toString()}</td>
+                    <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>
@@ -945,15 +944,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
@@ -980,12 +981,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,11 +26,11 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: RouteMatch, theme: Theme) {
-  return match.store.isFetching
+  return match.store.state.isFetching
     ? 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
 }