@tanstack/react-router 0.0.1-beta.2 → 0.0.1-beta.21

package/build/esm/index.js

@@ -975,6 +975,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('/'));
@@ -1201,6 +1207,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;
 }
 
@@ -1251,7 +1258,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;
 
@@ -1260,18 +1267,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 {
@@ -1293,11 +1302,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();
         }
       }
@@ -1372,15 +1376,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) {
@@ -1432,7 +1427,7 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
   };
 };
 
-const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
 function createRouteMatch(router, route, opts) {
   const routeMatch = _extends({}, route, opts, {
     router,
@@ -1442,10 +1437,10 @@ function createRouteMatch(router, route, opts) {
     status: 'idle',
     routeLoaderData: {},
     loaderData: {},
-    isPending: false,
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
+    // pendingActions: [],
     getIsInvalid: () => {
       const now = Date.now();
       return routeMatch.isInvalid || routeMatch.invalidAt < now;
@@ -1459,43 +1454,6 @@ function createRouteMatch(router, route, opts) {
 
         routeMatch.router.notify();
       },
-      startPending: () => {
-        var _routeMatch$options$p, _routeMatch$options$p2;
-
-        const pendingMs = (_routeMatch$options$p = routeMatch.options.pendingMs) != null ? _routeMatch$options$p : router.options.defaultPendingMs;
-        const pendingMinMs = (_routeMatch$options$p2 = routeMatch.options.pendingMinMs) != null ? _routeMatch$options$p2 : router.options.defaultPendingMinMs;
-
-        if (routeMatch.__.pendingTimeout || routeMatch.status !== 'loading' || typeof pendingMs === 'undefined') {
-          return;
-        }
-
-        routeMatch.__.pendingTimeout = setTimeout(() => {
-          routeMatch.isPending = true;
-
-          routeMatch.__.resolve();
-
-          if (typeof pendingMinMs !== 'undefined') {
-            routeMatch.__.pendingMinPromise = new Promise(r => routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs));
-          }
-        }, pendingMs);
-      },
-      cancelPending: () => {
-        routeMatch.isPending = false;
-        clearTimeout(routeMatch.__.pendingTimeout);
-        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;
 
@@ -1503,9 +1461,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;
@@ -1513,6 +1473,13 @@ function createRouteMatch(router, route, opts) {
 
           routeMatch.routeSearch = nextSearch;
           routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
+          componentTypes.map(async type => {
+            const component = routeMatch.options[type];
+
+            if (typeof routeMatch.__[type] !== 'function') {
+              routeMatch.__[type] = component;
+            }
+          });
         } catch (err) {
           console.error(err);
           const error = new Error('Invalid search params found', {
@@ -1530,14 +1497,16 @@ function createRouteMatch(router, route, opts) {
       var _routeMatch$__$abortC;
 
       (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-
-      routeMatch.__.cancelPending();
     },
     invalidate: () => {
       routeMatch.isInvalid = true;
     },
     hasLoaders: () => {
-      return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
+      return !!(route.options.loader || componentTypes.some(d => {
+        var _route$options$d;
+
+        return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
+      }));
     },
     load: async loaderOpts => {
       const now = Date.now();
@@ -1558,17 +1527,25 @@ 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
         });
       }
     },
     fetch: async opts => {
-      const id = '' + Date.now() + Math.random();
-      routeMatch.__.latestId = id; // If the match was in an error state, set it
+      const loadId = '' + Date.now() + Math.random();
+      routeMatch.__.latestId = loadId;
+
+      const checkLatest = async () => {
+        if (loadId !== routeMatch.__.latestId) {
+          // warning(true, 'Data loader is out of date!')
+          return new Promise(() => {});
+        }
+      }; // If the match was in an error state, set it
       // to a loading state again. Otherwise, keep it
       // as loading or resolved
 
+
       if (routeMatch.status === 'idle') {
         routeMatch.status = 'loading';
       } // We started loading the route, so it's no longer invalid
@@ -1581,94 +1558,66 @@ function createRouteMatch(router, route, opts) {
         routeMatch.isFetching = true;
         routeMatch.__.resolve = resolve;
 
-        const loaderPromise = (async () => {
-          // Load the elements and data in parallel
-          routeMatch.__.elementsPromise = (async () => {
-            // then run all element and data loaders in parallel
-            // For each element type, potentially load it asynchronously
-            await Promise.all(elementTypes.map(async type => {
-              const routeElement = routeMatch.options[type];
-
-              if (routeMatch.__[type]) {
-                return;
-              }
-
-              routeMatch.__[type] = await router.options.createElement(routeElement);
-            }));
-          })();
-
-          routeMatch.__.dataPromise = Promise.resolve().then(async () => {
-            try {
-              var _ref, _ref2, _opts$maxAge;
+        routeMatch.__.componentsPromise = (async () => {
+          // then run all component and data loaders in parallel
+          // For each component type, potentially load it asynchronously
+          await Promise.all(componentTypes.map(async type => {
+            var _routeMatch$__$type;
 
-              if (routeMatch.options.loader) {
-                const data = await routeMatch.options.loader({
-                  params: routeMatch.params,
-                  search: routeMatch.routeSearch,
-                  signal: routeMatch.__.abortController.signal
-                });
+            const component = routeMatch.options[type];
 
-                if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise;
-                }
-
-                routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-              }
-
-              routeMatch.error = undefined;
-              routeMatch.status = 'success';
-              routeMatch.updatedAt = Date.now();
-              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;
-              }
-
-              if (process.env.NODE_ENV !== 'production') {
-                console.error(err);
-              }
-
-              routeMatch.error = err;
-              routeMatch.status = 'error';
-              routeMatch.updatedAt = Date.now();
+            if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
+              routeMatch.__[type] = await router.options.loadComponent(component);
             }
-          });
+          }));
+        })();
 
+        routeMatch.__.dataPromise = Promise.resolve().then(async () => {
           try {
-            await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
-
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise;
-            }
+            var _ref, _ref2, _opts$maxAge;
 
-            if (routeMatch.__.pendingMinPromise) {
-              await routeMatch.__.pendingMinPromise;
-              delete routeMatch.__.pendingMinPromise;
-            }
-          } finally {
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise;
+            if (routeMatch.options.loader) {
+              const data = await router.loadMatchData(routeMatch);
+              await checkLatest();
+              routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
             }
 
-            routeMatch.__.cancelPending();
+            routeMatch.error = undefined;
+            routeMatch.status = 'success';
+            routeMatch.updatedAt = Date.now();
+            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);
+            return routeMatch.routeLoaderData;
+          } catch (err) {
+            await checkLatest();
 
-            routeMatch.isPending = false;
-            routeMatch.isFetching = false;
+            if (process.env.NODE_ENV !== 'production') {
+              console.error(err);
+            }
 
-            routeMatch.__.notify();
+            routeMatch.error = err;
+            routeMatch.status = 'error';
+            routeMatch.updatedAt = Date.now();
+            throw err;
           }
-        })();
+        });
 
-        routeMatch.__.loaderPromise = loaderPromise;
-        await loaderPromise;
+        const after = async () => {
+          await checkLatest();
+          routeMatch.isFetching = false;
+          delete routeMatch.__.loadPromise;
 
-        if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loaderPromise;
-        }
+          routeMatch.__.notify();
+        };
 
-        delete routeMatch.__.loaderPromise;
+        try {
+          await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
+          after();
+        } catch (_unused) {
+          after();
+        }
       });
-      return await routeMatch.__.loadPromise;
+      await routeMatch.__.loadPromise;
+      await checkLatest();
     }
   });
 
