@tanstack/react-router 0.0.1-beta.235 → 0.0.1-beta.237

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.ReactRouter = {}, 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.ReactRouter = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -342,6 +342,272 @@
     }
   }
 
+  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
+  var Store = class {
+    constructor(initialState, options) {
+      this.listeners = /* @__PURE__ */ new Set();
+      this._batching = false;
+      this._flushing = 0;
+      this._nextPriority = null;
+      this.subscribe = (listener) => {
+        this.listeners.add(listener);
+        const unsub = this.options?.onSubscribe?.(listener, this);
+        return () => {
+          this.listeners.delete(listener);
+          unsub?.();
+        };
+      };
+      this.setState = (updater, opts) => {
+        const previous = this.state;
+        this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
+        const priority = opts?.priority ?? this.options?.defaultPriority ?? "high";
+        if (this._nextPriority === null) {
+          this._nextPriority = priority;
+        } else if (this._nextPriority === "high") {
+          this._nextPriority = priority;
+        } else {
+          this._nextPriority = this.options?.defaultPriority ?? "high";
+        }
+        this.options?.onUpdate?.({
+          priority: this._nextPriority
+        });
+        this._flush();
+      };
+      this._flush = () => {
+        if (this._batching)
+          return;
+        const flushId = ++this._flushing;
+        this.listeners.forEach((listener) => {
+          if (this._flushing !== flushId)
+            return;
+          listener({
+            priority: this._nextPriority ?? "high"
+          });
+        });
+      };
+      this.batch = (cb) => {
+        if (this._batching)
+          return cb();
+        this._batching = true;
+        cb();
+        this._batching = false;
+        this._flush();
+      };
+      this.state = initialState;
+      this.options = options;
+    }
+  };
+
+  // src/index.ts
+  function useStore(store, selector = (d) => d) {
+    const slice = withSelectorExports.useSyncExternalStoreWithSelector(
+      store.subscribe,
+      () => store.state,
+      () => store.state,
+      selector,
+      shallow$1
+    );
+    return slice;
+  }
+  function shallow$1(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;
+  }
+
   function CatchBoundary(props) {
     const errorComponent = props.errorComponent ?? ErrorComponent;
     return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
@@ -608,7 +874,10 @@
     return true;
   }
   function useRouteContext(opts) {
-    return useMatch(opts).context;
+    return useMatch({
+      ...opts,
+      select: match => opts?.select ? opts.select(match.context) : match.context
+    });
   }
   const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   function escapeJSON(jsonString) {
@@ -801,12 +1070,22 @@
     return isMatch ? params : undefined;
   }
 
-  function useParams(_opts) {
-    return last(useRouter().state.matches)?.params;
+  function useParams(opts) {
+    return useRouterState({
+      select: state => {
+        const params = last(state.matches)?.params;
+        return opts?.select ? opts.select(params) : params;
+      }
+    });
   }
 
   function useSearch(opts) {
-    return useMatch(opts).search;
+    return useMatch({
+      ...opts,
+      select: match => {
+        return opts?.select ? opts.select(match.search) : match.search;
+      }
+    });
   }
 
   const rootRouteId = '__root__';
@@ -871,28 +1150,34 @@
       // This is a dummy static method that should get
       // replaced by a framework specific implementation if necessary
     };
-    useMatch = () => {
+    useMatch = opts => {
       return useMatch({
+        ...opts,
         from: this.id
       });
     };
-    useRouteContext = () => {
+    useRouteContext = opts => {
       return useMatch({
-        from: this.id
-      }).context;
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
+      });
     };
