@tanstack/router-core 0.0.1-beta.35 → 0.0.1-beta.36

package/build/cjs/router.js

@@ -34,8 +34,9 @@ const createDefaultHistory = () => isServer ? history.createMemoryHistory() : hi
 function getInitialRouterState() {
   return {
     status: 'idle',
-    location: null,
-    matches: [],
+    latestLocation: null,
+    currentLocation: null,
+    currentMatches: [],
     actions: {},
     loaders: {},
     lastUpdated: Date.now(),
@@ -66,7 +67,6 @@ function createRouter(userOptions) {
     basepath: '',
     routeTree: undefined,
     routesById: {},
-    __location: undefined,
     //
     resolveNavigation: () => {},
     matchCache: {},
@@ -86,65 +86,53 @@ function createRouter(userOptions) {
       return router.routesById[id];
     },
     notify: () => {
-      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));
+      const isFetching = router.state.status === 'loading' || router.state.currentMatches.some(d => d.isFetching);
+      const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.currentMatches.find(dd => dd.matchId === d.match.matchId));
       if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
         router.state = _rollupPluginBabelHelpers["extends"]({}, router.state, {
           isFetching,
           isPreloading
         });
       }
-      cascadeLoaderData(router.state.matches);
+      cascadeLoaderData(router.state.currentMatches);
       router.listeners.forEach(listener => listener(router));
     },
     dehydrate: () => {
       return {
-        location: router.__location,
-        state: _rollupPluginBabelHelpers["extends"]({}, utils.pick(router.state, ['status', 'location', 'lastUpdated', 'location']), {
-          matches: router.state.matches.map(match => utils.pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
+        state: _rollupPluginBabelHelpers["extends"]({}, utils.pick(router.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']), {
+          currentMatches: router.state.currentMatches.map(match => utils.pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
         }),
         context: router.options.context
       };
     },
     hydrate: dehydratedState => {
       // Update the location
-      router.__location = dehydratedState.location;
+      router.state.latestLocation = dehydratedState.state.latestLocation;
+      router.state.currentLocation = dehydratedState.state.currentLocation;
 
       // Update the context
       router.options.context = dehydratedState.context;
 
       // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
+      const currentMatches = router.matchRoutes(router.state.latestLocation.pathname, {
         strictParseParams: true
       });
-      matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.state.matches[index];
+      currentMatches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedState.state.currentMatches[index];
         invariant__default["default"](dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
         Object.assign(match, dehydratedMatch);
       });
-      matches.forEach(match => match.__.validate());
+      currentMatches.forEach(match => match.__.validate());
       router.state = _rollupPluginBabelHelpers["extends"]({}, router.state, dehydratedState, {
-        matches
+        currentMatches
       });
     },
     mount: () => {
-      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)
-      // }
-
-      if (!router.state.matches.length) {
+      if (!router.state.currentMatches.length) {
         router.load();
       }
       const unsub = router.history.listen(event => {
-        router.load(router.__.parseLocation(event.location, router.__location));
+        router.load(router.__.parseLocation(event.location, router.state.latestLocation));
       });
 
       // addEventListener does not exist in React Native, but window does
@@ -169,12 +157,12 @@ function createRouter(userOptions) {
     update: opts => {
       var _trimPath;
       const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
-      if (!router.__location || newHistory) {
+      if (!router.state.latestLocation || newHistory) {
         if (opts != null && opts.history) {
           router.history = opts.history;
         }
-        router.__location = router.__.parseLocation(router.history.location);
-        router.state.location = router.__location;
+        router.state.latestLocation = router.__.parseLocation(router.history.location);
+        router.state.currentLocation = router.state.latestLocation;
       }
       Object.assign(router.options, opts);
       const {
@@ -189,8 +177,8 @@ function createRouter(userOptions) {
       return router;
     },
     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 => {
+      var _router$state$pending;
+      [...router.state.currentMatches, ...((_router$state$pending = router.state.pendingMatches) != null ? _router$state$pending : [])].forEach(match => {
         match.cancel();
       });
     },
@@ -199,51 +187,43 @@ function createRouter(userOptions) {
       router.startedLoadingAt = id;
       if (next) {
         // Ingest the new location
-        router.__location = next;
+        router.state.latestLocation = next;
       }
 
       // Cancel any pending matches
       router.cancelMatches();
 
       // Match the routes
-      const matches = router.matchRoutes(router.__location.pathname, {
+      const matches = router.matchRoutes(router.state.latestLocation.pathname, {
         strictParseParams: true
       });
       if (typeof document !== 'undefined') {
         router.state = _rollupPluginBabelHelpers["extends"]({}, router.state, {
-          pending: {
-            matches: matches,
-            location: router.__location
-          },
-          status: 'loading'
+          status: 'loading',
+          pendingMatches: matches,
+          pendingLocation: router.state.latestLocation
         });
       } else {
         router.state = _rollupPluginBabelHelpers["extends"]({}, router.state, {
-          matches: matches,
-          location: router.__location,
-          status: 'loading'
+          status: 'loading',
+          currentMatches: matches,
+          currentLocation: router.state.latestLocation
         });
       }
+      router.notify();
 
-      // Check if each match middleware to see if the route can be accessed
+      // Load the matches
       try {
-        await Promise.all(matches.map(match => match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
-          router: router,
-          match
-        })));
+        await router.loadMatches(matches);
       } catch (err) {
-        console.info(err);
-        invariant__default["default"](false, "A route's beforeLoad middleware failed! \uD83D\uDC46");
+        console.log(err);
+        invariant__default["default"](false, 'Matches failed to load due to error above ☝️. Navigation cancelled!');
       }
-      router.notify();
-
-      // Load the matches
-      await router.loadMatches(matches);
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
         return router.navigationPromise;
       }
-      const previousMatches = router.state.matches;
+      const previousMatches = router.state.currentMatches;
       const exiting = [],
         staying = [];
       previousMatches.forEach(d => {
@@ -302,10 +282,11 @@ function createRouter(userOptions) {
         }
       });
       router.state = _rollupPluginBabelHelpers["extends"]({}, router.state, {
-        location: router.__location,
-        matches,
-        pending: undefined,
-        status: 'idle'
+        status: 'idle',
+        currentLocation: router.state.latestLocation,
+        currentMatches: matches,
+        pendingLocation: undefined,
+        pendingMatches: undefined
       });
       router.notify();
       router.resolveNavigation();
@@ -331,7 +312,7 @@ function createRouter(userOptions) {
     },
     loadRoute: async function loadRoute(navigateOpts) {
       if (navigateOpts === void 0) {
-        navigateOpts = router.__location;
+        navigateOpts = router.state.latestLocation;
       }
       const next = router.buildNext(navigateOpts);
       const matches = router.matchRoutes(next.pathname, {
@@ -343,7 +324,7 @@ function createRouter(userOptions) {
     preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
       var _ref3, _ref4, _loaderOpts$maxAge, _ref5, _ref6, _loaderOpts$gcMaxAge;
       if (navigateOpts === void 0) {
-        navigateOpts = router.__location;
+        navigateOpts = router.state.latestLocation;
       }
       const next = router.buildNext(navigateOpts);
       const matches = router.matchRoutes(next.pathname, {
@@ -357,13 +338,13 @@ function createRouter(userOptions) {
       return matches;
     },
     matchRoutes: (pathname, opts) => {
-      var _router$state$pending3, _router$state$pending4;
+      var _router$state$pending2;
       router.cleanMatchCache();
       const matches = [];
       if (!router.routeTree) {
         return matches;
       }
-      const existingMatches = [...router.state.matches, ...((_router$state$pending3 = (_router$state$pending4 = router.state.pending) == null ? void 0 : _router$state$pending4.matches) != null ? _router$state$pending3 : [])];
+      const existingMatches = [...router.state.currentMatches, ...((_router$state$pending2 = router.state.pendingMatches) != null ? _router$state$pending2 : [])];
       const recurse = async routes => {
         var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
         const parentMatch = utils.last(matches);
@@ -382,7 +363,15 @@ function createRouter(userOptions) {
               fuzzy,
               caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
             });
-            console.log(router.basepath, route.fullPath, fuzzy, pathname, matchParams);
+
+            // console.log(
+            //   router.basepath,
+            //   route.fullPath,
+            //   fuzzy,
+            //   pathname,
+            //   matchParams,
+            // )
+
             if (matchParams) {
               let parsedParams;
               try {
@@ -428,10 +417,27 @@ function createRouter(userOptions) {
       return matches;
     },
     loadMatches: async (resolvedMatches, loaderOpts) => {
-      const matchPromises = resolvedMatches.map(async match => {
-        var _search$__data;
+      resolvedMatches.forEach(async match => {
         // Validate the match (loads search params etc)
         match.__.validate();
+      });
+
+      // Check each match middleware to see if the route can be accessed
+      await Promise.all(resolvedMatches.map(async match => {
+        try {
+          await (match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
+            router: router,
+            match
+          }));
+        } catch (err) {
+          if (!(loaderOpts != null && loaderOpts.preload)) {
+            match.options.onLoadError == null ? void 0 : match.options.onLoadError(err);
+          }
+          throw err;
+        }
+      }));
+      const matchPromises = resolvedMatches.map(async match => {
+        var _search$__data;
         const search = match.search;
         if ((_search$__data = search.__data) != null && _search$__data.matchId && search.__data.matchId !== match.matchId) {
           return;
@@ -486,10 +492,10 @@ function createRouter(userOptions) {
       }
     },
     invalidateRoute: opts => {
-      var _router$state$pending5, _router$state$pending6;
+      var _router$state$pending3;
       const next = router.buildNext(opts);
       const unloadedMatchIds = router.matchRoutes(next.pathname).map(d => d.matchId);
-      [...router.state.matches, ...((_router$state$pending5 = (_router$state$pending6 = router.state.pending) == null ? void 0 : _router$state$pending6.matches) != null ? _router$state$pending5 : [])].forEach(match => {
+      [...router.state.currentMatches, ...((_router$state$pending3 = router.state.pendingMatches) != null ? _router$state$pending3 : [])].forEach(match => {
         if (unloadedMatchIds.includes(match.matchId)) {
           match.invalidate();
         }
@@ -512,15 +518,14 @@ function createRouter(userOptions) {
       });
       const next = router.buildNext(location);
       if (opts != null && opts.pending) {
-        var _router$state$pending7;
-        if (!((_router$state$pending7 = router.state.pending) != null && _router$state$pending7.location)) {
+        if (!router.state.pendingLocation) {
           return false;
         }
-        return !!path.matchPathname(router.basepath, router.state.pending.location.pathname, _rollupPluginBabelHelpers["extends"]({}, opts, {
+        return !!path.matchPathname(router.basepath, router.state.pendingLocation.pathname, _rollupPluginBabelHelpers["extends"]({}, opts, {
           to: next.pathname
         }));
       }
-      return !!path.matchPathname(router.basepath, router.state.location.pathname, _rollupPluginBabelHelpers["extends"]({}, opts, {
+      return !!path.matchPathname(router.basepath, router.state.currentLocation.pathname, _rollupPluginBabelHelpers["extends"]({}, opts, {
         to: next.pathname
       }));
     },
@@ -598,11 +603,11 @@ function createRouter(userOptions) {
       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('/');
+      const pathIsEqual = router.state.currentLocation.pathname === next.pathname;
+      const currentPathSplit = router.state.currentLocation.pathname.split('/');
       const nextPathSplit = next.pathname.split('/');
       const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = router.state.location.hash === next.hash;
+      const hashIsEqual = router.state.currentLocation.hash === next.hash;
       // Combine the matches based on user options
       const pathTest = activeOptions != null && activeOptions.exact ? pathIsEqual : pathIsFuzzyEqual;
       const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true;
@@ -629,6 +634,9 @@ function createRouter(userOptions) {
           router.preloadRoute(nextOpts, {
             maxAge: userPreloadMaxAge,
             gcMaxAge: userPreloadGcMaxAge
+          }).catch(err => {
+            console.log(err);
+            console.warn('Error preloading route! ☝️');
           });
         }
       };
@@ -643,6 +651,9 @@ function createRouter(userOptions) {
             router.preloadRoute(nextOpts, {
               maxAge: userPreloadMaxAge,
               gcMaxAge: userPreloadGcMaxAge
+            }).catch(err => {
+              console.log(err);
+              console.warn('Error preloading route! ☝️');
             });
           }, preloadDelay);
         }
@@ -725,9 +736,9 @@ function createRouter(userOptions) {
         if (dest === void 0) {
           dest = {};
         }
-        const fromPathname = dest.fromCurrent ? router.__location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.__location.pathname;
+        const fromPathname = dest.fromCurrent ? router.state.latestLocation.pathname : (_dest$from = dest.from) != null ? _dest$from : router.state.latestLocation.pathname;
         let pathname = path.resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
-        const fromMatches = router.matchRoutes(router.__location.pathname, {
+        const fromMatches = router.matchRoutes(router.state.latestLocation.pathname, {
           strictParseParams: true
         });
         const toMatches = router.matchRoutes(pathname);
@@ -741,7 +752,7 @@ function createRouter(userOptions) {
         pathname = path.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;
+        const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.state.latestLocation.search) : router.state.latestLocation.search;
 
         // Then the link/navigate function
         const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
@@ -751,15 +762,15 @@ function createRouter(userOptions) {
 
         // Then post filters
         const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-        const search = utils.replaceEqualDeep(router.__location.search, postFilteredSearch);
+        const search = utils.replaceEqualDeep(router.state.latestLocation.search, postFilteredSearch);
         const searchStr = router.options.stringifySearch(search);
-        let hash = dest.hash === true ? router.__location.hash : utils.functionalUpdate(dest.hash, router.__location.hash);
+        let hash = dest.hash === true ? router.state.latestLocation.hash : utils.functionalUpdate(dest.hash, router.state.latestLocation.hash);
         hash = hash ? "#" + hash : '';
         return {
           pathname,
           search,
           searchStr,
-          state: router.__location.state,
+          state: router.state.latestLocation.state,
           hash,
           href: "" + pathname + searchStr + hash,
           key: dest.key