@tanstack/router-devtools 1.17.0 → 1.17.2

package/dist/esm/devtools.js

@@ -8,12 +8,11 @@ import { clsx } from "clsx";
 import Explorer from "./Explorer.js";
 import { tokens } from "./tokens.js";
 import { TanStackLogo } from "./logo.js";
-const isServer = typeof window === "undefined";
 function Logo(props) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxs("button", { ...rest, className: clsx(styles.logo, className), children: [
-    /* @__PURE__ */ jsx("div", { className: styles.tanstackLogo, children: "TANSTACK" }),
-    /* @__PURE__ */ jsx("div", { className: styles.routerLogo, children: "React Router v1" })
+  return /* @__PURE__ */ jsxs("button", { ...rest, className: clsx(getStyles().logo, className), children: [
+    /* @__PURE__ */ jsx("div", { className: getStyles().tanstackLogo, children: "TANSTACK" }),
+    /* @__PURE__ */ jsx("div", { className: getStyles().routerLogo, children: "React Router v1" })
   ] });
 }
 const DevtoolsOnCloseContext = React__default.createContext(void 0);
@@ -35,7 +34,7 @@ function TanStackRouterDevtools({
   containerElement: Container = "footer",
   router
 }) {
-  const rootRef = React__default.useRef(null);
+  const [rootEl, setRootEl] = React__default.useState(null);
   const panelRef = React__default.useRef(null);
   const [isOpen, setIsOpen] = useLocalStorage(
     "tanstackRouterDevtoolsOpen",
@@ -78,38 +77,37 @@ function TanStackRouterDevtools({
   React__default.useEffect(() => {
     setIsResolvedOpen(isOpen ?? false);
   }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-  React__default[isServer ? "useEffect" : "useLayoutEffect"](() => {
-    var _a, _b;
+  React__default.useEffect(() => {
+    var _a;
     if (isResolvedOpen) {
-      const previousValue = (_b = (_a = rootRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const previousValue = (_a = rootEl == null ? void 0 : rootEl.parentElement) == null ? void 0 : _a.style.paddingBottom;
       const run = () => {
-        var _a2, _b2;
+        var _a2;
         const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
-        if ((_b2 = rootRef.current) == null ? void 0 : _b2.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
+        if (rootEl == null ? void 0 : rootEl.parentElement) {
+          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`;
         }
       };
       run();
       if (typeof window !== "undefined") {
         window.addEventListener("resize", run);
         return () => {
-          var _a2;
           window.removeEventListener("resize", run);
-          if (((_a2 = rootRef.current) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
-            rootRef.current.parentElement.style.paddingBottom = previousValue;
+          if ((rootEl == null ? void 0 : rootEl.parentElement) && typeof previousValue === "string") {
+            rootEl.parentElement.style.paddingBottom = previousValue;
           }
         };
       }
     }
     return;
   }, [isResolvedOpen]);
-  React__default[isServer ? "useEffect" : "useLayoutEffect"](() => {
-    if (rootRef.current) {
-      const el = rootRef.current;
+  React__default.useEffect(() => {
+    if (rootEl) {
+      const el = rootEl;
       const fontSize = getComputedStyle(el).fontSize;
       el.style.setProperty("--tsrd-font-size", fontSize);
     }
-  }, [rootRef.current]);
+  }, [rootEl]);
   const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
   const {
     style: closeButtonStyle = {},
@@ -124,7 +122,7 @@ function TanStackRouterDevtools({
   if (!isMounted())
     return null;
   const resolvedHeight = devtoolsHeight ?? 500;
-  return /* @__PURE__ */ jsxs(Container, { ref: rootRef, className: "TanStackRouterDevtools", children: [
+  return /* @__PURE__ */ jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
     /* @__PURE__ */ jsx(
       DevtoolsOnCloseContext.Provider,
       {
@@ -139,10 +137,10 @@ function TanStackRouterDevtools({
             ...otherPanelProps,
             router,
             className: clsx(
-              styles.devtoolsPanelContainer,
-              styles.devtoolsPanelContainerVisibility(!!isOpen),
-              styles.devtoolsPanelContainerResizing(isResizing),
-              styles.devtoolsPanelContainerAnimation(
+              getStyles().devtoolsPanelContainer,
+              getStyles().devtoolsPanelContainerVisibility(!!isOpen),
+              getStyles().devtoolsPanelContainerResizing(isResizing),
+              getStyles().devtoolsPanelContainerAnimation(
                 isResolvedOpen,
                 resolvedHeight + 16
               )
@@ -169,17 +167,17 @@ function TanStackRouterDevtools({
           onToggleClick && onToggleClick(e);
         },
         className: clsx(
-          styles.mainCloseBtn,
-          styles.mainCloseBtnPosition(position),
-          styles.mainCloseBtnAnimation(!isButtonClosed)
+          getStyles().mainCloseBtn,
+          getStyles().mainCloseBtnPosition(position),
+          getStyles().mainCloseBtnAnimation(!isButtonClosed)
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
-            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
+          /* @__PURE__ */ jsxs("div", { className: getStyles().mainCloseBtnIconContainer, children: [
+            /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
+            /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
-          /* @__PURE__ */ jsx("div", { className: styles.routerLogoCloseButton, children: "React Router" })
+          /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnDivider, children: "-" }),
+          /* @__PURE__ */ jsx("div", { className: getStyles().routerLogoCloseButton, children: "React Router" })
         ]
       }
     )
@@ -224,31 +222,31 @@ function RouteComp({
           }
         },
         className: clsx(
-          styles.routesRowContainer(route.id === activeId, !!match)
+          getStyles().routesRowContainer(route.id === activeId, !!match)
         ),
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(
-                styles.matchIndicator(getRouteStatusColor(matches, route))
+                getStyles().matchIndicator(getRouteStatusColor(matches, route))
               )
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: clsx(styles.routesRow(!!match)), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(getStyles().routesRow(!!match)), children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("code", { className: styles.code, children: [
+              /* @__PURE__ */ jsxs("code", { className: getStyles().code, children: [
                 isRoot ? "__root__" : route.path || trimPath(route.id),
                 " "
               ] }),
-              /* @__PURE__ */ jsx("code", { className: styles.routeParamInfo, children: param })
+              /* @__PURE__ */ jsx("code", { className: getStyles().routeParamInfo, children: param })
             ] }),
             /* @__PURE__ */ jsx(AgeTicker, { match })
           ] })
         ]
       }
     ),
-    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: styles.nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
+    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: getStyles().nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
       return a.rank - b.rank;
     }).map((r) => /* @__PURE__ */ jsx(
       RouteComp,
@@ -308,17 +306,23 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
     {
       ref,
       className: clsx(
-        styles.devtoolsPanel,
+        getStyles().devtoolsPanel,
         "TanStackRouterDevtoolsPanel",
         className
       ),
       ...otherPanelProps,
       children: [
-        handleDragStart ? /* @__PURE__ */ jsx("div", { className: styles.dragHandle, onMouseDown: handleDragStart }) : null,
+        handleDragStart ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getStyles().dragHandle,
+            onMouseDown: handleDragStart
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: styles.panelCloseBtn,
+            className: getStyles().panelCloseBtn,
             onClick: (e) => {
               setIsOpen(false);
               onCloseClick(e);
@@ -331,7 +335,7 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
                 height: "6",
                 fill: "none",
                 viewBox: "0 0 10 6",
-                className: styles.panelCloseBtnIcon,
+                className: getStyles().panelCloseBtnIcon,
                 children: /* @__PURE__ */ jsx(
                   "path",
                   {
@@ -346,8 +350,8 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
             )
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: styles.firstContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: getStyles().firstContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: getStyles().row, children: /* @__PURE__ */ jsx(
             Logo,
             {
               "aria-hidden": true,
@@ -357,7 +361,7 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
               }
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: getStyles().routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: getStyles().routerExplorer, children: /* @__PURE__ */ jsx(
             Explorer,
             {
               label: "Router",
@@ -398,18 +402,18 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.secondContainer, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.matchesContainer, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
+        /* @__PURE__ */ jsxs("div", { className: getStyles().secondContainer, children: [
+          /* @__PURE__ */ jsxs("div", { className: getStyles().matchesContainer, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
               /* @__PURE__ */ jsx("span", { children: "Pathname" }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("div", { className: styles.maskedBadgeContainer, children: /* @__PURE__ */ jsx("span", { className: styles.maskedBadge, children: "masked" }) }) : null
+              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("div", { className: getStyles().maskedBadgeContainer, children: /* @__PURE__ */ jsx("span", { className: getStyles().maskedBadge, children: "masked" }) }) : null
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().detailsContent, children: [
               /* @__PURE__ */ jsx("code", { children: routerState.location.pathname }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("code", { className: styles.maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
+              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("code", { className: getStyles().maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.routeMatchesToggle, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
+              /* @__PURE__ */ jsxs("div", { className: getStyles().routeMatchesToggle, children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -418,7 +422,9 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
                       setShowMatches(false);
                     },
                     disabled: !showMatches,
-                    className: clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
+                    className: clsx(
+                      getStyles().routeMatchesToggleBtn(!showMatches, true)
+                    ),
                     children: "Routes"
                   }
                 ),
@@ -431,13 +437,13 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
                     },
                     disabled: showMatches,
                     className: clsx(
-                      styles.routeMatchesToggleBtn(!!showMatches, false)
+                      getStyles().routeMatchesToggleBtn(!!showMatches, false)
                     ),
                     children: "Matches"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
+              /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
             ] }),
             !showMatches ? /* @__PURE__ */ jsx(
               RouteComp,
@@ -454,20 +460,20 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
                   role: "button",
                   "aria-label": `Open match details for ${match.id}`,
                   onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                  className: clsx(styles.matchRow(match === activeMatch)),
+                  className: clsx(getStyles().matchRow(match === activeMatch)),
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: clsx(
-                          styles.matchIndicator(getStatusColor(match))
+                          getStyles().matchIndicator(getStatusColor(match))
                         )
                       }
                     ),
                     /* @__PURE__ */ jsx(
                       "code",
                       {
-                        className: styles.matchID,
+                        className: getStyles().matchID,
                         children: `${match.routeId === "__root__" ? "__root__" : match.pathname}`
                       }
                     ),
@@ -478,10 +484,10 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
               );
             }) })
           ] }),
-          ((_a = routerState.cachedMatches) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxs("div", { className: styles.cachedMatchesContainer, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
+          ((_a = routerState.cachedMatches) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxs("div", { className: getStyles().cachedMatchesContainer, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
               /* @__PURE__ */ jsx("div", { children: "Cached Matches" }),
-              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: "age / staleTime / gcTime" })
+              /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeaderInfo, children: "age / staleTime / gcTime" })
             ] }),
             /* @__PURE__ */ jsx("div", { children: routerState.cachedMatches.map((match) => {
               return /* @__PURE__ */ jsxs(
@@ -490,17 +496,17 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
                   role: "button",
                   "aria-label": `Open match details for ${match.id}`,
                   onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                  className: clsx(styles.matchRow(match === activeMatch)),
+                  className: clsx(getStyles().matchRow(match === activeMatch)),
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: clsx(
-                          styles.matchIndicator(getStatusColor(match))
+                          getStyles().matchIndicator(getStatusColor(match))
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx("code", { className: styles.matchID, children: `${match.id}` }),
+                    /* @__PURE__ */ jsx("code", { className: getStyles().matchID, children: `${match.id}` }),
                     /* @__PURE__ */ jsx(AgeTicker, { match })
                   ]
                 },
@@ -509,39 +515,39 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
             }) })
           ] }) : null
         ] }),
-        activeMatch ? /* @__PURE__ */ jsxs("div", { className: styles.thirdContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Match Details" }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.matchDetails, children: [
+        activeMatch ? /* @__PURE__ */ jsxs("div", { className: getStyles().thirdContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Match Details" }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetails, children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles.matchStatus(
+                className: getStyles().matchStatus(
                   activeMatch.status,
                   activeMatch.isFetching
                 ),
                 children: /* @__PURE__ */ jsx("div", { children: activeMatch.status === "success" && activeMatch.isFetching ? "fetching" : activeMatch.status })
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsx("div", { children: "ID:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: /* @__PURE__ */ jsx("code", { children: activeMatch.id }) })
+              /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: /* @__PURE__ */ jsx("code", { children: activeMatch.id }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsx("div", { children: "State:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
+              /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
                 (d) => d.id === activeMatch.id
               )) ? "Pending" : ((_c = routerState.matches) == null ? void 0 : _c.find((d) => d.id === activeMatch.id)) ? "Active" : "Cached" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsx("div", { children: "Last Updated:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: activeMatch.updatedAt ? new Date(
+              /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: activeMatch.updatedAt ? new Date(
                 activeMatch.updatedAt
               ).toLocaleTimeString() : "N/A" })
             ] })
           ] }) }),
           activeMatch.loaderData ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Loader Data" }),
-            /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Loader Data" }),
+            /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(
               Explorer,
               {
                 label: "loaderData",
@@ -550,12 +556,12 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
               }
             ) })
           ] }) : null,
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Explorer" }),
-          /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(Explorer, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
+          /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Explorer" }),
+          /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(Explorer, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
         ] }) : null,
-        hasSearch ? /* @__PURE__ */ jsxs("div", { className: styles.fourthContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Search Params" }),
-          /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
+        hasSearch ? /* @__PURE__ */ jsxs("div", { className: getStyles().fourthContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Search Params" }),
+          /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(
             Explorer,
             {
               value: routerState.location.search || {},
@@ -596,7 +602,7 @@ function AgeTicker({ match }) {
   const age = Date.now() - (match == null ? void 0 : match.updatedAt);
   const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
   const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1e3;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.ageTicker(age > staleTime)), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(getStyles().ageTicker(age > staleTime)), children: [
     /* @__PURE__ */ jsx("div", { children: formatTime(age) }),
     /* @__PURE__ */ jsx("div", { children: "/" }),
     /* @__PURE__ */ jsx("div", { children: formatTime(staleTime) }),
@@ -1153,7 +1159,13 @@ const stylesFactory = () => {
     `
   };
 };
-const styles = stylesFactory();
+let _styles = null;
+function getStyles() {
+  if (_styles)
+    return _styles;
+  _styles = stylesFactory();
+  return _styles;
+}
 export {
   TanStackRouterDevtools,
   TanStackRouterDevtoolsPanel