@tanstack/router-devtools 0.0.1-alpha.0 → 0.0.1-beta.84

package/src/devtools.tsx

@@ -1,14 +1,23 @@
 import React from 'react'
-import { Router, useRouter, last } from '@tanstack/react-router'
-import { formatDistanceStrict } from 'date-fns'
+import {
+  last,
+  routerContext,
+  invariant,
+  AnyRouter,
+  useStore,
+} from '@tanstack/router'
 
 import useLocalStorage from './useLocalStorage'
-import { getStatusColor, useIsMounted, useSafeState } from './utils'
+import {
+  getStatusColor,
+  multiSortBy,
+  useIsMounted,
+  useSafeState,
+} from './utils'
 import { Panel, Button, Code, ActivePanel } from './styledComponents'
 import { ThemeProvider, defaultTheme as theme } from './theme'
 // import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
-import Logo from './Logo'
 
 export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
@@ -52,7 +61,7 @@ interface DevtoolsOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter?: () => unknown
+  router?: AnyRouter
 }
 
 interface DevtoolsPanelOptions {
@@ -79,11 +88,53 @@ interface DevtoolsPanelOptions {
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
-  useRouter: () => unknown
+  router?: AnyRouter
 }
 
 const isServer = typeof window === 'undefined'
 
+function Logo(props: React.HTMLProps<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      style={{
+        ...(props.style ?? {}),
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        fontSize: '0.8rem',
+        fontWeight: 'bolder',
+        lineHeight: '1',
+      }}
+    >
+      <div
+        style={{
+          letterSpacing: '-0.05rem',
+        }}
+      >
+        TANSTACK
+      </div>
+      <div
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, var(--tw-gradient-stops))',
+          // @ts-ignore
+          '--tw-gradient-from': '#84cc16',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+          '--tw-gradient-to': '#10b981',
+          WebkitBackgroundClip: 'text',
+          color: 'transparent',
+          letterSpacing: '0.1rem',
+          marginRight: '-0.2rem',
+        }}
+      >
+        ROUTER
+      </div>
+    </div>
+  )
+}
+
 export function TanStackRouterDevtools({
   initialIsOpen,
   panelProps = {},
@@ -91,7 +142,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 +281,7 @@ export function TanStackRouterDevtools({
         <TanStackRouterDevtoolsPanel
           ref={panelRef as any}
           {...otherPanelProps}
-          useRouter={useRouterImpl}
+          router={router}
           style={{
             position: 'fixed',
             bottom: '0',
@@ -360,32 +411,46 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
     isOpen = true,
     setIsOpen,
     handleDragStart,
-    useRouter,
+    router: userRouter,
     ...panelProps
   } = props
 
-  const router = useRouter() as Router
+  const routerContextValue = React.useContext(routerContext)
+  const router = userRouter ?? routerContextValue?.router
 
-  React.useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanPreloadCache()
-      router.notify()
-    }, 1000)
+  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.',
+  )
 
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
+  useStore(router.__store)
 
   const [activeRouteId, setActiveRouteId] = useLocalStorage(
     'tanstackRouterDevtoolsActiveRouteId',
     '',
   )
 
-  const activeMatch = router.state.matches?.find(
-    (d) => d.routeId === activeRouteId,
+  const [activeMatchId, setActiveMatchId] = useLocalStorage(
+    'tanstackRouterDevtoolsActiveMatchId',
+    '',
+  )
+
+  React.useEffect(() => {
+    setActiveMatchId('')
+  }, [activeRouteId])
+
+  const allMatches = React.useMemo(
+    () => [
+      ...Object.values(router.state.currentMatches),
+      ...Object.values(router.state.pendingMatches ?? []),
+    ],
+    [router.state.currentMatches, router.state.pendingMatches],
   )
 
+  const activeMatch =
+    allMatches?.find((d) => d.id === activeMatchId) ||
+    allMatches?.find((d) => d.route.id === activeRouteId)
+
   return (
     <ThemeProvider theme={theme}>
       <Panel ref={ref} className="TanStackRouterDevtoolsPanel" {...panelProps}>
@@ -462,27 +527,21 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
         >
           <div
             style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
               display: 'flex',
-              justifyContent: 'space-between',
+              justifyContent: 'start',
+              gap: '1rem',
+              padding: '1rem',
               alignItems: 'center',
+              background: theme.backgroundAlt,
             }}
           >
-            <Logo
-              aria-hidden
-              style={{
-                marginRight: '.5em',
-              }}
-            />
+            <Logo aria-hidden />
             <div
               style={{
-                marginRight: 'auto',
                 fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
                 fontWeight: 'bold',
               }}
             >
-              TanStack Router{' '}
               <span
                 style={{
                   fontWeight: 100,
@@ -503,34 +562,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '.5em',
               }}
             >
-              <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
-                })()}
-                defaultExpanded={{}}
-              />
+              <Explorer label="Router" value={router} defaultExpanded={{}} />
             </div>
           </div>
         </div>