-    useSearch = () => {
+    useSearch = opts => {
       return useSearch({
+        ...opts,
         from: this.id
       });
     };
-    useParams = () => {
+    useParams = opts => {
       return useParams({
+        ...opts,
         from: this.id
       });
     };
-    useLoaderData = () => {
+    useLoaderData = opts => {
       return useLoaderData({
+        ...opts,
         from: this.id
       });
     };
@@ -915,10 +1200,9 @@
 
   function Matches() {
     const router = useRouter();
-    const {
-      matches
-    } = router.state;
-    const locationKey = router.state.location.state.key;
+    const routerState = useRouterState();
+    const matches = routerState.pendingMatches?.some(d => d.showPending) ? routerState.pendingMatches : routerState.matches;
+    const locationKey = router.latestLocation.state.key;
     const route = router.routesById[rootRouteId];
     const errorComponent = React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
@@ -1059,31 +1343,45 @@
     return !!params ? props.children : null;
   }
   function useMatch(opts) {
-    const router = useRouter();
     const nearestMatch = React__namespace.useContext(matchesContext)[0];
     const nearestMatchRouteId = nearestMatch?.routeId;
-    const matchRouteId = (() => {
-      const match = opts?.from ? router.state.matches.find(d => d.routeId === opts?.from) : router.state.matches.find(d => d.id === nearestMatch.id);
-      return match.routeId;
-    })();
+    const matchRouteId = useRouterState({
+      select: state => {
+        const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
+        return match.routeId;
+      }
+    });
     if (opts?.strict ?? true) {
       invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
     }
-    const matchSelection = (() => {
-      const match = opts?.from ? router.state.matches.find(d => d.routeId === opts?.from) : router.state.matches.find(d => d.id === nearestMatch.id);
-      invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-      return match;
-    })();
+    const matchSelection = useRouterState({
+      select: state => {
+        const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+        const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
+        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+        return opts?.select ? opts.select(match) : match;
+      }
+    });
     return matchSelection;
   }
   const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  function useMatches() {
-    const router = useRouter();
+  function useMatches(opts) {
     const contextMatches = React__namespace.useContext(matchesContext);
-    return router.state.matches.slice(router.state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+    return useRouterState({
+      select: state => {
+        let matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+        matches = matches.slice(matches.findIndex(d => d.id === contextMatches[0]?.id));
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
   }
   function useLoaderData(opts) {
-    return useMatch(opts)?.loaderData;
+    const match = useMatch({
+      ...opts,
+      select: undefined
+    });
+    return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
   }
 
   const routerContext = /*#__PURE__*/React__namespace.createContext(null);
@@ -1103,9 +1401,11 @@
         ...rest?.context
       }
     });
-    const inner = /*#__PURE__*/React__namespace.createElement(RouterProviderInner, {
+    const inner = /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: router
+    }, /*#__PURE__*/React__namespace.createElement(RouterProviderInner, {
       router: router
-    });
+    }));
     if (router.options.Wrap) {
       return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, inner);
     }
@@ -1114,20 +1414,32 @@
   function RouterProviderInner({
     router
   }) {
-    const [preState, setState] = React__namespace.useState(() => router.state);
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Matches, null), /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+  }
+  function Transitioner() {
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
-    const isAnyTransitioning = isTransitioning || preState.matches.some(d => d.status === 'pending');
-    const state = React__namespace.useMemo(() => ({
-      ...preState,
-      status: isAnyTransitioning ? 'pending' : 'idle',
-      location: isTransitioning ? router.latestLocation : preState.location,
-      pendingMatches: router.pendingMatches
-    }), [preState, isTransitioning]);
-    router.setState = setState;
-    router.state = state;
     router.startReactTransition = startReactTransition;
+    React__namespace.useEffect(() => {
+      if (isTransitioning) {
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning
+        }));
+      }
+    }, [isTransitioning]);
     const tryLoad = () => {
-      startReactTransition(() => {
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
         try {
           router.load();
         } catch (err) {
@@ -1138,7 +1450,7 @@
     useLayoutEffect$1(() => {
       const unsub = router.history.subscribe(() => {
         router.latestLocation = router.parseLocation(router.latestLocation);
-        if (state.location !== router.latestLocation) {
+        if (routerState.location !== router.latestLocation) {
           tryLoad();
         }
       });
@@ -1148,7 +1460,7 @@
         hash: true,
         state: true
       });
-      if (state.location.href !== nextLocation.href) {
+      if (routerState.location.href !== nextLocation.href) {
         router.commitLocation({
           ...nextLocation,
           replace: true
@@ -1159,31 +1471,35 @@
       };
     }, [router.history]);
     useLayoutEffect$1(() => {
-      if (!isTransitioning && state.resolvedLocation !== state.location) {
+      if (!isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        console.log('onResolved', routerState.location);
         router.emit({
           type: 'onResolved',
-          fromLocation: state.resolvedLocation,
-          toLocation: state.location,
-          pathChanged: state.location.href !== state.resolvedLocation?.href
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
         });
         router.pendingMatches = [];
-        setState(s => ({
+        router.__store.setState(s => ({
           ...s,
+          isTransitioning: false,
           resolvedLocation: s.location
         }));
       }
-    });
+    }, [isTransitioning, routerState.isLoading]);
     useLayoutEffect$1(() => {
       if (!window.__TSR_DEHYDRATED__) {
         tryLoad();
       }
     }, []);
-    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: router
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null));
+    return null;
   }
   function getRouteMatch(state, id) {
-    return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
+    return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+  }
+  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;
@@ -1546,9 +1862,6 @@
     // by the router provider once rendered. We provide these so that the
     // router can be used in a non-react environment if necessary
     startReactTransition = fn => fn();
-    setState = updater => {
-      this.state = functionalUpdate(updater, this.state);
-    };
     update = newOptions => {
       this.options = {
         ...this.options,
@@ -1563,10 +1876,20 @@
         this.routeTree = this.options.routeTree;
         this.buildRouteTree();
       }
-      if (!this.state) {
-        this.state = getInitialRouterState(this.latestLocation);
+      if (!this.__store) {
+        this.__store = new Store(getInitialRouterState(this.latestLocation), {
+          onUpdate: () => {
+            this.__store.state = {
+              ...this.state,
+              status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+            };
+          }
+        });
       }
     };
+    get state() {
+      return this.__store.state;
+    }
     buildRouteTree = () => {
       this.routesById = {};
       this.routesByPath = {};
@@ -1838,7 +2161,7 @@
       getRouteMatch(this.state, id)?.abortController?.abort();
     };
     cancelMatches = () => {
-      this.state.matches.forEach(match => {
+      this.state.pendingMatches?.forEach(match => {
         this.cancelMatch(match.id);
       });
     };
@@ -2029,6 +2352,12 @@
     }) => {
       let latestPromise;
       let firstBadMatchIndex;
+      const updatePendingMatch = match => {
+        this.__store.setState(s => ({
+          ...s,
+          pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
+        }));
+      };
 
       // Check each match middleware to see if the route can be accessed
       try {
@@ -2185,12 +2514,10 @@
             loadPromise
           };
           if (!preload) {
-            this.setState(s => ({
-              ...s,
-              matches: s.matches.map(d => d.id === match.id ? match : d)
-            }));
+            updatePendingMatch(match);
           }
           let didShowPending = false;
+          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
           await new Promise(async resolve => {
             // If the route has a pending component and a pendingMs option,
             // forcefully show the pending component
@@ -2202,17 +2529,13 @@
                   ...match,
                   showPending: true
                 };
-                this.setState(s => ({
-                  ...s,
-                  matches: s.matches.map(d => d.id === match.id ? match : d)
-                }));
+                updatePendingMatch(match);
                 resolve();
               });
             }
             try {
               const loaderData = await loadPromise;
               if (latestPromise = checkLatest()) return await latestPromise;
-              const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
               if (didShowPending && pendingMinMs) {
                 await new Promise(r => setTimeout(r, pendingMinMs));
               }
@@ -2242,12 +2565,19 @@
                 isFetching: false,
                 updatedAt: Date.now()
               };
+            } finally {
+              // If we showed the pending component, that means
+              // we already moved the pendingMatches to the matches
+              // state, so we need to update that specific match
+              if (didShowPending && pendingMinMs && match.showPending) {
+                this.__store.setState(s => ({
+                  ...s,
+                  matches: s.matches?.map(d => d.id === match.id ? match : d)
+                }));
+              }
             }
             if (!preload) {
-              this.setState(s => ({
-                ...s,
-                matches: s.matches.map(d => d.id === match.id ? match : d)
-              }));
+              updatePendingMatch(match);
             }
             resolve();
           });
@@ -2276,24 +2606,23 @@
         });
 
         // Match the routes
