@tanstack/router-devtools 0.0.1-beta.203 → 0.0.1-beta.205

package/build/esm/index.js

@@ -10,7 +10,7 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { isMatchInvalid, routerContext, invariant, useStore, trimPath } from '@tanstack/react-router';
+import { useRouter, invariant, trimPath } from '@tanstack/react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -127,7 +127,7 @@ function useMediaQuery(query) {
 
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.status === 'pending' || match.isFetching ? theme.active : isMatchInvalid(match) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+  return match.status === 'pending' || match.isFetching ? 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.routeId === route.id);
@@ -681,13 +681,13 @@ function TanStackRouterDevtools({
 function RouteComp({
   route,
   isRoot,
-  router,
   activeRouteId,
   activeMatchId,
   setActiveRouteId,
   setActiveMatchId
 }) {
-  const matches = Object.values(router.state.matchesById);
+  const router = useRouter();
+  const matches = [...router.state.pendingMatches, ...router.state.matches];
   const match = router.state.matches.find(d => d.routeId === route.id);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     role: "button",
@@ -743,7 +743,6 @@ function RouteComp({
   }).map(r => /*#__PURE__*/React__default.createElement(RouteComp, {
     key: r.id,
     route: r,
-    router: router,
     activeRouteId: activeRouteId,
     activeMatchId: activeMatchId,
     setActiveRouteId: setActiveRouteId,
@@ -758,18 +757,24 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     router: userRouter,
     ...panelProps
   } = props;
-  const routerContextValue = React__default.useContext(routerContext);
-  const router = userRouter ?? routerContextValue;
+  const router = useRouter();
+  const matches = [...router.state.pendingMatches, ...router.state.matches];
   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);
+
+  // useStore(router.__store)
+
   const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
   const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
-  const activeMatch = React__default.useMemo(() => router.state.matchesById[activeRouteId] || router.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]);
+  const activeMatch = React__default.useMemo(() => matches.find(d => d.id === activeRouteId) || matches.find(d => d.id === activeMatchId), [activeRouteId, activeMatchId]);
   const hasSearch = Object.keys(router.state.location.search || {}).length;
-  const preloadMatches = Object.values(router.state.matchesById).filter(match => {
-    return !router.state.matchIds.includes(match.id) && !router.state.pendingMatchIds.includes(match.id);
-  });
+
+  // const preloadMatches = matches.filter((match) => {
+  //   return (
+  //     !state.matchIds.includes(match.id) &&
+  //     !state.pendingMatchIds.includes(match.id)
+  //   )
+  // })
 
   // React.useEffect(() => {
   //   const interval = setInterval(() => {
@@ -983,7 +988,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, "Matches")), !showMatches ? /*#__PURE__*/React__default.createElement(RouteComp, {
     route: router.routeTree,
-    router: router,
     isRoot: true,
     activeRouteId: activeRouteId,
     activeMatchId: activeMatchId,
@@ -1021,57 +1025,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         fontSize: '0.7rem'
       }
     }, `${match.id}`));
-  }))), preloadMatches?.length ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 auto',
-      overflowY: 'auto',
-      maxHeight: '50%'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem',
-      fontWeight: 'bold'
-    }
-  }, "Preloaded Matches"), preloadMatches.map(match => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.id,
-      role: "button",
-      "aria-label": `Open match details for ${match.routeId}`,
-      onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id),
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: 'pointer',
-        alignItems: 'center',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        marginLeft: '.25rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, {
-      style: {
-        padding: '.5em',
-        fontSize: '0.7rem'
-      }
-    }, `${match.id}`));
-  })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
+  })))), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
       background: defaultTheme.backgroundAlt,