@tanstack/react-router 0.0.1-beta.234 → 0.0.1-beta.236

package/build/types/router.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 /// <reference types="node" />
 import { RouterHistory } from '@tanstack/history';
+import { Store } from '@tanstack/store';
 import { AnySearchSchema, AnyRoute, AnyContext, AnyPathParams, RouteMask } from './route';
 import { FullSearchSchema, RoutesById, RoutesByPath } from './routeInfo';
 import { PickAsRequired, Updater, NonNullableUpdater } from './utils';
@@ -56,8 +57,10 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
 }
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     status: 'pending' | 'idle';
+    isLoading: boolean;
+    isTransitioning: boolean;
     matches: RouteMatch<TRouteTree>[];
-    pendingMatches: RouteMatch<TRouteTree>[];
+    pendingMatches?: RouteMatch<TRouteTree>[];
     location: ParsedLocation<FullSearchSchema<TRouteTree>>;
     resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>;
     lastUpdated: number;
@@ -122,7 +125,7 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     pendingMatches: AnyRouteMatch[];
     injectedHtml: InjectedHtmlEntry[];
     dehydratedData?: TDehydrated;
-    state: RouterState<TRouteTree>;
+    __store: Store<RouterState<TRouteTree>>;
     options: PickAsRequired<RouterOptions<TRouteTree, TDehydrated>, 'stringifySearch' | 'parseSearch' | 'context'>;
     history: RouterHistory;
     latestLocation: ParsedLocation;
@@ -133,8 +136,8 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     flatRoutes: AnyRoute[];
     constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>);
     startReactTransition: (fn: () => void) => void;
-    setState: (updater: NonNullableUpdater<RouterState<TRouteTree>>) => void;
     update: (newOptions: RouterConstructorOptions<TRouteTree, TDehydrated>) => void;
+    get state(): RouterState<TRouteTree>;
     buildRouteTree: () => void;
     subscribe: <TType extends keyof RouterEvents>(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void;
     emit: (routerEvent: RouterEvent) => void;

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, {
@@ -934,12 +1200,10 @@
 
   function Matches() {
     const {
-      routesById,
-      state
+      routesById
     } = useRouter();
-    const {
-      matches
-    } = state;
+    const routerState = useRouterState();
+    const matches = routerState.pendingMatches?.some(d => d.showPending) ? routerState.pendingMatches : routerState.matches;
     const locationKey = useRouterState().location.state.key;
     const route = routesById[rootRouteId];
     const errorComponent = React__namespace.useCallback(props => {
@@ -1085,7 +1349,8 @@
     const nearestMatchRouteId = nearestMatch?.routeId;
     const matchRouteId = useRouterState({
       select: state => {
-        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+        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;
       }
     });
@@ -1094,7 +1359,8 @@
     }
     const matchSelection = useRouterState({
       select: state => {
-        const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+        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;
       }
@@ -1106,7 +1372,8 @@
     const contextMatches = React__namespace.useContext(matchesContext);
     return useRouterState({
       select: state => {
-        const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+        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;
       }
     });
@@ -1147,31 +1414,29 @@
   function RouterProviderInner({
     router
   }) {
-    const [preState, setState] = React__namespace.useState(() => router.state);
     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(() => {
-        try {
-          router.load();
-        } catch (err) {
-          console.error(err);
-        }
-      });
+      // startReactTransition(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
+      }
+      // })
     };
     useLayoutEffect$1(() => {
       const unsub = router.history.subscribe(() => {
         router.latestLocation = router.parseLocation(router.latestLocation);
-        if (state.location !== router.latestLocation) {
+        if (router.state.location !== router.latestLocation) {
           tryLoad();
         }
       });
@@ -1181,7 +1446,7 @@
         hash: true,
         state: true
       });
-      if (state.location.href !== nextLocation.href) {
+      if (router.state.location.href !== nextLocation.href) {
         router.commitLocation({
           ...nextLocation,
           replace: true
@@ -1192,20 +1457,21 @@
       };
     }, [router.history]);
     useLayoutEffect$1(() => {
-      if (!isTransitioning && state.resolvedLocation !== state.location) {
+      if (!isTransitioning && router.state.resolvedLocation !== router.state.location) {
         router.emit({
           type: 'onResolved',
-          fromLocation: state.resolvedLocation,
-          toLocation: state.location,
-          pathChanged: state.location.href !== state.resolvedLocation?.href
+          fromLocation: router.state.resolvedLocation,
+          toLocation: router.state.location,
+          pathChanged: router.state.location.href !== router.state.resolvedLocation?.href
         });
         router.pendingMatches = [];
-        setState(s => ({
+        router.__store.setState(s => ({
           ...s,
+          isTransitioning: false,
           resolvedLocation: s.location
         }));
       }
-    });
+    }, [isTransitioning]);
     useLayoutEffect$1(() => {
       if (!window.__TSR_DEHYDRATED__) {
         tryLoad();
@@ -1216,14 +1482,11 @@
     }, /*#__PURE__*/React__namespace.createElement(Matches, 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 {
-      state
-    } = useRouter();
-    // return useStore(router.__store, opts?.select as any)
-    return opts?.select ? opts.select(state) : state;
+    const router = useRouter();
+    return useStore(router.__store, opts?.select);
   }
   function useRouter() {
     const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
@@ -1586,9 +1849,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,
@@ -1603,10 +1863,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 = {};
@@ -1878,7 +2148,7 @@
       getRouteMatch(this.state, id)?.abortController?.abort();
     };
     cancelMatches = () => {
-      this.state.matches.forEach(match => {
+      this.state.pendingMatches?.forEach(match => {
         this.cancelMatch(match.id);
       });
     };
@@ -2069,6 +2339,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 {
@@ -2225,12 +2501,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
@@ -2242,17 +2516,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));
               }
@@ -2282,12 +2552,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();
           });
@@ -2316,24 +2593,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
             });
@@ -2348,14 +2624,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
+          }))
 
           //
           ;
@@ -2510,9 +2785,6 @@
         return false;
       }
       const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-
-      // const baseLocation = state.resolvedLocation
-
       if (!baseLocation) {
         return false;
       }
@@ -2584,7 +2856,7 @@
         }
         return match;
       });
-      this.setState(s => {
+      this.__store.setState(s => {
         return {
           ...s,
           matches: matches
@@ -2615,6 +2887,8 @@
   class PathParamError extends Error {}
   function getInitialRouterState(location) {
     return {
+      isLoading: false,
+      isTransitioning: false,
       status: 'idle',
       resolvedLocation: location,
       location,