@tanstack/router-devtools-core 1.132.51 → 1.133.1

package/src/BaseTanStackRouterDevtoolsPanel.tsx

@@ -1,7 +1,17 @@
 import { clsx as cx } from 'clsx'
 import { default as invariant } from 'tiny-invariant'
 import { interpolatePath, rootRouteId, trimPath } from '@tanstack/router-core'
-import { Show, createMemo, createSignal, onCleanup } from 'solid-js'
+import {
+  For,
+  Match,
+  Show,
+  Switch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  untrack,
+} from 'solid-js'
 import { useDevtoolsOnClose } from './context'
 import { useStyles } from './useStyles'
 import useLocalStorage from './useLocalStorage'
@@ -14,6 +24,7 @@ import { NavigateButton } from './NavigateButton'
 import type {
   AnyContext,
   AnyRoute,
+  AnyRouteMatch,
   AnyRouter,
   FileRouteTypes,
   MakeRouteMatchUnion,
@@ -54,6 +65,8 @@ export interface BaseDevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot
 }
 
+const HISTORY_LIMIT = 15
+
 function Logo(props: any) {
   const { className, ...rest } = props
   const styles = useStyles()
@@ -257,16 +270,45 @@ export const BaseTanStackRouterDevtoolsPanel =
 
     // useStore(router.__store)
 
-    const [showMatches, setShowMatches] = useLocalStorage(
-      'tanstackRouterDevtoolsShowMatches',
-      true,
-    )
+    const [currentTab, setCurrentTab] = useLocalStorage<
+      'routes' | 'matches' | 'history'
+    >('tanstackRouterDevtoolsActiveTab', 'routes')
 
     const [activeId, setActiveId] = useLocalStorage(
       'tanstackRouterDevtoolsActiveRouteId',
       '',
     )
 
+    const [history, setHistory] = createSignal<Array<AnyRouteMatch>>([])
+    const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false)
+
+    createEffect(() => {
+      const matches = routerState().matches
+      const currentMatch = matches[matches.length - 1]
+      if (!currentMatch) {
+        return
+      }
+      // Read history WITHOUT tracking it to avoid infinite loops
+      const historyUntracked = untrack(() => history())
+      const lastMatch = historyUntracked[0]
+      const sameLocation =
+        lastMatch &&
+        lastMatch.pathname === currentMatch.pathname &&
+        JSON.stringify(lastMatch.search ?? {}) ===
+          JSON.stringify(currentMatch.search ?? {})
+      if (!lastMatch || !sameLocation) {
+        if (historyUntracked.length >= HISTORY_LIMIT) {
+          setHasHistoryOverflowed(true)
+        }
+        setHistory((prev) => {
+          const newHistory = [currentMatch, ...prev]
+          // truncate to ensure we don't overflow too much the ui
+          newHistory.splice(HISTORY_LIMIT)
+          return newHistory
+        })
+      }
+    })
+
     const activeMatch = createMemo(() => {
       const matches = [
         ...(routerState().pendingMatches ?? []),
@@ -421,11 +463,14 @@ export const BaseTanStackRouterDevtoolsPanel =
                 <button
                   type="button"
                   onClick={() => {
-                    setShowMatches(false)
+                    setCurrentTab('routes')
                   }}
-                  disabled={!showMatches()}
+                  disabled={currentTab() === 'routes'}
                   class={cx(
-                    styles().routeMatchesToggleBtn(!showMatches(), true),
+                    styles().routeMatchesToggleBtn(
+                      currentTab() === 'routes',
+                      true,
+                    ),
                   )}
                 >
                   Routes
@@ -433,70 +478,137 @@ export const BaseTanStackRouterDevtoolsPanel =
                 <button
                   type="button"
                   onClick={() => {
-                    setShowMatches(true)
+                    setCurrentTab('matches')
                   }}
-                  disabled={showMatches()}
+                  disabled={currentTab() === 'matches'}
                   class={cx(
-                    styles().routeMatchesToggleBtn(!!showMatches(), false),
+                    styles().routeMatchesToggleBtn(
+                      currentTab() === 'matches',
+                      true,
+                    ),
                   )}
                 >
                   Matches
                 </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setCurrentTab('history')
+                  }}
+                  disabled={currentTab() === 'history'}
+                  class={cx(
+                    styles().routeMatchesToggleBtn(
+                      currentTab() === 'history',
+                      false,
+                    ),
+                  )}
+                >
+                  History
+                </button>
               </div>
               <div class={styles().detailsHeaderInfo}>
                 <div>age / staleTime / gcTime</div>
               </div>
             </div>
             <div class={cx(styles().routesContainer)}>
-              {!showMatches() ? (
-                <RouteComp
-                  routerState={routerState}
-                  router={router}
-                  route={router().routeTree}
-                  isRoot
-                  activeId={activeId}
-                  setActiveId={setActiveId}
-                />
-              ) : (
-                <div>
-                  {(routerState().pendingMatches?.length
-                    ? routerState().pendingMatches
-                    : routerState().matches
-                  )?.map((match: any, _i: any) => {
-                    return (
-                      <div
-                        role="button"
-                        aria-label={`Open match details for ${match.id}`}
-                        onClick={() =>
-                          setActiveId(activeId() === match.id ? '' : match.id)
-                        }
-                        class={cx(styles().matchRow(match === activeMatch()))}
-                      >
+              <Switch>
+                <Match when={currentTab() === 'routes'}>
+                  <RouteComp
+                    routerState={routerState}
+                    router={router}
+                    route={router().routeTree}
+                    isRoot
+                    activeId={activeId}
+                    setActiveId={setActiveId}
+                  />
+                </Match>
+                <Match when={currentTab() === 'matches'}>
+                  <div>
+                    {(routerState().pendingMatches?.length
+                      ? routerState().pendingMatches
+                      : routerState().matches
+                    )?.map((match: any, _i: any) => {
+                      return (
                         <div
-                          class={cx(
-                            styles().matchIndicator(getStatusColor(match)),
-                          )}
-                        />
-                        <NavigateLink
-                          left={
-                            <NavigateButton
-                              to={match.pathname}
-                              params={match.params}
-                              search={match.search}
-                              router={router}
-                            />
+                          role="button"
+                          aria-label={`Open match details for ${match.id}`}
+                          onClick={() =>
+                            setActiveId(activeId() === match.id ? '' : match.id)
                           }
-                          right={<AgeTicker match={match} router={router} />}
+                          class={cx(styles().matchRow(match === activeMatch()))}
                         >
-                          <code class={styles().matchID}>
-                            {`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}
-                          </code>
-                        </NavigateLink>
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
+                          <div
+                            class={cx(
+                              styles().matchIndicator(getStatusColor(match)),
+                            )}
+                          />
+                          <NavigateLink
+                            left={
+                              <NavigateButton
+                                to={match.pathname}
+                                params={match.params}
+                                search={match.search}
+                                router={router}
+                              />
+                            }
+                            right={<AgeTicker match={match} router={router} />}
+                          >
+                            <code class={styles().matchID}>
+                              {`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}
+                            </code>
+                          </NavigateLink>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </Match>
+                <Match when={currentTab() === 'history'}>
+                  <div>
+                    <ul>
+                      <For each={history()}>
+                        {(match, index) => (
+                          <li
+                            class={cx(
+                              styles().matchRow(match === activeMatch()),
+                            )}
+                          >
+                            <div
+                              class={cx(
+                                styles().matchIndicator(
+                                  index() === 0 ? 'green' : 'gray',
+                                ),
+                              )}
+                            />
+                            <NavigateLink
+                              left={
+                                <NavigateButton
+                                  to={match.pathname}
+                                  params={match.params}
+                                  search={match.search}
+                                  router={router}
+                                />
+                              }
+                              right={
+                                <AgeTicker match={match} router={router} />
+                              }
+                            >
+                              <code class={styles().matchID}>
+                                {`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}
+                              </code>
+                            </NavigateLink>
+                          </li>
+                        )}
+                      </For>
+                      {hasHistoryOverflowed() ? (
+                        <li class={styles().historyOverflowContainer}>
+                          This panel displays the most recent {HISTORY_LIMIT}{' '}
+                          navigations.
+                        </li>
+                      ) : null}
+                    </ul>
+                  </div>
+                </Match>
+              </Switch>
             </div>
           </div>
           {routerState().cachedMatches.length ? (

package/src/TanStackRouterDevtoolsCore.tsx

@@ -4,7 +4,7 @@ import { ShadowDomTargetContext } from './context'
 import type { AnyRouter } from '@tanstack/router-core'
 import type { Signal } from 'solid-js'
 
-interface DevtoolsOptions {
+export interface TanStackRouterDevtoolsCoreOptions {
   /**
    * Set this true if you want the dev tools to default to being open
    */
@@ -49,7 +49,7 @@ interface DevtoolsOptions {
   shadowDOMTarget?: ShadowRoot
 }
 
-class TanStackRouterDevtoolsCore {
+export class TanStackRouterDevtoolsCore {
   #router: Signal<AnyRouter>
   #routerState: Signal<any>
   #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
@@ -65,7 +65,7 @@ class TanStackRouterDevtoolsCore {
   #Component: any
   #dispose?: () => void
 
-  constructor(config: DevtoolsOptions) {
+  constructor(config: TanStackRouterDevtoolsCoreOptions) {
     this.#router = createSignal(config.router)
     this.#routerState = createSignal(config.routerState)
     this.#position = config.position ?? 'bottom-left'
@@ -141,7 +141,7 @@ class TanStackRouterDevtoolsCore {
     this.#routerState[1](routerState)
   }
 
-  setOptions(options: Partial<DevtoolsOptions>) {
+  setOptions(options: Partial<TanStackRouterDevtoolsCoreOptions>) {
     if (options.position !== undefined) {
       this.#position = options.position
     }
@@ -159,5 +159,3 @@ class TanStackRouterDevtoolsCore {
     }
   }
 }
-
-export { TanStackRouterDevtoolsCore }

package/src/TanStackRouterDevtoolsPanelCore.tsx

@@ -4,7 +4,7 @@ import { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'
 import type { JSX } from 'solid-js'
 import type { AnyRouter } from '@tanstack/router-core'
 
-interface TanStackRouterDevtoolsPanelCoreOptions {
+export interface TanStackRouterDevtoolsPanelCoreOptions {
   /**
    * The standard React style object used to style a component with inline styles
    */
@@ -37,7 +37,7 @@ interface TanStackRouterDevtoolsPanelCoreOptions {
   shadowDOMTarget?: ShadowRoot
 }
 
-class TanStackRouterDevtoolsPanelCore {
+export class TanStackRouterDevtoolsPanelCore {
   #router: any
   #routerState: any
   #style: any
@@ -158,5 +158,3 @@ class TanStackRouterDevtoolsPanelCore {
     }
   }
 }
-
-export { TanStackRouterDevtoolsPanelCore }

package/src/useStyles.tsx

@@ -404,6 +404,16 @@ const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
       overflow-y: auto;
       max-height: 50%;
     `,
+    historyContainer: css`
+      display: flex;
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+    historyOverflowContainer: css`
+      padding: ${size[1]} ${size[2]};
+      font-size: ${tokens.font.size.xs};
+    `,
     maskedBadgeContainer: css`
       flex: 1;
       justify-content: flex-end;