@tanstack/router-devtools 1.112.5 → 1.112.7

package/src/BaseTanStackRouterDevtoolsPanel.tsx

@@ -121,273 +121,228 @@ function RouteComp({
   )
 }
 
-export const BaseTanStackRouterDevtoolsPanel =
-  function BaseTanStackRouterDevtoolsPanel({
-    ref,
-    ...props
-  }: DevtoolsPanelOptions & {
-    ref?: React.RefObject<HTMLDivElement | null>
-  }): React.ReactElement {
-    const {
-      isOpen = true,
-      setIsOpen,
-      handleDragStart,
-      router: userRouter,
-      shadowDOMTarget,
-      ...panelProps
-    } = props
+export const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
+  HTMLDivElement,
+  DevtoolsPanelOptions
+>(function BaseTanStackRouterDevtoolsPanel(props, ref): React.ReactElement {
+  const {
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router: userRouter,
+    shadowDOMTarget,
+    ...panelProps
+  } = props
 
-    const { onCloseClick } = useDevtoolsOnClose()
-    const styles = useStyles()
-    const { className, ...otherPanelProps } = panelProps
+  const { onCloseClick } = useDevtoolsOnClose()
+  const styles = useStyles()
+  const { className, ...otherPanelProps } = panelProps
 
-    const contextRouter = useRouter({ warn: false })
-    const router = userRouter ?? contextRouter
-    const routerState = useRouterState({
-      router,
-    } as any)
+  const contextRouter = useRouter({ warn: false })
+  const router = userRouter ?? contextRouter
+  const routerState = useRouterState({
+    router,
+  } as any)
 
-    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.',
-    )
+  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.',
+  )
 
-    // useStore(router.__store)
+  // useStore(router.__store)
 
-    const [showMatches, setShowMatches] = useLocalStorage(
-      'tanstackRouterDevtoolsShowMatches',
-      true,
-    )
+  const [showMatches, setShowMatches] = useLocalStorage(
+    'tanstackRouterDevtoolsShowMatches',
+    true,
+  )
 
-    const [activeId, setActiveId] = useLocalStorage(
-      'tanstackRouterDevtoolsActiveRouteId',
-      '',
-    )
+  const [activeId, setActiveId] = useLocalStorage(
+    'tanstackRouterDevtoolsActiveRouteId',
+    '',
+  )
 
-    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 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 hasSearch = Object.keys(routerState.location.search).length
 
-    const explorerState = {
-      ...router,
-      state: router.state,
-    }
+  const explorerState = {
+    ...router,
+    state: router.state,
+  }
 
-    return (
-      <div
-        ref={ref}
-        className={cx(
-          styles.devtoolsPanel,
-          'TanStackRouterDevtoolsPanel',
-          className,
-        )}
-        {...otherPanelProps}
+  return (
+    <div
+      ref={ref}
+      className={cx(
+        styles.devtoolsPanel,
+        'TanStackRouterDevtoolsPanel',
+        className,
+      )}
+      {...otherPanelProps}
+    >
+      {handleDragStart ? (
+        <div className={styles.dragHandle} onMouseDown={handleDragStart}></div>
+      ) : null}
+      <button
+        className={styles.panelCloseBtn}
+        onClick={(e) => {
+          setIsOpen(false)
+          onCloseClick(e)
+        }}
       >
-        {handleDragStart ? (
-          <div
-            className={styles.dragHandle}
-            onMouseDown={handleDragStart}
-          ></div>
-        ) : null}
-        <button
-          className={styles.panelCloseBtn}
-          onClick={(e) => {
-            setIsOpen(false)
-            onCloseClick(e)
-          }}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="10"
+          height="6"
+          fill="none"
+          viewBox="0 0 10 6"
+          className={styles.panelCloseBtnIcon}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="6"
-            fill="none"
-            viewBox="0 0 10 6"
-            className={styles.panelCloseBtnIcon}
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="1.667"
-              d="M1 1l4 4 4-4"
-            ></path>
-          </svg>
-        </button>
-        <div className={styles.firstContainer}>
-          <div className={styles.row}>
-            <Logo
-              aria-hidden
-              onClick={(e) => {
-                setIsOpen(false)
-                onCloseClick(e)
+          <path
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.667"
+            d="M1 1l4 4 4-4"
+          ></path>
+        </svg>
+      </button>
+      <div className={styles.firstContainer}>
+        <div className={styles.row}>
+          <Logo
+            aria-hidden
+            onClick={(e) => {
+              setIsOpen(false)
+              onCloseClick(e)
+            }}
+          />
+        </div>
+        <div className={styles.routerExplorerContainer}>
+          <div className={styles.routerExplorer}>
+            <Explorer
+              label="Router"
+              value={Object.fromEntries(
+                multiSortBy(
+                  Object.keys(explorerState),
+                  (
+                    [
+                      'state',
+                      'routesById',
+                      'routesByPath',
+                      'flatRoutes',
+                      'options',
+                      'manifest',
+                    ] as const
+                  ).map((d) => (dd) => dd !== d),
+                )
+                  .map((key) => [key, (explorerState as any)[key]])
+                  .filter(
+                    (d) =>
+                      typeof d[1] !== 'function' &&
+                      ![
+                        '__store',
+                        'basepath',
+                        'injectedHtml',
+                        'subscribers',
+                        'latestLoadPromise',
+                        'navigateTimeout',
+                        'resetNextScroll',
+                        'tempLocationKey',
+                        'latestLocation',
+                        'routeTree',
+                        'history',
+                      ].includes(d[0]),
+                  ),
+              )}
+              defaultExpanded={{
+                state: {} as any,
+                context: {} as any,
+                options: {} as any,
+              }}
+              filterSubEntries={(subEntries) => {
+                return subEntries.filter((d) => typeof d.value !== 'function')
               }}
             />
           </div>
-          <div className={styles.routerExplorerContainer}>
-            <div className={styles.routerExplorer}>
-              <Explorer
-                label="Router"
-                value={Object.fromEntries(
-                  multiSortBy(
-                    Object.keys(explorerState),
-                    (
-                      [
-                        'state',
-                        'routesById',
-                        'routesByPath',
-                        'flatRoutes',
-                        'options',
-                        'manifest',
-                      ] as const
-                    ).map((d) => (dd) => dd !== d),
-                  )
-                    .map((key) => [key, (explorerState as any)[key]])
-                    .filter(
-                      (d) =>
-                        typeof d[1] !== 'function' &&
-                        ![
-                          '__store',
-                          'basepath',
-                          'injectedHtml',
-                          'subscribers',
-                          'latestLoadPromise',
-                          'navigateTimeout',
-                          'resetNextScroll',
-                          'tempLocationKey',
-                          'latestLocation',
-                          'routeTree',
-                          'history',
-                        ].includes(d[0]),
-                    ),
-                )}
-                defaultExpanded={{
-                  state: {} as any,
-                  context: {} as any,
-                  options: {} as any,
-                }}
-                filterSubEntries={(subEntries) => {
-                  return subEntries.filter((d) => typeof d.value !== 'function')
-                }}
-              />
-            </div>
-          </div>
         </div>
-        <div className={styles.secondContainer}>
-          <div className={styles.matchesContainer}>
-            <div className={styles.detailsHeader}>
-              <span>Pathname</span>
-              {routerState.location.maskedLocation ? (
-                <div className={styles.maskedBadgeContainer}>
-                  <span className={styles.maskedBadge}>masked</span>
-                </div>
-              ) : null}
-            </div>
-            <div className={styles.detailsContent}>
-              <code>{routerState.location.pathname}</code>
-              {routerState.location.maskedLocation ? (
-                <code className={styles.maskedLocation}>
-                  {routerState.location.maskedLocation.pathname}
-                </code>
-              ) : null}
-            </div>
-            <div className={styles.detailsHeader}>
-              <div className={styles.routeMatchesToggle}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowMatches(false)
-                  }}
-                  disabled={!showMatches}
-                  className={cx(
-                    styles.routeMatchesToggleBtn(!showMatches, true),
-                  )}
-                >
-                  Routes
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowMatches(true)
-                  }}
-                  disabled={showMatches}
-                  className={cx(
-                    styles.routeMatchesToggleBtn(!!showMatches, false),
-                  )}
-                >
-                  Matches
-                </button>
-              </div>
-              <div className={styles.detailsHeaderInfo}>
-                <div>age / staleTime / gcTime</div>
+      </div>
+      <div className={styles.secondContainer}>
+        <div className={styles.matchesContainer}>
+          <div className={styles.detailsHeader}>
+            <span>Pathname</span>
+            {routerState.location.maskedLocation ? (
+              <div className={styles.maskedBadgeContainer}>
+                <span className={styles.maskedBadge}>masked</span>
               </div>
+            ) : null}
+          </div>
+          <div className={styles.detailsContent}>
+            <code>{routerState.location.pathname}</code>
+            {routerState.location.maskedLocation ? (
+              <code className={styles.maskedLocation}>
+                {routerState.location.maskedLocation.pathname}
+              </code>
+            ) : null}
+          </div>
+          <div className={styles.detailsHeader}>
+            <div className={styles.routeMatchesToggle}>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowMatches(false)
+                }}
+                disabled={!showMatches}
+                className={cx(styles.routeMatchesToggleBtn(!showMatches, true))}
+              >
+                Routes
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowMatches(true)
+                }}
+                disabled={showMatches}
+                className={cx(
+                  styles.routeMatchesToggleBtn(!!showMatches, false),
+                )}
+              >
+                Matches
+              </button>
             </div>
