@tanstack/router-core 0.0.1-beta.185 → 0.0.1-beta.187

package/build/umd/index.development.js

@@ -105,11 +105,13 @@
           };
         },
         push: (path, state) => {
+          assignKey(state);
           queueTask(() => {
             opts.pushState(path, state);
           });
         },
         replace: (path, state) => {
+          assignKey(state);
           queueTask(() => {
             opts.replaceState(path, state);
           });
@@ -146,6 +148,16 @@
         }
       };
     }
+    function assignKey(state) {
+      state.key = createRandomKey();
+      // if (state.__actualLocation) {
+      //   state.__actualLocation.state = {
+      //     ...state.__actualLocation.state,
+      //     key,
+      //   }
+      // }
+    }
+
     function createBrowserHistory(opts) {
       const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
       const createHref = opts?.createHref ?? (path => path);
@@ -175,16 +187,10 @@
           };
         },
         pushState: (path, state) => {
-          window.history.pushState({
-            ...state,
-            key: createRandomKey()
-          }, '', createHref(path));
+          window.history.pushState(state, '', createHref(path));
         },
         replaceState: (path, state) => {
-          window.history.replaceState({
-            ...state,
-            key: createRandomKey()
-          }, '', createHref(path));
+          window.history.replaceState(state, '', createHref(path));
         },
         back: () => window.history.back(),
         forward: () => window.history.forward(),
@@ -203,24 +209,20 @@
     }) {
       const entries = opts.initialEntries;
       let index = opts.initialIndex ?? entries.length - 1;
-      let currentState = {};
+      let currentState = {
+        key: createRandomKey()
+      };
       const getLocation = () => parseLocation(entries[index], currentState);
       return createHistory({
         getLocation,
         subscriber: false,
         pushState: (path, state) => {
-          currentState = {
-            ...state,
-            key: createRandomKey()
-          };
+          currentState = state;
           entries.push(path);
           index++;
         },
         replaceState: (path, state) => {
-          currentState = {
-            ...state,
-            key: createRandomKey()
-          };
+          currentState = state;
           entries[index] = path;
         },
         back: () => {
@@ -241,7 +243,7 @@
         pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
         hash: hashIndex > -1 ? href.substring(hashIndex) : '',
         search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? undefined : hashIndex) : '',
-        state
+        state: state || {}
       };
     }
 
@@ -250,6 +252,21 @@
       return (Math.random() + 1).toString(36).substring(7);
     }
 
+    // type Compute<T> = { [K in keyof T]: T[K] } | never
+
+    // type AllKeys<T> = T extends any ? keyof T : never
+
+    // export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+    //   {
+    //     [K in Keys]: T[Keys]
+    //   } & {
+    //     [K in AllKeys<T>]?: T extends any
+    //       ? K extends keyof T
+    //         ? T[K]
+    //         : never
+    //       : never
+    //   }
+    // >
     function last(arr) {
       return arr[arr.length - 1];
     }
@@ -659,6 +676,9 @@
         super(options);
       }
     }
+    function createRouteMask(opts) {
+      return opts;
+    }
 
     class FileRoute {
       constructor(path) {
@@ -808,6 +828,9 @@
     class Router {
       #unsubHistory;
       resetNextScroll = false;
+      tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+      // nextTemporaryLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>
+
       constructor(options) {
         this.options = {
           defaultPreloadDelay: 50,
@@ -856,15 +879,15 @@
         });
         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
           });
         }
@@ -907,8 +930,10 @@
         };
       };
       #onFocus = () => {
-        if (this.options.refetchOnWindowFocus ?? true) {
-          this.invalidate();
+        if (this.options.reloadOnWindowFocus ?? true) {
+          this.invalidate({
+            __fromFocus: true
+          });
         }
       };
       update = opts => {
@@ -947,14 +972,6 @@
         }
         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);
@@ -1013,7 +1030,7 @@
           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
@@ -1062,10 +1079,19 @@
         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];
@@ -1073,7 +1099,7 @@
         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
         });
@@ -1083,11 +1109,11 @@
             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 [last(matches), matches];
       };
       cleanMatches = () => {
         const now = Date.now();
@@ -1241,8 +1267,8 @@
         });
         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
@@ -1322,8 +1348,9 @@
             }
           }
         } catch (err) {
-          if (!opts?.preload) {
-            this.navigate(err);
+          if (isRedirect(err)) {
+            if (!opts?.preload) this.navigate(err);
+            return;
           }
           throw err;
         }
@@ -1432,13 +1459,13 @@
           isExternal = true;
         } catch (e) {}
         invariant(!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
         });
       };
@@ -1447,7 +1474,7 @@
           ...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;
         }
@@ -1480,6 +1507,7 @@
         preloadDelay: userPreloadDelay,
         disabled,
         state,
+        mask,
         resetScroll
       }) => {
         // If this link simply reloads the current route,
@@ -1503,9 +1531,10 @@
           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;
 
@@ -1527,7 +1556,11 @@
             e.preventDefault();
 
             // All is well? Navigate!
-            this.#commitLocation(nextOpts);
+            this.#commitLocation({
+              ...next,
+              replace,
+              resetScroll
+            });
           }
         };
 
