@tanstack/router-devtools 0.0.1-beta.133 → 0.0.1-beta.135

package/build/umd/index.development.js

@@ -74,52 +74,10 @@
    */
 
   function useStore(store, selector = d => d) {
-    // const isMountedRef = React.useRef(false)
-    // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
-    //   ref: selector(store.state),
-    // }))
-
-    // if (!shallow(selector(store.state), state.ref)) {
-    //   setState(() => ({ ref: selector(store.state) }))
-    // }
-
-    // useLayoutEffect(() => {
-    //   console.log('effect')
-
-    //   const cb = () => {
-    //     const next = selector(store.state)
-    //     console.log('onsub')
-    //     if (!shallow(next, state.ref)) {
-    //       console.log('set')
-    //       setState(() => ({ ref: selector(store.state) }))
-    //     }
-    //   }
-
-    //   return store.subscribe(cb)
-    // }, [])
-
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow$1);
-
-    // if (!isMountedRef.current) {
-    //   state.ref = slice
-    // }
-
-    // if (!shallow(slice, state.ref)) {
-    //   setState({ ref: slice })
-    // }
-
-    // React.useEffect(() => {
-    //   isMountedRef.current = true
-    //   return () => {
-    //     isMountedRef.current = false
-    //   }
-    // }, [])
-
-    // return state.ref
-
+    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
     return slice;
   }
-  function shallow$1(objA, objB) {
+  function shallow(objA, objB) {
     if (Object.is(objA, objB)) {
       return true;
     }
@@ -157,35 +115,7 @@
   function trimPath(path) {
     return trimPathRight(trimPathLeft(path));
   }
-  const routerStateContext = /*#__PURE__*/React__namespace.createContext(null);
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useRouterState(select) {
-    const state = React__namespace.useContext(routerStateContext);
-    const next = select?.(state) ?? state;
-    const valueRef = React__namespace.useRef(next);
-    if (!shallow(valueRef.current, next)) {
-      valueRef.current = next;
-    }
-    return valueRef.current;
-  }
-  function shallow(objA, objB) {
-    if (Object.is(objA, objB)) {
-      return true;
-    }
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-      return false;
-    }
-    const keysA = Object.keys(objA);
-    if (keysA.length !== Object.keys(objB).length) {
-      return false;
-    }
-    for (let i = 0; i < keysA.length; i++) {
-      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-        return false;
-      }
-    }
-    return true;
-  }
 
   const getItem = key => {
     try {
@@ -903,14 +833,13 @@
     } = props;
     const routerContextValue = React__default["default"].useContext(routerContext);
     const router = userRouter ?? routerContextValue;
-    const routerState = useRouterState();
     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.');
     useStore(router.__store);
     const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const allMatches = React__default["default"].useMemo(() => [...Object.values(routerState.matches)], [routerState.matches]);
+    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.state.matches)], [router.state.matches]);
     const activeMatch = allMatches?.find(d => d.routeId === activeRouteId);
-    const hasSearch = Object.keys(routerState.location.search || {}).length;
+    const hasSearch = Object.keys(router.state.location.search || {}).length;
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -1078,7 +1007,7 @@
       matches: allMatches,
       activeRouteId: activeRouteId,
       setActiveRouteId: setActiveRouteId
-    }) : /*#__PURE__*/React__default["default"].createElement("div", null, routerState.matches.map((match, i) => {
+    }) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.matches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: match.routeId || i,
         role: "button",
@@ -1175,8 +1104,8 @@
         padding: '.5em'
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: routerState.location.search || {},
-      defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
+      value: router.state.location.search || {},
+      defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})