@tanstack/react-router 0.0.1-beta.176 → 0.0.1-beta.178

package/build/umd/index.development.js

@@ -964,7 +964,7 @@
     };
     #onFocus = () => {
       if (this.options.refetchOnWindowFocus ?? true) {
-        this.reload();
+        this.invalidate();
       }
     };
     update = opts => {
@@ -1300,39 +1300,14 @@
             return parentSearchInfo;
           }
         })();
-        Object.assign(match, {
-          ...searchInfo
-        });
-        const contextInfo = (() => {
-          try {
-            const routeContext = route.options.getContext?.({
-              parentContext: parentMatch?.routeContext ?? {},
-              context: parentMatch?.context ?? this?.options.context ?? {},
-              params: match.params,
-              search: match.search
-            }) || {};
-            const context = {
-              ...(parentMatch?.context ?? this?.options.context),
-              ...routeContext
-            };
-            return {
-              context,
-              routeContext
-            };
-          } catch (err) {
-            route.options.onError?.(err);
-            throw err;
-          }
-        })();
-        Object.assign(match, {
-          ...contextInfo
-        });
+        Object.assign(match, searchInfo);
       });
       return matches;
     };
-    loadMatches = async (resolvedMatches, opts) => {
+    loadMatches = async (_resolvedMatches, opts) => {
+      const getFreshMatches = () => _resolvedMatches.map(d => this.getRouteMatch(d.id));
       if (!opts?.preload) {
-        resolvedMatches.forEach(match => {
+        getFreshMatches().forEach(match => {
           // Update each match with its latest route data
           this.setRouteMatch(match.id, s => ({
             ...s,
@@ -1352,7 +1327,8 @@
 
       // Check each match middleware to see if the route can be accessed
       try {
-        for (const [index, match] of resolvedMatches.entries()) {
+        for (const [index, match] of getFreshMatches().entries()) {
+          const parentMatch = getFreshMatches()[index - 1];
           const route = this.getRoute(match.routeId);
           const handleError = (err, code) => {
             err.routerCode = code;
@@ -1383,10 +1359,21 @@
           }
           let didError = false;
           try {
-            await route.options.beforeLoad?.({
+            const routeContext = (await route.options.beforeLoad?.({
               ...match,
-              preload: !!opts?.preload
-            });
+              preload: !!opts?.preload,
+              parentContext: parentMatch?.routeContext ?? {},
+              context: parentMatch?.context ?? this?.options.context ?? {}
+            })) ?? {};
+            const context = {
+              ...(parentMatch?.context ?? this?.options.context),
+              ...routeContext
+            };
+            this.setRouteMatch(match.id, s => ({
+              ...s,
+              context,
+              routeContext
+            }));
           } catch (err) {
             handleError(err, 'BEFORE_LOAD');
             didError = true;
@@ -1403,7 +1390,7 @@
         }
         throw err;
       }
-      const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex);
+      const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex);
       const matchPromises = [];
       validResolvedMatches.forEach((match, index) => {
         matchPromises.push((async () => {
@@ -1483,13 +1470,6 @@
       });
       await Promise.all(matchPromises);
     };
-    reload = () => {
-      return this.navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true
-      });
-    };
     resolvePath = (from, path) => {
       return resolvePath(this.basepath, from, cleanPath(path));
     };
@@ -1967,7 +1947,11 @@
         });
       }
       if (opts?.reload ?? true) {
-        return this.reload();
+        return this.navigate({
+          fromCurrent: true,
+          replace: true,
+          search: true
+        });
       }
     };
   }
@@ -2203,14 +2187,14 @@
         return useMatch({
           ...opts,
           from: route.id,
-          select: d => opts?.select?.(d.context) ?? d.context
+          select: d => opts?.select ? opts.select(d.context) : d.context
         });
       },
       useRouteContext: (opts = {}) => {
         return useMatch({
           ...opts,
           from: route.id,
-          select: d => opts?.select?.(d.routeContext) ?? d.routeContext
+          select: d => opts?.select ? opts.select(d.routeContext) : d.routeContext
         });
       },
       useSearch: (opts = {}) => {
@@ -2417,7 +2401,7 @@
     return useRouterState({
       select: state => {
         const matches = state.matches.slice(state.matches.findIndex(d => d.id === matchIds[0]));
-        return opts?.select?.(matches) ?? matches;
+        return opts?.select ? opts.select(matches) : matches;
       }
     });
   }
@@ -2435,39 +2419,39 @@
     if (opts?.strict ?? true) {
       invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
     }
-    const match = useRouterState({
+    const matchSelection = useRouterState({
       select: state => {
         const matches = state.matches;
         const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
         invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-        return opts?.select?.(match) ?? match;
+        return opts?.select ? opts.select(match) : match;
       }
     });
-    return match;
+    return matchSelection;
   }
   function useLoader(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select?.(match.loaderData) ?? match.loaderData
+      select: match => opts?.select ? opts?.select(match.loaderData) : match.loaderData
     });
   }
   function useRouterContext(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select?.(match.context) ?? match.context
+      select: match => opts?.select ? opts.select(match.context) : match.context
     });
   }
   function useRouteContext(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select?.(match.routeContext) ?? match.routeContext
+      select: match => opts?.select ? opts.select(match.routeContext) : match.routeContext
     });
   }
   function useSearch(opts) {
     return useMatch({
       ...opts,
       select: match => {
-        return opts?.select?.(match.search) ?? match.search;
+        return opts?.select ? opts.select(match.search) : match.search;
       }
     });
   }
@@ -2475,7 +2459,7 @@
     return useRouterState({
       select: state => {
         const params = last(state.matches)?.params;
-        return opts?.select?.(params) ?? params;
+        return opts?.select ? opts.select(params) : params;
       }
     });
   }