@tanstack/react-router 0.0.1-alpha.10 → 0.0.1-alpha.11

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
@@ -1504,7 +1539,31 @@ function createRouteMatch(router, route, opts) {
     hasLoaders: () => {
       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
@@ -1534,12 +1593,7 @@ 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);
             }));
           })();
 
@@ -1714,6 +1768,7 @@ function createRouter(userOptions) {
       location: null,
       matches: [],
       actions: {},
+      loaders: {},
       loaderData: {},
       lastUpdated: Date.now(),
       isFetching: false,
@@ -2050,32 +2105,11 @@ function createRouter(userOptions) {
       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
@@ -2477,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;
 
@@ -2584,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 + "\")?");
@@ -2617,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;