@tanstack/react-router-devtools 0.0.1-beta.49 → 0.0.1-beta.56

package/build/esm/index.js

@@ -11,7 +11,6 @@
 import * as React from 'react';
 import React__default from 'react';
 import { routerContext, invariant, useRouterStore, last } from '@tanstack/react-router';
-import { formatDistanceStrict } from 'date-fns';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -128,19 +127,8 @@ function useMediaQuery(query) {
 
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.store.state.isFetching ? theme.active : match.store.state.status === 'error' ? theme.danger : match.store.state.status === 'success' ? theme.success : theme.gray;
+  return match.store.state.status === 'pending' ? theme.active : match.store.state.status === 'error' ? theme.danger : match.store.state.status === 'success' ? theme.success : theme.gray;
 }
-
-// export function getQueryStatusLabel(query: Query) {
-//   return query.state.isFetching
-//     ? 'fetching'
-//     : !query.getObserversCount()
-//     ? 'inactive'
-//     : query.isStale()
-//     ? 'stale'
-//     : 'fresh'
-// }
-
 function styled(type, newStyles, queries = {}) {
   return /*#__PURE__*/React__default.forwardRef(({
     style,
@@ -214,25 +202,6 @@ function scheduleMicrotask(callback) {
     throw error;
   }));
 }
-function multiSortBy(arr, accessors = [d => d]) {
-  return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
-    for (const accessor of accessors) {
-      const ao = accessor(a);
-      const bo = accessor(b);
-      if (typeof ao === 'undefined') {
-        if (typeof bo === 'undefined') {
-          continue;
-        }
-        return 1;
-      }
-      if (ao === bo) {
-        continue;
-      }
-      return ao > bo ? 1 : -1;
-    }
-    return ai - bi;
-  }).map(([d]) => d);
-}
 
 const Panel = styled('div', (_props, theme) => ({
   fontSize: 'clamp(12px, 1.5vw, 14px)',
@@ -718,11 +687,22 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
   React__default.useEffect(() => {
     setActiveMatchId('');
   }, [activeRouteId]);
-  const activeMatch = Object.values(router.store.state.matchCache)?.find(d => d.match.id === activeMatchId)?.match ?? router.store.state.currentMatches?.find(d => d.route.id === activeRouteId);
-  const matchCacheValues = multiSortBy(Object.keys(router.store.state.matchCache).filter(key => {
-    const cacheEntry = router.store.state.matchCache[key];
-    return cacheEntry.gc > Date.now();
-  }).map(key => router.store.state.matchCache[key]), [d => d.match.store.state.isFetching ? -1 : 1, d => -d.match.store.state.updatedAt]);
+  const allMatches = React__default.useMemo(() => [...Object.values(router.store.state.currentMatches), ...Object.values(router.store.state.pendingMatches ?? [])], [router.store.state.currentMatches, router.store.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)
+  //     .filter((key) => {
+  //       const cacheEntry = router.store.state.matchCache[key]!
+  //       return cacheEntry.gc > Date.now()
+  //     })
+  //     .map((key) => router.store.state.matchCache[key]!),
+  //   [
+  //     (d) => (d.match.store.state.isFetching ? -1 : 1),
+  //     (d) => -d.match.store.state.updatedAt!,
+  //   ],
+  // )
+
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -917,73 +897,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         padding: '.5em'
       }
     }, `${match.id}`));
-  })) : null, matchCacheValues.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", null, "Match Cache"), /*#__PURE__*/React__default.createElement(Button, {
-    onClick: () => {
-      router.store.setState(s => s.matchCache = {});
-    }
-  }, "Clear")), matchCacheValues.map((d, i) => {
-    const {
-      match,
-      gc
-    } = d;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.id || i,
-      role: "button",
-      "aria-label": `Open match details for ${match.id}`,
-      onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id),
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '.5rem',
-        gap: '.3rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, null, `${match.id}`)), /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        fontSize: '.7rem',
-        opacity: '.5',
-        lineHeight: 1
-      }
-    }, "Expires", ' ', formatDistanceStrict(new Date(gc), new Date(), {
-      addSuffix: true
-    }))));
   })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em',
@@ -1009,10 +922,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       opacity: '.5'
     }
-  }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.getIsInvalid().toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
   }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.state.updatedAt ? new Date(activeMatch.store.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
@@ -1027,15 +936,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       padding: '0.5em'
     }
   }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => {
-      activeMatch.invalidate();
-    },
-    style: {
-      background: defaultTheme.warning,
-      color: defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
     onClick: () => activeMatch.load(),
     style: {
@@ -1077,29 +977,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       bottom: 0,
       zIndex: 1
     }
-  }, "All Loader Data"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, Object.keys(last(router.store.state.currentMatches)?.store.state.loaderData || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: last(router.store.state.currentMatches)?.store.state.loaderData || {},
-    defaultExpanded: Object.keys(last(router.store.state.currentMatches)?.store.state.loaderData || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
   }, "Search Params"), /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em'