-            <div className={cx(styles.routesContainer)}>
-              {!showMatches ? (
-                <RouteComp
-                  router={router}
-                  route={router.routeTree}
-                  isRoot
-                  activeId={activeId}
-                  setActiveId={setActiveId}
-                />
-              ) : (
-                <div>
-                  {(routerState.pendingMatches?.length
-                    ? routerState.pendingMatches
-                    : routerState.matches
-                  ).map((match, i) => {
-                    return (
-                      <div
-                        key={match.id || i}
-                        role="button"
-                        aria-label={`Open match details for ${match.id}`}
-                        onClick={() =>
-                          setActiveId(activeId === match.id ? '' : match.id)
-                        }
-                        className={cx(styles.matchRow(match === activeMatch))}
-                      >
-                        <div
-                          className={cx(
-                            styles.matchIndicator(getStatusColor(match)),
-                          )}
-                        />
-
-                        <code
-                          className={styles.matchID}
-                        >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>
-                        <AgeTicker match={match} router={router} />
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
+            <div className={styles.detailsHeaderInfo}>
+              <div>age / staleTime / gcTime</div>
             </div>
           </div>
-          {routerState.cachedMatches.length ? (
-            <div className={styles.cachedMatchesContainer}>
-              <div className={styles.detailsHeader}>
-                <div>Cached Matches</div>
-                <div className={styles.detailsHeaderInfo}>
-                  age / staleTime / gcTime
-                </div>
-              </div>
+          <div className={cx(styles.routesContainer)}>
+            {!showMatches ? (
+              <RouteComp
+                router={router}
+                route={router.routeTree}
+                isRoot
+                activeId={activeId}
+                setActiveId={setActiveId}
+              />
+            ) : (
               <div>
-                {routerState.cachedMatches.map((match) => {
+                {(routerState.pendingMatches?.length
+                  ? routerState.pendingMatches
+                  : routerState.matches
+                ).map((match, i) => {
                   return (
                     <div
-                      key={match.id}
+                      key={match.id || i}
                       role="button"
                       aria-label={`Open match details for ${match.id}`}
                       onClick={() =>
@@ -401,99 +356,133 @@ export const BaseTanStackRouterDevtoolsPanel =
                         )}
                       />
 
-                      <code className={styles.matchID}>{`${match.id}`}</code>
-
+                      <code
+                        className={styles.matchID}
+                      >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>
                       <AgeTicker match={match} router={router} />
                     </div>
                   )
                 })}
               </div>
-            </div>
-          ) : null}
+            )}
+          </div>
         </div>
-        {activeMatch ? (
-          <div className={styles.thirdContainer}>
-            <div className={styles.detailsHeader}>Match Details</div>
+        {routerState.cachedMatches.length ? (
+          <div className={styles.cachedMatchesContainer}>
+            <div className={styles.detailsHeader}>
+              <div>Cached Matches</div>
+              <div className={styles.detailsHeaderInfo}>
+                age / staleTime / gcTime
+              </div>
+            </div>
             <div>
-              <div className={styles.matchDetails}>
-                <div
-                  className={styles.matchStatus(
-                    activeMatch.status,
-                    activeMatch.isFetching,
-                  )}
-                >
-                  <div>
-                    {activeMatch.status === 'success' && activeMatch.isFetching
-                      ? 'fetching'
-                      : activeMatch.status}
-                  </div>
-                </div>
-                <div className={styles.matchDetailsInfoLabel}>
-                  <div>ID:</div>
-                  <div className={styles.matchDetailsInfo}>
-                    <code>{activeMatch.id}</code>
+              {routerState.cachedMatches.map((match) => {
+                return (
+                  <div
+                    key={match.id}
+                    role="button"
+                    aria-label={`Open match details for ${match.id}`}
+                    onClick={() =>
+                      setActiveId(activeId === match.id ? '' : match.id)
+                    }
+                    className={cx(styles.matchRow(match === activeMatch))}
+                  >
+                    <div
+                      className={cx(
+                        styles.matchIndicator(getStatusColor(match)),
+                      )}
+                    />
+
+                    <code className={styles.matchID}>{`${match.id}`}</code>
+
+                    <AgeTicker match={match} router={router} />
                   </div>
+                )
+              })}
+            </div>
+          </div>
+        ) : null}
+      </div>
+      {activeMatch ? (
+        <div className={styles.thirdContainer}>
+          <div className={styles.detailsHeader}>Match Details</div>
+          <div>
+            <div className={styles.matchDetails}>
+              <div
+                className={styles.matchStatus(
+                  activeMatch.status,
+                  activeMatch.isFetching,
+                )}
+              >
+                <div>
+                  {activeMatch.status === 'success' && activeMatch.isFetching
+                    ? 'fetching'
+                    : activeMatch.status}
                 </div>
-                <div className={styles.matchDetailsInfoLabel}>
-                  <div>State:</div>
-                  <div className={styles.matchDetailsInfo}>
-                    {routerState.pendingMatches?.find(
-                      (d) => d.id === activeMatch.id,
-                    )
-                      ? 'Pending'
-                      : routerState.matches.find((d) => d.id === activeMatch.id)
-                        ? 'Active'
-                        : 'Cached'}
-                  </div>
+              </div>
+              <div className={styles.matchDetailsInfoLabel}>
+                <div>ID:</div>
+                <div className={styles.matchDetailsInfo}>
+                  <code>{activeMatch.id}</code>
                 </div>
-                <div className={styles.matchDetailsInfoLabel}>
-                  <div>Last Updated:</div>
-                  <div className={styles.matchDetailsInfo}>
-                    {activeMatch.updatedAt
-                      ? new Date(activeMatch.updatedAt).toLocaleTimeString()
-                      : 'N/A'}
-                  </div>
+              </div>
+              <div className={styles.matchDetailsInfoLabel}>
+                <div>State:</div>
+                <div className={styles.matchDetailsInfo}>
+                  {routerState.pendingMatches?.find(
+                    (d) => d.id === activeMatch.id,
+                  )
+                    ? 'Pending'
+                    : routerState.matches.find((d) => d.id === activeMatch.id)
+                      ? 'Active'
+                      : 'Cached'}
                 </div>
               </div>
-            </div>
-            {activeMatch.loaderData ? (
-              <>
-                <div className={styles.detailsHeader}>Loader Data</div>
-                <div className={styles.detailsContent}>
-                  <Explorer
-                    label="loaderData"
-                    value={activeMatch.loaderData}
-                    defaultExpanded={{}}
-                  />
+              <div className={styles.matchDetailsInfoLabel}>
+                <div>Last Updated:</div>
+                <div className={styles.matchDetailsInfo}>
+                  {activeMatch.updatedAt
+                    ? new Date(activeMatch.updatedAt).toLocaleTimeString()
+                    : 'N/A'}
                 </div>
-              </>
-            ) : null}
-            <div className={styles.detailsHeader}>Explorer</div>
-            <div className={styles.detailsContent}>
-              <Explorer
-                label="Match"
-                value={activeMatch}
-                defaultExpanded={{}}
-              />
+              </div>
             </div>
           </div>
-        ) : null}
-        {hasSearch ? (
-          <div className={styles.fourthContainer}>
-            <div className={styles.detailsHeader}>Search Params</div>
-            <div className={styles.detailsContent}>
-              <Explorer
-                value={routerState.location.search}
-                defaultExpanded={Object.keys(
-                  routerState.location.search,
-                ).reduce((obj: any, next) => {
+          {activeMatch.loaderData ? (
+            <>
+              <div className={styles.detailsHeader}>Loader Data</div>
+              <div className={styles.detailsContent}>
+                <Explorer
+                  label="loaderData"
+                  value={activeMatch.loaderData}
+                  defaultExpanded={{}}
+                />
+              </div>
+            </>
+          ) : null}
+          <div className={styles.detailsHeader}>Explorer</div>
+          <div className={styles.detailsContent}>
+            <Explorer label="Match" value={activeMatch} defaultExpanded={{}} />
+          </div>
+        </div>
+      ) : null}
+      {hasSearch ? (
+        <div className={styles.fourthContainer}>
+          <div className={styles.detailsHeader}>Search Params</div>
+          <div className={styles.detailsContent}>
+            <Explorer
+              value={routerState.location.search}
+              defaultExpanded={Object.keys(routerState.location.search).reduce(
+                (obj: any, next) => {
                   obj[next] = {}
                   return obj
-                }, {})}
-              />
-            </div>
+                },
+                {},
+              )}
+            />
           </div>
-        ) : null}
-      </div>
-    )
-  }
+        </div>
+      ) : null}
+    </div>
+  )
+})