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

package/build/types/router.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RouterHistory } from '@tanstack/history';
 import { AnySearchSchema, AnyRoute, AnyContext, AnyPathParams, RouteMask } from './route';
 import { FullSearchSchema } from './routeInfo';
@@ -7,9 +8,11 @@ import { RouteMatch } from './RouteMatch';
 import { ParsedLocation } from './location';
 import { LocationState } from './location';
 import { SearchSerializer, SearchParser } from './searchParams';
+import { RouterContext } from './RouterProvider';
 declare global {
     interface Window {
         __TSR_DEHYDRATED__?: HydrationCtx;
+        __TSR_ROUTER_CONTEXT__?: React.Context<RouterContext<any>>;
     }
 }
 export interface Register {

package/build/umd/index.development.js

@@ -996,6 +996,9 @@
 
   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',
@@ -1023,6 +1026,10 @@
     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 = useStableCallback(previousLocation => {
       const parse = ({
         pathname,
@@ -1146,7 +1153,6 @@
       d.child.rank = i;
       return d.child;
     }), [routesByPath]);
-    const latestLoadPromiseRef = React__namespace.useRef(Promise.resolve());
     const matchRoutes = useStableCallback((pathname, locationSearch, opts) => {
       let routeParams = {};
       let foundRoute = flatRoutes.find(route => {
@@ -1445,9 +1451,11 @@
       });
     });
     const loadMatches = useStableCallback(async ({
+      checkLatest,
       matches,
       preload
     }) => {
+      let latestPromise;
       let firstBadMatchIndex;
 
       // Check each match middleware to see if the route can be accessed
@@ -1508,7 +1516,7 @@
       } catch (err) {
         if (isRedirect(err)) {
           if (!preload) navigate(err);
-          return;
+          return matches;
         }
         throw err;
       }
@@ -1521,11 +1529,6 @@
           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 (isRedirect(err)) {
               if (!preload) {
@@ -1536,7 +1539,6 @@
             return false;
           };
           const load = async () => {
-            let latestPromise;
             try {
               const componentsPromise = Promise.all(componentTypes.map(async type => {
                 const component = route.options[type];
@@ -1578,12 +1580,18 @@
                 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();
@@ -1595,35 +1603,32 @@
         })());
       });
       await Promise.all(matchPromises);
+      return matches;
     });
-    const load = useStableCallback(async opts => {
+    const load = 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.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 => ({
@@ -1632,10 +1637,11 @@
           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
@@ -1643,7 +1649,7 @@
           }
 
           // Only apply the latest transition
-          if (latestPromise = checkLatest()) {
+          if (latestPromise = checkLatest(promise)) {
             return latestPromise;
           }
 
@@ -1680,13 +1686,13 @@
           router.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);
@@ -1695,13 +1701,6 @@
       latestLoadPromiseRef.current = promise;
       return latestLoadPromiseRef.current;
     });
-    const safeLoad = React__namespace.useCallback(async () => {
-      try {
-        return load();
-      } catch (err) {
-        // Don't do anything
-      }
-    }, []);
     const preloadRoute = useStableCallback(async (navigateOpts = state.location) => {
       let next = buildLocation(navigateOpts);
       let matches = matchRoutes(next.pathname, next.search, {
@@ -1709,7 +1708,8 @@
       });
       await loadMatches({
         matches,
-        preload: true
+        preload: true,
+        checkLatest: () => undefined
       });
       return [last(matches), matches];
     });
@@ -1822,10 +1822,13 @@
       const unsub = history.subscribe(() => {
         latestLocationRef.current = parseLocation(latestLocationRef.current);
         React__namespace.startTransition(() => {
-          setState(s => ({
-            ...s,
-            location: latestLocationRef.current
-          }));
+          if (state.location !== latestLocationRef.current) {
+            try {
+              load();
+            } catch (err) {
+              console.error(err);
+            }
+          }
         });
       });
       const nextLocation = buildLocation({
@@ -1847,13 +1850,12 @@
     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 = useStableCallback((state, location, opts) => {
       location = {
@@ -2058,7 +2060,8 @@
   }
   const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
   function useRouter() {
-    const value = React__namespace.useContext(routerContext);
+    const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+    const value = React__namespace.useContext(resolvedContext);
     warning(value, 'useRouter must be used inside a <RouterProvider> component!');
     return value;
   }