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

package/build/umd/index.development.js

@@ -991,6 +991,12 @@
 
     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('/'));
@@ -1217,6 +1223,7 @@
     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;
   }
 
@@ -1267,7 +1274,7 @@
 
     const action = router.state.actions[id] || (() => {
       router.state.actions[id] = {
-        pending: [],
+        submissions: [],
         submit: async (submission, actionOpts) => {
           var _actionOpts$invalidat;
 
@@ -1276,18 +1283,20 @@
           }
 
           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 {
@@ -1309,11 +1318,6 @@
             actionState.error = err;
             actionState.status = 'error';
           } finally {
-            action.pending = action.pending.filter(d => d !== actionState);
-            router.removeActionQueue.push({
-              action,
-              actionState
-            });
             router.notify();
           }
         }
@@ -1388,15 +1392,6 @@
     });
     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) {
@@ -1448,7 +1443,7 @@
     };
   };
 
-  const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   function createRouteMatch(router, route, opts) {
     const routeMatch = _extends({}, route, opts, {
       router,
@@ -1458,10 +1453,10 @@
       status: 'idle',
       routeLoaderData: {},
       loaderData: {},
-      isPending: false,
       isFetching: false,
       isInvalid: false,
       invalidAt: Infinity,
+      // pendingActions: [],
       getIsInvalid: () => {
         const now = Date.now();
         return routeMatch.isInvalid || routeMatch.invalidAt < now;
@@ -1475,43 +1470,6 @@
 
           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;
 
@@ -1519,9 +1477,11 @@
           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;
@@ -1529,6 +1489,13 @@
 
             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', {
@@ -1546,14 +1513,16 @@
         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();
@@ -1574,17 +1543,25 @@
 
         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
@@ -1597,94 +1574,66 @@
           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;
-                }
-
-                {
-                  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;
+              {
+                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();
       }
     });
 
@@ -1745,9 +1694,22 @@
 
   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;
@@ -1765,30 +1727,24 @@
     });
 
     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 => {
@@ -1801,13 +1757,39 @@
         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: '.',
@@ -1819,12 +1801,14 @@
 
         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
 
@@ -1835,16 +1819,30 @@
         }
 
         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,
@@ -1865,49 +1863,41 @@
           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
@@ -1924,9 +1914,12 @@
             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,
@@ -1938,7 +1931,7 @@
             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] = {
@@ -1953,9 +1946,6 @@
             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,
@@ -1964,16 +1954,18 @@
           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,
@@ -2014,7 +2006,7 @@
         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;
@@ -2026,8 +2018,8 @@
         });
         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;
       },
@@ -2103,6 +2095,7 @@
             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])
@@ -2126,18 +2119,51 @@
           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;
 
@@ -2182,7 +2208,7 @@
           to: next.pathname
         }));
       },
-      navigate: async _ref8 => {
+      navigate: async _ref7 => {
         let {
           from,
           to = '.',
@@ -2190,7 +2216,7 @@
           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
@@ -2214,8 +2240,8 @@
           params
         });
       },
-      buildLink: _ref9 => {
-        var _preload, _ref10;
+      buildLink: _ref8 => {
+        var _preload, _ref9;
 
         let {
           from,
@@ -2231,7 +2257,7 @@
           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
@@ -2255,7 +2281,7 @@
         };
         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('/');
@@ -2356,11 +2382,7 @@
           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) {
@@ -2470,9 +2492,9 @@
               pathname: next.pathname,
               hash: next.hash,
               search: next.searchStr
-            }, {
+            }, _extends({
               id
-            });
+            }, next.state));
           } else {
             history.push({
               pathname: next.pathname,
@@ -2495,8 +2517,6 @@
         }
       }
     };
-    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);
@@ -2507,15 +2527,51 @@
     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__namespace.lazy(importer);
