@tanstack/router-devtools 0.0.1-beta.242 → 0.0.1-beta.243

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')) :
-  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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -81,6 +81,216 @@
     }
   }
 
+  var withSelector = {exports: {}};
+
+  var withSelector_development = {};
+
+  /**
+   * @license React
+   * use-sync-external-store-shim/with-selector.development.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+
+  var hasRequiredWithSelector_development;
+
+  function requireWithSelector_development () {
+  	if (hasRequiredWithSelector_development) return withSelector_development;
+  	hasRequiredWithSelector_development = 1;
+
+  	{
+  	  (function() {
+
+  	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  	if (
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+  	    'function'
+  	) {
+  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+  	}
+  	          var React$1 = React;
+  	var shim = require$$1;
+
+  	/**
+  	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+  	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+  	 */
+  	function is(x, y) {
+  	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+  	  ;
+  	}
+
+  	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+  	var useSyncExternalStore = shim.useSyncExternalStore;
+
+  	// for CommonJS interop.
+
+  	var useRef = React$1.useRef,
+  	    useEffect = React$1.useEffect,
+  	    useMemo = React$1.useMemo,
+  	    useDebugValue = React$1.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
+
+  	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  	  // Use this to track the rendered snapshot.
+  	  var instRef = useRef(null);
+  	  var inst;
+
+  	  if (instRef.current === null) {
+  	    inst = {
+  	      hasValue: false,
+  	      value: null
+  	    };
+  	    instRef.current = inst;
+  	  } else {
+  	    inst = instRef.current;
+  	  }
+
+  	  var _useMemo = useMemo(function () {
+  	    // Track the memoized state using closure variables that are local to this
+  	    // memoized instance of a getSnapshot function. Intentionally not using a
+  	    // useRef hook, because that state would be shared across all concurrent
+  	    // copies of the hook/component.
+  	    var hasMemo = false;
+  	    var memoizedSnapshot;
+  	    var memoizedSelection;
+
+  	    var memoizedSelector = function (nextSnapshot) {
+  	      if (!hasMemo) {
+  	        // The first time the hook is called, there is no memoized result.
+  	        hasMemo = true;
+  	        memoizedSnapshot = nextSnapshot;
+
+  	        var _nextSelection = selector(nextSnapshot);
+
+  	        if (isEqual !== undefined) {
+  	          // Even if the selector has changed, the currently rendered selection
+  	          // may be equal to the new selection. We should attempt to reuse the
+  	          // current value if possible, to preserve downstream memoizations.
+  	          if (inst.hasValue) {
+  	            var currentSelection = inst.value;
+
+  	            if (isEqual(currentSelection, _nextSelection)) {
+  	              memoizedSelection = currentSelection;
+  	              return currentSelection;
+  	            }
+  	          }
+  	        }
+
+  	        memoizedSelection = _nextSelection;
+  	        return _nextSelection;
+  	      } // We may be able to reuse the previous invocation's result.
+
+
+  	      // We may be able to reuse the previous invocation's result.
+  	      var prevSnapshot = memoizedSnapshot;
+  	      var prevSelection = memoizedSelection;
+
+  	      if (objectIs(prevSnapshot, nextSnapshot)) {
+  	        // The snapshot is the same as last time. Reuse the previous selection.
+  	        return prevSelection;
+  	      } // The snapshot has changed, so we need to compute a new selection.
+
+
+  	      // The snapshot has changed, so we need to compute a new selection.
+  	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
+  	      // has changed. If it hasn't, return the previous selection. That signals
+  	      // to React that the selections are conceptually equal, and we can bail
+  	      // out of rendering.
+
+  	      // If a custom isEqual function is provided, use that to check if the data
+  	      // has changed. If it hasn't, return the previous selection. That signals
+  	      // to React that the selections are conceptually equal, and we can bail
+  	      // out of rendering.
+  	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+  	        return prevSelection;
+  	      }
+
+  	      memoizedSnapshot = nextSnapshot;
+  	      memoizedSelection = nextSelection;
+  	      return nextSelection;
+  	    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+  	    // Assigning this to a constant so that Flow knows it can't change.
+  	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+  	    var getSnapshotWithSelector = function () {
+  	      return memoizedSelector(getSnapshot());
+  	    };
+
+  	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+  	      return memoizedSelector(maybeGetServerSnapshot());
+  	    };
+  	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+  	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+  	      getSelection = _useMemo[0],
+  	      getServerSelection = _useMemo[1];
+
+  	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+  	  useEffect(function () {
+  	    inst.hasValue = true;
+  	    inst.value = value;
+  	  }, [value]);
+  	  useDebugValue(value);
+  	  return value;
+  	}
+
+  	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
+  	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  	if (
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+  	    'function'
+  	) {
+  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  	}
+  	        
+  	  })();
+  	}
+  	return withSelector_development;
+  }
+
+  {
+    withSelector.exports = requireWithSelector_development();
+  }
+
+  var withSelectorExports = withSelector.exports;
+
+  // src/index.ts
+  function useStore(store, selector = (d) => d) {
+    const slice = withSelectorExports.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;
+  }
+
   /**
    * @tanstack/react-router/src/index.tsx
    *
@@ -114,6 +324,10 @@
   if (typeof document !== 'undefined') {
     window.__TSR_ROUTER_CONTEXT__ = routerContext;
   }
+  function useRouterState(opts) {
+    const router = useRouter();
+    return useStore(router.__store, opts?.select);
+  }
   function useRouter() {
     const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
     const value = React__namespace.useContext(resolvedContext);
@@ -792,9 +1006,9 @@
     activeRouteId,
     setActiveRouteId
   }) {
-    const router = useRouter();
-    const matches = router.state.status === 'pending' ? router.state.pendingMatches ?? [] : router.state.matches;
-    const match = router.state.matches.find(d => d.routeId === route.id);
+    const routerState = useRouterState();
+    const matches = routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches;
+    const match = routerState.matches.find(d => d.routeId === route.id);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       role: "button",
       "aria-label": `Open match details for ${route.id}`,
@@ -861,7 +1075,8 @@
       ...panelProps
     } = props;
     const router = useRouter();
-    const matches = [...(router.state.pendingMatches ?? []), ...router.state.matches];
+    const routerState = useRouterState();
+    const matches = [...(routerState.pendingMatches ?? []), ...routerState.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)
@@ -869,7 +1084,7 @@
     const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
     const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
-    const hasSearch = Object.keys(router.state.location.search || {}).length;
+    const hasSearch = Object.keys(routerState.location.search || {}).length;
 
     // const preloadMatches = matches.filter((match) => {
     //   return (
@@ -1025,7 +1240,7 @@
         gap: '.5rem',
         fontWeight: 'bold'
       }
-    }, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("div", {
+    }, "Pathname", ' ', routerState.location.maskedLocation ? /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.1rem .5rem',
         background: defaultTheme.warning,
@@ -1043,12 +1258,12 @@
       style: {
         opacity: 0.6
       }
-    }, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("code", {
+    }, routerState.location.pathname), routerState.location.maskedLocation ? /*#__PURE__*/React.createElement("code", {
       style: {
         color: defaultTheme.warning,
         fontWeight: 'bold'
       }
-    }, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
+    }, routerState.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
@@ -1093,7 +1308,7 @@
       isRoot: true,
       activeRouteId: activeRouteId,
       setActiveRouteId: setActiveRouteId
-    }) : /*#__PURE__*/React.createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches ?? [] : router.state.matches).map((match, i) => {
+    }) : /*#__PURE__*/React.createElement("div", null, (routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches).map((match, i) => {
       return /*#__PURE__*/React.createElement("div", {
         key: match.routeId || i,
         role: "button",
@@ -1209,8 +1424,8 @@
         padding: '.5em'
       }
     }, /*#__PURE__*/React.createElement(Explorer, {
-      value: router.state.location.search || {},
-      defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => {
+      value: routerState.location.search || {},
+      defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})