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

package/build/stats-html.html

@@ -4014,7 +4014,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"uid":"55de-59","name":"\u0000rollupPluginBabelHelpers.js"},{"name":"packages","children":[{"name":"router-core/build/esm/index.js","uid":"55de-61"},{"name":"react-router/src/index.tsx","uid":"55de-63"}]}]}],"isRoot":true},"nodeParts":{"55de-59":{"renderedLength":798,"gzipLength":366,"brotliLength":0,"mainUid":"55de-58"},"55de-61":{"renderedLength":73849,"gzipLength":15420,"brotliLength":0,"mainUid":"55de-60"},"55de-63":{"renderedLength":12114,"gzipLength":3160,"brotliLength":0,"mainUid":"55de-62"}},"nodeMetas":{"55de-58":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"55de-59"},"imported":[],"importedBy":[{"uid":"55de-62"}]},"55de-60":{"id":"/packages/router-core/build/esm/index.js","moduleParts":{"index.production.js":"55de-61"},"imported":[],"importedBy":[{"uid":"55de-62"}]},"55de-62":{"id":"/packages/react-router/src/index.tsx","moduleParts":{"index.production.js":"55de-63"},"imported":[{"uid":"55de-58"},{"uid":"55de-64"},{"uid":"55de-65"},{"uid":"55de-60"}],"importedBy":[],"isEntry":true},"55de-64":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"55de-62"}],"isExternal":true},"55de-65":{"id":"use-sync-external-store/shim","moduleParts":{},"imported":[],"importedBy":[{"uid":"55de-62"}],"isExternal":true}},"env":{"rollup":"2.77.2"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"uid":"f71d-59","name":"\u0000rollupPluginBabelHelpers.js"},{"name":"packages","children":[{"name":"router-core/build/esm/index.js","uid":"f71d-61"},{"name":"react-router/src/index.tsx","uid":"f71d-63"}]}]}],"isRoot":true},"nodeParts":{"f71d-59":{"renderedLength":798,"gzipLength":366,"brotliLength":0,"mainUid":"f71d-58"},"f71d-61":{"renderedLength":74805,"gzipLength":15586,"brotliLength":0,"mainUid":"f71d-60"},"f71d-63":{"renderedLength":12706,"gzipLength":3314,"brotliLength":0,"mainUid":"f71d-62"}},"nodeMetas":{"f71d-58":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"f71d-59"},"imported":[],"importedBy":[{"uid":"f71d-62"}]},"f71d-60":{"id":"/packages/router-core/build/esm/index.js","moduleParts":{"index.production.js":"f71d-61"},"imported":[],"importedBy":[{"uid":"f71d-62"}]},"f71d-62":{"id":"/packages/react-router/src/index.tsx","moduleParts":{"index.production.js":"f71d-63"},"imported":[{"uid":"f71d-58"},{"uid":"f71d-64"},{"uid":"f71d-65"},{"uid":"f71d-60"}],"importedBy":[],"isEntry":true},"f71d-64":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"f71d-62"}],"isExternal":true},"f71d-65":{"id":"use-sync-external-store/shim","moduleParts":{},"imported":[],"importedBy":[{"uid":"f71d-62"}],"isExternal":true}},"env":{"rollup":"2.77.2"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "55de-67",
+            "uid": "f71d-67",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "router-core/build/esm/index.js",
-                "uid": "55de-69"
+                "uid": "f71d-69"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "55de-71"
+                "uid": "f71d-71"
               }
             ]
           }
