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

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React, global.withSelector));
-})(this, (function (exports, React, withSelector) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,40 +52,6 @@
     return _extends.apply(this, arguments);
   }
 
-  /**
-   * @tanstack/react-store/src/index.tsx
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-
-  function useStore(store, selector = d => d) {
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
-    return slice;
-  }
-  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;
-  }
-
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
       if (condition) {
@@ -96,8 +62,26 @@
       throw new Error(value);
   }
 
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
+      }
+
+      var text = "Warning: " + message;
+
+      if (typeof console !== 'undefined') {
+        console.warn(text);
+      }
+
+      try {
+        throw Error(text);
+      } catch (x) {}
+    }
+  }
+
   /**
-   * @tanstack/router-core/src/index.ts
+   * @tanstack/react-router/src/index.tsx
    *
    * Copyright (c) TanStack
    *
@@ -115,28 +99,12 @@
   function trimPath(path) {
     return trimPathRight(trimPathLeft(path));
   }
-  function isMatchInvalid(match, opts) {
-    const now = Date.now();
-    if (match.invalid) {
-      return true;
-    }
-    if (opts?.preload) {
-      return match.preloadMaxAge < 0 ? false : match.updatedAt + match.preloadMaxAge < now;
-    }
-    return match.maxAge < 0 ? false : match.updatedAt + match.maxAge < now;
-  }
-
-  /**
-   * @tanstack/react-router/src/index.tsx
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  function useRouter() {
+    const value = React__namespace.useContext(routerContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
 
   const getItem = key => {
     try {
@@ -238,7 +206,7 @@
 
   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);
@@ -792,13 +760,13 @@
   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["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       role: "button",
@@ -854,7 +822,6 @@
     }).map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, {
       key: r.id,
       route: r,
-      router: router,
       activeRouteId: activeRouteId,
       activeMatchId: activeMatchId,
       setActiveRouteId: setActiveRouteId,
@@ -869,18 +836,24 @@
       router: userRouter,
       ...panelProps
     } = props;
-    const routerContextValue = React__default["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["default"].useMemo(() => router.state.matchesById[activeRouteId] || router.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]);
+    const activeMatch = React__default["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(() => {
@@ -1094,7 +1067,6 @@
       }
     }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
       route: router.routeTree,
-      router: router,
       isRoot: true,
       activeRouteId: activeRouteId,
       activeMatchId: activeMatchId,
@@ -1132,57 +1104,7 @@
           fontSize: '0.7rem'
         }
       }, `${match.id}`));
-    }))), preloadMatches?.length ? /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        flex: '1 1 auto',
-        overflowY: 'auto',
-        maxHeight: '50%'
-      }
-    }, /*#__PURE__*/React__default["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["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["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["default"].createElement(Code, {
-        style: {
-          padding: '.5em',
-          fontSize: '0.7rem'
-        }
-      }, `${match.id}`));
-    })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    })))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         padding: '.5em',
         background: defaultTheme.backgroundAlt,