@tanstack/router-core 0.0.1-beta.184 → 0.0.1-beta.186

package/build/cjs/router.js

@@ -32,6 +32,9 @@ const preloadWarning = 'Error preloading route! ☝️';
 class Router {
   #unsubHistory;
   resetNextScroll = false;
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+  // nextTemporaryLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
+
   constructor(options) {
     this.options = {
       defaultPreloadDelay: 50,
@@ -80,15 +83,15 @@ class Router {
     });
     this.state = this.__store.state;
     this.update(options);
-    const next = this.buildNext({
-      hash: true,
-      fromCurrent: true,
+    const nextLocation = this.buildLocation({
       search: true,
+      params: true,
+      hash: true,
       state: true
     });
-    if (this.state.location.href !== next.href) {
+    if (this.state.location.href !== nextLocation.href) {
       this.#commitLocation({
-        ...next,
+        ...nextLocation,
         replace: true
       });
     }
@@ -131,8 +134,10 @@ class Router {
     };
   };
   #onFocus = () => {
-    if (this.options.refetchOnWindowFocus ?? true) {
-      this.invalidate();
+    if (this.options.reloadOnWindowFocus ?? true) {
+      this.invalidate({
+        __fromFocus: true
+      });
     }
   };
   update = opts => {
@@ -171,14 +176,6 @@ class Router {
     }
     return this;
   };
-  buildNext = opts => {
-    const next = this.#buildLocation(opts);
-    const __matches = this.matchRoutes(next.pathname, next.search);
-    return this.#buildLocation({
-      ...opts,
-      __matches
-    });
-  };
   cancelMatches = () => {
     this.state.matches.forEach(match => {
       this.cancelMatch(match.id);
@@ -237,7 +234,7 @@ class Router {
       try {
         // Load the matches
         try {
-          await this.loadMatches(pendingMatches);
+          await this.loadMatches(pendingMatches.map(d => d.id));
         } catch (err) {
           // swallow this error, since we'll display the
           // errors on the route components
@@ -286,10 +283,19 @@ class Router {
     return this.latestLoadPromise;
   };
   #mergeMatches = (prevMatchesById, nextMatches) => {
-    return {
-      ...prevMatchesById,
-      ...Object.fromEntries(nextMatches.map(match => [match.id, match]))
+    let matchesById = {
+      ...prevMatchesById
     };
+    nextMatches.forEach(match => {
+      if (!matchesById[match.id]) {
+        matchesById[match.id] = match;
+      }
+      matchesById[match.id] = {
+        ...matchesById[match.id],
+        ...match
+      };
+    });
+    return matchesById;
   };
   getRoute = id => {
     const route = this.routesById[id];
@@ -297,7 +303,7 @@ class Router {
     return route;
   };
   preloadRoute = async (navigateOpts = this.state.location) => {
-    const next = this.buildNext(navigateOpts);
+    let next = this.buildLocation(navigateOpts);
     const matches = this.matchRoutes(next.pathname, next.search, {
       throwOnError: true
     });
@@ -307,11 +313,11 @@ class Router {
         matchesById: this.#mergeMatches(s.matchesById, matches)
       };
     });
-    await this.loadMatches(matches, {
+    await this.loadMatches(matches.map(d => d.id), {
       preload: true,
       maxAge: navigateOpts.maxAge
     });
-    return matches;
+    return [utils.last(matches), matches];
   };
   cleanMatches = () => {
     const now = Date.now();
@@ -465,8 +471,8 @@ class Router {
     });
     return matches;
   };
-  loadMatches = async (_resolvedMatches, opts) => {
-    const getFreshMatches = () => _resolvedMatches.map(d => this.getRouteMatch(d.id));
+  loadMatches = async (matchIds, opts) => {
+    const getFreshMatches = () => matchIds.map(d => this.getRouteMatch(d));
     if (!opts?.preload) {
       getFreshMatches().forEach(match => {
         // Update each match with its latest route data
@@ -546,8 +552,9 @@ class Router {
         }
       }
     } catch (err) {
-      if (!opts?.preload) {
-        this.navigate(err);
+      if (isRedirect(err)) {
+        if (!opts?.preload) this.navigate(err);
+        return;
       }
       throw err;
     }
@@ -656,13 +663,13 @@ class Router {
       isExternal = true;
     } catch (e) {}
     invariant__default["default"](!isExternal, 'Attempting to navigate to external url with this.navigate!');
-    return this.#commitLocation({
+    return this.#buildAndCommitLocation({
       from: fromString,
       to: toString,
       search,
       hash,
-      replace,
       params,
+      replace,
       resetScroll
     });
   };
@@ -671,7 +678,7 @@ class Router {
       ...location,
       to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
     };
-    const next = this.buildNext(location);
+    const next = this.buildLocation(location);
     if (opts?.pending && this.state.status !== 'pending') {
       return false;
     }
@@ -704,6 +711,7 @@ class Router {
     preloadDelay: userPreloadDelay,
     disabled,
     state,
+    mask,
     resetScroll
   }) => {
     // If this link simply reloads the current route,
@@ -727,9 +735,10 @@ class Router {
       hash,
       replace,
       state,
+      mask,
       resetScroll
     };
-    const next = this.buildNext(nextOpts);
+    const next = this.buildLocation(nextOpts);
     preload = preload ?? this.options.defaultPreload;
     const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
 
@@ -751,7 +760,11 @@ class Router {
         e.preventDefault();
 
         // All is well? Navigate!
-        this.#commitLocation(nextOpts);
+        this.#commitLocation({
+          ...next,
+          replace,
+          resetScroll
+        });
       }
     };
 
@@ -964,84 +977,174 @@ class Router {
     });
   };
   #parseLocation = previousLocation => {
-    let {
+    const parse = ({
       pathname,
       search,
       hash,
       state
-    } = this.history.location;
-    const parsedSearch = this.options.parseSearch(search);
-    return {
-      pathname: pathname,
-      searchStr: search,
-      search: utils.replaceEqualDeep(previousLocation?.search, parsedSearch),
-      hash: hash.split('#').reverse()[0] ?? '',
-      href: `${pathname}${search}${hash}`,
-      state: state,
-      key: state?.key || '__init__'
-    };
-  };
-  #buildLocation = (dest = {}) => {
-    dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
-    const fromPathname = dest.fromCurrent ? this.state.location.pathname : dest.from ?? this.state.location.pathname;
-    let pathname = path.resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
-    const fromMatches = this.matchRoutes(this.state.location.pathname, this.state.location.search);
-    const prevParams = {
-      ...utils.last(fromMatches)?.params
+    }) => {
+      const parsedSearch = this.options.parseSearch(search);
+      return {
+        pathname: pathname,
+        searchStr: search,
+        search: utils.replaceEqualDeep(previousLocation?.search, parsedSearch),
+        hash: hash.split('#').reverse()[0] ?? '',
+        href: `${pathname}${search}${hash}`,
+        state: utils.replaceEqualDeep(previousLocation?.state, state)
+      };
     };
-    let nextParams = (dest.params ?? true) === true ? prevParams : utils.functionalUpdate(dest.params, prevParams);
-    if (nextParams) {
-      dest.__matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
-        nextParams = {
-          ...nextParams,
-          ...fn(nextParams)
-        };
-      });
+    const location = parse(this.history.location);
+    let {
+      __tempLocation,
+      __tempKey
+    } = location.state;
+    if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
+      // Sync up the location keys
+      const parsedTempLocation = parse(__tempLocation);
+      parsedTempLocation.state.key = location.state.key;
+      delete parsedTempLocation.state.__tempLocation;
+      return {
+        ...parsedTempLocation,
+        maskedLocation: location
+      };
     }