@@ -1729,9 +1678,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;
@@ -1749,30 +1711,24 @@ function createRouter(userOptions) {
   });
 
   let router = {
+    types: undefined,
+    // public api
     history,
     options: originalOptions,
     listeners: [],
-    removeActionQueue: [],
     // Resolved after construction
     basepath: '',
     routeTree: undefined,
     routesById: {},
     location: undefined,
-    allRouteInfo: undefined,
     //
     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 => {
@@ -1785,13 +1741,39 @@ function createRouter(userOptions) {
       return router.routesById[id];
     },
     notify: () => {
-      router.state = _extends({}, router.state, {
-        isFetching: router.state.status === 'loading' || router.state.matches.some(d => d.isFetching),
-        isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
-      });
+      const isFetching = router.state.status === 'loading' || router.state.matches.some(d => d.isFetching);
+      const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId));
+
+      if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
+        router.state = _extends({}, router.state, {
+          isFetching,
+          isPreloading
+        });
+      }
+
       cascadeLoaderData(router.state.matches);
       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);
+      });
+      matches.forEach(match => match.__.validate());
+      router.state = _extends({}, router.state, dehydratedState, {
+        matches
+      });
+    },
     mount: () => {
       const next = router.__.buildLocation({
         to: '.',
@@ -1803,12 +1785,14 @@ function createRouter(userOptions) {
 
       if (next.href !== router.location.href) {
         router.__.commitLocation(next, true);
-      } else {
-        router.loadLocation();
       }
 
-      const unsub = history.listen(event => {
-        router.loadLocation(router.__.parseLocation(event.location, router.location));
+      if (!router.state.matches.length) {
+        router.load();
+      }
+
+      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
 
@@ -1819,16 +1803,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,
@@ -1849,49 +1847,41 @@ 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, {
-        pending: {
+
+      if (typeof document !== 'undefined') {
+        router.state = _extends({}, router.state, {
+          pending: {
+            matches: matches,
+            location: router.location
+          },
+          status: 'loading'
+        });
+      } else {
+        router.state = _extends({}, router.state, {
           matches: matches,
-          location: router.location
-        },
-        status: 'loading'
-      });
+          location: router.location,
+          status: 'loading'
+        });
+      }
+
       router.notify(); // Load the matches
 
-      await router.loadMatches(matches, {
-        withPending: true
-      });
+      await router.loadMatches(matches);
 
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
@@ -1908,9 +1898,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,
@@ -1922,7 +1915,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] = {
@@ -1937,9 +1930,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,
@@ -1948,16 +1938,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,
@@ -1998,7 +1990,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;
@@ -2010,8 +2002,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;
     },
@@ -2087,6 +2079,7 @@ function createRouter(userOptions) {
           const interpolatedPath = interpolatePath(foundRoute.routePath, params);
           const matchId = interpolatePath(foundRoute.routeId, params, true);
           const match = existingMatches.find(d => d.matchId === matchId) || ((_router$matchCache$ma = router.matchCache[matchId]) == null ? void 0 : _router$matchCache$ma.match) || createRouteMatch(router, foundRoute, {
+            parentMatch,
             matchId,
             params,
             pathname: joinPaths([pathname, interpolatedPath])
@@ -2110,18 +2103,51 @@ function createRouter(userOptions) {
         match.__.validate();
 
         match.load(loaderOpts);
+        const search = match.search;
 
-        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 (search.__data && search.__data.matchId !== match.matchId) {
+          return;
+        }
 
+        if (match.__.loadPromise) {
+          // Wait for the first sign of activity from the match
           await match.__.loadPromise;
         }
       });
       router.notify();
       await Promise.all(matchPromises);
     },
+    loadMatchData: async routeMatch => {
+      if (isServer || !router.options.useServerData) {
+        var _await$routeMatch$opt;
+
+        return (_await$routeMatch$opt = await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
+          // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
+          params: routeMatch.params,
+          search: routeMatch.routeSearch,
+          signal: routeMatch.__.abortController.signal
+        }))) != null ? _await$routeMatch$opt : {};
+      } else {
+        const next = router.buildNext({
+          to: '.',
+          search: d => _extends({}, d != null ? d : {}, {
+            __data: {
+              matchId: routeMatch.matchId
+            }
+          })
+        });
+        const res = await fetch(next.href, {
+          method: 'GET' // signal: routeMatch.__.abortController.signal,
+
+        });
+
+        if (res.ok) {
+          return res.json();
+        }
+
+        throw new Error('Failed to fetch match data');
+      }
+    },
     invalidateRoute: opts => {
       var _router$state$pending5, _router$state$pending6;
 
@@ -2166,7 +2192,7 @@ function createRouter(userOptions) {
         to: next.pathname
       }));
     },
