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

package/build/umd/index.development.js

@@ -1246,12 +1246,19 @@
       });
       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
@@ -1267,7 +1274,7 @@
         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]),
@@ -1284,7 +1291,6 @@
           searchError: undefined,
           loaderData: undefined,
           loadPromise: Promise.resolve(),
-          routeContext: undefined,
           context: undefined,
           abortController: new AbortController(),
           fetchedAt: 0
@@ -1341,7 +1347,6 @@
             ...s,
             routeSearch: match.routeSearch,
             search: match.search,
-            routeContext: match.routeContext,
             context: match.context,
             error: match.error,
             paramsError: match.paramsError,
@@ -1386,21 +1391,25 @@
             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');
@@ -1454,9 +1463,11 @@
                 }
               }));
               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;
@@ -2290,18 +2301,11 @@
           from: route.id
         });
       },
-      useContext: (opts = {}) => {
-        return useMatch({
-          ...opts,
-          from: route.id,
-          select: d => opts?.select ? opts.select(d.context) : d.context
-        });
-      },
       useRouteContext: (opts = {}) => {
         return useMatch({
           ...opts,
           from: route.id,
-          select: d => opts?.select ? opts.select(d.routeContext) : d.routeContext
+          select: d => opts?.select ? opts.select(d.context) : d.context
         });
       },
       useSearch: (opts = {}) => {
@@ -2491,7 +2495,6 @@
       return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams
@@ -2558,7 +2561,7 @@
   function useRouteContext(opts) {
     return useMatch({
       ...opts,
-      select: match => opts?.select ? opts.select(match.routeContext) : match.routeContext
+      select: match => opts?.select ? opts.select(match.context) : match.context
     });
   }
   function useSearch(opts) {
@@ -2636,7 +2639,6 @@
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams
@@ -2647,7 +2649,6 @@
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
       fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams
@@ -2682,7 +2683,6 @@
       return /*#__PURE__*/React__namespace.createElement(PendingComponent, {
         useLoader: route.useLoader,
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams
@@ -2694,7 +2694,6 @@
         return /*#__PURE__*/React__namespace.createElement(comp, {
           useLoader: route.useLoader,
           useMatch: route.useMatch,
-          useContext: route.useContext,
           useRouteContext: route.useRouteContext,
           useSearch: route.useSearch,
           useParams: route.useParams