-    pathname = path.interpolatePath(pathname, nextParams ?? {});
-    const preSearchFilters = dest.__matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-    const postSearchFilters = dest.__matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+    return location;
+  };
+  buildLocation = (opts = {}) => {
+    const build = (dest = {}, matches) => {
+      const from = this.state.location;
+      const fromPathname = dest.from ?? from.pathname;
+      let pathname = path.resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.matchRoutes(from.pathname, from.search);
+      const prevParams = {
+        ...utils.last(fromMatches)?.params
+      };
+      let nextParams = (dest.params ?? true) === true ? prevParams : utils.functionalUpdate(dest.params, prevParams);
+      if (nextParams) {
+        matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
+        });
+      }
+      pathname = path.interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = matches?.map(match => this.getRoute(match.routeId).options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
 
-    // Pre filters first
-    const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.location.search) : this.state.location.search;
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), from.search) : from.search;
 
-    // Then the link/navigate function
-    const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-    : dest.search ? utils.functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-    : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-    : {};
+      // Then the link/navigate function
+      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+      : dest.search ? utils.functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+      : {};
 
-    // Then post filters
-    const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-    const search = utils.replaceEqualDeep(this.state.location.search, postFilteredSearch);
-    const searchStr = this.options.stringifySearch(search);
-    const hash = dest.hash === true ? this.state.location.hash : utils.functionalUpdate(dest.hash, this.state.location.hash);
-    const hashStr = hash ? `#${hash}` : '';
-    const nextState = dest.state === true ? this.state.location.state : utils.functionalUpdate(dest.state, this.state.location.state);
-    return {
-      pathname,
-      search,
-      searchStr,
-      state: nextState,
-      hash,
-      href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
-      key: dest.key
+      // Then post filters
+      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+      const search = utils.replaceEqualDeep(from.search, postFilteredSearch);
+      const searchStr = this.options.stringifySearch(search);
+      const hash = dest.hash === true ? from.hash : dest.hash ? utils.functionalUpdate(dest.hash, from.hash) : from.hash;
+      const hashStr = hash ? `#${hash}` : '';
+      let nextState = dest.state === true ? from.state : dest.state ? utils.functionalUpdate(dest.state, from.state) : from.state;
+      nextState = utils.replaceEqualDeep(from.state, nextState);
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+        unmaskOnReload: dest.unmaskOnReload
+      };
+    };
+    const buildWithMatches = (dest = {}, maskedDest) => {
+      let next = build(dest);
+      let maskedNext = maskedDest ? build(maskedDest) : undefined;
+      if (!maskedNext) {
+        const foundMask = this.options.routeMasks?.find(d => {
+          const match = path.matchPathname(this.basepath, next.pathname, {
+            to: d.from,
+            fuzzy: false
+          });
+          if (match) {
+            return match;
+          }
+          return false;
+        });
+        if (foundMask) {
+          maskedDest = foundMask;
+          maskedNext = build(maskedDest);
+        }
+      }
+      const nextMatches = this.matchRoutes(next.pathname, next.search);
+      const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+      const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
+      const final = build(dest, nextMatches);
+      if (maskedFinal) {
+        final.maskedLocation = maskedFinal;
+      }
+      return final;
     };
