@tanstack/router-devtools 0.0.1-alpha.1 → 0.0.1-beta.100

package/src/devtools.tsx

@@ -1,14 +1,28 @@
 import React from 'react'
-import { Router, useRouter, last } from '@tanstack/react-router'
-import { formatDistanceStrict } from 'date-fns'
+import {
+  last,
+  routerContext,
+  invariant,
+  AnyRouter,
+  useStore,
+  Route,
+  AnyRoute,
+  AnyRootRoute,
+  RouteMatch,
+} from '@tanstack/router'
 
 import useLocalStorage from './useLocalStorage'
-import { getStatusColor, useIsMounted, useSafeState } from './utils'
+import {
+  getRouteStatusColor,
+  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 +66,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 +93,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 +147,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 +286,7 @@ export function TanStackRouterDevtools({
         <TanStackRouterDevtoolsPanel
           ref={panelRef as any}
           {...otherPanelProps}
-          useRouter={useRouterImpl}
+          router={router}
           style={{
             position: 'fixed',
             bottom: '0',
@@ -352,6 +408,74 @@ export function TanStackRouterDevtools({
   )
 }
 
+function RouteComp({
+  route,
+  isRoot,
+  matches,
+}: {
+  route: AnyRootRoute | AnyRoute
+  isRoot?: boolean
+  matches: RouteMatch[]
+}) {
+  const isActive = matches.find((d) => d.route === route)
+  return (
+    <div>
+      <div
+        // role="button"
+        // aria-label={`Open match details for ${route.id}`}
+        // onClick={() =>
+        //   setActiveRouteId(activeRouteId === route.id ? '' : route.id)
+        // }
+        style={{
+          display: 'flex',
+          borderBottom: `solid 1px ${theme.grayAlt}`,
+          cursor: 'pointer',
+          alignItems: 'center',
+          // background:
+          //   route === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+        }}
+      >
+        {isRoot ? null : (
+          <div
+            style={{
+              flex: '0 0 auto',
+              width: '.7rem',
+              height: '.7rem',
+              margin: '.5rem .75rem',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontWeight: 'bold',
+              borderRadius: '100%',
+              transition: 'all .2s ease-out',
+              background: getRouteStatusColor(matches, route, theme),
+              opacity: isActive ? 1 : 0.3,
+            }}
+          />
+        )}
+        <Code
+          style={{
+            padding: '.25rem 0',
+            paddingLeft: isRoot ? '.5rem' : 0,
+            opacity: isActive ? 1 : 0.7,
+          }}
+        >{`${route.id}`}</Code>
+      </div>
+      {(route.children as Route[])?.length ? (
+        <div
+          style={{
+            marginLeft: isRoot ? 0 : '1rem',
+            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,
+          }}
+        >
+          {(route.children as Route[]).map((r) => (
+            <RouteComp key={r.id} route={r} matches={matches} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 export const TanStackRouterDevtoolsPanel = React.forwardRef<
   HTMLDivElement,
   DevtoolsPanelOptions
@@ -360,32 +484,55 @@ 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 [showMatches, setShowMatches] = useLocalStorage(
+    'tanstackRouterDevtoolsShowMatches',
+    true,
+  )
 
   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: RouteMatch[] = 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)
+
+  const hasSearch = Object.keys(
+    last(router.state.currentMatches)?.state.search || {},
+  ).length
+
   return (
     <ThemeProvider theme={theme}>
       <Panel ref={ref} className="TanStackRouterDevtoolsPanel" {...panelProps}>
@@ -462,27 +609,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 +644,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>
@@ -552,204 +666,155 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               position: 'sticky',
               top: 0,
               zIndex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              gap: '.5rem',
             }}
           >
-            Current Matches
-          </div>
-          {router.state.matches.map((match, i) => {
-            return (
-              <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',
-                  alignItems: 'center',
-                  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',
-                  }}
-                >
-                  {`${match.matchId}`}
-                </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 (
-              <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,
-                }}
-              >
-                <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',
-                  }}
-                >
-                  {`${match.matchId}`}
-                </Code>
-              </div>
-            )
-          })}
-          <div
-            style={{
-              marginTop: '2rem',
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            Preloading Matches
+            <button
+              type="button"
+              onClick={() => {
+                setShowMatches(false)
+              }}
+              disabled={!showMatches}
+              style={{
+                opacity: showMatches ? 0.5 : 1,
+              }}
+            >
+              Routes
+            </button>
+            /
+            <button
+              type="button"
+              onClick={() => {
+                setShowMatches(true)
+              }}
+              disabled={showMatches}
+              style={{
+                opacity: !showMatches ? 0.5 : 1,
+              }}
+            >
+              Matches
+            </button>
           </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,
-                  }}
-                >
+          {!showMatches ? (
+            <RouteComp route={router.routeTree} isRoot matches={allMatches} />
+          ) : (
+            <div>
+              {router.state.currentMatches.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',
-                      flexDirection: 'column',
-                      padding: '.5rem',
-                      gap: '.3rem',
+                      borderBottom: `solid 1px ${theme.grayAlt}`,
+                      cursor: 'pointer',
+                      alignItems: 'center',
+                      background:
+                        match === activeMatch
+                          ? 'rgba(255,255,255,.1)'
+                          : undefined,
                     }}
                   >
                     <div
                       style={{
-                        display: 'flex',
+                        flex: '0 0 auto',
+                        width: '1.3rem',
+                        height: '1.3rem',
+                        marginLeft: '.25rem',
+                        background: getStatusColor(match, theme),
                         alignItems: 'center',
-                        gap: '.5rem',
+                        justifyContent: 'center',
+                        fontWeight: 'bold',
+                        borderRadius: '.25rem',
+                        transition: 'all .2s ease-out',
                       }}
-                    >
-                      <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.matchId}`}</Code>
-                    </div>
-                    <span
+                    />
+
+                    <Code
                       style={{
-                        opacity: '.5',
+                        padding: '.5em',
                       }}
                     >
-                      Expires{' '}
-                      {formatDistanceStrict(
-                        new Date(),
-                        new Date((match.updatedAt ?? Date.now()) + maxAge),
-                        {
-                          addSuffix: true,
-                        },
-                      )}
-                    </span>
+                      {`${match.id}`}
+                    </Code>
                   </div>
-                </div>
-              )
-            })}
+                )
+              })}
+              {router.state.pendingMatches?.length ? (
+                <>
+                  <div
+                    style={{
+                      marginTop: '2rem',
+                      padding: '.5em',
+                      background: theme.backgroundAlt,
+                      position: 'sticky',
+                      top: 0,
+                      zIndex: 1,
+                    }}
+                  >
+                    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',
+                          }}
+                        >
+                          {`${match.id}`}
+                        </Code>
+                      </div>
+                    )
+                  })}
+                </>
+              ) : null}
+            </div>
+          )}
         </div>
-
         {activeMatch ? (
           <ActivePanel>
             <div
@@ -758,6 +823,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 background: theme.backgroundAlt,
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -774,28 +840,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>
@@ -803,12 +865,13 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                 </tbody>
               </table>
             </div>
-            <div
+            {/* <div
               style={{
                 background: theme.backgroundAlt,
                 padding: '.5em',
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -821,33 +884,21 @@ 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.__store.setState(d => ({...d, status: 'pending'}))}
                 style={{
                   background: theme.gray,
                 }}
               >
                 Reload
               </Button>
-            </div>
+            </div> */}
             <div
               style={{
                 background: theme.backgroundAlt,
                 padding: '.5em',
                 position: 'sticky',
                 top: 0,
+                bottom: 0,
                 zIndex: 1,
               }}
             >
@@ -860,100 +911,53 @@ 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>
           </ActivePanel>
         ) : null}
-        <div
-          style={{
-            flex: '1 1 500px',
-            minHeight: '40%',
-            maxHeight: '100%',
-            overflow: 'auto',
-            borderRight: `1px solid ${theme.grayAlt}`,
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <div
-            style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            Loader Data
-          </div>
+        {hasSearch ? (
           <div
             style={{
-              padding: '.5em',
-            }}
-          >
-            {Object.keys(last(router.state.matches)?.loaderData || {})
-              .length ? (
-              <Explorer
-                value={last(router.state.matches)?.loaderData || {}}
-                defaultExpanded={Object.keys(
-                  (last(router.state.matches)?.loaderData as {}) || {},
-                ).reduce((obj: any, next) => {
-                  obj[next] = {}
-                  return obj
-                }, {})}
-              />
-            ) : (
-              <em style={{ opacity: 0.5 }}>{'{ }'}</em>
-            )}
-          </div>
-          <div
-            style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            Search Params
-          </div>
-          <div
-            style={{
-              padding: '.5em',
+              flex: '1 1 500px',
+              minHeight: '40%',
+              maxHeight: '100%',
+              overflow: 'auto',
+              borderRight: `1px solid ${theme.grayAlt}`,
+              display: 'flex',
+              flexDirection: 'column',
             }}
           >
-            {Object.keys(last(router.state.matches)?.search || {}).length ? (
+            <div
+              style={{
+                padding: '.5em',
+                background: theme.backgroundAlt,
+                position: 'sticky',
+                top: 0,
+                bottom: 0,
+                zIndex: 1,
+              }}
+            >
+              Search Params
+            </div>
+            <div
+              style={{
+                padding: '.5em',
+              }}
+            >
               <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
                 }, {})}
               />
-            ) : (
-              <em style={{ opacity: 0.5 }}>{'{ }'}</em>
-            )}
+            </div>
           </div>
-        </div>
+        ) : null}
       </Panel>
     </ThemeProvider>
   )