@tanstack/react-router-devtools 0.0.1-beta.61 → 0.0.1-beta.63

package/build/umd/index.development.js

@@ -154,14 +154,16 @@
    * @license MIT
    */
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useRouter() {
+  function useRouterContext() {
     const value = React__namespace.useContext(routerContext);
     warning(!value, 'useRouter must be used inside a <Router> component!');
+    useStore(value.router.store);
     return value.router;
   }
-  function useRouterStore(selector, shallow) {
-    const router = useRouter();
-    return useStore(router.store, selector, shallow);
+  function useRouter(track, shallow) {
+    const router = useRouterContext();
+    useStore(router.store, track, shallow);
+    return router;
   }
 
   const getItem = key => {
@@ -264,7 +266,7 @@
 
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.store.state.status === 'pending' ? theme.active : match.store.state.status === 'error' ? theme.danger : match.store.state.status === 'success' ? theme.success : theme.gray;
+    return match.state.status === 'pending' ? theme.active : match.state.status === 'error' ? theme.danger : match.state.status === 'success' ? theme.success : theme.gray;
   }
   function styled(type, newStyles, queries = {}) {
     return /*#__PURE__*/React__default["default"].forwardRef(({
@@ -818,25 +820,25 @@
     const routerContextValue = React__default["default"].useContext(routerContext);
     const router = userRouter ?? routerContextValue?.router;
     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.');
-    useRouterStore();
+    useRouter();
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
     const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
     React__default["default"].useEffect(() => {
       setActiveMatchId('');
     }, [activeRouteId]);
-    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.store.state.currentMatches), ...Object.values(router.store.state.pendingMatches ?? [])], [router.store.state.currentMatches, router.store.state.pendingMatches]);
+    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.state.currentMatches), ...Object.values(router.state.pendingMatches ?? [])], [router.state.currentMatches, router.state.pendingMatches]);
     const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
 
     // const matchCacheValues = multiSortBy(
-    //   Object.keys(router.store.state.matchCache)
+    //   Object.keys(router.state.matchCache)
     //     .filter((key) => {
-    //       const cacheEntry = router.store.state.matchCache[key]!
+    //       const cacheEntry = router.state.matchCache[key]!
     //       return cacheEntry.gc > Date.now()
     //     })
-    //     .map((key) => router.store.state.matchCache[key]!),
+    //     .map((key) => router.state.matchCache[key]!),
     //   [
-    //     (d) => (d.match.store.state.isFetching ? -1 : 1),
-    //     (d) => -d.match.store.state.updatedAt!,
+    //     (d) => (d.match.state.isFetching ? -1 : 1),
+    //     (d) => -d.match.state.updatedAt!,
     //   ],
     // )
 
@@ -964,7 +966,7 @@
         top: 0,
         zIndex: 1
       }
-    }, "Active Matches"), router.store.state.currentMatches.map((match, i) => {
+    }, "Active Matches"), router.state.currentMatches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.route.id || i,
         role: "button",
@@ -995,7 +997,7 @@
           padding: '.5em'
         }
       }, `${match.id}`));
-    }), router.store.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }), router.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: '2rem',
         padding: '.5em',
@@ -1004,7 +1006,7 @@
         top: 0,
         zIndex: 1
       }
-    }, "Pending Matches"), router.store.state.pendingMatches?.map((match, i) => {
+    }, "Pending Matches"), router.state.pendingMatches?.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.route.id || i,
         role: "button",
@@ -1055,11 +1057,11 @@
       style: {
         opacity: '.5'
       }
-    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.store.state.updatedAt ? new Date(activeMatch.store.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -1118,9 +1120,9 @@
       style: {
         padding: '.5em'
       }
-    }, Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: last(router.store.state.currentMatches)?.store.state.search || {},
-      defaultExpanded: Object.keys(last(router.store.state.currentMatches)?.store.state.search || {}).reduce((obj, next) => {
+    }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
+      value: last(router.state.currentMatches)?.state.search || {},
+      defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})