@tanstack/router-devtools 1.22.5 → 1.22.6

package/src/devtools.tsx

@@ -1,17 +1,14 @@
 import React from 'react'
 import {
   invariant,
-  AnyRouter,
-  Route,
-  AnyRoute,
-  AnyRootRoute,
+  rootRouteId,
   trimPath,
   useRouter,
   useRouterState,
-  AnyRouteMatch,
-  rootRouteId,
 } from '@tanstack/react-router'
 
+import { css } from 'goober'
+import { clsx as cx } from 'clsx'
 import useLocalStorage from './useLocalStorage'
 import {
   getRouteStatusColor,
@@ -20,13 +17,16 @@ import {
   useIsMounted,
   useSafeState,
 } from './utils'
-import { css } from 'goober'
-import { clsx as cx } from 'clsx'
 import Explorer from './Explorer'
 import { tokens } from './tokens'
 import { TanStackLogo } from './logo'
-
-export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+import type {
+  AnyRootRoute,
+  AnyRoute,
+  AnyRouteMatch,
+  AnyRouter,
+  Route,
+} from '@tanstack/react-router'
 
 interface DevtoolsOptions {
   /**
@@ -136,7 +136,7 @@ export function TanStackRouterDevtools({
   containerElement: Container = 'footer',
   router,
 }: DevtoolsOptions): React.ReactElement | null {
-  const [rootEl, setRootEl] = React.useState<HTMLDivElement>(null!)
+  const [rootEl, setRootEl] = React.useState<HTMLDivElement>()
   const panelRef = React.useRef<HTMLDivElement>(null)
   const [isOpen, setIsOpen] = useLocalStorage(
     'tanstackRouterDevtoolsOpen',
@@ -165,7 +165,7 @@ export function TanStackRouterDevtools({
 
     const run = (moveEvent: MouseEvent) => {
       const delta = dragInfo.pageY - moveEvent.pageY
-      const newHeight = dragInfo?.originalHeight + delta
+      const newHeight = dragInfo.originalHeight + delta
 
       setDevtoolsHeight(newHeight)
 
@@ -217,7 +217,7 @@ export function TanStackRouterDevtools({
       }
     }
     return
-  }, [isResolvedOpen])
+  }, [isResolvedOpen, rootEl?.parentElement])
 
   React.useEffect(() => {
     if (rootEl) {
@@ -390,9 +390,9 @@ function RouteComp({
           <AgeTicker match={match} router={router} />
         </div>
       </div>
-      {(route.children as Route[])?.length ? (
+      {route.children?.length ? (
         <div className={getStyles().nestedRouteRow(!!isRoot)}>
-          {[...(route.children as Route[])]
+          {[...(route.children as Array<Route>)]
             .sort((a, b) => {
               return a.rank - b.rank
             })
@@ -432,12 +432,6 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
     router,
   } as any)
 
-  const matches = [
-    ...(routerState.pendingMatches ?? []),
-    ...routerState.matches,
-    ...routerState.cachedMatches,
-  ]
-
   invariant(
     router,
     '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.',
@@ -455,12 +449,21 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
     '',
   )
 
-  const activeMatch = React.useMemo(
-    () => matches.find((d) => d.routeId === activeId || d.id === activeId),
-    [matches, activeId],
-  )
-
-  const hasSearch = Object.keys(routerState.location.search || {}).length
+  const activeMatch = React.useMemo(() => {
+    const matches = [
+      ...(routerState.pendingMatches ?? []),
+      ...routerState.matches,
+      ...routerState.cachedMatches,
+    ]
+    return matches.find((d) => d.routeId === activeId || d.id === activeId)
+  }, [
+    activeId,
+    routerState.cachedMatches,
+    routerState.matches,
+    routerState.pendingMatches,
+  ])
+
+  const hasSearch = Object.keys(routerState.location.search).length
 
   const explorerState = {
     ...router,
@@ -658,7 +661,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
             )}
           </div>
         </div>
-        {routerState.cachedMatches?.length ? (
+        {routerState.cachedMatches.length ? (
           <div className={getStyles().cachedMatchesContainer}>
             <div className={getStyles().detailsHeader}>
               <div>Cached Matches</div>
@@ -724,7 +727,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
                     (d) => d.id === activeMatch.id,
                   )
                     ? 'Pending'
-                    : routerState.matches?.find((d) => d.id === activeMatch.id)
+                    : routerState.matches.find((d) => d.id === activeMatch.id)
                       ? 'Active'
                       : 'Cached'}
                 </div>
@@ -733,9 +736,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
                 <div>Last Updated:</div>
                 <div className={getStyles().matchDetailsInfo}>
                   {activeMatch.updatedAt
-                    ? new Date(
-                        activeMatch.updatedAt as number,
-                      ).toLocaleTimeString()
+                    ? new Date(activeMatch.updatedAt).toLocaleTimeString()
                     : 'N/A'}
                 </div>
               </div>
@@ -764,13 +765,14 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
           <div className={getStyles().detailsHeader}>Search Params</div>
           <div className={getStyles().detailsContent}>
             <Explorer
-              value={routerState.location.search || {}}
-              defaultExpanded={Object.keys(
-                (routerState.location.search as {}) || {},
-              ).reduce((obj: any, next) => {
-                obj[next] = {}
-                return obj
-              }, {})}
+              value={routerState.location.search}
+              defaultExpanded={Object.keys(routerState.location.search).reduce(
+                (obj: any, next) => {
+                  obj[next] = {}
+                  return obj
+                },
+                {},
+              )}
             />
           </div>
         </div>
@@ -799,19 +801,19 @@ function AgeTicker({
     return () => {
       clearInterval(interval)
     }
-  }, [])
+  }, [rerender])
 
   if (!match) {
     return null
   }
 
-  const route = router.looseRoutesById[match?.routeId]!
+  const route = router.looseRoutesById[match.routeId]!
 
   if (!route.options.loader) {
     return null
   }
 
-  const age = Date.now() - match?.updatedAt
+  const age = Date.now() - match.updatedAt
   const staleTime =
     route.options.staleTime ?? router.options.defaultStaleTime ?? 0
   const gcTime =
@@ -1045,10 +1047,9 @@ const stylesFactory = () => {
       }
 
       if (showBorder) {
-        const border = css`
+        classes.push(css`
           border-right: 1px solid ${tokens.colors.gray[500]};
-        `
-        classes.push(border)
+        `)
       }
 
       return classes

package/src/useMediaQuery.ts

@@ -4,6 +4,7 @@ export default function useMediaQuery(query: string): boolean | undefined {
   // Keep track of the preference in state, start with the current match
   const [isMatch, setIsMatch] = React.useState(() => {
     if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       return window.matchMedia && window.matchMedia(query).matches
     }
     return
@@ -12,6 +13,7 @@ export default function useMediaQuery(query: string): boolean | undefined {
   // Watch for changes
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!window.matchMedia) {
         return
       }

package/src/utils.ts

@@ -1,8 +1,13 @@
 import React from 'react'
-import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'
-
-import { Theme, useTheme } from './theme'
+import { useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
+import type {
+  AnyRootRoute,
+  AnyRoute,
+  AnyRouteMatch,
+} from '@tanstack/react-router'
+
+import type { Theme } from './theme'
 
 export const isServer = typeof window === 'undefined'
 
@@ -38,7 +43,7 @@ export function getStatusColor(match: AnyRouteMatch) {
 }
 
 export function getRouteStatusColor(
-  matches: AnyRouteMatch[],
+  matches: Array<AnyRouteMatch>,
   route: AnyRoute | AnyRootRoute,
 ) {
   const found = matches.find((d) => d.routeId === route.id)
@@ -153,9 +158,9 @@ function scheduleMicrotask(callback: () => void) {
 }
 
 export function multiSortBy<T>(
-  arr: T[],
-  accessors: ((item: T) => any)[] = [(d) => d],
-): T[] {
+  arr: Array<T>,
+  accessors: Array<(item: T) => any> = [(d) => d],
+): Array<T> {
   return arr
     .map((d, i) => [d, i] as const)
     .sort(([a, ai], [b, bi]) => {