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

package/build/types/index.d.ts

@@ -9,6 +9,7 @@
  * @license MIT
  */
 import React from 'react';
+import { Router } from '@tanstack/react-router';
 
 declare type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 interface DevtoolsOptions {
@@ -42,7 +43,7 @@ interface DevtoolsOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    useRouter?: () => unknown;
+    router: Router<any, any>;
 }
 interface DevtoolsPanelOptions {
     /**
@@ -68,9 +69,9 @@ interface DevtoolsPanelOptions {
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */
-    useRouter: () => unknown;
+    router: Router<any, any>;
 }
-declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, useRouter: useRouterImpl, }: DevtoolsOptions): React.ReactElement | null;
+declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
 declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
 
 export { PartialKeys, TanStackRouterDevtools, TanStackRouterDevtoolsPanel };

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,
@@ -1417,7 +1407,7 @@
   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';
@@ -1429,7 +1419,7 @@
       toggleButtonProps = {},
       position = 'bottom-left',
       containerElement: Container = 'footer',
-      useRouter: useRouterImpl = reactRouter.useRouter
+      router
     } = _ref;
     const rootRef = React__default["default"].useRef(null);
     const panelRef = React__default["default"].useRef(null);
@@ -1565,7 +1555,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _extends({
       ref: panelRef
     }, otherPanelProps, {
-      useRouter: useRouterImpl,
+      router: router,
       style: _extends({
         position: 'fixed',
         bottom: '0',
@@ -1660,22 +1650,37 @@
     const {
       isOpen = true,
       handleDragStart,
-      useRouter
+      router
     } = props,
           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 +1746,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: {
@@ -1946,7 +1947,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       onClick: () => {
-        router.invalidateRoute(activeMatch);
+        activeMatch.invalidate();
         router.notify();
       },
       style: {
@@ -1955,7 +1956,7 @@
       }
     }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
-      onClick: () => router.reload(),
+      onClick: () => activeMatch.load(),
       style: {
         background: defaultTheme.gray
       }
@@ -1973,11 +1974,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: {