@@ -1740,84 +1773,180 @@
         });
       };
       #parseLocation = previousLocation => {
-        let {
+        const parse = ({
           pathname,
           search,
           hash,
           state
-        } = this.history.location;
-        const parsedSearch = this.options.parseSearch(search);
-        return {
-          pathname: pathname,
-          searchStr: search,
-          search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-          hash: hash.split('#').reverse()[0] ?? '',
-          href: `${pathname}${search}${hash}`,
-          state: state,
-          key: state?.key || '__init__'
+        }) => {
+          const parsedSearch = this.options.parseSearch(search);
+          return {
+            pathname: pathname,
+            searchStr: search,
+            search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+            hash: hash.split('#').reverse()[0] ?? '',
+            href: `${pathname}${search}${hash}`,
+            state: replaceEqualDeep(previousLocation?.state, state)
+          };
         };
+        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
+          };
+        }
+        return location;
       };
-      #buildLocation = (dest = {}) => {
-        dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
-        const fromPathname = dest.fromCurrent ? this.state.location.pathname : dest.from ?? this.state.location.pathname;
-        let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
-        const fromMatches = this.matchRoutes(this.state.location.pathname, this.state.location.search);
-        const prevParams = {
-          ...last(fromMatches)?.params
+      buildLocation = (opts = {}) => {
+        const build = (dest = {}, matches) => {
+          const from = this.state.location;
+          const fromPathname = dest.from ?? from.pathname;
+          let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
+          const fromMatches = this.matchRoutes(fromPathname, from.search);
+          const prevParams = {
+            ...last(fromMatches)?.params
+          };
+          let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+          if (nextParams) {
+            matches?.map(d => this.getRoute(d.routeId).options.stringifyParams).filter(Boolean).forEach(fn => {
+              nextParams = {
+                ...nextParams,
+                ...fn(nextParams)
+              };
+            });
+          }
+          pathname = 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), from.search) : from.search;
+
+          // Then the link/navigate function
+          const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+          : dest.search ? 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 = replaceEqualDeep(from.search, postFilteredSearch);
+          const searchStr = this.options.stringifySearch(search);
+          const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+          const hashStr = hash ? `#${hash}` : '';
+          let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+          nextState = replaceEqualDeep(from.state, nextState);
+          return {
+            pathname,
+            search,
+            searchStr,
+            state: nextState,
+            hash,
+            href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+            unmaskOnReload: dest.unmaskOnReload
+          };
         };
-        let nextParams = (dest.params ?? true) === true ? prevParams : 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 buildWithMatches = (dest = {}, maskedDest) => {
+          let next = build(dest);
+          let maskedNext = maskedDest ? build(maskedDest) : undefined;
+          if (!maskedNext) {
+            let params = {};
+            let foundMask = this.options.routeMasks?.find(d => {
+              const match = matchPathname(this.basepath, next.pathname, {
+                to: d.from,
+                fuzzy: false
+              });
+              if (match) {
+                params = match;
+                return true;
+              }
+              return false;
+            });
+            if (foundMask) {
+              foundMask = {
+                ...foundMask,
+                from: interpolatePath(foundMask.from, params)
+              };
+              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, {
+            ...pick(opts, ['from']),
+            ...opts.mask
           });
         }
-        pathname = 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) ?? [];
-
-        // Pre filters first
-        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.location.search) : this.state.location.search;
-
-        // Then the link/navigate function
-        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-        : dest.search ? 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 = replaceEqualDeep(this.state.location.search, postFilteredSearch);
-        const searchStr = this.options.stringifySearch(search);
-        const hash = dest.hash === true ? this.state.location.hash : functionalUpdate(dest.hash, this.state.location.hash);
-        const hashStr = hash ? `#${hash}` : '';
-        const nextState = dest.state === true ? this.state.location.state : functionalUpdate(dest.state, this.state.location.state);
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: nextState,
-          hash,
-          href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
-          key: dest.key
-        };
+        return buildWithMatches(opts);
+      };
+      #buildAndCommitLocation = ({
+        replace,
+        resetScroll,
+        ...rest
+      } = {}) => {
+        const location = this.buildLocation(rest);
+        return this.#commitLocation({
+          ...location,
+          replace,
+          resetScroll
+        });
       };
-      #commitLocation = async location => {
-        const next = this.buildNext(location);
+      #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 => {
@@ -1866,25 +1995,26 @@
           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();
         }
       };
     }
@@ -1951,7 +2081,7 @@
     let cache;
     let pathDidChange = false;
     const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
-    const defaultGetKey = location => location.key;
+    const defaultGetKey = location => location.state.key;
     function watchScrollPositions(router, opts) {
       const getKey = opts?.getKey || defaultGetKey;
       if (sessionsStorage) {
@@ -2101,6 +2231,7 @@
     exports.createBrowserHistory = createBrowserHistory;
     exports.createHashHistory = createHashHistory;
     exports.createMemoryHistory = createMemoryHistory;
+    exports.createRouteMask = createRouteMask;
     exports.decode = decode;
     exports.defaultParseSearch = defaultParseSearch;
     exports.defaultStringifySearch = defaultStringifySearch;