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

package/build/esm/index.js

@@ -711,6 +711,7 @@ function stringifySearchWith(stringify, parser) {
 const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
 const visibilityChangeEvent = 'visibilitychange';
 const focusEvent = 'focus';
+const preloadWarning = 'Error preloading route! ☝️';
 class Router {
   #unsubHistory;
   resetNextScroll = false;
@@ -1140,39 +1141,14 @@ class Router {
           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,
@@ -1192,7 +1168,8 @@ class Router {
 
     // 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;
@@ -1223,10 +1200,21 @@ class Router {
         }
         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;
@@ -1243,7 +1231,7 @@ class Router {
       }
       throw err;
     }
-    const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex);
+    const validResolvedMatches = getFreshMatches().slice(0, firstBadMatchIndex);
     const matchPromises = [];
     validResolvedMatches.forEach((match, index) => {
       matchPromises.push((async () => {
@@ -1452,14 +1440,14 @@ class Router {
       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 => {
@@ -1472,7 +1460,7 @@ class Router {
           target.preloadTimeout = null;
           this.preloadRoute(nextOpts).catch(err => {
             console.warn(err);
-            console.warn('Error preloading route! ☝️');
+            console.warn(preloadWarning);
           });
         }, preloadDelay);
       }
@@ -1499,6 +1487,7 @@ class Router {
   dehydrate = () => {
     return {
       state: {
+        matchIds: this.state.matchIds,
         dehydratedMatches: this.state.matches.map(d => pick(d, ['fetchedAt', 'invalid', 'preloadMaxAge', 'maxAge', 'id', 'loaderData', 'status', 'updatedAt']))
       }
     };
@@ -1513,11 +1502,9 @@ class Router {
     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 {
@@ -1530,6 +1517,7 @@ class Router {
     this.__store.setState(s => {
       return {
         ...s,
+        matchIds: dehydratedState.matchIds,
         matches,
         matchesById: this.#mergeMatches(s.matchesById, matches)
       };
@@ -1546,10 +1534,10 @@ class Router {
         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);