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

package/build/esm/index.js

@@ -10,7 +10,7 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { last, useRouter } from '@tanstack/react-router';
+import { last } from '@tanstack/react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1235,7 +1235,7 @@ function chunkArray(array, size) {
 }
 const DefaultRenderer = _ref2 => {
   let {
-    HandleEntry,
+    handleEntry,
     label,
     value,
     subEntries = [],
@@ -1257,19 +1257,13 @@ const DefaultRenderer = _ref2 => {
     onClick: () => toggleExpanded()
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map(entry => /*#__PURE__*/React.createElement(HandleEntry, {
-    key: entry.label,
-    entry: entry
-  }))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
     onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(entry => /*#__PURE__*/React.createElement(HandleEntry, {
-    key: entry.label,
-    entry: entry
-  }))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Explorer, {
+  }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Explorer, {
     renderer: renderer,
     label: /*#__PURE__*/React.createElement("button", {
       onClick: refreshValueSnapshot,
@@ -1336,15 +1330,11 @@ function Explorer(_ref3) {
 
   const subEntryPages = chunkArray(subEntries, pageSize);
   return renderer(_extends({
-    HandleEntry: React.useCallback(_ref5 => {
-      let {
-        entry
-      } = _ref5;
-      return /*#__PURE__*/React.createElement(Explorer, _extends({
-        value: value,
-        renderer: renderer
-      }, rest, entry));
-    }, [value, renderer]),
+    handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
+      key: entry.label,
+      value: value,
+      renderer: renderer
+    }, rest, entry)),
     type,
     subEntries,
     subEntryPages,
@@ -1392,7 +1382,7 @@ function Logo(props) {
 const _excluded = ["style"],
       _excluded2 = ["style", "onClick"],
       _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
+      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"],
       _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "loadMatches", "invalidateRoute", "resolvePath", "matchRoute", "buildLink", "__experimental__createSnapshot", "destroy"],
       _excluded6 = ["cancel", "load", "router", "Link", "MatchRoute", "buildLink", "linkProps", "matchRoute", "navigate"];
 const isServer = typeof window === 'undefined';
@@ -1404,7 +1394,7 @@ function TanStackRouterDevtools(_ref) {
     toggleButtonProps = {},
     position = 'bottom-left',
     containerElement: Container = 'footer',
-    useRouter: useRouterImpl = useRouter
+    router
   } = _ref;
   const rootRef = React__default.useRef(null);
   const panelRef = React__default.useRef(null);
@@ -1540,7 +1530,7 @@ function TanStackRouterDevtools(_ref) {
   }, /*#__PURE__*/React__default.createElement(TanStackRouterDevtoolsPanel, _extends({
     ref: panelRef
   }, otherPanelProps, {
-    useRouter: useRouterImpl,
+    router: router,
     style: _extends({
       position: 'fixed',
       bottom: '0',
@@ -1635,22 +1625,37 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   const {
     isOpen = true,
     handleDragStart,
-    useRouter
+    router
   } = props,
         panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-  const router = useRouter();
+  const routerExplorerValue = React__default.useMemo(() => {
+    const rest = _objectWithoutPropertiesLoose(router, _excluded5);
+
+    return rest;
+  }, [router.state]);
+  const rerender = React__default.useReducer(() => ({}), {})[1];
   React__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.useMemo(() => {
+    if (!activeMatch) {
+      return {};
+    }
+
+    const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
+
+    return rest;
+  }, [activeMatch]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -1716,11 +1721,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Router",
-    value: (() => {
-      const rest = _objectWithoutPropertiesLoose(router, _excluded5);
-
-      return rest;
-    })(),
+    value: routerExplorerValue,
     defaultExpanded: {}
   })))), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1921,7 +1922,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     onClick: () => {
-      router.invalidateRoute(activeMatch);
+      activeMatch.invalidate();
       router.notify();
     },
     style: {
@@ -1930,7 +1931,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
-    onClick: () => router.reload(),
+    onClick: () => activeMatch.load(),
     style: {
       background: defaultTheme.gray
     }
@@ -1948,11 +1949,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Match",
-    value: (() => {
-      const rest = _objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-      return rest;
-    })(),
+    value: activeMatchExplorerValue,
     defaultExpanded: {}
   }))) : null, /*#__PURE__*/React__default.createElement("div", {
     style: {