+    let promise;
+    let resolvedComp;
+    const forwardedComp = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+      const resolvedCompRef = React__namespace.useRef(resolvedComp || lazyComp);
+      return /*#__PURE__*/React__namespace.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__namespace.createElement(router.Link, props);
+  }
   const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null); // Detect if we're in the DOM
-
-  const isDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-  const useLayoutEffect = isDOM ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
   function MatchesProvider(props) {
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, props);
   }
@@ -2579,6 +2635,12 @@
             next
           } = linkInfo;
 
+          const reactHandleClick = e => {
+            React__namespace.startTransition(() => {
+              handleClick(e);
+            });
+          };
+
           const composeHandlers = handlers => e => {
             e.persist();
             handlers.forEach(handler => {
@@ -2592,7 +2654,7 @@
           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]),
@@ -2645,18 +2707,17 @@
             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;
@@ -2673,18 +2734,12 @@
         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__namespace.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;
@@ -2698,101 +2753,84 @@
 
     router.update(rest);
     useRouterSubscription(router);
-    useLayoutEffect(() => {
+    React__namespace.useEffect(() => {
+      console.log('hello');
       return router.mount();
     }, [router]);
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
-        router
+        router: router
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
       value: router.state.matches
     }, children != null ? children : /*#__PURE__*/React__namespace.createElement(Outlet, null)));
   }
-
   function useRouter() {
     const value = React__namespace.useContext(routerContext);
     warning(!value, 'useRouter must be used inside a <Router> component!');
     useRouterSubscription(value.router);
     return value.router;
   }
-
   function useMatches() {
     return React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement(MatchesProvider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
+    }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement(MatchesProvider, {
-      value: matches,
-      key: childMatch.matchId
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      catchElement: catchElement
-    }, element));
+      console.log(match.matchId, 'suspend');
+      throw match.__.loadPromise;
+    })())));
   }
 
   class CatchBoundary extends React__namespace.Component {
@@ -2801,13 +2839,6 @@
       this.state = {
         error: false
       };
-
-      this.reset = () => {
-        this.setState({
-          error: false,
-          info: false
-        });
-      };
     }
 
     componentDidCatch(error, info) {
@@ -2819,12 +2850,12 @@
     }
 
     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__namespace.createElement(errorComponent, this.state);
       }
 
       return this.props.children;
@@ -2832,10 +2863,10 @@
 
   }
 
-  function DefaultErrorBoundary(_ref5) {
+  function DefaultErrorBoundary(_ref6) {
     let {
       error
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         padding: '.5rem',
@@ -2857,18 +2888,7 @@
         padding: '.5rem',
         color: 'red'
       }
-    }, error.message) : null)), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        height: '1rem'
-      }
-    }), /*#__PURE__*/React__namespace.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();
@@ -2885,22 +2905,23 @@
       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;
   }
 
   exports.DefaultErrorBoundary = DefaultErrorBoundary;
+  exports.Link = Link;
+  exports.MatchRoute = MatchRoute;
   exports.MatchesProvider = MatchesProvider;
   exports.Outlet = Outlet;
   exports.Prompt = Prompt;
   exports.RouterProvider = RouterProvider;
-  exports.cascadeLoaderData = cascadeLoaderData;
   exports.cleanPath = cleanPath;
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
@@ -2919,18 +2940,28 @@
   exports.invariant = invariant;
   exports.joinPaths = joinPaths;
   exports.last = last;
+  exports.lazy = lazy;
+  exports.linkProps = linkProps;
   exports.matchByPath = matchByPath;
   exports.matchPathname = matchPathname;
+  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
+  exports.pick = pick;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
+  exports.routerContext = routerContext;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useMatch = useMatch;
+  exports.useMatches = useMatches;
+  exports.useNearestMatch = useNearestMatch;
   exports.usePrompt = usePrompt;
+  exports.useRoute = useRoute;
+  exports.useRouter = useRouter;
   exports.warning = warning;
 
   Object.defineProperty(exports, '__esModule', { value: true });