@tanstack/react-router-devtools 0.0.1-beta.30 → 0.0.1-beta.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.30",
+  "version": "0.0.1-beta.39",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -36,13 +36,13 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "@tanstack/react-router": "0.0.1-beta.30",
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "date-fns": "^2.29.1"
+    "date-fns": "^2.29.1",
+    "@tanstack/react-router": "workspace:^"
   },
   "devDependencies": {
     "babel-plugin-transform-async-to-promises": "^0.8.18"

package/src/devtools.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import { Router, last, routerContext, invariant } from '@tanstack/react-router'
+import {
+  Router,
+  last,
+  routerContext,
+  invariant,
+  __useStoreValue,
+  useRouterStore,
+} from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
 
 import useLocalStorage from './useLocalStorage'
@@ -418,19 +425,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',
   )
 
-  const rerender = React.useReducer(() => ({}), {})[1]
-
-  React.useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanMatchCache()
-      // router.notify()
-      rerender()
-    }, 250)
-
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
+  useRouterStore()
 
   const [activeRouteId, setActiveRouteId] = useLocalStorage(
     'tanstackRouterDevtoolsActiveRouteId',
@@ -447,18 +442,22 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   }, [activeRouteId])
 
   const activeMatch =
-    Object.values(router.matchCache)?.find(
+    Object.values(router.store.matchCache)?.find(
       (d) => d.match.matchId === activeMatchId,
-    )?.match ?? router.state.matches?.find((d) => d.routeId === activeRouteId)
+    )?.match ??
+    router.store.currentMatches?.find((d) => d.routeId === activeRouteId)
 
   const matchCacheValues = multiSortBy(
-    Object.keys(router.matchCache)
+    Object.keys(router.store.matchCache)
       .filter((key) => {
-        const cacheEntry = router.matchCache[key]!
+        const cacheEntry = router.store.matchCache[key]!
         return cacheEntry.gc > Date.now()
       })
-      .map((key) => router.matchCache[key]!),
-    [(d) => (d.match.isFetching ? -1 : 1), (d) => -d.match.updatedAt!],
+      .map((key) => router.store.matchCache[key]!),
+    [
+      (d) => (d.match.store.isFetching ? -1 : 1),
+      (d) => -d.match.store.updatedAt!,
+    ],
   )
 
   return (
@@ -598,7 +597,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
           >
             Active Matches
           </div>
-          {router.state.matches.map((match, i) => {
+          {router.store.currentMatches.map((match, i) => {
             return (
               <div
                 key={match.routeId || i}
@@ -643,7 +642,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               </div>
             )
           })}
-          {router.state.pending?.matches.length ? (
+          {router.store.pendingMatches?.length ? (
             <>
               <div
                 style={{
@@ -657,7 +656,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               >
                 Pending Matches
               </div>
-              {router.state.pending?.matches.map((match, i) => {
+              {router.store.pendingMatches?.map((match, i) => {
                 return (
                   <div
                     key={match.routeId || i}
@@ -724,8 +723,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 <div>Match Cache</div>
                 <Button
                   onClick={() => {
-                    router.matchCache = {}
-                    router.notify()
+                    router.setStore((s) => (s.matchCache = {}))
                   }}
                 >
                   Clear
@@ -835,18 +833,18 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Status</td>
-                    <td>{activeMatch.status}</td>
+                    <td>{activeMatch.store.status}</td>
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
-                    <td>{activeMatch.isInvalid.toString()}</td>
+                    <td>{activeMatch.store.isInvalid.toString()}</td>
                   </tr>
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
-                      {activeMatch.updatedAt
+                      {activeMatch.store.updatedAt
                         ? new Date(
-                            activeMatch.updatedAt as number,
+                            activeMatch.store.updatedAt as number,
                           ).toLocaleTimeString()
                         : 'N/A'}
                     </td>
@@ -875,7 +873,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 type="button"
                 onClick={() => {
                   activeMatch.invalidate()
-                  router.notify()
                 }}
                 style={{
                   background: theme.warning,
@@ -947,12 +944,16 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               padding: '.5em',
             }}
           >
-            {Object.keys(last(router.state.matches)?.loaderData || {})
-              .length ? (
+            {Object.keys(
+              last(router.store.currentMatches)?.store.loaderData || {},
+            ).length ? (
               <Explorer
-                value={last(router.state.matches)?.loaderData || {}}
+                value={
+                  last(router.store.currentMatches)?.store.loaderData || {}
+                }
                 defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.loaderData as {}) || {},
+                  (last(router.store.currentMatches)?.store.loaderData as {}) ||
+                    {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj
@@ -979,11 +980,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               padding: '.5em',
             }}
           >
-            {Object.keys(last(router.state.matches)?.search || {}).length ? (
+            {Object.keys(last(router.store.currentMatches)?.store.search || {})
+              .length ? (
               <Explorer
-                value={last(router.state.matches)?.search || {}}
+                value={last(router.store.currentMatches)?.store.search || {}}
                 defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.search as {}) || {},
+                  (last(router.store.currentMatches)?.store.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.isFetching
+  return match.store.isFetching
     ? theme.active
-    : match.status === 'error'
+    : match.store.status === 'error'
     ? theme.danger
-    : match.status === 'success'
+    : match.store.status === 'success'
     ? theme.success
     : theme.gray
 }