@tanstack/router-core 1.151.6 → 1.153.2

package/dist/esm/router.js

@@ -47,7 +47,6 @@ class RouterCore {
     this.tempLocationKey = `${Math.round(
       Math.random() * 1e7
     )}`;
-    this.resetNextScroll = true;
     this.shouldViewTransition = void 0;
     this.isViewTransitionTypesSupported = void 0;
     this.subscribers = /* @__PURE__ */ new Set();
@@ -213,7 +212,7 @@ class RouterCore {
           pathname: decodePath(url.pathname),
           searchStr,
           search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-          hash: url.hash.split("#").reverse()[0] ?? "",
+          hash: decodePath(url.hash.split("#").reverse()[0] ?? ""),
           state: replaceEqualDeep(previousLocation?.state, state)
         };
       };
@@ -315,9 +314,13 @@ class RouterCore {
           path: nextTo,
           params: nextParams
         }).interpolatedPath;
-        const destRoutes = this.matchRoutes(interpolatedNextTo, void 0, {
+        const destMatches = this.matchRoutes(interpolatedNextTo, void 0, {
           _buildLocation: true
-        }).map((d) => this.looseRoutesById[d.routeId]);
+        });
+        const destRoutes = destMatches.map(
+          (d) => this.looseRoutesById[d.routeId]
+        );
+        const globalNotFoundMatch = destMatches.find((m) => m.globalNotFound);
         if (Object.keys(nextParams).length > 0) {
           for (const route of destRoutes) {
             const fn = route.options.params?.stringify ?? route.options.stringifyParams;
@@ -368,19 +371,27 @@ class RouterCore {
         const hashStr = hash ? `#${hash}` : "";
         let nextState = dest.state === true ? currentLocation.state : dest.state ? functionalUpdate(dest.state, currentLocation.state) : {};
         nextState = replaceEqualDeep(currentLocation.state, nextState);
+        const matchSnapshot = buildMatchSnapshotFromRoutes({
+          routes: destRoutes,
+          params: nextParams,
+          searchStr,
+          globalNotFoundRouteId: globalNotFoundMatch?.routeId
+        });
         const fullPath = `${nextPathname}${searchStr}${hashStr}`;
         const url = new URL(fullPath, this.origin);
         const rewrittenUrl = executeRewriteOutput(this.rewrite, url);
+        const encodedHref = url.href.replace(url.origin, "");
         return {
           publicHref: rewrittenUrl.pathname + rewrittenUrl.search + rewrittenUrl.hash,
-          href: fullPath,
+          href: encodedHref,
           url: rewrittenUrl,
           pathname: nextPathname,
           search: nextSearch,
           searchStr,
           state: nextState,
           hash: hash ?? "",
-          unmaskOnReload: dest.unmaskOnReload
+          unmaskOnReload: dest.unmaskOnReload,
+          _matchSnapshot: matchSnapshot
         };
       };
       const buildWithMatches = (dest = {}, maskedDest) => {
@@ -423,7 +434,7 @@ class RouterCore {
       }
       return buildWithMatches(opts);
     };
-    this.commitLocation = ({
+    this.commitLocation = async ({
       viewTransition,
       ignoreBlocker,
       ...next
@@ -452,53 +463,73 @@ class RouterCore {
       });
       if (isSameUrl && isSameState()) {
         this.load();
-      } else {
-        let {
-          // eslint-disable-next-line prefer-const
-          maskedLocation,
-          // eslint-disable-next-line prefer-const
-          hashScrollIntoView,
-          // don't pass url into history since it is a URL instance that cannot be serialized
-          // eslint-disable-next-line prefer-const
-          url: _url,
-          ...nextHistory
-        } = next;
-        if (maskedLocation) {
-          nextHistory = {
-            ...maskedLocation,
-            state: {
-              ...maskedLocation.state,
-              __tempKey: void 0,
-              __tempLocation: {
-                ...nextHistory,
-                search: nextHistory.searchStr,
-                state: {
-                  ...nextHistory.state,
-                  __tempKey: void 0,
-                  __tempLocation: void 0,
-                  __TSR_key: void 0,
-                  key: void 0
-                  // TODO: Remove in v2 - use __TSR_key instead
-                }
+        return this.commitLocationPromise;
+      }
+      let {
+        // eslint-disable-next-line prefer-const
+        maskedLocation,
+        // eslint-disable-next-line prefer-const
+        hashScrollIntoView,
+        // don't pass url into history since it is a URL instance that cannot be serialized
+        // eslint-disable-next-line prefer-const
+        url: _url,
+        ...nextHistory
+      } = next;
+      if (maskedLocation) {
+        nextHistory = {
+          ...maskedLocation,
+          state: {
+            ...maskedLocation.state,
+            __tempKey: void 0,
+            __tempLocation: {
+              ...nextHistory,
+              search: nextHistory.searchStr,
+              state: {
+                ...nextHistory.state,
+                __tempKey: void 0,
+                __tempLocation: void 0,
+                __TSR_key: void 0,
+                key: void 0
+                // TODO: Remove in v2 - use __TSR_key instead
               }
             }
-          };
-          if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
-            nextHistory.state.__tempKey = this.tempLocationKey;
           }
+        };
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
         }
-        nextHistory.state.__hashScrollIntoViewOptions = hashScrollIntoView ?? this.options.defaultHashScrollIntoView ?? true;
-        this.shouldViewTransition = viewTransition;
-        this.history[next.replace ? "replace" : "push"](
-          nextHistory.publicHref,
-          nextHistory.state,
-          { ignoreBlocker }
-        );
       }
-      this.resetNextScroll = next.resetScroll ?? true;
-      if (!this.history.subscribers.size) {
-        this.load();
+      nextHistory.state.__hashScrollIntoViewOptions = hashScrollIntoView ?? this.options.defaultHashScrollIntoView ?? true;
+      nextHistory.state.__TSR_resetScroll = next.resetScroll ?? true;
+      this.shouldViewTransition = viewTransition;
+      nextHistory.state.__TSR_sessionId = this.sessionId;
+      nextHistory.state.__TSR_matches = next._matchSnapshot ?? buildMatchSnapshot({
+        matchResult: this.getMatchedRoutes(next.pathname),
+        pathname: next.pathname,
+        searchStr: next.searchStr,
+        notFoundRoute: this.options.notFoundRoute,
+        notFoundMode: this.options.notFoundMode
+      });
+      const precomputedLocation = {
+        ...next,
+        publicHref: nextHistory.publicHref,
+        state: nextHistory.state,
+        maskedLocation
+      };
+      const result = await this.history[next.replace ? "replace" : "push"](
+        nextHistory.publicHref,
+        nextHistory.state,
+        { ignoreBlocker, skipTransitionerLoad: true }
+      );
+      if (result.type === "BLOCKED") {
+        this.commitLocationPromise?.resolve();
+        return this.commitLocationPromise;
+      }
+      if (this.history.location.href !== nextHistory.publicHref) {
+        return this.commitLocationPromise;
       }
+      this.latestLocation = precomputedLocation;
+      this.load({ _skipUpdateLatestLocation: true });
       return this.commitLocationPromise;
     };
     this.buildAndCommitLocation = ({
@@ -605,9 +636,11 @@ class RouterCore {
         _isNavigate: true
       });
     };
-    this.beforeLoad = () => {
+    this.beforeLoad = (opts) => {
       this.cancelMatches();
-      this.updateLatestLocation();
+      if (!opts?._skipUpdateLatestLocation) {
+        this.updateLatestLocation();
+      }
       if (this.isServer) {
         const nextLocation = this.buildLocation({
           to: this.latestLocation.pathname,
@@ -622,7 +655,8 @@ class RouterCore {
           throw redirect({ href });
         }
       }
-      const pendingMatches = this.matchRoutes(this.latestLocation);
+      const snapshot = this.latestLocation.state.__TSR_sessionId === this.sessionId ? this.latestLocation.state.__TSR_matches : void 0;
+      const pendingMatches = this.matchRoutes(this.latestLocation, { snapshot });
       this.__store.setState((s) => ({
         ...s,
         status: "pending",
@@ -643,7 +677,9 @@ class RouterCore {
       loadPromise = new Promise((resolve) => {
         this.startTransition(async () => {
           try {
-            this.beforeLoad();
+            this.beforeLoad({
+              _skipUpdateLatestLocation: opts?._skipUpdateLatestLocation
+            });
             const next = this.latestLocation;
             const prevLocation = this.state.resolvedLocation;
             if (!this.state.redirect) {
@@ -1000,6 +1036,7 @@ class RouterCore {
         (d) => d.status === "notFound" || d.globalNotFound
       );
     };
+    this.sessionId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
     this.update({
       defaultPreloadDelay: 50,
       defaultPendingMs: 1e3,
@@ -1028,46 +1065,67 @@ class RouterCore {
     return this.routesById;
   }
   matchRoutesInternal(next, opts) {
-    const matchedRoutesResult = this.getMatchedRoutes(next.pathname);
-    const { foundRoute, routeParams, parsedParams } = matchedRoutesResult;
-    let { matchedRoutes } = matchedRoutesResult;
-    let isGlobalNotFound = false;
-    if (
-      // If we found a route, and it's not an index route and we have left over path
-      foundRoute ? foundRoute.path !== "/" && routeParams["**"] : (
-        // Or if we didn't find a route and we have left over path
-        trimPathRight(next.pathname)
-      )
-    ) {
-      if (this.options.notFoundRoute) {
-        matchedRoutes = [...matchedRoutes, this.options.notFoundRoute];
-      } else {
-        isGlobalNotFound = true;
-      }
-    }
-    const globalNotFoundRouteId = (() => {
-      if (!isGlobalNotFound) {
-        return void 0;
+    const snapshot = opts?.snapshot;
+    const snapshotValid = snapshot && snapshot.routeIds.length > 0 && snapshot.routeIds.every((id) => this.routesById[id]);
+    let matchedRoutes;
+    let routeParams;
+    let globalNotFoundRouteId;
+    let parsedParams;
+    if (snapshotValid) {
+      matchedRoutes = snapshot.routeIds.map((id) => this.routesById[id]);
+      routeParams = { ...snapshot.params };
+      globalNotFoundRouteId = snapshot.globalNotFoundRouteId;
+      parsedParams = snapshot.parsedParams;
+    } else {
+      const matchedRoutesResult = this.getMatchedRoutes(next.pathname);
+      const { foundRoute, routeParams: rp } = matchedRoutesResult;
+      routeParams = rp;
+      matchedRoutes = matchedRoutesResult.matchedRoutes;
+      parsedParams = matchedRoutesResult.parsedParams;
+      let isGlobalNotFound = false;
+      if (
+        // If we found a route, and it's not an index route and we have left over path
+        foundRoute ? foundRoute.path !== "/" && routeParams["**"] : (
+          // Or if we didn't find a route and we have left over path
+          trimPathRight(next.pathname)
+        )
+      ) {
+        if (this.options.notFoundRoute) {
+          matchedRoutes = [...matchedRoutes, this.options.notFoundRoute];
+        } else {
+          isGlobalNotFound = true;
+        }
       }
-      if (this.options.notFoundMode !== "root") {
-        for (let i = matchedRoutes.length - 1; i >= 0; i--) {
-          const route = matchedRoutes[i];
-          if (route.children) {
-            return route.id;
+      globalNotFoundRouteId = (() => {
+        if (!isGlobalNotFound) {
+          return void 0;
+        }
+        if (this.options.notFoundMode !== "root") {
+          for (let i = matchedRoutes.length - 1; i >= 0; i--) {
+            const route = matchedRoutes[i];
+            if (route.children) {
+              return route.id;
+            }
           }
         }
-      }
-      return rootRouteId;
-    })();
+        return rootRouteId;
+      })();
+    }
     const matches = [];
     const getParentContext = (parentMatch) => {
       const parentMatchId = parentMatch?.id;
       const parentContext = !parentMatchId ? this.options.context ?? void 0 : parentMatch.context ?? this.options.context ?? void 0;
       return parentContext;
     };
+    const canUseCachedSearch = snapshotValid && snapshot.searchStr === next.searchStr && snapshot.validatedSearches?.length === matchedRoutes.length;
+    const validatedSearchesToCache = [];
     matchedRoutes.forEach((route, index) => {
       const parentMatch = matches[index - 1];
       const [preMatchSearch, strictMatchSearch, searchError] = (() => {
+        if (canUseCachedSearch) {
+          const cached = snapshot.validatedSearches[index];
+          return [cached.search, cached.strictSearch, void 0];
+        }
         const parentSearch = parentMatch?.search ?? next.search;
         const parentStrictSearch = parentMatch?._strictSearch ?? void 0;
         try {
@@ -1093,6 +1151,12 @@ class RouterCore {
           return [parentSearch, {}, searchParamError];
         }
       })();
+      if (!canUseCachedSearch) {
+        validatedSearchesToCache.push({
+          search: preMatchSearch,
+          strictSearch: strictMatchSearch
+        });
+      }
       const loaderDeps = route.options.loaderDeps?.({
         search: preMatchSearch
       }) ?? "";
@@ -1206,6 +1270,13 @@ class RouterCore {
       };
       matches.push(match);
     });
+    if (!canUseCachedSearch && validatedSearchesToCache.length > 0) {
+      const existingSnapshot = next.state?.__TSR_matches;
+      if (existingSnapshot) {
+        existingSnapshot.searchStr = next.searchStr;
+        existingSnapshot.validatedSearches = validatedSearchesToCache;
+      }
+    }
     matches.forEach((match, index) => {
       const route = this.looseRoutesById[match.routeId];
       const existingMatch = this.getMatch(match.id);
@@ -1293,7 +1364,7 @@ function getMatchedRoutes({
   const routeParams = {};
   const trimmedPath = trimPathRight(pathname);
   let foundRoute = void 0;
-  let parsedParams = void 0;
+  let parsedParams = {};
   const match = findRouteMatch(trimmedPath, processedTree, true);
   if (match) {
     foundRoute = match.route;
@@ -1303,6 +1374,64 @@ function getMatchedRoutes({
   const matchedRoutes = match?.branch || [routesById[rootRouteId]];
   return { matchedRoutes, routeParams, foundRoute, parsedParams };
 }
+function buildMatchSnapshot({
+  matchResult,
+  pathname,
+  searchStr,
+  notFoundRoute,
+  notFoundMode
+}) {
+  const snapshot = {
+    routeIds: matchResult.matchedRoutes.map((r) => r.id),
+    params: matchResult.routeParams,
+    parsedParams: matchResult.parsedParams,
+    searchStr
+  };
+  const isGlobalNotFound = matchResult.foundRoute ? matchResult.foundRoute.path !== "/" && matchResult.routeParams["**"] : trimPathRight(pathname);
+  if (isGlobalNotFound) {
+    if (notFoundRoute) {
+      snapshot.globalNotFoundRouteId = notFoundRoute.id;
+    } else {
+      if (notFoundMode !== "root") {
+        for (let i = matchResult.matchedRoutes.length - 1; i >= 0; i--) {
+          const route = matchResult.matchedRoutes[i];
+          if (route.children) {
+            snapshot.globalNotFoundRouteId = route.id;
+            break;
+          }
+        }
+      }
+      if (!snapshot.globalNotFoundRouteId) {
+        snapshot.globalNotFoundRouteId = rootRouteId;
+      }
+    }
+  }
+  return snapshot;
+}
+function buildMatchSnapshotFromRoutes({
+  routes,
+  params,
+  searchStr,
+  globalNotFoundRouteId
+}) {
+  const stringParams = {};
+  for (const key in params) {
+    const value = params[key];
+    if (value != null) {
+      stringParams[key] = String(value);
+    }
+  }
+  const snapshot = {
+    routeIds: routes.map((r) => r.id),
+    params: stringParams,
+    parsedParams: params,
+    searchStr
+  };
+  if (globalNotFoundRouteId) {
+    snapshot.globalNotFoundRouteId = globalNotFoundRouteId;
+  }
+  return snapshot;
+}
 function applySearchMiddleware({
   search,
   dest,
@@ -1384,6 +1513,8 @@ export {
   PathParamError,
   RouterCore,
   SearchParamError,
+  buildMatchSnapshot,
+  buildMatchSnapshotFromRoutes,
   defaultSerializeError,
   getInitialRouterState,
   getLocationChangeInfo,