@tanstack/router-devtools-core 1.132.50 → 1.133.0

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/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;

package/dist/cjs/AgeTicker.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const clsx = require("clsx");
-const useStyles = require("./useStyles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><div></div><div>/</div><div></div><div>/</div><div>`);
-function formatTime(ms) {
-  const units = ["s", "min", "h", "d"];
-  const values = [ms / 1e3, ms / 6e4, ms / 36e5, ms / 864e5];
-  let chosenUnitIndex = 0;
-  for (let i = 1; i < values.length; i++) {
-    if (values[i] < 1) break;
-    chosenUnitIndex = i;
-  }
-  const formatter = new Intl.NumberFormat(navigator.language, {
-    compactDisplay: "short",
-    notation: "compact",
-    maximumFractionDigits: 0
-  });
-  return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
-}
-function AgeTicker({
-  match,
-  router
-}) {
-  const styles = useStyles.useStyles();
-  if (!match) {
-    return null;
-  }
-  const route = router().looseRoutesById[match.routeId];
-  if (!route.options.loader) {
-    return null;
-  }
-  const age = Date.now() - match.updatedAt;
-  const staleTime = route.options.staleTime ?? router().options.defaultStaleTime ?? 0;
-  const gcTime = route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1e3;
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
-    web.insert(_el$2, () => formatTime(age));
-    web.insert(_el$4, () => formatTime(staleTime));
-    web.insert(_el$6, () => formatTime(gcTime));
-    web.effect(() => web.className(_el$, clsx.clsx(styles().ageTicker(age > staleTime))));
-    return _el$;
-  })();
-}
-exports.AgeTicker = AgeTicker;
-//# sourceMappingURL=AgeTicker.cjs.map

package/dist/cjs/AgeTicker.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgeTicker.cjs","sources":["../../src/AgeTicker.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\nfunction formatTime(ms: number) {\n  const units = ['s', 'min', 'h', 'd']\n  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n  let chosenUnitIndex = 0\n  for (let i = 1; i < values.length; i++) {\n    if (values[i]! < 1) break\n    chosenUnitIndex = i\n  }\n\n  const formatter = new Intl.NumberFormat(navigator.language, {\n    compactDisplay: 'short',\n    notation: 'compact',\n    maximumFractionDigits: 0,\n  })\n\n  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nexport function AgeTicker({\n  match,\n  router,\n}: {\n  match?: AnyRouteMatch\n  router: Accessor<AnyRouter>\n}) {\n  const styles = useStyles()\n\n  if (!match) {\n    return null\n  }\n\n  const route = router().looseRoutesById[match.routeId]!\n\n  if (!route.options.loader) {\n    return null\n  }\n\n  const age = Date.now() - match.updatedAt\n  const staleTime =\n    route.options.staleTime ?? router().options.defaultStaleTime ?? 0\n  const gcTime =\n    route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1000\n\n  return (\n    <div class={cx(styles().ageTicker(age > staleTime))}>\n      <div>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\n"],"names":["formatTime","ms","units","values","chosenUnitIndex","i","length","formatter","Intl","NumberFormat","navigator","language","compactDisplay","notation","maximumFractionDigits","format","AgeTicker","match","router","styles","useStyles","route","looseRoutesById","routeId","options","loader","age","Date","now","updatedAt","staleTime","defaultStaleTime","gcTime","defaultGcTime","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_$insert","_$effect","_$className","cx","ageTicker"],"mappings":";;;;;;AAKA,SAASA,WAAWC,IAAY;AAC9B,QAAMC,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AACnC,QAAMC,SAAS,CAACF,KAAK,KAAMA,KAAK,KAAOA,KAAK,MAASA,KAAK,KAAQ;AAElE,MAAIG,kBAAkB;AACtB,WAASC,IAAI,GAAGA,IAAIF,OAAOG,QAAQD,KAAK;AACtC,QAAIF,OAAOE,CAAC,IAAK,EAAG;AACpBD,sBAAkBC;AAAAA,EACpB;AAEA,QAAME,YAAY,IAAIC,KAAKC,aAAaC,UAAUC,UAAU;AAAA,IAC1DC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACVC,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAOP,UAAUQ,OAAOZ,OAAOC,eAAe,CAAE,IAAIF,MAAME,eAAe;AAC3E;AAEO,SAASY,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAIF,GAAG;AACD,QAAMC,SAASC,UAAAA,UAAAA;AAEf,MAAI,CAACH,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAMI,QAAQH,OAAAA,EAASI,gBAAgBL,MAAMM,OAAO;AAEpD,MAAI,CAACF,MAAMG,QAAQC,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,QAAMC,MAAMC,KAAKC,IAAAA,IAAQX,MAAMY;AAC/B,QAAMC,YACJT,MAAMG,QAAQM,aAAaZ,SAASM,QAAQO,oBAAoB;AAClE,QAAMC,SACJX,MAAMG,QAAQQ,UAAUd,SAASM,QAAQS,iBAAiB,KAAK,KAAK;AAEtE,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAD,aAAAG,QAAAD,MAAAF;AAAAI,QAAAA,OAAAP,OAAA,MAEUpC,WAAW0B,GAAG,CAAC;AAAAiB,QAAAA,OAAAH,OAAA,MAEfxC,WAAW8B,SAAS,CAAC;AAAAa,QAAAA,OAAAD,OAAA,MAErB1C,WAAWgC,MAAM,CAAC;AAAAY,QAAAA,aAAAC,IAAAA,UAAAX,MALdY,UAAG3B,SAAS4B,UAAUrB,MAAMI,SAAS,CAAC,CAAC,CAAA;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAQvD;;"}