-        let matches = this.matchRoutes(next.pathname, next.search, {
+        let pendingMatches = this.matchRoutes(next.pathname, next.search, {
           debug: true
         });
-        this.pendingMatches = matches;
         const previousMatches = this.state.matches;
 
         // Ingest the new matches
-        this.setState(s => ({
+        this.__store.setState(s => ({
           ...s,
-          // status: 'pending',
+          isLoading: true,
           location: next,
-          matches
+          pendingMatches
         }));
         try {
           try {
             // Load the matches
             await this.loadMatches({
-              matches,
+              matches: pendingMatches,
               checkLatest: () => this.checkLatest(promise),
               invalidate: opts?.invalidate
             });
@@ -2308,14 +2637,13 @@
           }
           const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
           const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
-          const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id))
-
-          // setState((s) => ({
-          //   ...s,
-          //   status: 'idle',
-          //   resolvedLocation: s.location,
-          //   matches,
-          // }))
+          const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id));
+          this.__store.setState(s => ({
+            ...s,
+            isLoading: false,
+            matches: pendingMatches,
+            pendingMatches: undefined
+          }))
 
           //
           ;
@@ -2470,9 +2798,6 @@
         return false;
       }
       const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-
-      // const baseLocation = state.resolvedLocation
-
       if (!baseLocation) {
         return false;
       }
@@ -2544,7 +2869,7 @@
         }
         return match;
       });
-      this.setState(s => {
+      this.__store.setState(s => {
         return {
           ...s,
           matches: matches
@@ -2575,6 +2900,8 @@
   class PathParamError extends Error {}
   function getInitialRouterState(location) {
     return {
+      isLoading: false,
+      isTransitioning: false,
       status: 'idle',
       resolvedLocation: location,
       location,
@@ -2882,6 +3209,7 @@
   exports.useParams = useParams;
   exports.useRouteContext = useRouteContext;
   exports.useRouter = useRouter;
+  exports.useRouterState = useRouterState;
   exports.useScrollRestoration = useScrollRestoration;
   exports.useSearch = useSearch;
   exports.useStableCallback = useStableCallback;