@@ -554,17 +586,17 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               zIndex: 1,
             }}
           >
-            Current Matches
+            Active Matches
           </div>
-          {router.state.matches.map((match, i) => {
+          {router.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={{
@@ -596,158 +628,169 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                     padding: '.5em',
                   }}
                 >
-                  {`${match.matchId}`}
+                  {`${match.id}`}
                 </Code>
               </div>
             )
           })}
-          <div
-            style={{
-              marginTop: '2rem',
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            Pending Matches
-          </div>
-          {router.state.pending?.matches.map((match, i) => {
-            return (
+          {router.state.pendingMatches?.length ? (
+            <>
               <div
-                key={match.routeId || i}
-                role="button"
-                aria-label={`Open match details for ${match.routeId}`}
-                onClick={() =>
-                  setActiveRouteId(
-                    activeRouteId === match.routeId ? '' : match.routeId,
-                  )
-                }
                 style={{
-                  display: 'flex',
-                  borderBottom: `solid 1px ${theme.grayAlt}`,
-                  cursor: 'pointer',
-                  background:
-                    match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+                  marginTop: '2rem',
+                  padding: '.5em',
+                  background: theme.backgroundAlt,
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 1,
                 }}
               >
-                <div
-                  style={{
-                    flex: '0 0 auto',
-                    width: '1.3rem',
-                    height: '1.3rem',
-                    marginLeft: '.25rem',
-                    background: getStatusColor(match, theme),
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 'bold',
-                    borderRadius: '.25rem',
-                    transition: 'all .2s ease-out',
-                  }}
-                />
+                Pending Matches
+              </div>
+              {router.state.pendingMatches?.map((match, i) => {
+                return (
+                  <div
+                    key={match.route.id || i}
+                    role="button"
+                    aria-label={`Open match details for ${match.route.id}`}
+                    onClick={() =>
+                      setActiveRouteId(
+                        activeRouteId === match.route.id ? '' : match.route.id,
+                      )
+                    }
+                    style={{
+                      display: 'flex',
+                      borderBottom: `solid 1px ${theme.grayAlt}`,
+                      cursor: 'pointer',
+                      background:
+                        match === activeMatch
+                          ? 'rgba(255,255,255,.1)'
+                          : undefined,
+                    }}
+                  >
+                    <div
+                      style={{
+                        flex: '0 0 auto',
+                        width: '1.3rem',
+                        height: '1.3rem',
+                        marginLeft: '.25rem',
+                        background: getStatusColor(match, theme),
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 'bold',
+                        borderRadius: '.25rem',
+                        transition: 'all .2s ease-out',
+                      }}
+                    />
 
-                <Code
-                  style={{
-                    padding: '.5em',
+                    <Code
+                      style={{
+                        padding: '.5em',
+                      }}
+                    >
+                      {`${match.id}`}
+                    </Code>
+                  </div>
+                )
+              })}
+            </>
+          ) : null}
+          {/* {matchCacheValues.length ? (
+            <>
+              <div
+                style={{
+                  marginTop: '2rem',
+                  padding: '.5em',
+                  background: theme.backgroundAlt,
+                  position: 'sticky',
+                  top: 0,
+                  bottom: 0,
+                  zIndex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div>Match Cache</div>
+                <Button
+                  onClick={() => {
+                    router.store.setState((s) => (s.matchCache = {}))
                   }}
                 >
-                  {`${match.matchId}`}
-                </Code>
+                  Clear
+                </Button>
               </div>
-            )
-          })}
-          <div
-            style={{
-              marginTop: '2rem',
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            Preloading Matches
-          </div>
-          {Object.keys(router.preloadCache)
-            .filter((key) => {
-              const cacheEntry = router.preloadCache[key]!
-              return (
-                (cacheEntry.match.updatedAt ?? Date.now()) + cacheEntry.maxAge >
-                Date.now()
-              )
-            })
-            .map((key, i) => {
-              const { match, maxAge } = router.preloadCache[key]!
-
-              return (
-                <div
-                  key={match.matchId || i}
-                  role="button"
-                  aria-label={`Open match details for ${match.matchId}`}
-                  onClick={() =>
-                    setActiveRouteId(
-                      activeRouteId === match.routeId ? '' : match.routeId,
-                    )
-                  }
-                  style={{
-                    display: 'flex',
-                    borderBottom: `solid 1px ${theme.grayAlt}`,
-                    cursor: 'pointer',
-                    background:
-                      match === activeMatch
-                        ? 'rgba(255,255,255,.1)'
-                        : undefined,
-                  }}
-                >
+              {matchCacheValues.map((d, i) => {
+                const { match, gc } = d
+
+                return (
                   <div
+                    key={match.id || i}
+                    role="button"
+                    aria-label={`Open match details for ${match.id}`}
+                    onClick={() =>
+                      setActiveMatchId(
+                        activeMatchId === match.id ? '' : match.id,
+                      )
+                    }
                     style={{
                       display: 'flex',
-                      flexDirection: 'column',
-                      padding: '.5rem',
-                      gap: '.3rem',
+                      borderBottom: `solid 1px ${theme.grayAlt}`,
+                      cursor: 'pointer',
+                      background:
+                        match === activeMatch
+                          ? 'rgba(255,255,255,.1)'
+                          : undefined,
                     }}
                   >
                     <div
                       style={{
                         display: 'flex',
-                        alignItems: 'center',
-                        gap: '.5rem',
+                        flexDirection: 'column',
+                        padding: '.5rem',
+                        gap: '.3rem',
                       }}
                     >
                       <div
                         style={{
-                          flex: '0 0 auto',
-                          width: '1.3rem',
-                          height: '1.3rem',
-                          background: getStatusColor(match, theme),
+                          display: 'flex',
                           alignItems: 'center',
-                          justifyContent: 'center',
-                          fontWeight: 'bold',
-                          borderRadius: '.25rem',
-                          transition: 'all .2s ease-out',
+                          gap: '.5rem',
                         }}
-                      />
-                      <Code>{`${match.matchId}`}</Code>
-                    </div>
-                    <span
-                      style={{
-                        opacity: '.5',
-                      }}
-                    >
-                      Expires{' '}
-                      {formatDistanceStrict(
-                        new Date(),
-                        new Date((match.updatedAt ?? Date.now()) + maxAge),
-                        {
+                      >
+                        <div
+                          style={{
+                            flex: '0 0 auto',
+                            width: '1.3rem',
+                            height: '1.3rem',
+                            background: getStatusColor(match, theme),
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontWeight: 'bold',
+                            borderRadius: '.25rem',
+                            transition: 'all .2s ease-out',
+                          }}
+                        />
+                        <Code>{`${match.id}`}</Code>
+                      </div>
+                      <span
+                        style={{
+                          fontSize: '.7rem',
+                          opacity: '.5',
+                          lineHeight: 1,
+                        }}
+                      >
+                        Expires{' '}
+                        {formatDistanceStrict(new Date(gc), new Date(), {
                           addSuffix: true,
-                        },
-                      )}
-                    </span>
+                        })}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              )
-            })}
+                )
+              })}
+            </>
+          ) : null} */}
         </div>
 
         {activeMatch ? (
@@ -758,6 +801,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 background: theme.backgroundAlt,
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -774,28 +818,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.status}</td>
-                  </tr>
-                  <tr>
-                    <td style={{ opacity: '.5' }}>Pending</td>
-                    <td>{activeMatch.isPending.toString()}</td>
+                    <td>{activeMatch.state.status}</td>
                   </tr>
-                  <tr>
+                  {/* <tr>
                     <td style={{ opacity: '.5' }}>Invalid</td>
-                    <td>{activeMatch.isInvalid.toString()}</td>
-                  </tr>
+                    <td>{activeMatch.getIsInvalid().toString()}</td>
+                  </tr> */}
                   <tr>
                     <td style={{ opacity: '.5' }}>Last Updated</td>
                     <td>
-                      {activeMatch.updatedAt
+                      {activeMatch.state.updatedAt
                         ? new Date(
-                            activeMatch.updatedAt as number,
+                            activeMatch.state.updatedAt as number,
                           ).toLocaleTimeString()
                         : 'N/A'}
                     </td>
@@ -809,6 +849,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '.5em',
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -821,20 +862,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             >
               <Button
                 type="button"
-                onClick={() => {
-                  router.invalidateRoute(activeMatch as any)
-                  router.notify()
-                }}
-                style={{
-                  background: theme.warning,
-                  color: theme.inputTextColor,
-                }}
-              >
-                Invalidate
-              </Button>{' '}
-              <Button
-                type="button"
-                onClick={() => router.reload()}
+                onClick={() => activeMatch.load()}
                 style={{
                   background: theme.gray,
                 }}
@@ -848,6 +876,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 padding: '.5em',
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -860,22 +889,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={activeMatch}
                 defaultExpanded={{}}
               />
             </div>
@@ -892,28 +906,35 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             flexDirection: 'column',
           }}
         >
-          <div
+          {/* <div
             style={{
               padding: '.5em',
               background: theme.backgroundAlt,
               position: 'sticky',
               top: 0,
+              bottom: 0,
               zIndex: 1,
             }}
           >
-            Loader Data
+            All Loader Data
           </div>
           <div
             style={{
               padding: '.5em',
             }}
           >
-            {Object.keys(last(router.state.matches)?.loaderData || {})
-              .length ? (
+            {Object.keys(
+              last(router.state.currentMatches)?.state.loaderData ||
+                {},
+            ).length ? (
               <Explorer
-                value={last(router.state.matches)?.loaderData || {}}
+                value={
+                  last(router.state.currentMatches)?.state
+                    .loaderData || {}
+                }
                 defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.loaderData as {}) || {},
+                  (last(router.state.currentMatches)?.state
+                    .loaderData as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj
@@ -922,13 +943,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             ) : (
               <em style={{ opacity: 0.5 }}>{'{ }'}</em>
             )}
-          </div>
+          </div> */}
           <div
             style={{
               padding: '.5em',
               background: theme.backgroundAlt,
               position: 'sticky',
               top: 0,
+              bottom: 0,
               zIndex: 1,
             }}
           >
@@ -939,11 +961,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               padding: '.5em',
             }}
           >
-            {Object.keys(last(router.state.matches)?.search || {}).length ? (
+            {Object.keys(last(router.state.currentMatches)?.state.search || {})
+              .length ? (
               <Explorer
-                value={last(router.state.matches)?.search || {}}
+                value={last(router.state.currentMatches)?.state.search || {}}
                 defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.search as {}) || {},
+                  (last(router.state.currentMatches)?.state.search as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj