@tanstack/react-router-devtools 0.0.1-alpha.4 → 0.0.1-alpha.5

package/build/umd/index.development.js

@@ -1260,7 +1260,7 @@
   }
   const DefaultRenderer = _ref2 => {
     let {
-      HandleEntry,
+      handleEntry,
       label,
       value,
       subEntries = [],
@@ -1282,19 +1282,13 @@
       onClick: () => toggleExpanded()
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
       expanded: expanded
-    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(entry => /*#__PURE__*/React__namespace.createElement(HandleEntry, {
-      key: entry.label,
-      entry: entry
-    }))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
+    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
       onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
       expanded: expanded
-    }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(entry => /*#__PURE__*/React__namespace.createElement(HandleEntry, {
-      key: entry.label,
-      entry: entry
-    }))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Explorer, {
+    }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Explorer, {
       renderer: renderer,
       label: /*#__PURE__*/React__namespace.createElement("button", {
         onClick: refreshValueSnapshot,
@@ -1361,15 +1355,11 @@
 
     const subEntryPages = chunkArray(subEntries, pageSize);
     return renderer(_extends({
-      HandleEntry: React__namespace.useCallback(_ref5 => {
-        let {
-          entry
-        } = _ref5;
-        return /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
-          value: value,
-          renderer: renderer
-        }, rest, entry));
-      }, [value, renderer]),
+      handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
+        key: entry.label,
+        value: value,
+        renderer: renderer
+      }, rest, entry)),
       type,
       subEntries,
       subEntryPages,
@@ -1665,17 +1655,33 @@
           panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
     const router = useRouter();
+    const routerExplorerValue = React__default["default"].useMemo(() => {
+      const rest = _objectWithoutPropertiesLoose(router, _excluded5);
+
+      return rest;
+    }, [router.state]);
+    const rerender = React__default["default"].useReducer(() => ({}), {})[1];
     React__default["default"].useEffect(() => {
       let interval = setInterval(() => {
-        router.cleanPreloadCache();
-        router.notify();
-      }, 1000);
+        router.cleanPreloadCache(); // router.notify()
+
+        rerender();
+      }, 250);
       return () => {
         clearInterval(interval);
       };
     }, []);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
     const activeMatch = (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
+    const activeMatchExplorerValue = React__default["default"].useMemo(() => {
+      if (!activeMatch) {
+        return {};
+      }
+
+      const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
+
+      return rest;
+    }, [activeMatch]);
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -1741,11 +1747,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Router",
-      value: (() => {
-        const rest = _objectWithoutPropertiesLoose(router, _excluded5);
-
-        return rest;
-      })(),
+      value: routerExplorerValue,
       defaultExpanded: {}
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1973,11 +1975,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Match",
-      value: (() => {
-        const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-        return rest;
-      })(),
+      value: activeMatchExplorerValue,
       defaultExpanded: {}
     }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {