@tanstack/router-devtools 0.0.1-beta.119 → 0.0.1-beta.121

package/build/umd/index.development.js

@@ -75,17 +75,36 @@
 
   function useStore(store, selector = d => d) {
     // const isMountedRef = React.useRef(false)
-    // const [state, setState] = React.useState<{ ref: TSelected }>({
-    //   ref: undefined!,
-    // })
+    // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
+    //   ref: selector(store.state),
+    // }))
 
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
+    // 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 (slice !== state.ref) {
+    // if (!shallow(slice, state.ref)) {
     //   setState({ ref: slice })
     // }
 
@@ -100,7 +119,7 @@
 
     return slice;
   }
-  function shallow(objA, objB) {
+  function shallow$1(objA, objB) {
     if (Object.is(objA, objB)) {
       return true;
     }
@@ -129,10 +148,6 @@
    *
    * @license MIT
    */
-
-  function last(arr) {
-    return arr[arr.length - 1];
-  }
   function trimPathLeft(path) {
     return path === '/' ? path : path.replace(/^\/{1,}/, '');
   }
@@ -142,7 +157,35 @@
   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 {
@@ -244,11 +287,11 @@
 
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.state.status === 'pending' ? theme.active : match.state.status === 'error' ? theme.danger : match.state.status === 'success' ? theme.success : theme.gray;
+    return match.status === 'pending' ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
   }
   function getRouteStatusColor(matches, route, theme) {
-    const found = matches.find(d => d.route === route);
-    return found ? found.route.status === 'pending' ? theme.active : found.state.status === 'error' ? theme.danger : found.state.status === 'success' ? theme.success : theme.gray : theme.gray;
+    const found = matches.find(d => d.routeId === route.id);
+    return found ? found.status === 'pending' ? theme.active : found.status === 'error' ? theme.danger : found.status === 'success' ? theme.success : theme.gray : theme.gray;
   }
   function styled(type, newStyles, queries = {}) {
     return /*#__PURE__*/React__default["default"].forwardRef(({
@@ -496,6 +539,7 @@
     defaultExpanded,
     renderer = DefaultRenderer,
     pageSize = 100,
+    filterSubEntries,
     ...rest
   }) {
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
@@ -530,12 +574,14 @@
         value: val
       }));
     }
+    subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
     const subEntryPages = chunkArray(subEntries, pageSize);
     return renderer({
       handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
         key: entry.label,
         value: value,
-        renderer: renderer
+        renderer: renderer,
+        filterSubEntries: filterSubEntries
       }, rest, entry)),
       type,
       subEntries,
@@ -798,7 +844,7 @@
     activeRouteId,
     setActiveRouteId
   }) {
-    const isActive = matches.find(d => d.route === route);
+    const isActive = matches.find(d => d.routeId === route.id);
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       role: "button",
       "aria-label": `Open match details for ${route.id}`,
@@ -856,14 +902,15 @@
       ...panelProps
     } = props;
     const routerContextValue = React__default["default"].useContext(routerContext);
-    const router = userRouter ?? routerContextValue?.router;
+    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(router.state.matches)], [router.state.matches]);
-    const activeMatch = allMatches?.find(d => d.route.id === activeRouteId);
-    const hasSearch = Object.keys(last(router.state.matches)?.state.search || {}).length;
+    const allMatches = React__default["default"].useMemo(() => [...Object.values(routerState.matches)], [routerState.matches]);
+    const activeMatch = allMatches?.find(d => d.routeId === activeRouteId);
+    const hasSearch = Object.keys(routerState.location.search || {}).length;
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: defaultTheme
     }, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({
@@ -969,7 +1016,13 @@
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       label: "Router",
       value: router,
-      defaultExpanded: {}
+      defaultExpanded: {
+        state: {},
+        context: {}
+      },
+      filterSubEntries: subEntries => {
+        return subEntries.filter(d => typeof d.value !== 'function');
+      }
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         flex: '1 1 500px',
@@ -998,7 +1051,12 @@
       },
       disabled: !showMatches,
       style: {
-        opacity: showMatches ? 0.5 : 1
+        appearance: 'none',
+        opacity: showMatches ? 0.5 : 1,
+        border: 0,
+        background: 'transparent',
+        color: 'inherit',
+        cursor: 'pointer'
       }
     }, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
@@ -1007,7 +1065,12 @@
       },
       disabled: showMatches,
       style: {
-        opacity: !showMatches ? 0.5 : 1
+        appearance: 'none',
+        opacity: !showMatches ? 0.5 : 1,
+        border: 0,
+        background: 'transparent',
+        color: 'inherit',
+        cursor: 'pointer'
       }
     }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
       route: router.routeTree,
@@ -1015,12 +1078,12 @@
       matches: allMatches,
       activeRouteId: activeRouteId,
       setActiveRouteId: setActiveRouteId
-    }) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.matches.map((match, i) => {
+    }) : /*#__PURE__*/React__default["default"].createElement("div", null, routerState.matches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.route.id || i,
+        key: match.routeId || i,
         role: "button",
-        "aria-label": `Open match details for ${match.route.id}`,
-        onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+        "aria-label": `Open match details for ${match.routeId}`,
+        onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
         style: {
           display: 'flex',
           borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -1067,11 +1130,11 @@
       style: {
         opacity: '.5'
       }
-    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.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.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -1112,8 +1175,8 @@
         padding: '.5em'
       }
     }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: last(router.state.matches)?.state.search || {},
-      defaultExpanded: Object.keys(last(router.state.matches)?.state.search || {}).reduce((obj, next) => {
+      value: routerState.location.search || {},
+      defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})