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

package/build/esm/index.js

@@ -671,6 +671,9 @@ function isRedirect(obj) {
 
 const preloadWarning = 'Error preloading route! ☝️';
 const routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  window.__TSR_ROUTER_CONTEXT__ = routerContext;
+}
 function getInitialRouterState(location) {
   return {
     status: 'idle',
@@ -698,6 +701,10 @@ function RouterProvider({
   const tempLocationKeyRef = React.useRef(`${Math.round(Math.random() * 10000000)}`);
   const resetNextScrollRef = React.useRef(false);
   const navigateTimeoutRef = React.useRef(null);
+  const latestLoadPromiseRef = React.useRef(Promise.resolve());
+  const checkLatest = promise => {
+    return latestLoadPromiseRef.current !== promise ? latestLoadPromiseRef.current : undefined;
+  };
   const parseLocation = useStableCallback(previousLocation => {
     const parse = ({
       pathname,
@@ -821,7 +828,6 @@ function RouterProvider({
     d.child.rank = i;
     return d.child;
   }), [routesByPath]);
-  const latestLoadPromiseRef = React.useRef(Promise.resolve());
   const matchRoutes = useStableCallback((pathname, locationSearch, opts) => {
     let routeParams = {};
     let foundRoute = flatRoutes.find(route => {
@@ -1120,9 +1126,11 @@ function RouterProvider({
     });
   });
   const loadMatches = useStableCallback(async ({
+    checkLatest,
     matches,
     preload
   }) => {
+    let latestPromise;
     let firstBadMatchIndex;
 
     // Check each match middleware to see if the route can be accessed
@@ -1165,7 +1173,12 @@ function RouterProvider({
             params: match.params,
             preload: !!preload,
             meta: parentMeta,
-            location: state.location // TODO: This might need to be latestLocationRef.current...?
+            location: state.location,
+            // TODO: This might need to be latestLocationRef.current...?
+            navigate: opts => navigate({
+              ...opts,
+              from: match.pathname
+            })
           })) ?? {};
           const meta = {
             ...parentMeta,
@@ -1183,7 +1196,7 @@ function RouterProvider({
     } catch (err) {
       if (isRedirect(err)) {
         if (!preload) navigate(err);
-        return;
+        return matches;
       }
       throw err;
     }
@@ -1196,11 +1209,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 (isRedirect(err)) {
             if (!preload) {
@@ -1211,7 +1219,6 @@ function RouterProvider({
           return false;
         };
         const load = async () => {
-          let latestPromise;
           try {
             const componentsPromise = Promise.all(componentTypes.map(async type => {
               const component = route.options[type];
@@ -1225,7 +1232,12 @@ function RouterProvider({
               preload: !!preload,
               parentMatchPromise,
               abortController: match.abortController,
-              meta: match.meta
+              meta: match.meta,
+              location: state.location,
+              navigate: opts => navigate({
+                ...opts,
+                from: match.pathname
+              })
             });
             await Promise.all([componentsPromise, loaderPromise]);
             if (latestPromise = checkLatest()) return await latestPromise;
@@ -1253,12 +1265,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();
@@ -1270,35 +1288,32 @@ function RouterProvider({
       })());
     });
     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 => ({
@@ -1307,10 +1322,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
@@ -1318,7 +1334,7 @@ function RouterProvider({
         }
 
         // Only apply the latest transition
-        if (latestPromise = checkLatest()) {
+        if (latestPromise = checkLatest(promise)) {
           return latestPromise;
         }
 
@@ -1355,13 +1371,13 @@ function RouterProvider({
         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);
@@ -1370,13 +1386,6 @@ function RouterProvider({
     latestLoadPromiseRef.current = promise;
     return latestLoadPromiseRef.current;
   });
-  const safeLoad = React.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, {
@@ -1384,7 +1393,8 @@ function RouterProvider({
     });
     await loadMatches({
       matches,
-      preload: true
+      preload: true,
+      checkLatest: () => undefined
     });
     return [last(matches), matches];
   });
@@ -1497,10 +1507,13 @@ function RouterProvider({
     const unsub = history.subscribe(() => {
       latestLocationRef.current = parseLocation(latestLocationRef.current);
       React.startTransition(() => {
-        setState(s => ({
-          ...s,
-          location: latestLocationRef.current
-        }));
+        if (state.location !== latestLocationRef.current) {
+          try {
+            load();
+          } catch (err) {
+            console.error(err);
+          }
+        }
       });
     });
     const nextLocation = buildLocation({
@@ -1522,13 +1535,12 @@ function RouterProvider({
   const initialLoad = React.useRef(true);
   if (initialLoad.current) {
     initialLoad.current = false;
-    safeLoad();
-  }
-  React.useLayoutEffect(() => {
-    if (state.resolvedLocation !== state.location) {
-      safeLoad();
+    try {
+      load();
+    } catch (err) {
+      console.error(err);
     }
-  }, [state.location]);
+  }
   React.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
   const matchRoute = useStableCallback((state, location, opts) => {
     location = {
@@ -1733,7 +1745,8 @@ function Navigate(props) {
 }
 const matchesContext = /*#__PURE__*/React.createContext(null);
 function useRouter() {
-  const value = React.useContext(routerContext);
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const value = React.useContext(resolvedContext);
   warning(value, 'useRouter must be used inside a <RouterProvider> component!');
   return value;
 }
@@ -1811,6 +1824,9 @@ function useNavigate(defaultOpts) {
     });
   }, []);
 }
+function typedNavigate(navigate) {
+  return navigate;
+}
 function useMatchRoute() {
   const {
     state,
@@ -2243,5 +2259,5 @@ class FileRoute {
   };
 }
 
-export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterMeta, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteMeta, useRouter, useRouterState, useSearch, useStableCallback };
+export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterMeta, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteMeta, useRouter, useRouterState, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map