@tanstack/router-core 0.0.1-beta.192 → 0.0.1-beta.194

package/build/esm/index.js

@@ -1086,12 +1086,19 @@ class Router {
     });
     const matches = matchedRoutes.map((route, index) => {
       const interpolatedPath = interpolatePath(route.path, routeParams);
-      const key = route.options.key ? route.options.key({
-        params: routeParams,
+      const loaderContext = route.options.loaderContext ? route.options.loaderContext({
         search: locationSearch
-      }) ?? '' : '';
-      const stringifiedKey = key ? JSON.stringify(key) : '';
-      const matchId = interpolatePath(route.id, routeParams, true) + stringifiedKey;
+      }) : undefined;
+      const matchId = JSON.stringify([interpolatePath(route.id, routeParams, true), loaderContext].filter(d => d !== undefined), (key, value) => {
+        if (typeof value === 'function') {
+          console.info(route);
+          invariant(false, `Cannot return functions and other non-serializable values from routeOptions.loaderContext! Please use routeOptions.beforeLoad to do this. Route info is logged above 👆`);
+        }
+        if (typeof value === 'object' && value !== null) {
+          return Object.fromEntries(Object.keys(value).sort().map(key => [key, value[key]]));
+        }
+        return value;
+      });
 
       // Waste not, want not. If we already have a match for this route,
       // reuse it. This is important for layout routes, which might stick
@@ -1107,7 +1114,7 @@ class Router {
       const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
       const routeMatch = {
         id: matchId,
-        key: stringifiedKey,
+        loaderContext,
         routeId: route.id,
         params: routeParams,
         pathname: joinPaths([this.basepath, interpolatedPath]),
@@ -1124,7 +1131,6 @@ class Router {
         searchError: undefined,
         loaderData: undefined,
         loadPromise: Promise.resolve(),
-        routeContext: undefined,
         context: undefined,
         abortController: new AbortController(),
         fetchedAt: 0
@@ -1181,7 +1187,6 @@ class Router {
           ...s,
           routeSearch: match.routeSearch,
           search: match.search,
-          routeContext: match.routeContext,
           context: match.context,
           error: match.error,
           paramsError: match.paramsError,
@@ -1226,21 +1231,25 @@ class Router {
           handleError(match.searchError, 'VALIDATE_SEARCH');
         }
         let didError = false;
+        const parentContext = parentMatch?.context ?? this?.options.context ?? {};
         try {
-          const routeContext = (await route.options.beforeLoad?.({
-            ...match,
+          const beforeLoadContext = (await route.options.beforeLoad?.({
+            abortController: match.abortController,
+            params: match.params,
             preload: !!opts?.preload,
-            parentContext: parentMatch?.routeContext ?? {},
-            context: parentMatch?.context ?? this?.options.context ?? {}
+            context: {
+              ...parentContext,
+              ...match.loaderContext
+            }
           })) ?? {};
           const context = {
-            ...(parentMatch?.context ?? this?.options.context),
-            ...routeContext
+            ...parentContext,
+            ...match.loaderContext,
+            ...beforeLoadContext
           };
           this.setRouteMatch(match.id, s => ({
             ...s,
-            context,
-            routeContext
+            context: replaceEqualDeep(s.context, context)
           }));
         } catch (err) {
           handleError(err, 'BEFORE_LOAD');
@@ -1294,9 +1303,11 @@ class Router {
               }
             }));
             const loaderPromise = route.options.loader?.({
-              ...match,
+              params: match.params,
               preload: !!opts?.preload,
-              parentMatchPromise
+              parentMatchPromise,
+              abortController: match.abortController,
+              context: match.context
             });
             const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
             if (latestPromise = checkLatest()) return await latestPromise;