@tanstack/react-router 0.0.1-alpha.8 → 0.0.1-beta.1

package/build/esm/index.js

@@ -1305,6 +1305,40 @@ function createRoute(routeConfig, options, parent, router) {
     return router.state.actions[id];
   })();
 
+  const loader = router.state.loaders[id] || (() => {
+    router.state.loaders[id] = {
+      pending: [],
+      fetch: async loaderContext => {
+        if (!route) {
+          return;
+        }
+
+        const loaderState = {
+          loadedAt: Date.now(),
+          loaderContext
+        };
+        loader.current = loaderState;
+        loader.latest = loaderState;
+        loader.pending.push(loaderState); // router.state = {
+        //   ...router.state,
+        //   currentAction: loaderState,
+        //   latestAction: loaderState,
+        // }
+
+        router.notify();
+
+        try {
+          return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
+        } finally {
+          loader.pending = loader.pending.filter(d => d !== loaderState); // router.removeActionQueue.push({ loader, loaderState })
+
+          router.notify();
+        }
+      }
+    };
+    return router.state.loaders[id];
+  })();
+
   let route = {
     routeId: id,
     routeRouteId: routeId,
@@ -1315,6 +1349,7 @@ function createRoute(routeConfig, options, parent, router) {
     childRoutes: undefined,
     parentRoute: parent,
     action,
+    loader: loader,
     buildLink: options => {
       return router.buildLink(_extends({}, options, {
         from: fullPath
@@ -1410,12 +1445,10 @@ function createRouteMatch(router, route, opts) {
     isPending: false,
     isFetching: false,
     isInvalid: false,
+    invalidAt: Infinity,
     getIsInvalid: () => {
-      var _ref, _routeMatch$options$l;
-
       const now = Date.now();
-      const maxAge = (_ref = (_routeMatch$options$l = routeMatch.options.loaderMaxAge) != null ? _routeMatch$options$l : router.options.defaultLoaderMaxAge) != null ? _ref : 0;
-      return routeMatch.isInvalid || routeMatch.updatedAt + maxAge < now;
+      return routeMatch.isInvalid || routeMatch.invalidAt < now;
     },
     __: {
       abortController: new AbortController(),
@@ -1504,9 +1537,33 @@ function createRouteMatch(router, route, opts) {
       routeMatch.isInvalid = true;
     },
     hasLoaders: () => {
-      return !!(route.options.loader || route.options.import || elementTypes.some(d => typeof route.options[d] === 'function'));
+      return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
     },
-    load: async () => {
+    load: async loaderOpts => {
+      const now = Date.now();
+      const minMaxAge = loaderOpts != null && loaderOpts.preload ? Math.max(loaderOpts == null ? void 0 : loaderOpts.maxAge, loaderOpts == null ? void 0 : loaderOpts.gcMaxAge) : 0; // If this is a preload, add it to the preload cache
+
+      if (loaderOpts != null && loaderOpts.preload && minMaxAge > 0) {
+        // If the match is currently active, don't preload it
+        if (router.state.matches.find(d => d.matchId === routeMatch.matchId)) {
+          return;
+        }
+
+        router.matchCache[routeMatch.matchId] = {
+          gc: now + loaderOpts.gcMaxAge,
+          match: routeMatch
+        };
+      } // If the match is invalid, errored or idle, trigger it to load
+
+
+      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({
+          maxAge
+        });
+      }
+    },
+    fetch: async opts => {
       const id = '' + Date.now() + Math.random();
       routeMatch.__.latestId = id; // If the match was in an error state, set it
       // to a loading state again. Otherwise, keep it
@@ -1525,21 +1582,7 @@ function createRouteMatch(router, route, opts) {
         routeMatch.__.resolve = resolve;
 
         const loaderPromise = (async () => {
-          const importer = routeMatch.options.import; // First, run any importers
-
-          if (importer) {
-            routeMatch.__.importPromise = importer({
-              params: routeMatch.params // search: routeMatch.search,
-
-            }).then(imported => {
-              routeMatch.__ = _extends({}, routeMatch.__, imported);
-            });
-          } // Wait for the importer to finish before
-          // attempting to load elements and data
-
-
-          await routeMatch.__.importPromise; // Next, load the elements and data in parallel
-
+          // 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
@@ -1550,17 +1593,14 @@ function createRouteMatch(router, route, opts) {
                 return;
               }
 
-              if (typeof routeElement === 'function') {
-                const res = await routeElement(routeMatch);
-                routeMatch.__[type] = res;
-              } else {
-                routeMatch.__[type] = routeMatch.options[type];
-              }
+              routeMatch.__[type] = await router.options.createElement(routeElement);
             }));
           })();
 
           routeMatch.__.dataPromise = Promise.resolve().then(async () => {
             try {
+              var _ref, _ref2, _opts$maxAge;
+
               if (routeMatch.options.loader) {
                 const data = await routeMatch.options.loader({
                   params: routeMatch.params,
@@ -1578,6 +1618,7 @@ function createRouteMatch(router, route, opts) {
               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;
@@ -1700,13 +1741,15 @@ function createRouter(userOptions) {
   const originalOptions = _extends({
     defaultLoaderGcMaxAge: 5 * 60 * 1000,
     defaultLoaderMaxAge: 0,
-    defaultLinkPreloadDelay: 50
+    defaultPreloadMaxAge: 2000,
+    defaultPreloadDelay: 50
   }, userOptions, {
     stringifySearch: (_userOptions$stringif = userOptions == null ? void 0 : userOptions.stringifySearch) != null ? _userOptions$stringif : defaultStringifySearch,
     parseSearch: (_userOptions$parseSea = userOptions == null ? void 0 : userOptions.parseSearch) != null ? _userOptions$parseSea : defaultParseSearch
   });
 
   let router = {
+    history,
     options: originalOptions,
     listeners: [],
     removeActionQueue: [],
@@ -1725,6 +1768,7 @@ function createRouter(userOptions) {
       location: null,
       matches: [],
       actions: {},
+      loaders: {},
       loaderData: {},
       lastUpdated: Date.now(),
       isFetching: false,
@@ -1749,21 +1793,22 @@ function createRouter(userOptions) {
       router.listeners.forEach(listener => listener());
     },
     mount: () => {
-      const next = router.buildLocation({
+      const next = router.__.buildLocation({
         to: '.',
         search: true,
         hash: true
       }); // If the current location isn't updated, trigger a navigation
       // to the current location. Otherwise, load the current location.
 
+
       if (next.href !== router.location.href) {
-        router.commitLocation(next, true);
+        router.__.commitLocation(next, true);
       } else {
         router.loadLocation();
       }
 
       const unsub = history.listen(event => {
-        router.loadLocation(router.parseLocation(event.location, router.location));
+        router.loadLocation(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
 
@@ -1793,169 +1838,11 @@ function createRouter(userOptions) {
 
       if (routeConfig) {
         router.routesById = {};
-        router.routeTree = router.buildRouteTree(routeConfig);
+        router.routeTree = router.__.buildRouteTree(routeConfig);
       }
 
       return router;
     },
-    buildRouteTree: rootRouteConfig => {
-      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 existingRoute = router.routesById[route.routeId];
-
-          if (existingRoute) {
-            if (process.env.NODE_ENV !== 'production') {
-              console.warn("Duplicate routes found with id: " + String(route.routeId), router.routesById, route);
-            }
-
-            throw new Error();
-          }
-          router.routesById[route.routeId] = route;
-          const children = routeConfig.children;
-          route.childRoutes = children != null && children.length ? recurseRoutes(children, route) : undefined;
-          return route;
-        });
-      };
-
-      const routes = recurseRoutes([rootRouteConfig]);
-      return routes[0];
-    },
-    parseLocation: (location, previousLocation) => {
-      var _location$hash$split$;
-
-      const parsedSearch = router.options.parseSearch(location.search);
-      return {
-        pathname: location.pathname,
-        searchStr: location.search,
-        search: replaceEqualDeep(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
-        hash: (_location$hash$split$ = location.hash.split('#').reverse()[0]) != null ? _location$hash$split$ : '',
-        href: "" + location.pathname + location.search + location.hash,
-        state: location.state,
-        key: location.key
-      };
-    },
-    buildLocation: function buildLocation(dest) {
-      var _dest$from, _router$basepath, _dest$to, _last, _dest$params, _dest$__preSearchFilt, _functionalUpdate, _dest$__preSearchFilt2, _dest$__postSearchFil;
-
-      if (dest === void 0) {
-        dest = {};
-      }
-
-      // const resolvedFrom: Location = {
-      //   ...router.location,
-      const fromPathname = dest.fromCurrent ? router.location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.location.pathname;
-
-      let pathname = resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
-
-      const fromMatches = router.matchRoutes(router.location.pathname, {
-        strictParseParams: true
-      });
-      const toMatches = router.matchRoutes(pathname);
-
-      const prevParams = _extends({}, (_last = last(fromMatches)) == null ? void 0 : _last.params);
-
-      let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-
-      if (nextParams) {
-        toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
-          Object.assign({}, nextParams, fn(nextParams));
-        });
-      }
-
-      pathname = interpolatePath(pathname, nextParams != null ? nextParams : {}); // Pre filters first
-
-      const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search; // Then the link/navigate function
-
-      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-      : dest.search ? (_functionalUpdate = functionalUpdate(dest.search, preFilteredSearch)) != null ? _functionalUpdate : {} // Updater
-      : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
-      : {}; // Then post filters
-
-      const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-      const search = replaceEqualDeep(router.location.search, postFilteredSearch);
-      const searchStr = router.options.stringifySearch(search);
-      let hash = dest.hash === true ? router.location.hash : functionalUpdate(dest.hash, router.location.hash);
-      hash = hash ? "#" + hash : '';
-      return {
-        pathname,
-        search,
-        searchStr,
-        state: router.location.state,
-        hash,
-        href: "" + pathname + searchStr + hash,
-        key: dest.key
-      };
-    },
-    commitLocation: (next, replace) => {
-      const id = '' + Date.now() + Math.random();
-      if (router.navigateTimeout) clearTimeout(router.navigateTimeout);
-      let nextAction = 'replace';
-
-      if (!replace) {
-        nextAction = 'push';
-      }
-
-      const isSameUrl = router.parseLocation(history.location).href === next.href;
-
-      if (isSameUrl && !next.key) {
-        nextAction = 'replace';
-      }
-
-      if (nextAction === 'replace') {
-        history.replace({
-          pathname: next.pathname,
-          hash: next.hash,
-          search: next.searchStr
-        }, {
-          id
-        });
-      } else {
-        history.push({
-          pathname: next.pathname,
-          hash: next.hash,
-          search: next.searchStr
-        }, {
-          id
-        });
-      }
-
-      router.navigationPromise = new Promise(resolve => {
-        const previousNavigationResolve = router.resolveNavigation;
-
-        router.resolveNavigation = () => {
-          previousNavigationResolve();
-          resolve();
-        };
-      });
-      return router.navigationPromise;
-    },
-    buildNext: opts => {
-      const next = router.buildLocation(opts);
-      const matches = router.matchRoutes(next.pathname);
-
-      const __preSearchFilters = matches.map(match => {
-        var _match$options$preSea;
-
-        return (_match$options$preSea = match.options.preSearchFilters) != null ? _match$options$preSea : [];
-      }).flat().filter(Boolean);
-
-      const __postSearchFilters = matches.map(match => {
-        var _match$options$postSe;
-
-        return (_match$options$postSe = match.options.postSearchFilters) != null ? _match$options$postSe : [];
-      }).flat().filter(Boolean);
-
-      return router.buildLocation(_extends({}, opts, {
-        __preSearchFilters,
-        __postSearchFilters
-      }));
-    },
     cancelMatches: () => {
       var _router$state$pending, _router$state$pending2;
       [...router.state.matches, ...((_router$state$pending = (_router$state$pending2 = router.state.pending) == null ? void 0 : _router$state$pending2.matches) != null ? _router$state$pending : [])].forEach(match => {
@@ -2058,6 +1945,7 @@ function createRouter(userOptions) {
           params: d.params,
           search: d.search
         });
+        delete router.matchCache[d.matchId];
       });
 
       if (matches.some(d => d.status === 'loading')) {
@@ -2097,7 +1985,21 @@ function createRouter(userOptions) {
         delete router.matchCache[matchId];
       });
     },
-    loadRoute: async function loadRoute(navigateOpts, loaderOpts) {
+    loadRoute: async function loadRoute(navigateOpts) {
+      if (navigateOpts === void 0) {
+        navigateOpts = router.location;
+      }
+
+      const next = router.buildNext(navigateOpts);
+      const matches = router.matchRoutes(next.pathname, {
+        strictParseParams: true
+      });
+      await router.loadMatches(matches);
+      return matches;
+    },
+    preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
+      var _ref4, _ref5, _loaderOpts$maxAge, _ref6, _ref7, _loaderOpts$gcMaxAge;
+
       if (navigateOpts === void 0) {
         navigateOpts = router.location;
       }
@@ -2108,7 +2010,8 @@ function createRouter(userOptions) {
       });
       await router.loadMatches(matches, {
         preload: true,
-        maxAge: loaderOpts.maxAge
+        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
       });
       return matches;
     },
@@ -2202,33 +2105,11 @@ function createRouter(userOptions) {
       return matches;
     },
     loadMatches: async (resolvedMatches, loaderOpts) => {
-      const now = Date.now();
       const matchPromises = resolvedMatches.map(async match => {
         // Validate the match (loads search params etc)
-        match.__.validate(); // // If the match doesn't have a loader, don't attempt to load it
-        // if (!match.hasLoaders()) {
-        //   return
-        // }
-        // If this is a preload, add it to the preload cache
-
-
-        if (loaderOpts != null && loaderOpts.preload && (loaderOpts == null ? void 0 : loaderOpts.maxAge) > 0) {
-          // If the match is currently active, don't preload it
-          if (router.state.matches.find(d => d.matchId === match.matchId)) {
-            return;
-          }
+        match.__.validate();
 
-          router.matchCache[match.matchId] = {
-            gc: now + loaderOpts.maxAge,
-            // TODO: Should this use the route's maxAge?
-            match
-          };
-        } // If the match is invalid, errored or idle, trigger it to load
-
-
-        if (match.status === 'success' && match.getIsInvalid() || match.status === 'error' || match.status === 'idle') {
-          match.load();
-        }
+        match.load(loaderOpts);
 
         if (match.status === 'loading') {
           // If requested, start the pending timers
@@ -2252,7 +2133,7 @@ function createRouter(userOptions) {
         }
       });
     },
-    reload: () => router._navigate({
+    reload: () => router.__.navigate({
       fromCurrent: true,
       replace: true,
       search: true
@@ -2285,11 +2166,7 @@ function createRouter(userOptions) {
         to: next.pathname
       }));
     },
-    _navigate: location => {
-      const next = router.buildNext(location);
-      return router.commitLocation(next, location.replace);
-    },
-    navigate: async _ref4 => {
+    navigate: async _ref8 => {
       let {
         from,
         to = '.',
@@ -2297,7 +2174,7 @@ function createRouter(userOptions) {
         hash,
         replace,
         params
-      } = _ref4;
+      } = _ref8;
       // 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
@@ -2312,7 +2189,7 @@ function createRouter(userOptions) {
       } catch (e) {}
 
       invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
-      return router._navigate({
+      return router.__.navigate({
         from: fromString,
         to: toString,
         search,
@@ -2321,8 +2198,8 @@ function createRouter(userOptions) {
         params
       });
     },
-    buildLink: _ref5 => {
-      var _preload, _ref6, _ref7, _ref8;
+    buildLink: _ref9 => {
+      var _preload, _ref10;
 
       let {
         from,
@@ -2335,9 +2212,10 @@ function createRouter(userOptions) {
         activeOptions,
         preload,
         preloadMaxAge: userPreloadMaxAge,
+        preloadGcMaxAge: userPreloadGcMaxAge,
         preloadDelay: userPreloadDelay,
         disabled
-      } = _ref5;
+      } = _ref9;
 
       // If this link simply reloads the current route,
       // make sure it has a new key so it will trigger a data refresh
@@ -2360,9 +2238,8 @@ function createRouter(userOptions) {
         replace
       };
       const next = router.buildNext(nextOpts);
-      preload = (_preload = preload) != null ? _preload : router.options.defaultLinkPreload;
-      const preloadMaxAge = (_ref6 = (_ref7 = userPreloadMaxAge != null ? userPreloadMaxAge : router.options.defaultLinkPreloadMaxAge) != null ? _ref7 : router.options.defaultLoaderGcMaxAge) != null ? _ref6 : 0;
-      const preloadDelay = (_ref8 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultLinkPreloadDelay) != null ? _ref8 : 0; // Compare path/hash for matches
+      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 pathIsEqual = router.state.location.pathname === next.pathname;
       const currentPathSplit = router.state.location.pathname.split('/');
@@ -2384,15 +2261,16 @@ function createRouter(userOptions) {
           } // All is well? Navigate!)
 
 
-          router._navigate(nextOpts);
+          router.__.navigate(nextOpts);
         }
       }; // The click handler
 
 
       const handleFocus = e => {
-        if (preload && preloadMaxAge > 0) {
-          router.loadRoute(nextOpts, {
-            maxAge: preloadMaxAge
+        if (preload) {
+          router.preloadRoute(nextOpts, {
+            maxAge: userPreloadMaxAge,
+            gcMaxAge: userPreloadGcMaxAge
           });
         }
       };
@@ -2400,15 +2278,16 @@ function createRouter(userOptions) {
       const handleEnter = e => {
         const target = e.target || {};
 
-        if (preload && preloadMaxAge > 0) {
+        if (preload) {
           if (target.preloadTimeout) {
             return;
           }
 
           target.preloadTimeout = setTimeout(() => {
             target.preloadTimeout = null;
-            router.loadRoute(nextOpts, {
-              maxAge: preloadMaxAge
+            router.preloadRoute(nextOpts, {
+              maxAge: userPreloadMaxAge,
+              gcMaxAge: userPreloadGcMaxAge
             });
           }, preloadDelay);
         }
@@ -2433,9 +2312,174 @@ function createRouter(userOptions) {
         isActive,
         disabled
       };
+    },
+    buildNext: opts => {
+      const next = router.__.buildLocation(opts);
+
+      const matches = router.matchRoutes(next.pathname);
+
+      const __preSearchFilters = matches.map(match => {
+        var _match$options$preSea;
+
+        return (_match$options$preSea = match.options.preSearchFilters) != null ? _match$options$preSea : [];
+      }).flat().filter(Boolean);
+
+      const __postSearchFilters = matches.map(match => {
+        var _match$options$postSe;
+
+        return (_match$options$postSe = match.options.postSearchFilters) != null ? _match$options$postSe : [];
+      }).flat().filter(Boolean);
+
+      return router.__.buildLocation(_extends({}, opts, {
+        __preSearchFilters,
+        __postSearchFilters
+      }));
+    },
+    __: {
+      buildRouteTree: rootRouteConfig => {
+        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 existingRoute = router.routesById[route.routeId];
+
+            if (existingRoute) {
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn("Duplicate routes found with id: " + String(route.routeId), router.routesById, route);
+              }
+
+              throw new Error();
+            }
+            router.routesById[route.routeId] = route;
+            const children = routeConfig.children;
+            route.childRoutes = children != null && children.length ? recurseRoutes(children, route) : undefined;
+            return route;
+          });
+        };
+
+        const routes = recurseRoutes([rootRouteConfig]);
+        return routes[0];
+      },
+      parseLocation: (location, previousLocation) => {
+        var _location$hash$split$;
+
+        const parsedSearch = router.options.parseSearch(location.search);
+        return {
+          pathname: location.pathname,
+          searchStr: location.search,
+          search: replaceEqualDeep(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
+          hash: (_location$hash$split$ = location.hash.split('#').reverse()[0]) != null ? _location$hash$split$ : '',
+          href: "" + location.pathname + location.search + location.hash,
+          state: location.state,
+          key: location.key
+        };
+      },
+      navigate: location => {
+        const next = router.buildNext(location);
+        return router.__.commitLocation(next, location.replace);
+      },
+      buildLocation: function buildLocation(dest) {
+        var _dest$from, _router$basepath, _dest$to, _last, _dest$params, _dest$__preSearchFilt, _functionalUpdate, _dest$__preSearchFilt2, _dest$__postSearchFil;
+
+        if (dest === void 0) {
+          dest = {};
+        }
+
+        // const resolvedFrom: Location = {
+        //   ...router.location,
+        const fromPathname = dest.fromCurrent ? router.location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.location.pathname;
+
+        let pathname = resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
+
+        const fromMatches = router.matchRoutes(router.location.pathname, {
+          strictParseParams: true
+        });
+        const toMatches = router.matchRoutes(pathname);
+
+        const prevParams = _extends({}, (_last = last(fromMatches)) == null ? void 0 : _last.params);
+
+        let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+
+        if (nextParams) {
+          toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
+            Object.assign({}, nextParams, fn(nextParams));
+          });
+        }
+
+        pathname = interpolatePath(pathname, nextParams != null ? nextParams : {}); // Pre filters first
+
+        const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search; // Then the link/navigate function
+
+        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+        : dest.search ? (_functionalUpdate = functionalUpdate(dest.search, preFilteredSearch)) != null ? _functionalUpdate : {} // Updater
+        : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
+        : {}; // Then post filters
+
+        const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(router.location.search, postFilteredSearch);
+        const searchStr = router.options.stringifySearch(search);
+        let hash = dest.hash === true ? router.location.hash : functionalUpdate(dest.hash, router.location.hash);
+        hash = hash ? "#" + hash : '';
+        return {
+          pathname,
+          search,
+          searchStr,
+          state: router.location.state,
+          hash,
+          href: "" + pathname + searchStr + hash,
+          key: dest.key
+        };
+      },
+      commitLocation: (next, replace) => {
+        const id = '' + Date.now() + Math.random();
+        if (router.navigateTimeout) clearTimeout(router.navigateTimeout);
+        let nextAction = 'replace';
+
+        if (!replace) {
+          nextAction = 'push';
+        }
+
+        const isSameUrl = router.__.parseLocation(history.location).href === next.href;
+
+        if (isSameUrl && !next.key) {
+          nextAction = 'replace';
+        }
+
+        if (nextAction === 'replace') {
+          history.replace({
+            pathname: next.pathname,
+            hash: next.hash,
+            search: next.searchStr
+          }, {
+            id
+          });
+        } else {
+          history.push({
+            pathname: next.pathname,
+            hash: next.hash,
+            search: next.searchStr
+          }, {
+            id
+          });
+        }
+
+        router.navigationPromise = new Promise(resolve => {
+          const previousNavigationResolve = router.resolveNavigation;
+
+          router.resolveNavigation = () => {
+            previousNavigationResolve();
+            resolve();
+          };
+        });
+        return router.navigationPromise;
+      }
     }
   };
-  router.location = router.parseLocation(history.location);
+  router.location = router.__.parseLocation(history.location);
   router.state.location = router.location;
   router.update(userOptions); // Allow frameworks to hook into the router creation
 
@@ -2467,6 +2511,17 @@ const useRouterSubscription = router => {
 function createReactRouter(opts) {
   const makeRouteExt = (route, router) => {
     return {
+      useRoute: function useRoute(subRouteId) {
+        if (subRouteId === void 0) {
+          subRouteId = '.';
+        }
+
+        const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
+        const resolvedRoute = router.getRoute(resolvedRouteId);
+        useRouterSubscription(router);
+        invariant(resolvedRoute, "Could not find a route for route \"" + resolvedRouteId + "\"! Did you forget to add it to your route config?");
+        return resolvedRoute;
+      },
       linkProps: options => {
         var _functionalUpdate, _functionalUpdate2;
 
@@ -2574,12 +2629,6 @@ function createReactRouter(opts) {
           useRouterSubscription(router);
           return router.state;
         },
-        useRoute: routeId => {
-          const route = router.getRoute(routeId);
-          useRouterSubscription(router);
-          invariant(route, "Could not find a route for route \"" + routeId + "\"! Did you forget to add it to your route config?");
-          return route;
-        },
         useMatch: routeId => {
           useRouterSubscription(router);
           invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
@@ -2607,6 +2656,19 @@ function createReactRouter(opts) {
       } = _ref;
       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;
+        }
+      }
+
+      return element;
     }
   }));
   return coreRouter;
@@ -2791,7 +2853,31 @@ function DefaultErrorBoundary(_ref5) {
       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."));
-} // TODO: Add prompt
+}
+function usePrompt(message, when) {
+  const router = useRouter();
+  React.useEffect(() => {
+    if (!when) return;
+    let unblock = router.history.block(transition => {
+      if (window.confirm(message)) {
+        unblock();
+        transition.retry();
+      } else {
+        router.location.pathname = window.location.pathname;
+      }
+    });
+    return unblock;
+  }, [when, location, message]);
+}
+function Prompt(_ref6) {
+  let {
+    message,
+    when,
+    children
+  } = _ref6;
+  usePrompt(message, when != null ? when : true);
+  return children != null ? children : null;
+}
 
-export { DefaultErrorBoundary, MatchesProvider, Outlet, 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, warning };
+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 };
 //# sourceMappingURL=index.js.map