@tanstack/react-router 0.0.1-beta.177 → 0.0.1-beta.179

package/build/umd/index.development.js

@@ -871,6 +871,7 @@
   const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   const visibilityChangeEvent = 'visibilitychange';
   const focusEvent = 'focus';
+  const preloadWarning = 'Error preloading route! ☝️';
   class Router {
     #unsubHistory;
     resetNextScroll = false;
@@ -1300,39 +1301,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 +1328,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 +1360,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 +1391,7 @@
         }
         throw err;
       }
-      const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex);
+      const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex);
       const matchPromises = [];
       validResolvedMatches.forEach((match, index) => {
         matchPromises.push((async () => {
@@ -1612,14 +1600,14 @@
         if (preload) {
           this.preloadRoute(nextOpts).catch(err => {
             console.warn(err);
-            console.warn('Error preloading route! ☝️');
+            console.warn(preloadWarning);
           });
         }
       };
       const handleTouchStart = e => {
         this.preloadRoute(nextOpts).catch(err => {
           console.warn(err);
-          console.warn('Error preloading route! ☝️');
+          console.warn(preloadWarning);
         });
       };
       const handleEnter = e => {
@@ -1632,7 +1620,7 @@
             target.preloadTimeout = null;
             this.preloadRoute(nextOpts).catch(err => {
               console.warn(err);
-              console.warn('Error preloading route! ☝️');
+              console.warn(preloadWarning);
             });
           }, preloadDelay);
         }
@@ -1659,6 +1647,7 @@
     dehydrate = () => {
       return {
         state: {
+          matchIds: this.state.matchIds,
           dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
         }
       };
@@ -1673,11 +1662,9 @@
       const ctx = _ctx;
       this.dehydratedData = ctx.payload;
       this.options.hydrate?.(ctx.payload);
-      const {
-        dehydratedMatches
-      } = ctx.router.state;
+      const dehydratedState = ctx.router.state;
       let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
-        const dehydratedMatch = dehydratedMatches.find(d => d.id === match.id);
+        const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
         invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
         if (dehydratedMatch) {
           return {
@@ -1690,6 +1677,7 @@
       this.__store.setState(s => {
         return {
           ...s,
+          matchIds: dehydratedState.matchIds,
           matches,
           matchesById: this.#mergeMatches(s.matchesById, matches)
         };
@@ -1706,10 +1694,10 @@
           const id = `__TSR_DEHYDRATED__${strKey}`;
           const data = typeof getData === 'function' ? await getData() : getData;
           return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
-        // ;(() => {
-        //   var el = document.getElementById('${id}')
-        //   el.parentElement.removeChild(el)
-        // })()
+        ;(() => {
+          var el = document.getElementById('${id}')
+          el.parentElement.removeChild(el)
+        })()
         </script>`;
         });
         return () => this.hydrateData(key);
@@ -2200,14 +2188,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 = {}) => {
@@ -2414,7 +2402,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;
       }
     });
   }
@@ -2432,39 +2420,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;
       }
     });
   }
@@ -2472,7 +2460,7 @@
     return useRouterState({
       select: state => {
         const params = last(state.matches)?.params;
-        return opts?.select?.(params) ?? params;
+        return opts?.select ? opts.select(params) : params;
       }
     });
   }