-    navigate: async _ref8 => {
+    navigate: async _ref7 => {
       let {
         from,
         to = '.',
@@ -2174,7 +2200,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
@@ -2198,8 +2224,8 @@ function createRouter(userOptions) {
         params
       });
     },
-    buildLink: _ref9 => {
-      var _preload, _ref10;
+    buildLink: _ref8 => {
+      var _preload, _ref9;
 
       let {
         from,
@@ -2215,7 +2241,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
@@ -2239,7 +2265,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('/');
@@ -2340,11 +2366,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) {
@@ -2454,9 +2476,9 @@ function createRouter(userOptions) {
             pathname: next.pathname,
             hash: next.hash,
             search: next.searchStr
-          }, {
+          }, _extends({
             id
-          });
+          }, next.state));
         } else {
           history.push({
             pathname: next.pathname,
@@ -2479,8 +2501,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);
@@ -2491,15 +2511,51 @@ function isCtrlEvent(e) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
 
+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 _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
       _excluded2 = ["pending", "caseSensitive", "children"],
       _excluded3 = ["children", "router"];
+function lazy(importer) {
+  const lazyComp = /*#__PURE__*/React.lazy(importer);
+  let promise;
+  let resolvedComp;
+  const forwardedComp = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const resolvedCompRef = React.useRef(resolvedComp || lazyComp);
+    return /*#__PURE__*/React.createElement(resolvedCompRef.current, _extends$2({}, ref ? {
+      ref
+    } : {}, props));
+  });
+  const finalComp = forwardedComp;
+
+  finalComp.preload = () => {
+    if (!promise) {
+      promise = importer().then(module => {
+        resolvedComp = module.default;
+        return resolvedComp;
+      });
+    }
+
+    return promise;
+  };
+
+  return finalComp;
+}
 //
