@tanstack/react-router-devtools 0.0.1-alpha.4 → 0.0.1-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://react-router.tanstack.com/",
@@ -35,7 +35,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@tanstack/react-router": "0.0.1-alpha.4",
+    "@tanstack/react-router": "0.0.1-alpha.5",
     "react": ">=16",
     "react-dom": ">=16"
   },

package/src/Explorer.tsx

@@ -67,7 +67,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  HandleEntry: HandleEntryComponent
+  handleEntry: HandleEntryFn
   label?: React.ReactNode
   value: unknown
   subEntries: Entry[]
@@ -102,7 +102,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
 type Renderer = (props: RendererProps) => JSX.Element
 
 export const DefaultRenderer: Renderer = ({
-  HandleEntry,
+  handleEntry,
   label,
   value,
   subEntries = [],
@@ -134,9 +134,7 @@ export const DefaultRenderer: Renderer = ({
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
-                {subEntries.map((entry) => (
-                  <HandleEntry key={entry.label} entry={entry} />
-                ))}
+                {subEntries.map((entry, index) => handleEntry(entry))}
               </SubEntries>
             ) : (
               <SubEntries>
@@ -157,9 +155,7 @@ export const DefaultRenderer: Renderer = ({
                       </LabelButton>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
-                          {entries.map((entry) => (
-                            <HandleEntry key={entry.label} entry={entry} />
-                          ))}
+                          {entries.map((entry) => handleEntry(entry))}
                         </SubEntries>
                       ) : null}
                     </Entry>
@@ -198,7 +194,7 @@ export const DefaultRenderer: Renderer = ({
   )
 }
 
-type HandleEntryComponent = (props: { entry: Entry }) => JSX.Element
+type HandleEntryFn = (entry: Entry) => JSX.Element
 
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
@@ -273,11 +269,14 @@ export default function Explorer({
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
-    HandleEntry: React.useCallback(
-      ({ entry }) => (
-        <Explorer value={value} renderer={renderer} {...rest} {...entry} />
-      ),
-      [value, renderer],
+    handleEntry: (entry) => (
+      <Explorer
+        key={entry.label}
+        value={value}
+        renderer={renderer}
+        {...rest}
+        {...entry}
+      />
     ),
     type,
     subEntries,

package/src/devtools.tsx

@@ -365,12 +365,40 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   } = props
 
   const router = useRouter() as Router
+  const routerExplorerValue = React.useMemo(() => {
+    const {
+      listeners,
+      buildLocation,
+      mount,
+      update,
+      buildNext,
+      navigate,
+      cancelMatches,
+      loadLocation,
+      cleanPreloadCache,
+      loadRoute,
+      matchRoutes,
+      loadMatches,
+      invalidateRoute,
+      resolvePath,
+      matchRoute,
+      buildLink,
+      __experimental__createSnapshot,
+      destroy,
+      ...rest
+    } = router
+
+    return rest
+  }, [router.state])
+
+  const rerender = React.useReducer(() => ({}), {})[1]
 
   React.useEffect(() => {
     let interval = setInterval(() => {
       router.cleanPreloadCache()
-      router.notify()
-    }, 1000)
+      // router.notify()
+      rerender()
+    }, 250)
 
     return () => {
       clearInterval(interval)
@@ -386,6 +414,27 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     (d) => d.routeId === activeRouteId,
   )
 
+  const activeMatchExplorerValue = React.useMemo(() => {
+    if (!activeMatch) {
+      return {}
+    }
+
+    const {
+      cancel,
+      load,
+      router,
+      Link,
+      MatchRoute,
+      buildLink,
+      linkProps,
+      matchRoute,
+      navigate,
+      ...rest
+    } = activeMatch
+
+    return rest
+  }, [activeMatch])
+
   return (
     <ThemeProvider theme={theme}>
       <Panel ref={ref} className="TanStackRouterDevtoolsPanel" {...panelProps}>
@@ -505,30 +554,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             >
               <Explorer
                 label="Router"
-                value={(() => {
-                  const {
-                    listeners,
-                    buildLocation,
-                    mount,
-                    update,
-                    buildNext,
-                    navigate,
-                    cancelMatches,
-                    loadLocation,
-                    cleanPreloadCache,
-                    loadRoute,
-                    matchRoutes,
-                    loadMatches,
-                    invalidateRoute,
-                    resolvePath,
-                    matchRoute,
-                    buildLink,
-                    __experimental__createSnapshot,
-                    destroy,
-                    ...rest
-                  } = router
-                  return rest
-                })()}
+                value={routerExplorerValue}
                 defaultExpanded={{}}
               />
             </div>
@@ -860,22 +886,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             >
               <Explorer
                 label="Match"
-                value={(() => {
-                  const {
-                    cancel,
-                    load,
-                    router,
-                    Link,
-                    MatchRoute,
-                    buildLink,
-                    linkProps,
-                    matchRoute,
-                    navigate,
-                    ...rest
-                  } = activeMatch
-
-                  return rest
-                })()}
+                value={activeMatchExplorerValue}
                 defaultExpanded={{}}
               />
             </div>