@tanstack/react-router 0.0.1-beta.1 → 0.0.1-beta.11

package/build/cjs/router-core/build/esm/index.js

@@ -944,6 +944,12 @@ function functionalUpdate(updater, previous) {
 
   return updater;
 }
+function pick(parent, keys) {
+  return keys.reduce((obj, key) => {
+    obj[key] = parent[key];
+    return obj;
+  }, {});
+}
 
 function joinPaths(paths) {
   return cleanPath(paths.filter(Boolean).join('/'));
@@ -1170,6 +1176,7 @@ function toValue(mix) {
   var str = decodeURIComponent(mix);
   if (str === 'false') return false;
   if (str === 'true') return true;
+  if (str.charAt(0) === '0') return str;
   return +str * 0 === 0 ? +str : str;
 }
 
@@ -1220,7 +1227,7 @@ function createRoute(routeConfig, options, parent, router) {
 
   const action = router.state.actions[id] || (() => {
     router.state.actions[id] = {
-      pending: [],
+      submissions: [],
       submit: async (submission, actionOpts) => {
         var _actionOpts$invalidat;
 
@@ -1229,18 +1236,20 @@ function createRoute(routeConfig, options, parent, router) {
         }
 
         const invalidate = (_actionOpts$invalidat = actionOpts == null ? void 0 : actionOpts.invalidate) != null ? _actionOpts$invalidat : true;
+
+        if (!(actionOpts != null && actionOpts.multi)) {
+          action.submissions = action.submissions.filter(d => d.isMulti);
+        }
+
         const actionState = {
           submittedAt: Date.now(),
           status: 'pending',
-          submission
+          submission,
+          isMulti: !!(actionOpts != null && actionOpts.multi)
         };
         action.current = actionState;
         action.latest = actionState;
-        action.pending.push(actionState);
-        router.state = _extends({}, router.state, {
-          currentAction: actionState,
-          latestAction: actionState
-        });
+        action.submissions.push(actionState);
         router.notify();
 
         try {
@@ -1262,11 +1271,6 @@ function createRoute(routeConfig, options, parent, router) {
           actionState.error = err;
           actionState.status = 'error';
         } finally {
-          action.pending = action.pending.filter(d => d !== actionState);
-          router.removeActionQueue.push({
-            action,
-            actionState
-          });
           router.notify();
         }
       }
@@ -1341,15 +1345,6 @@ function createRoute(routeConfig, options, parent, router) {
   });
   return route;
 }
-function cascadeLoaderData(matches) {
-  matches.forEach((match, index) => {
-    const parent = matches[index - 1];
-
-    if (parent) {
-      match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
-    }
-  });
-}
 
 const rootRouteId = '__root__';
 const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
@@ -1415,6 +1410,7 @@ function createRouteMatch(router, route, opts) {
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
+    // pendingActions: [],
     getIsInvalid: () => {
       const now = Date.now();
       return routeMatch.isInvalid || routeMatch.invalidAt < now;
@@ -1454,17 +1450,6 @@ function createRouteMatch(router, route, opts) {
         clearTimeout(routeMatch.__.pendingMinTimeout);
         delete routeMatch.__.pendingMinPromise;
       },
-      // setParentMatch: (parentMatch?: RouteMatch) => {
-      //   routeMatch.parentMatch = parentMatch
-      // },
-      // addChildMatch: (childMatch: RouteMatch) => {
-      //   if (
-      //     routeMatch.childMatches.find((d) => d.matchId === childMatch.matchId)
-      //   ) {
-      //     return
-      //   }
-      //   routeMatch.childMatches.push(childMatch)
-      // },
       validate: () => {
         var _routeMatch$parentMat, _routeMatch$parentMat2;
 
@@ -1472,9 +1457,11 @@ function createRouteMatch(router, route, opts) {
         const parentSearch = (_routeMatch$parentMat = (_routeMatch$parentMat2 = routeMatch.parentMatch) == null ? void 0 : _routeMatch$parentMat2.search) != null ? _routeMatch$parentMat : router.location.search;
 
         try {
+          var _validator;
+
           const prevSearch = routeMatch.routeSearch;
           const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-          let nextSearch = replaceEqualDeep(prevSearch, validator == null ? void 0 : validator(parentSearch)); // Invalidate route matches when search param stability changes
+          let nextSearch = replaceEqualDeep(prevSearch, (_validator = validator == null ? void 0 : validator(parentSearch)) != null ? _validator : {}); // Invalidate route matches when search param stability changes
 
           if (prevSearch !== nextSearch) {
             routeMatch.isInvalid = true;
@@ -1482,6 +1469,13 @@ function createRouteMatch(router, route, opts) {
 
           routeMatch.routeSearch = nextSearch;
           routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
+          elementTypes.map(async type => {
+            const routeElement = routeMatch.options[type];
+
+            if (typeof routeMatch.__[type] !== 'function') {
+              routeMatch.__[type] = routeElement;
+            }
+          });
         } catch (err) {
           console.error(err);
           const error = new Error('Invalid search params found', {
@@ -1527,7 +1521,7 @@ function createRouteMatch(router, route, opts) {
 
       if (routeMatch.status === 'success' && routeMatch.getIsInvalid() || routeMatch.status === 'error' || routeMatch.status === 'idle') {
         const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-        routeMatch.fetch({
+        await routeMatch.fetch({
           maxAge
         });
       }
@@ -1550,7 +1544,7 @@ function createRouteMatch(router, route, opts) {
         routeMatch.isFetching = true;
         routeMatch.__.resolve = resolve;
 
-        const loaderPromise = (async () => {
+        routeMatch.__.loaderDataPromise = (async () => {
           // Load the elements and data in parallel
           routeMatch.__.elementsPromise = (async () => {
             // then run all element and data loaders in parallel
@@ -1558,11 +1552,9 @@ function createRouteMatch(router, route, opts) {
             await Promise.all(elementTypes.map(async type => {
               const routeElement = routeMatch.options[type];
 
-              if (routeMatch.__[type]) {
-                return;
+              if (typeof routeMatch.__[type] === 'function') {
+                routeMatch.__[type] = await router.options.createElement(routeElement);
               }
-
-              routeMatch.__[type] = await router.options.createElement(routeElement);
             }));
           })();
 
@@ -1578,7 +1570,7 @@ function createRouteMatch(router, route, opts) {
                 });
 
                 if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise;
+                  return routeMatch.__.loadPromise;
                 }
 
                 routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
@@ -1590,7 +1582,7 @@ function createRouteMatch(router, route, opts) {
               routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
             } catch (err) {
               if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise;
+                return routeMatch.__.loadPromise;
               }
 
               if (process.env.NODE_ENV !== 'production') {
@@ -1607,7 +1599,7 @@ function createRouteMatch(router, route, opts) {
             await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
 
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise;
+              return routeMatch.__.loadPromise;
             }
 
             if (routeMatch.__.pendingMinPromise) {
@@ -1616,7 +1608,7 @@ function createRouteMatch(router, route, opts) {
             }
           } finally {
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise;
+              return routeMatch.__.loadPromise;
             }
 
             routeMatch.__.cancelPending();
@@ -1628,16 +1620,16 @@ function createRouteMatch(router, route, opts) {
           }
         })();
 
-        routeMatch.__.loaderPromise = loaderPromise;
-        await loaderPromise;
+        await routeMatch.__.loaderDataPromise;
 
         if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loaderPromise;
+          return routeMatch.__.loadPromise;
         }
 
-        delete routeMatch.__.loaderPromise;
+        delete routeMatch.__.loaderDataPromise;
       });
-      return await routeMatch.__.loadPromise;
+      await routeMatch.__.loadPromise;
+      delete routeMatch.__.loadPromise;
     }
   });
 
@@ -1698,9 +1690,22 @@ function stringifySearchWith(stringify) {
 
 var _window$document;
 // Detect if we're in the DOM
-const isServer = Boolean(typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement)); // This is the default history object if none is defined
+const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement); // This is the default history object if none is defined
+
+const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrowserHistory();
 
-const createDefaultHistory = () => !isServer ? createBrowserHistory() : createMemoryHistory();
+function getInitialRouterState() {
+  return {
+    status: 'idle',
+    location: null,
+    matches: [],
+    actions: {},
+    loaders: {},
+    lastUpdated: Date.now(),
+    isFetching: false,
+    isPreloading: false
+  };
+}
 
 function createRouter(userOptions) {
   var _userOptions$stringif, _userOptions$parseSea;
@@ -1721,7 +1726,6 @@ function createRouter(userOptions) {
     history,
     options: originalOptions,
     listeners: [],
-    removeActionQueue: [],
     // Resolved after construction
     basepath: '',
     routeTree: undefined,
@@ -1732,16 +1736,10 @@ function createRouter(userOptions) {
     navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
     matchCache: {},
-    state: {
-      status: 'idle',
-      location: null,
-      matches: [],
-      actions: {},
-      loaders: {},
-      loaderData: {},
-      lastUpdated: Date.now(),
-      isFetching: false,
-      isPreloading: false
+    state: getInitialRouterState(),
+    reset: () => {
+      router.state = getInitialRouterState();
+      router.notify();
     },
     startedLoadingAt: Date.now(),
     subscribe: listener => {
@@ -1759,7 +1757,27 @@ function createRouter(userOptions) {
         isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
       });
       cascadeLoaderData(router.state.matches);
-      router.listeners.forEach(listener => listener());
+      router.listeners.forEach(listener => listener(router));
+    },
+    dehydrateState: () => {
+      return _extends({}, pick(router.state, ['status', 'location', 'lastUpdated']), {
+        matches: router.state.matches.map(match => pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
+      });
+    },
+    hydrateState: dehydratedState => {
+      // Match the routes
+      const matches = router.matchRoutes(router.location.pathname, {
+        strictParseParams: true
+      });
+      matches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedState.matches[index];
+        invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
+        Object.assign(match, dehydratedMatch);
+      });
+      router.loadMatches(matches);
+      router.state = _extends({}, router.state, dehydratedState, {
+        matches
+      });
     },
     mount: () => {
       const next = router.__.buildLocation({
@@ -1772,12 +1790,11 @@ function createRouter(userOptions) {
 
       if (next.href !== router.location.href) {
         router.__.commitLocation(next, true);
-      } else {
-        router.loadLocation();
-      }
+      } // router.load()
 
-      const unsub = history.listen(event => {
-        router.loadLocation(router.__.parseLocation(event.location, router.location));
+
+      const unsub = router.history.listen(event => {
+        router.load(router.__.parseLocation(event.location, router.location));
       }); // addEventListener does not exist in React Native, but window does
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 
@@ -1788,16 +1805,30 @@ function createRouter(userOptions) {
       }
 
       return () => {
-        unsub(); // Be sure to unsubscribe if a new handler is set
+        unsub();
 
-        window.removeEventListener('visibilitychange', router.onFocus);
-        window.removeEventListener('focus', router.onFocus);
+        if (!isServer && window.removeEventListener) {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', router.onFocus);
+          window.removeEventListener('focus', router.onFocus);
+        }
       };
     },
     onFocus: () => {
-      router.loadLocation();
+      router.load();
     },
     update: opts => {
+      const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
+
+      if (!router.location || newHistory) {
+        if (opts != null && opts.history) {
+          router.history = opts.history;
+        }
+
+        router.location = router.__.parseLocation(router.history.location);
+        router.state.location = router.location;
+      }
+
       Object.assign(router.options, opts);
       const {
         basepath,
@@ -1818,35 +1849,19 @@ function createRouter(userOptions) {
         match.cancel();
       });
     },
-    loadLocation: async next => {
+    load: async next => {
       const id = Math.random();
       router.startedLoadingAt = id;
 
       if (next) {
         // Ingest the new location
         router.location = next;
-      } // Clear out old actions
+      } // Cancel any pending matches
 
 
-      router.removeActionQueue.forEach(_ref => {
-        let {
-          action,
-          actionState
-        } = _ref;
-
-        if (router.state.currentAction === actionState) {
-          router.state.currentAction = undefined;
-        }
-
-        if (action.current === actionState) {
-          action.current = undefined;
-        }
-      });
-      router.removeActionQueue = []; // Cancel any pending matches
-
       router.cancelMatches(); // Match the routes
 
-      const matches = router.matchRoutes(location.pathname, {
+      const matches = router.matchRoutes(router.location.pathname, {
         strictParseParams: true
       });
       router.state = _extends({}, router.state, {
@@ -1877,9 +1892,12 @@ function createRouter(userOptions) {
           exiting.push(d);
         }
       });
+      const entering = matches.filter(d => {
+        return !previousMatches.find(dd => dd.matchId === d.matchId);
+      });
       const now = Date.now();
       exiting.forEach(d => {
-        var _ref2, _d$options$loaderGcMa, _ref3, _d$options$loaderMaxA;
+        var _ref, _d$options$loaderGcMa, _ref2, _d$options$loaderMaxA;
 
         d.__.onExit == null ? void 0 : d.__.onExit({
           params: d.params,
@@ -1891,7 +1909,7 @@ function createRouter(userOptions) {
           d.error = undefined;
         }
 
-        const gc = Math.max((_ref2 = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref2 : 0, (_ref3 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0);
+        const gc = Math.max((_ref = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref : 0, (_ref2 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref2 : 0);
 
         if (gc > 0) {
           router.matchCache[d.matchId] = {
@@ -1906,9 +1924,6 @@ function createRouter(userOptions) {
           search: d.routeSearch
         });
       });
-      const entering = matches.filter(d => {
-        return !previousMatches.find(dd => dd.matchId === d.matchId);
-      });
       entering.forEach(d => {
         d.__.onExit = d.options.onMatch == null ? void 0 : d.options.onMatch({
           params: d.params,
@@ -1917,16 +1932,18 @@ function createRouter(userOptions) {
         delete router.matchCache[d.matchId];
       });
 
-      if (matches.some(d => d.status === 'loading')) {
-        router.notify();
-        await Promise.all(matches.map(d => d.__.loaderPromise || Promise.resolve()));
-      }
-
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
         return;
       }
 
+      matches.forEach(match => {
+        // Clear actions
+        if (match.action) {
+          match.action.current = undefined;
+          match.action.submissions = [];
+        }
+      });
       router.state = _extends({}, router.state, {
         location: router.location,
         matches,
@@ -1967,7 +1984,7 @@ function createRouter(userOptions) {
       return matches;
     },
     preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
-      var _ref4, _ref5, _loaderOpts$maxAge, _ref6, _ref7, _loaderOpts$gcMaxAge;
+      var _ref3, _ref4, _loaderOpts$maxAge, _ref5, _ref6, _loaderOpts$gcMaxAge;
 
       if (navigateOpts === void 0) {
         navigateOpts = router.location;
@@ -1979,8 +1996,8 @@ function createRouter(userOptions) {
       });
       await router.loadMatches(matches, {
         preload: true,
-        maxAge: (_ref4 = (_ref5 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref5 : router.options.defaultLoaderMaxAge) != null ? _ref4 : 0,
-        gcMaxAge: (_ref6 = (_ref7 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref7 : router.options.defaultLoaderGcMaxAge) != null ? _ref6 : 0
+        maxAge: (_ref3 = (_ref4 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref4 : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0,
+        gcMaxAge: (_ref5 = (_ref6 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref6 : router.options.defaultLoaderGcMaxAge) != null ? _ref5 : 0
       });
       return matches;
     },
@@ -2082,9 +2099,12 @@ function createRouter(userOptions) {
 
         if (match.status === 'loading') {
           // If requested, start the pending timers
-          if (loaderOpts != null && loaderOpts.withPending) match.__.startPending(); // Wait for the first sign of activity from the match
-          // This might be completion, error, or a pending state
+          if (loaderOpts != null && loaderOpts.withPending) match.__.startPending();
+        }
 
+        if (match.__.loadPromise) {
+          // Wait for the first sign of activity from the match
+          // This might be completion, error, or a pending state
           await match.__.loadPromise;
         }
       });
@@ -2135,7 +2155,7 @@ function createRouter(userOptions) {
         to: next.pathname
       }));
     },
-    navigate: async _ref8 => {
+    navigate: async _ref7 => {
       let {
         from,
         to = '.',
@@ -2143,7 +2163,7 @@ function createRouter(userOptions) {
         hash,
         replace,
         params
-      } = _ref8;
+      } = _ref7;
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
       // If this `to` is a valid external URL, return
@@ -2167,8 +2187,8 @@ function createRouter(userOptions) {
         params
       });
     },
-    buildLink: _ref9 => {
-      var _preload, _ref10;
+    buildLink: _ref8 => {
+      var _preload, _ref9;
 
       let {
         from,
@@ -2184,7 +2204,7 @@ function createRouter(userOptions) {
         preloadGcMaxAge: userPreloadGcMaxAge,
         preloadDelay: userPreloadDelay,
         disabled
-      } = _ref9;
+      } = _ref8;
 
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
@@ -2208,7 +2228,7 @@ function createRouter(userOptions) {
       };
       const next = router.buildNext(nextOpts);
       preload = (_preload = preload) != null ? _preload : router.options.defaultPreload;
-      const preloadDelay = (_ref10 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref10 : 0; // Compare path/hash for matches
+      const preloadDelay = (_ref9 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref9 : 0; // Compare path/hash for matches
 
       const pathIsEqual = router.state.location.pathname === next.pathname;
       const currentPathSplit = router.state.location.pathname.split('/');
@@ -2309,11 +2329,7 @@ function createRouter(userOptions) {
         const recurseRoutes = (routeConfigs, parent) => {
           return routeConfigs.map(routeConfig => {
             const routeOptions = routeConfig.options;
-            const route = createRoute(routeConfig, routeOptions, parent, router); // {
-            //   pendingMs: routeOptions.pendingMs ?? router.defaultPendingMs,
-            //   pendingMinMs: routeOptions.pendingMinMs ?? router.defaultPendingMinMs,
-            // }
-
+            const route = createRoute(routeConfig, routeOptions, parent, router);
             const existingRoute = router.routesById[route.routeId];
 
             if (existingRoute) {
@@ -2448,8 +2464,6 @@ function createRouter(userOptions) {
       }
     }
   };
-  router.location = router.__.parseLocation(history.location);
-  router.state.location = router.location;
   router.update(userOptions); // Allow frameworks to hook into the router creation
 
   router.options.createRouter == null ? void 0 : router.options.createRouter(router);
@@ -2460,7 +2474,16 @@ function isCtrlEvent(e) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
 
-exports.cascadeLoaderData = cascadeLoaderData;
+function cascadeLoaderData(matches) {
+  matches.forEach((match, index) => {
+    const parent = matches[index - 1];
+
+    if (parent) {
+      match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
+    }
+  });
+}
+
 exports.cleanPath = cleanPath;
 exports.createBrowserHistory = createBrowserHistory;
 exports.createHashHistory = createHashHistory;
@@ -2482,6 +2505,7 @@ exports.matchByPath = matchByPath;
 exports.matchPathname = matchPathname;
 exports.parsePathname = parsePathname;
 exports.parseSearchWith = parseSearchWith;
+exports.pick = pick;
 exports.replaceEqualDeep = replaceEqualDeep;
 exports.resolvePath = resolvePath;
 exports.rootRouteId = rootRouteId;