+function Link(props) {
+  const router = useRouter();
+  return /*#__PURE__*/React.createElement(router.Link, props);
+}
 const matchesContext = /*#__PURE__*/React.createContext(null);
-const routerContext = /*#__PURE__*/React.createContext(null); // Detect if we're in the DOM
-
-const isDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-const useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect;
+const routerContext = /*#__PURE__*/React.createContext(null);
 function MatchesProvider(props) {
   return /*#__PURE__*/React.createElement(matchesContext.Provider, props);
 }
@@ -2563,6 +2619,12 @@ function createReactRouter(opts) {
           next
         } = linkInfo;
 
+        const reactHandleClick = e => {
+          React.startTransition(() => {
+            handleClick(e);
+          });
+        };
+
         const composeHandlers = handlers => e => {
           e.persist();
           handlers.forEach(handler => {
@@ -2576,7 +2638,7 @@ function createReactRouter(opts) {
         const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
         return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
           href: disabled ? undefined : next.href,
-          onClick: composeHandlers([handleClick, onClick]),
+          onClick: composeHandlers([reactHandleClick, onClick]),
           onFocus: composeHandlers([handleFocus, onFocus]),
           onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
           onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -2629,18 +2691,17 @@ function createReactRouter(opts) {
           useRouterSubscription(router);
           return router.state;
         },
-        useMatch: routeId => {
+        useMatch: (routeId, opts) => {
+          var _useMatches, _opts$strict;
+
           useRouterSubscription(router);
           invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
-
-          const runtimeMatch = _useMatch();
-
+          const runtimeMatch = (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
           const match = router.state.matches.find(d => d.routeId === routeId);
-          invariant(match, "Could not find a match for route \"" + routeId + "\" being rendered in this component!");
-          invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
 
-          if (!match) {
-            invariant('Match not found!');
+          if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
+            invariant(match, "Could not find an active match for \"" + routeId + "\"!");
+            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
           }
 
           return match;
@@ -2657,18 +2718,12 @@ function createReactRouter(opts) {
       const routeExt = makeRouteExt(route, router);
       Object.assign(route, routeExt);
     },
-    createElement: async element => {
-      if (typeof element === 'function') {
-        const res = await element(); // Support direct import() calls
-
-        if (typeof res === 'object' && res.default) {
-          return /*#__PURE__*/React.createElement(res.default);
-        } else {
-          return res;
-        }
+    loadComponent: async component => {
+      if (component.preload && typeof document !== 'undefined') {
+        component.preload(); // return await component.preload()
       }
 
-      return element;
+      return component;
     }
   }));
   return coreRouter;
@@ -2682,101 +2737,84 @@ function RouterProvider(_ref2) {
 
   router.update(rest);
   useRouterSubscription(router);
-  useLayoutEffect(() => {
+  React.useEffect(() => {
+    console.log('hello');
     return router.mount();
   }, [router]);
   return /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: {
-      router
+      router: router
     }
   }, /*#__PURE__*/React.createElement(MatchesProvider, {
     value: router.state.matches
   }, children != null ? children : /*#__PURE__*/React.createElement(Outlet, null)));
 }
-
 function useRouter() {
   const value = React.useContext(routerContext);
   warning(!value, 'useRouter must be used inside a <Router> component!');
   useRouterSubscription(value.router);
   return value.router;
 }
-
 function useMatches() {
   return React.useContext(matchesContext);
-} // function useParentMatches(): RouteMatch[] {
-//   const router = useRouter()
-//   const match = useMatch()
-//   const matches = router.state.matches
-//   return matches.slice(
-//     0,
-//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-//   )
-// }
-
-
-function _useMatch() {
-  var _useMatches;
-
-  return (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
 }
+function useMatch(routeId, opts) {
+  const router = useRouter();
+  return router.useMatch(routeId, opts);
+}
+function useNearestMatch() {
+  var _useMatches2;
 
+  const runtimeMatch = (_useMatches2 = useMatches()) == null ? void 0 : _useMatches2[0];
+  invariant(runtimeMatch, "Could not find a nearest match!");
+  return runtimeMatch;
+}
+function useRoute(routeId) {
+  const router = useRouter();
+  return router.useRoute(routeId);
+}
+function linkProps(props) {
+  const router = useRouter();
+  return router.linkProps(props);
+}
+function MatchRoute(props) {
+  const router = useRouter();
+  return /*#__PURE__*/React.createElement(router.MatchRoute, props);
+}
 function Outlet() {
-  var _childMatch$options$c;
+  var _ref3, _match$__$pendingComp, _match$__$errorCompon;
 
   const router = useRouter();
-  const [, ...matches] = useMatches();
-  const childMatch = matches[0];
-  if (!childMatch) return null;
-
-  const element = (() => {
-    var _childMatch$__$errorE, _ref4;
-
-    if (!childMatch) {
-      return null;
-    }
+  const matches = useMatches().slice(1);
+  const match = matches[0];
+  const defaultPending = React.useCallback(() => null, []);
 
-    const errorElement = (_childMatch$__$errorE = childMatch.__.errorElement) != null ? _childMatch$__$errorE : router.options.defaultErrorElement;
-
-    if (childMatch.status === 'error') {
-      if (errorElement) {
-        return errorElement;
-      }
-
-      if (childMatch.options.useErrorBoundary || router.options.useErrorBoundary) {
-        throw childMatch.error;
-      }
+  if (!match) {
+    return null;
+  }
 
-      return /*#__PURE__*/React.createElement(DefaultErrorBoundary, {
-        error: childMatch.error
-      });
+  const PendingComponent = (_ref3 = (_match$__$pendingComp = match.__.pendingComponent) != null ? _match$__$pendingComp : router.options.defaultPendingComponent) != null ? _ref3 : defaultPending;
+  const errorComponent = (_match$__$errorCompon = match.__.errorComponent) != null ? _match$__$errorCompon : router.options.defaultErrorComponent;
+  return /*#__PURE__*/React.createElement(MatchesProvider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(PendingComponent, null)
+  }, /*#__PURE__*/React.createElement(CatchBoundary, {
+    errorComponent: errorComponent
+  }, (() => {
+    if (match.status === 'error') {
+      throw match.error;
     }
 
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
-        var _childMatch$__$pendin;
-
-        const pendingElement = (_childMatch$__$pendin = childMatch.__.pendingElement) != null ? _childMatch$__$pendin : router.options.defaultPendingElement;
-
-        if (childMatch.options.pendingMs || pendingElement) {
-          var _ref3;
-
-          return (_ref3 = pendingElement) != null ? _ref3 : null;
-        }
-      }
+    if (match.status === 'success') {
+      var _ref4, _ref5;
 
-      return null;
+      return /*#__PURE__*/React.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
     }
 
-    return (_ref4 = childMatch.__.element) != null ? _ref4 : router.options.defaultElement;
-  })();
-
-  const catchElement = (_childMatch$options$c = childMatch == null ? void 0 : childMatch.options.catchElement) != null ? _childMatch$options$c : router.options.defaultCatchElement;
-  return /*#__PURE__*/React.createElement(MatchesProvider, {
-    value: matches,
-    key: childMatch.matchId
-  }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    catchElement: catchElement
-  }, element));
+    console.log(match.matchId, 'suspend');
+    throw match.__.loadPromise;
+  })())));
 }
 
 class CatchBoundary extends React.Component {
@@ -2785,13 +2823,6 @@ class CatchBoundary extends React.Component {
     this.state = {
       error: false
     };
-
-    this.reset = () => {
-      this.setState({
-        error: false,
-        info: false
-      });
-    };
   }
 
   componentDidCatch(error, info) {
@@ -2803,12 +2834,12 @@ class CatchBoundary extends React.Component {
   }
 
   render() {
-    var _this$props$catchElem;
+    var _this$props$errorComp;
 
-    const catchElement = (_this$props$catchElem = this.props.catchElement) != null ? _this$props$catchElem : DefaultErrorBoundary;
+    const errorComponent = (_this$props$errorComp = this.props.errorComponent) != null ? _this$props$errorComp : DefaultErrorBoundary;
 
     if (this.state.error) {
-      return typeof catchElement === 'function' ? catchElement(this.state) : catchElement;
+      return /*#__PURE__*/React.createElement(errorComponent, this.state);
     }
 
     return this.props.children;
@@ -2816,10 +2847,10 @@ class CatchBoundary extends React.Component {
 
 }
 
-function DefaultErrorBoundary(_ref5) {
+function DefaultErrorBoundary(_ref6) {
   let {
     error
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5rem',
@@ -2841,18 +2872,7 @@ function DefaultErrorBoundary(_ref5) {
       padding: '.5rem',
       color: 'red'
     }
-  }, error.message) : null)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '1rem'
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: '.8em',
-      borderLeft: '3px solid rgba(127, 127, 127, 1)',
-      paddingLeft: '.5rem',
-      opacity: 0.5
-    }
-  }, "If you are the owner of this website, it's highly recommended that you configure your own custom Catch/Error boundaries for the router. You can optionally configure a boundary for each route."));
+  }, error.message) : null)));
 }
 function usePrompt(message, when) {
   const router = useRouter();
@@ -2869,15 +2889,15 @@ function usePrompt(message, when) {
     return unblock;
   }, [when, location, message]);
 }
-function Prompt(_ref6) {
+function Prompt(_ref7) {
   let {
     message,
     when,
     children
-  } = _ref6;
+  } = _ref7;
   usePrompt(message, when != null ? when : true);
   return children != null ? children : null;
 }
 
-export { DefaultErrorBoundary, MatchesProvider, Outlet, Prompt, RouterProvider, cascadeLoaderData, cleanPath, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, invariant, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, replaceEqualDeep, resolvePath, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, usePrompt, warning };
+export { DefaultErrorBoundary, Link, MatchRoute, MatchesProvider, Outlet, Prompt, RouterProvider, cleanPath, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, invariant, joinPaths, last, lazy, linkProps, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, routerContext, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useMatch, useMatches, useNearestMatch, usePrompt, useRoute, useRouter, warning };
 //# sourceMappingURL=index.js.map