@tanstack/react-router 0.0.1-beta.205 → 0.0.1-beta.207

package/build/cjs/RouterProvider.js

@@ -46,6 +46,9 @@ var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 
 const preloadWarning = 'Error preloading route! ☝️';
 const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+if (typeof document !== 'undefined') {
+  window.__TSR_ROUTER_CONTEXT__ = routerContext;
+}
 function getInitialRouterState(location) {
   return {
     status: 'idle',
@@ -73,6 +76,10 @@ function RouterProvider({
   const tempLocationKeyRef = React__namespace.useRef(`${Math.round(Math.random() * 10000000)}`);
   const resetNextScrollRef = React__namespace.useRef(false);
   const navigateTimeoutRef = React__namespace.useRef(null);
+  const latestLoadPromiseRef = React__namespace.useRef(Promise.resolve());
+  const checkLatest = promise => {
+    return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
+  };
   const parseLocation = utils.useStableCallback(previousLocation => {
     const parse = ({
       pathname,
@@ -196,7 +203,6 @@ function RouterProvider({
     d.child.rank = i;
     return d.child;
   }), [routesByPath]);
-  const latestLoadPromiseRef = React__namespace.useRef(Promise.resolve());
   const matchRoutes = utils.useStableCallback((pathname, locationSearch, opts) => {
     let routeParams = {};
     let foundRoute = flatRoutes.find(route => {
@@ -329,7 +335,7 @@ function RouterProvider({
   });
   const buildLocation = utils.useStableCallback((opts = {}) => {
     const build = (dest = {}, matches) => {
-      const from = state.location;
+      const from = latestLocationRef.current;
       const fromPathname = dest.from ?? from.pathname;
       let pathname = resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
       const fromMatches = matchRoutes(fromPathname, from.search);
@@ -422,7 +428,7 @@ function RouterProvider({
   });
   const commitLocation = utils.useStableCallback(async next => {
     if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
-    const isSameUrl = state.location.href === next.href;
+    const isSameUrl = latestLocationRef.current.href === next.href;
 
     // If the next urls are the same and we're not replacing,
     // do nothing
@@ -495,9 +501,11 @@ function RouterProvider({
     });
   });
   const loadMatches = utils.useStableCallback(async ({
+    checkLatest,
     matches,
     preload
   }) => {
+    let latestPromise;
     let firstBadMatchIndex;
 
     // Check each match middleware to see if the route can be accessed
@@ -540,7 +548,7 @@ function RouterProvider({
             params: match.params,
             preload: !!preload,
             meta: parentMeta,
-            location: state.location
+            location: state.location // TODO: This might need to be latestLocationRef.current...?
           })) ?? {};
           const meta = {
             ...parentMeta,
@@ -558,7 +566,7 @@ function RouterProvider({
     } catch (err) {
       if (redirects.isRedirect(err)) {
         if (!preload) navigate(err);
-        return;
+        return matches;
       }
       throw err;
     }
@@ -571,11 +579,6 @@ function RouterProvider({
         if (match.isFetching) {
           return getRouteMatch(state, match.id)?.loadPromise;
         }
-        const fetchedAt = Date.now();
-        const checkLatest = () => {
-          const latest = getRouteMatch(state, match.id);
-          return latest && latest.fetchedAt !== fetchedAt ? latest.loadPromise : undefined;
-        };
         const handleIfRedirect = err => {
           if (redirects.isRedirect(err)) {
             if (!preload) {
@@ -586,7 +589,6 @@ function RouterProvider({
           return false;
         };
         const load = async () => {
-          let latestPromise;
           try {
             const componentsPromise = Promise.all(router.componentTypes.map(async type => {
               const component = route.options[type];
@@ -628,12 +630,18 @@ function RouterProvider({
               updatedAt: Date.now()
             };
           }
+          if (!preload) {
+            setState(s => ({
+              ...s,
+              matches: s.matches.map(d => d.id === match.id ? match : d)
+            }));
+          }
         };
         let loadPromise;
         matches[index] = match = {
           ...match,
           isFetching: true,
-          fetchedAt,
+          fetchedAt: Date.now(),
           invalid: false
         };
         loadPromise = load();
@@ -645,35 +653,32 @@ function RouterProvider({
       })());
     });
     await Promise.all(matchPromises);
+    return matches;
   });
-  const load = utils.useStableCallback(async opts => {
+  const load = utils.useStableCallback(async () => {
     const promise = new Promise(async (resolve, reject) => {
+      const next = latestLocationRef.current;
       const prevLocation = state.resolvedLocation;
-      const pathDidChange = !!(opts?.next && prevLocation.href !== opts.next.href);
+      const pathDidChange = !!(next && prevLocation.href !== next.href);
       let latestPromise;
-      const checkLatest = () => {
-        return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
-      };
 
       // Cancel any pending matches
       cancelMatches(state);
       router$1.emit({
         type: 'onBeforeLoad',
         from: prevLocation,
-        to: opts?.next ?? state.location,
+        to: next ?? state.location,
         pathChanged: pathDidChange
       });
-      if (opts?.next) {
-        // Ingest the new location
-        setState(s => ({
-          ...s,
-          location: opts.next
-        }));
-      }
+
+      // Ingest the new location
+      setState(s => ({
+        ...s,
+        location: next
+      }));
 
       // Match the routes
-      const matches = matchRoutes(state.location.pathname, state.location.search, {
-        throwOnError: opts?.throwOnError,
+      let matches = matchRoutes(next.pathname, next.search, {
         debug: true
       });
       setState(s => ({
@@ -682,10 +687,11 @@ function RouterProvider({
         matches
       }));
       try {
-        // Load the matches
         try {
+          // Load the matches
           await loadMatches({
-            matches
+            matches,
+            checkLatest: () => checkLatest(promise)
           });
         } catch (err) {
           // swallow this error, since we'll display the
@@ -693,7 +699,7 @@ function RouterProvider({
         }
 
         // Only apply the latest transition
-        if (latestPromise = checkLatest()) {
+        if (latestPromise = checkLatest(promise)) {
           return latestPromise;
         }
 
@@ -730,13 +736,13 @@ function RouterProvider({
         router$1.emit({
           type: 'onLoad',
           from: prevLocation,
-          to: state.location,
+          to: next,
           pathChanged: pathDidChange
         });
         resolve();
       } catch (err) {
         // Only apply the latest transition
-        if (latestPromise = checkLatest()) {
+        if (latestPromise = checkLatest(promise)) {
           return latestPromise;
         }
         reject(err);
@@ -745,13 +751,6 @@ function RouterProvider({
     latestLoadPromiseRef.current = promise;
     return latestLoadPromiseRef.current;
   });
-  const safeLoad = React__namespace.useCallback(async () => {
-    try {
-      return load();
-    } catch (err) {
-      // Don't do anything
-    }
-  }, []);
   const preloadRoute = utils.useStableCallback(async (navigateOpts = state.location) => {
     let next = buildLocation(navigateOpts);
     let matches = matchRoutes(next.pathname, next.search, {
@@ -759,7 +758,8 @@ function RouterProvider({
     });
     await loadMatches({
       matches,
-      preload: true
+      preload: true,
+      checkLatest: () => undefined
     });
     return [utils.last(matches), matches];
   });
@@ -793,13 +793,13 @@ function RouterProvider({
     const preloadDelay = userPreloadDelay ?? options.defaultPreloadDelay ?? 0;
 
     // Compare path/hash for matches
-    const currentPathSplit = state.location.pathname.split('/');
+    const currentPathSplit = latestLocationRef.current.pathname.split('/');
     const nextPathSplit = next.pathname.split('/');
     const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
     // Combine the matches based on user options
-    const pathTest = activeOptions?.exact ? state.location.pathname === next.pathname : pathIsFuzzyEqual;
-    const hashTest = activeOptions?.includeHash ? state.location.hash === next.hash : true;
-    const searchTest = activeOptions?.includeSearch ?? true ? utils.partialDeepEqual(state.location.search, next.search) : true;
+    const pathTest = activeOptions?.exact ? latestLocationRef.current.pathname === next.pathname : pathIsFuzzyEqual;
+    const hashTest = activeOptions?.includeHash ? latestLocationRef.current.hash === next.hash : true;
+    const searchTest = activeOptions?.includeSearch ?? true ? utils.partialDeepEqual(latestLocationRef.current.search, next.search) : true;
 
     // The final "active" test
     const isActive = pathTest && hashTest && searchTest;
@@ -867,13 +867,18 @@ function RouterProvider({
       disabled
     };
   });
+  const latestLocationRef = React__namespace.useRef(state.location);
   React__namespace.useLayoutEffect(() => {
     const unsub = history$1.subscribe(() => {
+      latestLocationRef.current = parseLocation(latestLocationRef.current);
       React__namespace.startTransition(() => {
-        setState(s => ({
-          ...s,
-          location: parseLocation(state.location)
-        }));
+        if (state.location !== latestLocationRef.current) {
+          try {
+            load();
+          } catch (err) {
+            console.error(err);
+          }
+        }
       });
     });
     const nextLocation = buildLocation({
@@ -895,13 +900,12 @@ function RouterProvider({
   const initialLoad = React__namespace.useRef(true);
   if (initialLoad.current) {
     initialLoad.current = false;
-    safeLoad();
-  }
-  React__namespace.useLayoutEffect(() => {
-    if (state.resolvedLocation !== state.location) {
-      safeLoad();
+    try {
+      load();
+    } catch (err) {
+      console.error(err);
     }
-  }, [state.location]);
+  }
   React__namespace.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
   const matchRoute = utils.useStableCallback((state, location, opts) => {
     location = {
@@ -912,7 +916,7 @@ function RouterProvider({
     if (opts?.pending && state.status !== 'pending') {
       return false;
     }
-    const baseLocation = opts?.pending ? state.location : state.resolvedLocation;
+    const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
     if (!baseLocation) {
       return false;
     }