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

package/build/types/react.d.ts

@@ -98,6 +98,7 @@ export declare function useParams<TRouteTree extends AnyRoute = RegisteredRouter
 export declare function useNavigate<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TDefaultFrom extends RoutePaths<TRouteTree> = '/'>(defaultOpts?: {
     from?: TDefaultFrom;
 }): <TFrom extends RoutePaths<TRouteTree> = TDefaultFrom, TTo extends string = "", TMaskFrom extends RoutePaths<TRouteTree> = "/", TMaskTo extends string = "">(opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> | undefined) => Promise<void>;
+export declare function typedNavigate<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TDefaultFrom extends RoutePaths<TRouteTree> = '/'>(navigate: (opts: NavigateOptions<any>) => Promise<void>): <TFrom extends RoutePaths<TRouteTree> = TDefaultFrom, TTo extends string = "", TMaskFrom extends RoutePaths<TRouteTree> = "/", TMaskTo extends string = "">(opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> | undefined) => Promise<void>;
 export declare function useMatchRoute<TRouteTree extends AnyRoute = RegisteredRouter['routeTree']>(): <TFrom extends RoutePaths<TRouteTree> = "/", TTo extends string = "", TMaskFrom extends RoutePaths<TRouteTree> = "/", TMaskTo extends string = "", TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>>(opts: MakeUseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => false | RouteById<TRouteTree, TResolved>["types"]["allParams"];
 export declare function Matches(): JSX.Element;
 export declare function MatchRoute<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RoutePaths<TRouteTree> = '/', TTo extends string = '', TMaskFrom extends RoutePaths<TRouteTree> = '/', TMaskTo extends string = ''>(props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): any;

package/build/types/route.d.ts

@@ -2,7 +2,7 @@ import { RoutePaths } from './routeInfo';
 import { AnyRouter } from './router';
 import { AnyRouteMatch } from './RouteMatch';
 import { Expand, IsAny, NoInfer, PickRequired, UnionToIntersection, Assign } from './utils';
-import { ParsePathParams, ToSubOptions } from './link';
+import { NavigateOptions, ParsePathParams, ToSubOptions } from './link';
 import { ErrorRouteComponent, PendingRouteComponent, RouteComponent } from './react';
 import { ParsedLocation } from './location';
 export declare const rootRouteId: "__root__";
@@ -46,6 +46,7 @@ type BeforeLoadFn<TFullSearchSchema extends Record<string, any>, TParentRoute ex
     params: TAllParams;
     meta: TParentRoute['types']['allMeta'];
     location: ParsedLocation;
+    navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>;
 }) => Promise<TRouteMeta> | TRouteMeta | void;
 export type UpdatableRouteOptions<TFullSearchSchema extends Record<string, any>, TAllParams extends AnyPathParams, TAllContext extends AnyContext> = {
     caseSensitive?: boolean;
@@ -84,6 +85,8 @@ export interface LoadFnContext<TAllParams = {}, TFullSearchSchema extends Record
     params: TAllParams;
     search: TFullSearchSchema;
     meta: Expand<Assign<TAllContext, TRouteMeta>>;
+    location: ParsedLocation<TFullSearchSchema>;
+    navigate: (opts: NavigateOptions<AnyRoute>) => Promise<void>;
 }
 export type SearchFilter<T, U = T> = (prev: T) => U;
 export type ResolveId<TParentRoute, TCustomId extends string, TPath extends string> = TParentRoute extends {

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
@@ -1490,7 +1498,12 @@
               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,
@@ -1508,7 +1521,7 @@
       } catch (err) {
         if (isRedirect(err)) {
           if (!preload) navigate(err);
-          return;
+          return matches;
         }
         throw err;
       }
@@ -1521,11 +1534,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 +1544,6 @@
             return false;
           };
           const load = async () => {
-            let latestPromise;
             try {
               const componentsPromise = Promise.all(componentTypes.map(async type => {
                 const component = route.options[type];
@@ -1550,7 +1557,12 @@
                 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;
@@ -1578,12 +1590,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 +1613,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 +1647,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 +1659,7 @@
           }
 
           // Only apply the latest transition
-          if (latestPromise = checkLatest()) {
+          if (latestPromise = checkLatest(promise)) {
             return latestPromise;
           }
 
@@ -1680,13 +1696,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 +1711,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 +1718,8 @@
       });
       await loadMatches({
         matches,
-        preload: true
+        preload: true,
+        checkLatest: () => undefined
       });
       return [last(matches), matches];
     });
@@ -1822,10 +1832,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 +1860,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 +2070,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;
   }
@@ -2136,6 +2149,9 @@
       });
     }, []);
   }
+  function typedNavigate(navigate) {
+    return navigate;
+  }
   function useMatchRoute() {
     const {
       state,
@@ -2624,6 +2640,7 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.typedNavigate = typedNavigate;
   exports.useBlocker = useBlocker;
   exports.useLinkProps = useLinkProps;
   exports.useMatch = useMatch;