@@ -29,90 +29,90 @@
     "isRoot": true
   },
   "nodeParts": {
-    "55de-67": {
+    "f71d-67": {
       "renderedLength": 798,
       "gzipLength": 366,
       "brotliLength": 0,
-      "mainUid": "55de-66"
+      "mainUid": "f71d-66"
     },
-    "55de-69": {
-      "renderedLength": 73849,
-      "gzipLength": 15420,
+    "f71d-69": {
+      "renderedLength": 74805,
+      "gzipLength": 15586,
       "brotliLength": 0,
-      "mainUid": "55de-68"
+      "mainUid": "f71d-68"
     },
-    "55de-71": {
-      "renderedLength": 12114,
-      "gzipLength": 3160,
+    "f71d-71": {
+      "renderedLength": 12706,
+      "gzipLength": 3314,
       "brotliLength": 0,
-      "mainUid": "55de-70"
+      "mainUid": "f71d-70"
     }
   },
   "nodeMetas": {
-    "55de-66": {
+    "f71d-66": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "55de-67"
+        "index.production.js": "f71d-67"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "55de-70"
+          "uid": "f71d-70"
         }
       ]
     },
-    "55de-68": {
+    "f71d-68": {
       "id": "/packages/router-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "55de-69"
+        "index.production.js": "f71d-69"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "55de-70"
+          "uid": "f71d-70"
         }
       ]
     },
-    "55de-70": {
+    "f71d-70": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "55de-71"
+        "index.production.js": "f71d-71"
       },
       "imported": [
         {
-          "uid": "55de-66"
+          "uid": "f71d-66"
         },
         {
-          "uid": "55de-72"
+          "uid": "f71d-72"
         },
         {
-          "uid": "55de-73"
+          "uid": "f71d-73"
         },
         {
-          "uid": "55de-68"
+          "uid": "f71d-68"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "55de-72": {
+    "f71d-72": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "55de-70"
+          "uid": "f71d-70"
         }
       ],
       "isExternal": true
     },
-    "55de-73": {
+    "f71d-73": {
       "id": "use-sync-external-store/shim",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "55de-70"
+          "uid": "f71d-70"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -9,18 +9,15 @@
  * @license MIT
  */
 import * as React from 'react';
-import { AnyRouteConfig, RouteConfig, AnyAllRouteInfo, AllRouteInfo, RootRouteId, RouterState, RouteMatch, ToOptions, MatchRouteOptions, RouteInfoByPath, ResolveRelativePath, NoInfer, DefaultAllRouteInfo, AnyRouteInfo, RouteInfo, ValidFromPath, LinkOptions, RouterOptions, Router } from '@tanstack/router-core';
+import { AnyRouteConfig, RouteConfig, AnyAllRouteInfo, AllRouteInfo, RouterState, RouteMatch, ToOptions, MatchRouteOptions, RouteInfoByPath, ResolveRelativePath, NoInfer, DefaultAllRouteInfo, AnyRouteInfo, RouteInfo, CheckId, ToIdOption, ValidFromPath, LinkOptions, RouterOptions, Router } from '@tanstack/router-core';
 export * from '@tanstack/router-core';
 
 declare module '@tanstack/router-core' {
     interface FrameworkGenerics {
         Element: React.ReactNode;
-        AsyncElement: (opts: {
-            params: Record<string, string>;
-        }) => Promise<React.ReactNode>;
-        SyncOrAsyncElement: React.ReactNode | FrameworkGenerics['AsyncElement'];
+        SyncOrAsyncElement: React.ReactNode | (() => Promise<any>);
     }
-    interface Router<TRouteConfig extends AnyRouteConfig = RouteConfig, TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>> extends Pick<Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][RootRouteId]>, 'linkProps' | 'Link' | 'MatchRoute'> {
+    interface Router<TRouteConfig extends AnyRouteConfig = RouteConfig, TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>> {
         useState: () => RouterState;
         useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(routeId: TId) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>;
         useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(routeId: TId) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>;
@@ -35,6 +32,7 @@ declare module '@tanstack/router-core' {
         }) => JSX.Element;
     }
     interface Route<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo, TRouteInfo extends AnyRouteInfo = RouteInfo> {
+        useRoute: <TTo extends string = '.', TResolved extends string = ResolveRelativePath<TRouteInfo['id'], NoInfer<TTo>>>(routeId: CheckId<TAllRouteInfo, TResolved, ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>>) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>;
         linkProps: <TTo extends string = '.'>(props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.AnchorHTMLAttributes<HTMLAnchorElement>;
         Link: <TTo extends string = '.'>(props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
             children?: React.ReactNode | ((state: {

package/build/umd/index.development.js

@@ -1321,6 +1321,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,
@@ -1331,6 +1365,7 @@
       childRoutes: undefined,
       parentRoute: parent,
       action,
+      loader: loader,
       buildLink: options => {
         return router.buildLink(_extends({}, options, {
           from: fullPath
@@ -1520,7 +1555,31 @@
       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
@@ -1550,12 +1609,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);
               }));
             })();
 
@@ -1730,6 +1784,7 @@
         location: null,
         matches: [],
         actions: {},
+        loaders: {},
         loaderData: {},
         lastUpdated: Date.now(),
         isFetching: false,
@@ -2066,32 +2121,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
@@ -2493,6 +2527,17 @@
   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;
 
@@ -2600,12 +2645,6 @@
             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 + "\")?");
@@ -2633,6 +2672,19 @@
         } = _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__namespace.createElement(res.default);
+          } else {
+            return res;
+          }
+        }
+
+        return element;
       }
     }));
     return coreRouter;