@tanstack/router-core 0.0.1-alpha.9 → 0.0.1-beta.2

package/build/umd/index.development.js

@@ -1260,6 +1260,40 @@
       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,
@@ -1270,6 +1304,7 @@
       childRoutes: undefined,
       parentRoute: parent,
       action,
+      loader: loader,
       buildLink: options => {
         return router.buildLink(_extends({}, options, {
           from: fullPath
@@ -1457,9 +1492,33 @@
         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 opts => {
+      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
@@ -1478,21 +1537,7 @@
           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
@@ -1503,12 +1548,7 @@
                   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);
               }));
             })();
 
@@ -1664,6 +1704,7 @@
     });
 
     let router = {
+      history,
       options: originalOptions,
       listeners: [],
       removeActionQueue: [],
@@ -1682,6 +1723,7 @@
         location: null,
         matches: [],
         actions: {},
+        loaders: {},
         loaderData: {},
         lastUpdated: Date.now(),
         isFetching: false,
@@ -1703,24 +1745,25 @@
           isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
         });
         cascadeLoaderData(router.state.matches);
-        router.listeners.forEach(listener => listener());
+        router.listeners.forEach(listener => listener(router));
       },
       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
 
@@ -1750,169 +1793,11 @@
 
         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) {
-              {
-                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 => {
@@ -2015,6 +1900,7 @@
             params: d.params,
             search: d.search
           });
+          delete router.matchCache[d.matchId];
         });
 
         if (matches.some(d => d.status === 'loading')) {
@@ -2174,32 +2060,11 @@
         return matches;
       },
       loadMatches: async (resolvedMatches, 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;
         const matchPromises = resolvedMatches.map(async match => {
           // Validate the match (loads search params etc)
-          match.__.validate(); // If this is a preload, add it to the preload cache
+          match.__.validate();
 
-
-          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 === match.matchId)) {
-              return;
-            }
-
-            router.matchCache[match.matchId] = {
-              gc: now + loaderOpts.gcMaxAge,
-              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') {
-            const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-            match.load({
-              maxAge
-            });
-          }
+          match.load(loaderOpts);
 
           if (match.status === 'loading') {
             // If requested, start the pending timers
@@ -2223,7 +2088,7 @@
           }
         });
       },
-      reload: () => router._navigate({
+      reload: () => router.__.navigate({
         fromCurrent: true,
         replace: true,
         search: true
@@ -2256,10 +2121,6 @@
           to: next.pathname
         }));
       },
-      _navigate: location => {
-        const next = router.buildNext(location);
-        return router.commitLocation(next, location.replace);
-      },
       navigate: async _ref8 => {
         let {
           from,
@@ -2283,7 +2144,7 @@
         } catch (e) {}
 
         invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
-        return router._navigate({
+        return router.__.navigate({
           from: fromString,
           to: toString,
           search,
@@ -2355,7 +2216,7 @@
             } // All is well? Navigate!)
 
 
-            router._navigate(nextOpts);
+            router.__.navigate(nextOpts);
           }
         }; // The click handler
 
@@ -2406,9 +2267,174 @@
           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) {
+                {
+                  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