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

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.6",
   "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.6",
     "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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Router, useRouter, last } from '@tanstack/react-router'
+import { Router, last } from '@tanstack/react-router'
 import { formatDistanceStrict } from 'date-fns'
 
 import useLocalStorage from './useLocalStorage'
@@ -52,7 +52,7 @@ interface DevtoolsOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter?: () => unknown
+  router: Router<any, any>
 }
 
 interface DevtoolsPanelOptions {
@@ -79,7 +79,7 @@ interface DevtoolsPanelOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter: () => unknown
+  router: Router<any, any>
 }
 
 const isServer = typeof window === 'undefined'
@@ -91,7 +91,7 @@ export function TanStackRouterDevtools({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'footer',
-  useRouter: useRouterImpl = useRouter,
+  router,
 }: DevtoolsOptions): React.ReactElement | null {
   const rootRef = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement>(null)
@@ -230,7 +230,7 @@ export function TanStackRouterDevtools({
         <TanStackRouterDevtoolsPanel
           ref={panelRef as any}
           {...otherPanelProps}
-          useRouter={useRouterImpl}
+          router={router}
           style={{
             position: 'fixed',
             bottom: '0',
@@ -360,17 +360,43 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     isOpen = true,
     setIsOpen,
     handleDragStart,
-    useRouter,
+    router,
     ...panelProps
   } = 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 +412,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 +552,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>
@@ -822,7 +846,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               <Button
                 type="button"
                 onClick={() => {
-                  router.invalidateRoute(activeMatch as any)
+                  activeMatch.invalidate()
                   router.notify()
                 }}
                 style={{
@@ -834,7 +858,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               </Button>{' '}
               <Button
                 type="button"
-                onClick={() => router.reload()}
+                onClick={() => activeMatch.load()}
                 style={{
                   background: theme.gray,
                 }}
@@ -860,22 +884,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>