+    if (opts.mask) {
+      return buildWithMatches(opts, {
+        ...utils.pick(opts, ['from']),
+        ...opts.mask
+      });
+    }
+    return buildWithMatches(opts);
   };
-  #commitLocation = async location => {
-    const next = this.buildNext(location);
+  #buildAndCommitLocation = ({
+    replace,
+    resetScroll,
+    ...rest
+  } = {}) => {
+    const location = this.buildLocation(rest);
+    return this.#commitLocation({
+      ...location,
+      replace,
+      resetScroll
+    });
+  };
+  #commitLocation = async next => {
     if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
     let nextAction = 'replace';
-    if (!location.replace) {
+    if (!next.replace) {
       nextAction = 'push';
     }
     const isSameUrl = this.state.location.href === next.href;
-    if (isSameUrl && !next.key) {
+    if (isSameUrl) {
       nextAction = 'replace';
     }
-    const href = `${next.pathname}${next.searchStr}${next.hash ? `#${next.hash}` : ''}`;
-    this.history[nextAction === 'push' ? 'push' : 'replace'](href, next.state);
-    this.resetNextScroll = location.resetScroll ?? true;
+    let {
+      maskedLocation,
+      ...nextHistory
+    } = next;
+    if (maskedLocation) {
+      nextHistory = {
+        ...maskedLocation,
+        state: {
+          ...maskedLocation.state,
+          __tempKey: undefined,
+          __tempLocation: {
+            ...nextHistory,
+            search: nextHistory.searchStr,
+            state: {
+              ...nextHistory.state,
+              __tempKey: undefined,
+              __tempLocation: undefined,
+              key: undefined
+            }
+          }
+        }
+      };
+      if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+        nextHistory.state.__tempKey = this.tempLocationKey;
+      }
+    }
+    this.history[nextAction === 'push' ? 'push' : 'replace'](nextHistory.href, nextHistory.state);
+    this.resetNextScroll = next.resetScroll ?? true;
     return this.latestLoadPromise;
   };
   getRouteMatch = id => {
@@ -1090,25 +1193,26 @@ class Router {
       if (childMatch) {
         return this.invalidate({
           matchId: childMatch.id,
-          reload: false
+          reload: false,
+          __fromFocus: opts.__fromFocus
         });
       }
     } else {
       this.__store.batch(() => {
         Object.values(this.state.matchesById).forEach(match => {
-          this.setRouteMatch(match.id, s => ({
-            ...s,
-            invalid: true
-          }));
+          const route = this.getRoute(match.routeId);
+          const shouldInvalidate = opts?.__fromFocus ? route.options.reloadOnWindowFocus ?? true : true;
+          if (shouldInvalidate) {
+            this.setRouteMatch(match.id, s => ({
+              ...s,
+              invalid: true
+            }));
+          }
         });
       });
     }
     if (opts?.reload ?? true) {
-      return this.navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true
-      });
+      return this.load();
     }
   };
 }