@tanstack/router-devtools-core 1.114.0

package/dist/esm/BaseTanStackRouterDevtoolsPanel.js

@@ -0,0 +1,505 @@
+import { template, spread, mergeProps, insert, addEventListener, effect, className, createComponent, memo, setAttribute, delegateEvents } from "solid-js/web";
+import { clsx } from "clsx";
+import invariant from "tiny-invariant";
+import { rootRouteId, trimPath } from "@tanstack/router-core";
+import { createMemo } from "solid-js";
+import { useDevtoolsOnClose } from "./context.js";
+import { useStyles } from "./useStyles.js";
+import useLocalStorage from "./useLocalStorage.js";
+import { Explorer } from "./Explorer.js";
+import { multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
+import { AgeTicker } from "./AgeTicker.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div><div role=button><div></div><div><div><code> </code><code>`), _tmpl$3 = /* @__PURE__ */ template(`<div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$6 = /* @__PURE__ */ template(`<code>`), _tmpl$7 = /* @__PURE__ */ template(`<div role=button><div></div><code>`), _tmpl$8 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$10 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$11 = /* @__PURE__ */ template(`<div><div>Search Params</div><div>`);
+function Logo(props) {
+  const {
+    className: className$1,
+    ...rest
+  } = props;
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps(rest, {
+      get ["class"]() {
+        return clsx(styles().logo, className$1 ? className$1() : "");
+      }
+    }), false, true);
+    effect((_p$) => {
+      var _v$ = styles().tanstackLogo, _v$2 = styles().routerLogo;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+function RouteComp({
+  routerState,
+  router,
+  route,
+  isRoot,
+  activeId,
+  setActiveId
+}) {
+  const styles = useStyles();
+  const matches = createMemo(() => routerState().pendingMatches || routerState().matches);
+  const match = createMemo(() => routerState().matches.find((d) => d.routeId === route.id));
+  const param = createMemo(() => {
+    var _a, _b;
+    try {
+      if ((_a = match()) == null ? void 0 : _a.params) {
+        const p = (_b = match()) == null ? void 0 : _b.params;
+        const r = route.path || trimPath(route.id);
+        if (r.startsWith("$")) {
+          const trimmed = r.slice(1);
+          if (p[trimmed]) {
+            return `(${p[trimmed]})`;
+          }
+        }
+      }
+      return "";
+    } catch (error) {
+      return "";
+    }
+  });
+  return (() => {
+    var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$9.nextSibling;
+    _el$5.$$click = () => {
+      if (match()) {
+        setActiveId(activeId() === route.id ? "" : route.id);
+      }
+    };
+    insert(_el$9, () => isRoot ? rootRouteId : route.path || trimPath(route.id), _el$10);
+    insert(_el$11, param);
+    insert(_el$7, createComponent(AgeTicker, {
+      get match() {
+        return match();
+      },
+      router
+    }), null);
+    insert(_el$4, (() => {
+      var _c$ = memo(() => {
+        var _a;
+        return !!((_a = route.children) == null ? void 0 : _a.length);
+      });
+      return () => _c$() ? (() => {
+        var _el$12 = _tmpl$3();
+        insert(_el$12, () => [...route.children].sort((a, b) => {
+          return a.rank - b.rank;
+        }).map((r) => createComponent(RouteComp, {
+          routerState,
+          router,
+          route: r,
+          activeId,
+          setActiveId
+        })));
+        effect(() => className(_el$12, styles().nestedRouteRow(!!isRoot)));
+        return _el$12;
+      })() : null;
+    })(), null);
+    effect((_p$) => {
+      var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route))), _v$6 = clsx(styles().routesRow(!!match())), _v$7 = styles().code, _v$8 = styles().routeParamInfo;
+      _v$3 !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
+      _v$6 !== _p$.o && className(_el$7, _p$.o = _v$6);
+      _v$7 !== _p$.i && className(_el$9, _p$.i = _v$7);
+      _v$8 !== _p$.n && className(_el$11, _p$.n = _v$8);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$4;
+  })();
+}
+const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel2({
+  ...props
+}) {
+  const {
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router,
+    routerState,
+    shadowDOMTarget,
+    ...panelProps
+  } = props;
+  const {
+    onCloseClick
+  } = useDevtoolsOnClose();
+  const styles = useStyles();
+  const {
+    className: className$1,
+    style,
+    ...otherPanelProps
+  } = panelProps;
+  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.");
+  const [showMatches, setShowMatches] = useLocalStorage("tanstackRouterDevtoolsShowMatches", true);
+  const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", "");
+  const activeMatch = createMemo(() => {
+    const matches = [...routerState().pendingMatches ?? [], ...routerState().matches, ...routerState().cachedMatches];
+    return matches.find((d) => d.routeId === activeId() || d.id === activeId());
+  });
+  const hasSearch = createMemo(() => Object.keys(routerState().location.search).length);
+  const explorerState = createMemo(() => {
+    return {
+      ...router(),
+      state: routerState()
+    };
+  });
+  const routerExplorerValue = createMemo(() => Object.fromEntries(multiSortBy(Object.keys(explorerState()), ["state", "routesById", "routesByPath", "flatRoutes", "options", "manifest"].map((d) => (dd) => dd !== d)).map((key) => [key, explorerState()[key]]).filter((d) => typeof d[1] !== "function" && !["__store", "basepath", "injectedHtml", "subscribers", "latestLoadPromise", "navigateTimeout", "resetNextScroll", "tempLocationKey", "latestLocation", "routeTree", "history"].includes(d[0]))));
+  const activeMatchLoaderData = createMemo(() => {
+    var _a;
+    return (_a = activeMatch()) == null ? void 0 : _a.loaderData;
+  });
+  const activeMatchValue = createMemo(() => activeMatch());
+  const locationSearchValue = createMemo(() => routerState().location.search);
+  return (() => {
+    var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$16.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild;
+    _el$22.firstChild;
+    var _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$24.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$27.nextSibling, _el$31 = _el$26.nextSibling;
+    spread(_el$13, mergeProps({
+      get ["class"]() {
+        return clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className$1 ? className$1() : "");
+      },
+      get style() {
+        return style ? style() : "";
+      }
+    }, otherPanelProps), false, true);
+    insert(_el$13, handleDragStart ? (() => {
+      var _el$32 = _tmpl$3();
+      addEventListener(_el$32, "mousedown", handleDragStart, true);
+      effect(() => className(_el$32, styles().dragHandle));
+      return _el$32;
+    })() : null, _el$14);
+    _el$14.$$click = (e) => {
+      if (setIsOpen) {
+        setIsOpen(false);
+      }
+      onCloseClick(e);
+    };
+    insert(_el$17, createComponent(Logo, {
+      "aria-hidden": true,
+      onClick: (e) => {
+        if (setIsOpen) {
+          setIsOpen(false);
+        }
+        onCloseClick(e);
+      }
+    }));
+    insert(_el$19, createComponent(Explorer, {
+      label: "Router",
+      value: routerExplorerValue,
+      defaultExpanded: {
+        state: {},
+        context: {},
+        options: {}
+      },
+      filterSubEntries: (subEntries) => {
+        return subEntries.filter((d) => typeof d.value() !== "function");
+      }
+    }));
+    insert(_el$22, (() => {
+      var _c$2 = memo(() => !!routerState().location.maskedLocation);
+      return () => _c$2() ? (() => {
+        var _el$33 = _tmpl$5(), _el$34 = _el$33.firstChild;
+        effect((_p$) => {
+          var _v$27 = styles().maskedBadgeContainer, _v$28 = styles().maskedBadge;
+          _v$27 !== _p$.e && className(_el$33, _p$.e = _v$27);
+          _v$28 !== _p$.t && className(_el$34, _p$.t = _v$28);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$33;
+      })() : null;
+    })(), null);
+    insert(_el$25, () => routerState().location.pathname);
+    insert(_el$24, (() => {
+      var _c$3 = memo(() => !!routerState().location.maskedLocation);
+      return () => _c$3() ? (() => {
+        var _el$35 = _tmpl$6();
+        insert(_el$35, () => {
+          var _a;
+          return (_a = routerState().location.maskedLocation) == null ? void 0 : _a.pathname;
+        });
+        effect(() => className(_el$35, styles().maskedLocation));
+        return _el$35;
+      })() : null;
+    })(), null);
+    _el$28.$$click = () => {
+      setShowMatches(false);
+    };
+    _el$29.$$click = () => {
+      setShowMatches(true);
+    };
+    insert(_el$31, (() => {
+      var _c$4 = memo(() => !!!showMatches());
+      return () => _c$4() ? createComponent(RouteComp, {
+        routerState,
+        router,
+        get route() {
+          return router().routeTree;
+        },
+        isRoot: true,
+        activeId,
+        setActiveId
+      }) : (() => {
+        var _el$36 = _tmpl$3();
+        insert(_el$36, () => {
+          var _a, _b;
+          return (_b = ((_a = routerState().pendingMatches) == null ? void 0 : _a.length) ? routerState().pendingMatches : routerState().matches) == null ? void 0 : _b.map((match, i) => {
+            return (() => {
+              var _el$37 = _tmpl$7(), _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling;
+              _el$37.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+              insert(_el$39, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
+              insert(_el$37, createComponent(AgeTicker, {
+                match,
+                router
+              }), null);
+              effect((_p$) => {
+                var _v$29 = `Open match details for ${match.id}`, _v$30 = clsx(styles().matchRow(match === activeMatch())), _v$31 = clsx(styles().matchIndicator(getStatusColor(match))), _v$32 = styles().matchID;
+                _v$29 !== _p$.e && setAttribute(_el$37, "aria-label", _p$.e = _v$29);
+                _v$30 !== _p$.t && className(_el$37, _p$.t = _v$30);
+                _v$31 !== _p$.a && className(_el$38, _p$.a = _v$31);
+                _v$32 !== _p$.o && className(_el$39, _p$.o = _v$32);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0
+              });
+              return _el$37;
+            })();
+          });
+        });
+        return _el$36;
+      })();
+    })());
+    insert(_el$20, (() => {
+      var _c$5 = memo(() => !!routerState().cachedMatches.length);
+      return () => _c$5() ? (() => {
+        var _el$40 = _tmpl$8(), _el$41 = _el$40.firstChild, _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling, _el$44 = _el$41.nextSibling;
+        insert(_el$44, () => routerState().cachedMatches.map((match) => {
+          return (() => {
+            var _el$45 = _tmpl$7(), _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling;
+            _el$45.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+            insert(_el$47, () => `${match.id}`);
+            insert(_el$45, createComponent(AgeTicker, {
+              match,
+              router
+            }), null);
+            effect((_p$) => {
+              var _v$36 = `Open match details for ${match.id}`, _v$37 = clsx(styles().matchRow(match === activeMatch())), _v$38 = clsx(styles().matchIndicator(getStatusColor(match))), _v$39 = styles().matchID;
+              _v$36 !== _p$.e && setAttribute(_el$45, "aria-label", _p$.e = _v$36);
+              _v$37 !== _p$.t && className(_el$45, _p$.t = _v$37);
+              _v$38 !== _p$.a && className(_el$46, _p$.a = _v$38);
+              _v$39 !== _p$.o && className(_el$47, _p$.o = _v$39);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0
+            });
+            return _el$45;
+          })();
+        }));
+        effect((_p$) => {
+          var _v$33 = styles().cachedMatchesContainer, _v$34 = styles().detailsHeader, _v$35 = styles().detailsHeaderInfo;
+          _v$33 !== _p$.e && className(_el$40, _p$.e = _v$33);
+          _v$34 !== _p$.t && className(_el$41, _p$.t = _v$34);
+          _v$35 !== _p$.a && className(_el$43, _p$.a = _v$35);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$40;
+      })() : null;
+    })(), null);
+    insert(_el$13, (() => {
+      var _c$6 = memo(() => {
+        var _a;
+        return !!(activeMatch() && ((_a = activeMatch()) == null ? void 0 : _a.status));
+      });
+      return () => _c$6() ? (() => {
+        var _el$48 = _tmpl$9(), _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$51 = _el$50.firstChild, _el$52 = _el$51.firstChild, _el$53 = _el$52.firstChild, _el$54 = _el$52.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$54.nextSibling, _el$59 = _el$58.firstChild, _el$60 = _el$59.nextSibling, _el$61 = _el$58.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$50.nextSibling, _el$65 = _el$64.nextSibling;
+        insert(_el$53, (() => {
+          var _c$8 = memo(() => {
+            var _a, _b;
+            return !!(((_a = activeMatch()) == null ? void 0 : _a.status) === "success" && ((_b = activeMatch()) == null ? void 0 : _b.isFetching));
+          });
+          return () => {
+            var _a;
+            return _c$8() ? "fetching" : (_a = activeMatch()) == null ? void 0 : _a.status;
+          };
+        })());
+        insert(_el$57, () => {
+          var _a;
+          return (_a = activeMatch()) == null ? void 0 : _a.id;
+        });
+        insert(_el$60, (() => {
+          var _c$9 = memo(() => {
+            var _a;
+            return !!((_a = routerState().pendingMatches) == null ? void 0 : _a.find((d) => {
+              var _a2;
+              return d.id === ((_a2 = activeMatch()) == null ? void 0 : _a2.id);
+            }));
+          });
+          return () => _c$9() ? "Pending" : routerState().matches.find((d) => {
+            var _a;
+            return d.id === ((_a = activeMatch()) == null ? void 0 : _a.id);
+          }) ? "Active" : "Cached";
+        })());
+        insert(_el$63, (() => {
+          var _c$10 = memo(() => {
+            var _a;
+            return !!((_a = activeMatch()) == null ? void 0 : _a.updatedAt);
+          });
+          return () => {
+            var _a;
+            return _c$10() ? new Date((_a = activeMatch()) == null ? void 0 : _a.updatedAt).toLocaleTimeString() : "N/A";
+          };
+        })());
+        insert(_el$48, (() => {
+          var _c$11 = memo(() => !!activeMatchLoaderData());
+          return () => _c$11() ? [(() => {
+            var _el$66 = _tmpl$10();
+            effect(() => className(_el$66, styles().detailsHeader));
+            return _el$66;
+          })(), (() => {
+            var _el$67 = _tmpl$3();
+            insert(_el$67, createComponent(Explorer, {
+              label: "loaderData",
+              value: activeMatchLoaderData,
+              defaultExpanded: {}
+            }));
+            effect(() => className(_el$67, styles().detailsContent));
+            return _el$67;
+          })()] : null;
+        })(), _el$64);
+        insert(_el$65, createComponent(Explorer, {
+          label: "Match",
+          value: activeMatchValue,
+          defaultExpanded: {}
+        }));
+        effect((_p$) => {
+          var _a, _b;
+          var _v$40 = styles().thirdContainer, _v$41 = styles().detailsHeader, _v$42 = styles().matchDetails, _v$43 = styles().matchStatus((_a = activeMatch()) == null ? void 0 : _a.status, (_b = activeMatch()) == null ? void 0 : _b.isFetching), _v$44 = styles().matchDetailsInfoLabel, _v$45 = styles().matchDetailsInfo, _v$46 = styles().matchDetailsInfoLabel, _v$47 = styles().matchDetailsInfo, _v$48 = styles().matchDetailsInfoLabel, _v$49 = styles().matchDetailsInfo, _v$50 = styles().detailsHeader, _v$51 = styles().detailsContent;
+          _v$40 !== _p$.e && className(_el$48, _p$.e = _v$40);
+          _v$41 !== _p$.t && className(_el$49, _p$.t = _v$41);
+          _v$42 !== _p$.a && className(_el$51, _p$.a = _v$42);
+          _v$43 !== _p$.o && className(_el$52, _p$.o = _v$43);
+          _v$44 !== _p$.i && className(_el$54, _p$.i = _v$44);
+          _v$45 !== _p$.n && className(_el$56, _p$.n = _v$45);
+          _v$46 !== _p$.s && className(_el$58, _p$.s = _v$46);
+          _v$47 !== _p$.h && className(_el$60, _p$.h = _v$47);
+          _v$48 !== _p$.r && className(_el$61, _p$.r = _v$48);
+          _v$49 !== _p$.d && className(_el$63, _p$.d = _v$49);
+          _v$50 !== _p$.l && className(_el$64, _p$.l = _v$50);
+          _v$51 !== _p$.u && className(_el$65, _p$.u = _v$51);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0,
+          h: void 0,
+          r: void 0,
+          d: void 0,
+          l: void 0,
+          u: void 0
+        });
+        return _el$48;
+      })() : null;
+    })(), null);
+    insert(_el$13, (() => {
+      var _c$7 = memo(() => !!hasSearch());
+      return () => _c$7() ? (() => {
+        var _el$68 = _tmpl$11(), _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling;
+        insert(_el$70, createComponent(Explorer, {
+          value: locationSearchValue,
+          get defaultExpanded() {
+            return Object.keys(routerState().location.search).reduce((obj, next) => {
+              obj[next] = {};
+              return obj;
+            }, {});
+          }
+        }));
+        effect((_p$) => {
+          var _v$52 = styles().fourthContainer, _v$53 = styles().detailsHeader, _v$54 = styles().detailsContent;
+          _v$52 !== _p$.e && className(_el$68, _p$.e = _v$52);
+          _v$53 !== _p$.t && className(_el$69, _p$.t = _v$53);
+          _v$54 !== _p$.a && className(_el$70, _p$.a = _v$54);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$68;
+      })() : null;
+    })(), null);
+    effect((_p$) => {
+      var _v$9 = styles().panelCloseBtn, _v$10 = styles().panelCloseBtnIcon, _v$11 = styles().firstContainer, _v$12 = styles().row, _v$13 = styles().routerExplorerContainer, _v$14 = styles().routerExplorer, _v$15 = styles().secondContainer, _v$16 = styles().matchesContainer, _v$17 = styles().detailsHeader, _v$18 = styles().detailsContent, _v$19 = styles().detailsHeader, _v$20 = styles().routeMatchesToggle, _v$21 = !showMatches(), _v$22 = clsx(styles().routeMatchesToggleBtn(!showMatches(), true)), _v$23 = showMatches(), _v$24 = clsx(styles().routeMatchesToggleBtn(!!showMatches(), false)), _v$25 = styles().detailsHeaderInfo, _v$26 = clsx(styles().routesContainer);
+      _v$9 !== _p$.e && className(_el$14, _p$.e = _v$9);
+      _v$10 !== _p$.t && setAttribute(_el$15, "class", _p$.t = _v$10);
+      _v$11 !== _p$.a && className(_el$16, _p$.a = _v$11);
+      _v$12 !== _p$.o && className(_el$17, _p$.o = _v$12);
+      _v$13 !== _p$.i && className(_el$18, _p$.i = _v$13);
+      _v$14 !== _p$.n && className(_el$19, _p$.n = _v$14);
+      _v$15 !== _p$.s && className(_el$20, _p$.s = _v$15);
+      _v$16 !== _p$.h && className(_el$21, _p$.h = _v$16);
+      _v$17 !== _p$.r && className(_el$22, _p$.r = _v$17);
+      _v$18 !== _p$.d && className(_el$24, _p$.d = _v$18);
+      _v$19 !== _p$.l && className(_el$26, _p$.l = _v$19);
+      _v$20 !== _p$.u && className(_el$27, _p$.u = _v$20);
+      _v$21 !== _p$.c && (_el$28.disabled = _p$.c = _v$21);
+      _v$22 !== _p$.w && className(_el$28, _p$.w = _v$22);
+      _v$23 !== _p$.m && (_el$29.disabled = _p$.m = _v$23);
+      _v$24 !== _p$.f && className(_el$29, _p$.f = _v$24);
+      _v$25 !== _p$.y && className(_el$30, _p$.y = _v$25);
+      _v$26 !== _p$.g && className(_el$31, _p$.g = _v$26);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0,
+      y: void 0,
+      g: void 0
+    });
+    return _el$13;
+  })();
+};
+delegateEvents(["click", "mousedown"]);
+export {
+  BaseTanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel.js.map

package/dist/esm/BaseTanStackRouterDevtoolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTanStackRouterDevtoolsPanel.js","sources":["../../src/BaseTanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport { default as invariant } from 'tiny-invariant'\nimport { rootRouteId, trimPath } from '@tanstack/router-core'\nimport { createMemo } from 'solid-js'\nimport { useDevtoolsOnClose } from './context'\nimport { useStyles } from './useStyles'\nimport useLocalStorage from './useLocalStorage'\nimport { Explorer } from './Explorer'\nimport { getRouteStatusColor, getStatusColor, multiSortBy } from './utils'\nimport { AgeTicker } from './AgeTicker'\n// import type { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\nimport type {\n  AnyContext,\n  AnyRoute,\n  AnyRouter,\n  FileRouteTypes,\n  MakeRouteMatchUnion,\n  Route,\n  RouterState,\n} from '@tanstack/router-core'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport interface BaseDevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: Accessor<JSX.CSSProperties>\n  /**\n   * The standard React class property used to style a component with classes\n   */\n  className?: Accessor<string>\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: Accessor<AnyRouter>\n  routerState: Accessor<any>\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nfunction Logo(props: any) {\n  const { className, ...rest } = props\n  const styles = useStyles()\n  return (\n    <button {...rest} class={cx(styles().logo, className ? className() : '')}>\n      <div class={styles().tanstackLogo}>TANSTACK</div>\n      <div class={styles().routerLogo}>TanStack Router v1</div>\n    </button>\n  )\n}\n\nfunction RouteComp({\n  routerState,\n  router,\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  routerState: Accessor<\n    RouterState<\n      Route<\n        any,\n        '/',\n        '/',\n        string,\n        '__root__',\n        undefined,\n        {},\n        {},\n        AnyContext,\n        AnyContext,\n        {},\n        undefined,\n        any,\n        FileRouteTypes\n      >,\n      MakeRouteMatchUnion\n    >\n  >\n  router: Accessor<AnyRouter>\n  route: AnyRoute\n  isRoot?: boolean\n  activeId: Accessor<string | undefined>\n  setActiveId: (id: string) => void\n}) {\n  const styles = useStyles()\n  const matches = createMemo(\n    () => routerState().pendingMatches || routerState().matches,\n  )\n  const match = createMemo(() =>\n    routerState().matches.find((d) => d.routeId === route.id),\n  )\n\n  const param = createMemo(() => {\n    try {\n      if (match()?.params) {\n        const p = match()?.params\n        const r: string = route.path || trimPath(route.id)\n        if (r.startsWith('$')) {\n          const trimmed = r.slice(1)\n\n          if (p[trimmed]) {\n            return `(${p[trimmed]})`\n          }\n        }\n      }\n      return ''\n    } catch (error) {\n      return ''\n    }\n  })\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        aria-label={`Open match details for ${route.id}`}\n        onClick={() => {\n          if (match()) {\n            setActiveId(activeId() === route.id ? '' : route.id)\n          }\n        }}\n        class={cx(\n          styles().routesRowContainer(route.id === activeId(), !!match()),\n        )}\n      >\n        <div\n          class={cx(\n            styles().matchIndicator(getRouteStatusColor(matches(), route)),\n          )}\n        />\n        <div class={cx(styles().routesRow(!!match()))}>\n          <div>\n            <code class={styles().code}>\n              {isRoot ? rootRouteId : route.path || trimPath(route.id)}{' '}\n            </code>\n            <code class={styles().routeParamInfo}>{param()}</code>\n          </div>\n          <AgeTicker match={match()} router={router} />\n        </div>\n      </div>\n      {route.children?.length ? (\n        <div class={styles().nestedRouteRow(!!isRoot)}>\n          {[...(route.children as Array<AnyRoute>)]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                routerState={routerState}\n                router={router}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const BaseTanStackRouterDevtoolsPanel =\n  function BaseTanStackRouterDevtoolsPanel({\n    ...props\n  }: BaseDevtoolsPanelOptions): JSX.Element {\n    const {\n      isOpen = true,\n      setIsOpen,\n      handleDragStart,\n      router,\n      routerState,\n      shadowDOMTarget,\n      ...panelProps\n    } = props\n\n    const { onCloseClick } = useDevtoolsOnClose()\n    const styles = useStyles()\n    const { className, style, ...otherPanelProps } = panelProps\n\n    invariant(\n      router,\n      '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.',\n    )\n\n    // useStore(router.__store)\n\n    const [showMatches, setShowMatches] = useLocalStorage(\n      'tanstackRouterDevtoolsShowMatches',\n      true,\n    )\n\n    const [activeId, setActiveId] = useLocalStorage(\n      'tanstackRouterDevtoolsActiveRouteId',\n      '',\n    )\n\n    const activeMatch = createMemo(() => {\n      const matches = [\n        ...(routerState().pendingMatches ?? []),\n        ...routerState().matches,\n        ...routerState().cachedMatches,\n      ]\n      return matches.find(\n        (d) => d.routeId === activeId() || d.id === activeId(),\n      )\n    })\n\n    const hasSearch = createMemo(\n      () => Object.keys(routerState().location.search).length,\n    )\n\n    const explorerState = createMemo(() => {\n      return {\n        ...router(),\n        state: routerState(),\n      }\n    })\n\n    const routerExplorerValue = createMemo(() =>\n      Object.fromEntries(\n        multiSortBy(\n          Object.keys(explorerState()),\n          (\n            [\n              'state',\n              'routesById',\n              'routesByPath',\n              'flatRoutes',\n              'options',\n              'manifest',\n            ] as const\n          ).map((d) => (dd) => dd !== d),\n        )\n          .map((key) => [key, (explorerState() as any)[key]])\n          .filter(\n            (d) =>\n              typeof d[1] !== 'function' &&\n              ![\n                '__store',\n                'basepath',\n                'injectedHtml',\n                'subscribers',\n                'latestLoadPromise',\n                'navigateTimeout',\n                'resetNextScroll',\n                'tempLocationKey',\n                'latestLocation',\n                'routeTree',\n                'history',\n              ].includes(d[0]),\n          ),\n      ),\n    )\n    const activeMatchLoaderData = createMemo(() => activeMatch()?.loaderData)\n    const activeMatchValue = createMemo(() => activeMatch())\n    const locationSearchValue = createMemo(() => routerState().location.search)\n\n    return (\n      <div\n        class={cx(\n          styles().devtoolsPanel,\n          'TanStackRouterDevtoolsPanel',\n          className ? className() : '',\n        )}\n        style={style ? style() : ''}\n        {...otherPanelProps}\n      >\n        {handleDragStart ? (\n          <div class={styles().dragHandle} onMouseDown={handleDragStart}></div>\n        ) : null}\n        <button\n          class={styles().panelCloseBtn}\n          onClick={(e: any) => {\n            if (setIsOpen) {\n              setIsOpen(false)\n            }\n            onCloseClick(e)\n          }}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"10\"\n            height=\"6\"\n            fill=\"none\"\n            viewBox=\"0 0 10 6\"\n            class={styles().panelCloseBtnIcon}\n          >\n            <path\n              stroke=\"currentColor\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.667\"\n              d=\"M1 1l4 4 4-4\"\n            ></path>\n          </svg>\n        </button>\n        <div class={styles().firstContainer}>\n          <div class={styles().row}>\n            <Logo\n              aria-hidden\n              onClick={(e: any) => {\n                if (setIsOpen) {\n                  setIsOpen(false)\n                }\n                onCloseClick(e)\n              }}\n            />\n          </div>\n          <div class={styles().routerExplorerContainer}>\n            <div class={styles().routerExplorer}>\n              <Explorer\n                label=\"Router\"\n                value={routerExplorerValue}\n                defaultExpanded={{\n                  state: {} as any,\n                  context: {} as any,\n                  options: {} as any,\n                }}\n                filterSubEntries={(subEntries) => {\n                  return subEntries.filter(\n                    (d: any) => typeof d.value() !== 'function',\n                  )\n                }}\n              />\n            </div>\n          </div>\n        </div>\n        <div class={styles().secondContainer}>\n          <div class={styles().matchesContainer}>\n            <div class={styles().detailsHeader}>\n              <span>Pathname</span>\n              {routerState().location.maskedLocation ? (\n                <div class={styles().maskedBadgeContainer}>\n                  <span class={styles().maskedBadge}>masked</span>\n                </div>\n              ) : null}\n            </div>\n            <div class={styles().detailsContent}>\n              <code>{routerState().location.pathname}</code>\n              {routerState().location.maskedLocation ? (\n                <code class={styles().maskedLocation}>\n                  {routerState().location.maskedLocation?.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div class={styles().detailsHeader}>\n              <div class={styles().routeMatchesToggle}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches()}\n                  class={cx(\n                    styles().routeMatchesToggleBtn(!showMatches(), true),\n                  )}\n                >\n                  Routes\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches()}\n                  class={cx(\n                    styles().routeMatchesToggleBtn(!!showMatches(), false),\n                  )}\n                >\n                  Matches\n                </button>\n              </div>\n              <div class={styles().detailsHeaderInfo}>\n                <div>age / staleTime / gcTime</div>\n              </div>\n            </div>\n            <div class={cx(styles().routesContainer)}>\n              {!showMatches() ? (\n                <RouteComp\n                  routerState={routerState}\n                  router={router}\n                  route={router().routeTree}\n                  isRoot\n                  activeId={activeId}\n                  setActiveId={setActiveId}\n                />\n              ) : (\n                <div>\n                  {(routerState().pendingMatches?.length\n                    ? routerState().pendingMatches\n                    : routerState().matches\n                  )?.map((match: any, i: any) => {\n                    return (\n                      <div\n                        role=\"button\"\n                        aria-label={`Open match details for ${match.id}`}\n                        onClick={() =>\n                          setActiveId(activeId() === match.id ? '' : match.id)\n                        }\n                        class={cx(styles().matchRow(match === activeMatch()))}\n                      >\n                        <div\n                          class={cx(\n                            styles().matchIndicator(getStatusColor(match)),\n                          )}\n                        />\n\n                        <code\n                          class={styles().matchID}\n                        >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>\n                        <AgeTicker match={match} router={router} />\n                      </div>\n                    )\n                  })}\n                </div>\n              )}\n            </div>\n          </div>\n          {routerState().cachedMatches.length ? (\n            <div class={styles().cachedMatchesContainer}>\n              <div class={styles().detailsHeader}>\n                <div>Cached Matches</div>\n                <div class={styles().detailsHeaderInfo}>\n                  age / staleTime / gcTime\n                </div>\n              </div>\n              <div>\n                {routerState().cachedMatches.map((match: any) => {\n                  return (\n                    <div\n                      role=\"button\"\n                      aria-label={`Open match details for ${match.id}`}\n                      onClick={() =>\n                        setActiveId(activeId() === match.id ? '' : match.id)\n                      }\n                      class={cx(styles().matchRow(match === activeMatch()))}\n                    >\n                      <div\n                        class={cx(\n                          styles().matchIndicator(getStatusColor(match)),\n                        )}\n                      />\n\n                      <code class={styles().matchID}>{`${match.id}`}</code>\n\n                      <AgeTicker match={match} router={router} />\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch() && activeMatch()?.status ? (\n          <div class={styles().thirdContainer}>\n            <div class={styles().detailsHeader}>Match Details</div>\n            <div>\n              <div class={styles().matchDetails}>\n                <div\n                  class={styles().matchStatus(\n                    activeMatch()?.status,\n                    activeMatch()?.isFetching,\n                  )}\n                >\n                  <div>\n                    {activeMatch()?.status === 'success' &&\n                    activeMatch()?.isFetching\n                      ? 'fetching'\n                      : activeMatch()?.status}\n                  </div>\n                </div>\n                <div class={styles().matchDetailsInfoLabel}>\n                  <div>ID:</div>\n                  <div class={styles().matchDetailsInfo}>\n                    <code>{activeMatch()?.id}</code>\n                  </div>\n                </div>\n                <div class={styles().matchDetailsInfoLabel}>\n                  <div>State:</div>\n                  <div class={styles().matchDetailsInfo}>\n                    {routerState().pendingMatches?.find(\n                      (d: any) => d.id === activeMatch()?.id,\n                    )\n                      ? 'Pending'\n                      : routerState().matches.find(\n                            (d: any) => d.id === activeMatch()?.id,\n                          )\n                        ? 'Active'\n                        : 'Cached'}\n                  </div>\n                </div>\n                <div class={styles().matchDetailsInfoLabel}>\n                  <div>Last Updated:</div>\n                  <div class={styles().matchDetailsInfo}>\n                    {activeMatch()?.updatedAt\n                      ? new Date(activeMatch()?.updatedAt).toLocaleTimeString()\n                      : 'N/A'}\n                  </div>\n                </div>\n              </div>\n            </div>\n            {activeMatchLoaderData() ? (\n              <>\n                <div class={styles().detailsHeader}>Loader Data</div>\n                <div class={styles().detailsContent}>\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatchLoaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div class={styles().detailsHeader}>Explorer</div>\n            <div class={styles().detailsContent}>\n              <Explorer\n                label=\"Match\"\n                value={activeMatchValue}\n                defaultExpanded={{}}\n              />\n            </div>\n          </div>\n        ) : null}\n        {hasSearch() ? (\n          <div class={styles().fourthContainer}>\n            <div class={styles().detailsHeader}>Search Params</div>\n            <div class={styles().detailsContent}>\n              <Explorer\n                value={locationSearchValue}\n                defaultExpanded={Object.keys(\n                  routerState().location.search,\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </div>\n    )\n  }\n"],"names":["Logo","props","className","rest","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$mergeProps","cx","logo","_$effect","_p$","_v$","tanstackLogo","_v$2","routerLogo","e","_$className","t","undefined","RouteComp","routerState","router","route","isRoot","activeId","setActiveId","matches","createMemo","pendingMatches","match","find","d","routeId","id","param","params","p","r","path","trimPath","startsWith","trimmed","slice","error","_el$4","_tmpl$2","_el$5","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","$$click","rootRouteId","_$insert","_$createComponent","AgeTicker","_c$","_$memo","children","length","_el$12","_tmpl$3","sort","a","b","rank","map","nestedRouteRow","_v$3","_v$4","routesRowContainer","_v$5","matchIndicator","getRouteStatusColor","_v$6","routesRow","_v$7","code","_v$8","routeParamInfo","_$setAttribute","o","i","n","BaseTanStackRouterDevtoolsPanel","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","panelProps","onCloseClick","useDevtoolsOnClose","style","otherPanelProps","invariant","showMatches","setShowMatches","useLocalStorage","activeMatch","cachedMatches","hasSearch","Object","keys","location","search","explorerState","state","routerExplorerValue","fromEntries","multiSortBy","dd","key","filter","includes","activeMatchLoaderData","loaderData","activeMatchValue","locationSearchValue","_el$13","_tmpl$4","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_$spread","devtoolsPanel","_el$32","dragHandle","onClick","Explorer","label","value","defaultExpanded","context","options","filterSubEntries","subEntries","_c$2","maskedLocation","_el$33","_tmpl$5","_el$34","_v$27","maskedBadgeContainer","_v$28","maskedBadge","pathname","_c$3","_el$35","_tmpl$6","_c$4","routeTree","_el$36","_el$37","_tmpl$7","_el$38","_el$39","_v$29","_v$30","matchRow","_v$31","getStatusColor","_v$32","matchID","_c$5","_el$40","_tmpl$8","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_v$36","_v$37","_v$38","_v$39","_v$33","cachedMatchesContainer","_v$34","detailsHeader","_v$35","detailsHeaderInfo","_c$6","status","_el$48","_tmpl$9","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_c$8","isFetching","_c$9","_c$10","updatedAt","Date","toLocaleTimeString","_c$11","_el$66","_tmpl$10","_el$67","detailsContent","_v$40","thirdContainer","_v$41","_v$42","matchDetails","_v$43","matchStatus","_v$44","matchDetailsInfoLabel","_v$45","matchDetailsInfo","_v$46","_v$47","_v$48","_v$49","_v$50","_v$51","s","h","l","u","_c$7","_el$68","_tmpl$11","_el$69","_el$70","reduce","obj","next","_v$52","fourthContainer","_v$53","_v$54","_v$9","panelCloseBtn","_v$10","panelCloseBtnIcon","_v$11","firstContainer","_v$12","row","_v$13","routerExplorerContainer","_v$14","routerExplorer","_v$15","secondContainer","_v$16","matchesContainer","_v$17","_v$18","_v$19","_v$20","routeMatchesToggle","_v$21","_v$22","routeMatchesToggleBtn","_v$23","_v$24","_v$25","_v$26","routesContainer","c","disabled","w","m","f","y","g","_$delegateEvents"],"mappings":"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"}

package/dist/esm/Explorer.d.ts

@@ -0,0 +1,43 @@
+import { Accessor, JSX } from 'solid-js';
+type ExpanderProps = {
+    expanded: boolean;
+    style?: JSX.CSSProperties;
+};
+export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
+type Entry = {
+    label: string;
+};
+type RendererProps = {
+    handleEntry: HandleEntryFn;
+    label?: JSX.Element;
+    value: Accessor<unknown>;
+    subEntries: Array<Entry>;
+    subEntryPages: Array<Array<Entry>>;
+    type: string;
+    expanded: Accessor<boolean>;
+    toggleExpanded: () => void;
+    pageSize: number;
+    filterSubEntries?: (subEntries: Array<Property>) => Array<Property>;
+};
+/**
+ * Chunk elements in the array by size
+ *
+ * when the array cannot be chunked evenly by size, the last chunk will be
+ * filled with the remaining elements
+ *
+ * @example
+ * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
+ */
+export declare function chunkArray<T>(array: Array<T>, size: number): Array<Array<T>>;
+type HandleEntryFn = (entry: Entry) => JSX.Element;
+type ExplorerProps = Partial<RendererProps> & {
+    defaultExpanded?: true | Record<string, boolean>;
+    value: Accessor<unknown>;
+};
+type Property = {
+    defaultExpanded?: boolean | Record<string, boolean>;
+    label: string;
+    value: unknown;
+};
+export declare function Explorer({ value, defaultExpanded, pageSize, filterSubEntries, ...rest }: ExplorerProps): JSX.Element;
+export {};