@tanstack/react-router 0.0.1-beta.12 → 0.0.1-beta.13

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":"2ef3-59","name":"\u0000rollupPluginBabelHelpers.js"},{"name":"packages","children":[{"name":"router-core/build/esm/index.js","uid":"2ef3-61"},{"name":"react-router/src/index.tsx","uid":"2ef3-63"}]}]}],"isRoot":true},"nodeParts":{"2ef3-59":{"renderedLength":798,"gzipLength":366,"brotliLength":0,"mainUid":"2ef3-58"},"2ef3-61":{"renderedLength":75522,"gzipLength":15692,"brotliLength":0,"mainUid":"2ef3-60"},"2ef3-63":{"renderedLength":11941,"gzipLength":3092,"brotliLength":0,"mainUid":"2ef3-62"}},"nodeMetas":{"2ef3-58":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"2ef3-59"},"imported":[],"importedBy":[{"uid":"2ef3-62"}]},"2ef3-60":{"id":"/packages/router-core/build/esm/index.js","moduleParts":{"index.production.js":"2ef3-61"},"imported":[],"importedBy":[{"uid":"2ef3-62"}]},"2ef3-62":{"id":"/packages/react-router/src/index.tsx","moduleParts":{"index.production.js":"2ef3-63"},"imported":[{"uid":"2ef3-58"},{"uid":"2ef3-64"},{"uid":"2ef3-65"},{"uid":"2ef3-60"}],"importedBy":[],"isEntry":true},"2ef3-64":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"2ef3-62"}],"isExternal":true},"2ef3-65":{"id":"use-sync-external-store/shim","moduleParts":{},"imported":[],"importedBy":[{"uid":"2ef3-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":"c00e-59","name":"\u0000rollupPluginBabelHelpers.js"},{"name":"packages","children":[{"name":"router-core/build/esm/index.js","uid":"c00e-61"},{"name":"react-router/src/index.tsx","uid":"c00e-63"}]}]}],"isRoot":true},"nodeParts":{"c00e-59":{"renderedLength":798,"gzipLength":366,"brotliLength":0,"mainUid":"c00e-58"},"c00e-61":{"renderedLength":73815,"gzipLength":15405,"brotliLength":0,"mainUid":"c00e-60"},"c00e-63":{"renderedLength":11547,"gzipLength":3026,"brotliLength":0,"mainUid":"c00e-62"}},"nodeMetas":{"c00e-58":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"c00e-59"},"imported":[],"importedBy":[{"uid":"c00e-62"}]},"c00e-60":{"id":"/packages/router-core/build/esm/index.js","moduleParts":{"index.production.js":"c00e-61"},"imported":[],"importedBy":[{"uid":"c00e-62"}]},"c00e-62":{"id":"/packages/react-router/src/index.tsx","moduleParts":{"index.production.js":"c00e-63"},"imported":[{"uid":"c00e-58"},{"uid":"c00e-64"},{"uid":"c00e-65"},{"uid":"c00e-60"},{"uid":"c00e-66"}],"importedBy":[],"isEntry":true},"c00e-64":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"c00e-62"}],"isExternal":true},"c00e-65":{"id":"use-sync-external-store/shim","moduleParts":{},"imported":[],"importedBy":[{"uid":"c00e-62"}],"isExternal":true},"c00e-66":{"id":"react-lazy-with-preload/lib/index","moduleParts":{},"imported":[],"importedBy":[{"uid":"c00e-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": "2ef3-67",
+            "uid": "c00e-68",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "router-core/build/esm/index.js",
-                "uid": "2ef3-69"
+                "uid": "c00e-70"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "2ef3-71"
+                "uid": "c00e-72"
               }
             ]
           }
@@ -29,90 +29,104 @@
     "isRoot": true
   },
   "nodeParts": {
-    "2ef3-67": {
+    "c00e-68": {
       "renderedLength": 798,
       "gzipLength": 366,
       "brotliLength": 0,
-      "mainUid": "2ef3-66"
+      "mainUid": "c00e-67"
     },
-    "2ef3-69": {
-      "renderedLength": 75522,
-      "gzipLength": 15692,
+    "c00e-70": {
+      "renderedLength": 73815,
+      "gzipLength": 15405,
       "brotliLength": 0,
-      "mainUid": "2ef3-68"
+      "mainUid": "c00e-69"
     },
-    "2ef3-71": {
-      "renderedLength": 11941,
-      "gzipLength": 3092,
+    "c00e-72": {
+      "renderedLength": 11547,
+      "gzipLength": 3026,
       "brotliLength": 0,
-      "mainUid": "2ef3-70"
+      "mainUid": "c00e-71"
     }
   },
   "nodeMetas": {
-    "2ef3-66": {
+    "c00e-67": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "2ef3-67"
+        "index.production.js": "c00e-68"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "2ef3-70"
+          "uid": "c00e-71"
         }
       ]
     },
-    "2ef3-68": {
+    "c00e-69": {
       "id": "/packages/router-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "2ef3-69"
+        "index.production.js": "c00e-70"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "2ef3-70"
+          "uid": "c00e-71"
         }
       ]
     },
-    "2ef3-70": {
+    "c00e-71": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "2ef3-71"
+        "index.production.js": "c00e-72"
       },
       "imported": [
         {
-          "uid": "2ef3-66"
+          "uid": "c00e-67"
         },
         {
-          "uid": "2ef3-72"
+          "uid": "c00e-73"
         },
         {
-          "uid": "2ef3-73"
+          "uid": "c00e-74"
         },
         {
-          "uid": "2ef3-68"
+          "uid": "c00e-69"
+        },
+        {
+          "uid": "c00e-75"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "2ef3-72": {
+    "c00e-73": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "2ef3-70"
+          "uid": "c00e-71"
         }
       ],
       "isExternal": true
     },
-    "2ef3-73": {
+    "c00e-74": {
       "id": "use-sync-external-store/shim",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "2ef3-70"
+          "uid": "c00e-71"
+        }
+      ],
+      "isExternal": true
+    },
+    "c00e-75": {
+      "id": "react-lazy-with-preload/lib/index",
+      "moduleParts": {},
+      "imported": [],
+      "importedBy": [
+        {
+          "uid": "c00e-71"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -11,11 +11,18 @@
 import * as React from 'react';
 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';
+export { lazyWithPreload as lazy } from 'react-lazy-with-preload/lib/index';
+export { PreloadableComponent as LazyComponent } from 'react-lazy-with-preload';
 
+declare type SyncRouteComponent = (props?: {}) => React.ReactNode;
+declare type RouteComponent = SyncRouteComponent & {
+    preload?: () => Promise<{
+        default: SyncRouteComponent;
+    }>;
+};
 declare module '@tanstack/router-core' {
     interface FrameworkGenerics {
-        Element: React.ReactNode;
-        SyncOrAsyncElement: React.ReactNode | (() => Promise<any>);
+        Component: RouteComponent;
     }
     interface Router<TRouteConfig extends AnyRouteConfig = RouteConfig, TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>> {
         useState: () => RouterState;
@@ -77,4 +84,4 @@ declare function DefaultErrorBoundary({ error }: {
 declare function usePrompt(message: string, when: boolean | any): void;
 declare function Prompt({ message, when, children }: PromptProps): React.ReactNode;
 
-export { DefaultErrorBoundary, MatchesProvider, MatchesProviderProps, Outlet, Prompt, PromptProps, RouterProps, RouterProvider, createReactRouter, useMatches, usePrompt, useRouter };
+export { DefaultErrorBoundary, MatchesProvider, MatchesProviderProps, Outlet, Prompt, PromptProps, RouteComponent, RouterProps, RouterProvider, createReactRouter, useMatches, usePrompt, useRouter };

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.shim));
-})(this, (function (exports, React, shim) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim'), require('react-lazy-with-preload/lib/index')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim', 'react-lazy-with-preload/lib/index'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.shim, global.index));
+})(this, (function (exports, React, shim, index) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -1443,7 +1443,7 @@
     };
   };
 
-  const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   function createRouteMatch(router, route, opts) {
     const routeMatch = _extends({}, route, opts, {
       router,
@@ -1453,7 +1453,6 @@
       status: 'idle',
       routeLoaderData: {},
       loaderData: {},
-      isPending: false,
       isFetching: false,
       isInvalid: false,
       invalidAt: Infinity,
@@ -1471,32 +1470,6 @@
 
           routeMatch.router.notify();
         },
-        startPending: () => {
-          var _routeMatch$options$p, _routeMatch$options$p2;
-
-          const pendingMs = (_routeMatch$options$p = routeMatch.options.pendingMs) != null ? _routeMatch$options$p : router.options.defaultPendingMs;
-          const pendingMinMs = (_routeMatch$options$p2 = routeMatch.options.pendingMinMs) != null ? _routeMatch$options$p2 : router.options.defaultPendingMinMs;
-
-          if (routeMatch.__.pendingTimeout || routeMatch.status !== 'loading' || typeof pendingMs === 'undefined') {
-            return;
-          }
-
-          routeMatch.__.pendingTimeout = setTimeout(() => {
-            routeMatch.isPending = true;
-
-            routeMatch.__.resolve();
-
-            if (typeof pendingMinMs !== 'undefined') {
-              routeMatch.__.pendingMinPromise = new Promise(r => routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs));
-            }
-          }, pendingMs);
-        },
-        cancelPending: () => {
-          routeMatch.isPending = false;
-          clearTimeout(routeMatch.__.pendingTimeout);
-          clearTimeout(routeMatch.__.pendingMinTimeout);
-          delete routeMatch.__.pendingMinPromise;
-        },
         validate: () => {
           var _routeMatch$parentMat, _routeMatch$parentMat2;
 
@@ -1516,11 +1489,11 @@
 
             routeMatch.routeSearch = nextSearch;
             routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
-            elementTypes.map(async type => {
-              const routeElement = routeMatch.options[type];
+            componentTypes.map(async type => {
+              const component = routeMatch.options[type];
 
               if (typeof routeMatch.__[type] !== 'function') {
-                routeMatch.__[type] = routeElement;
+                routeMatch.__[type] = component;
               }
             });
           } catch (err) {
@@ -1540,14 +1513,16 @@
         var _routeMatch$__$abortC;
 
         (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-
-        routeMatch.__.cancelPending();
       },
       invalidate: () => {
         routeMatch.isInvalid = true;
       },
       hasLoaders: () => {
-        return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
+        return !!(route.options.loader || componentTypes.some(d => {
+          var _route$options$d;
+
+          return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
+        }));
       },
       load: async loaderOpts => {
         const now = Date.now();
@@ -1591,91 +1566,79 @@
           routeMatch.isFetching = true;
           routeMatch.__.resolve = resolve;
 
-          routeMatch.__.loaderDataPromise = (async () => {
-            // 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
-              await Promise.all(elementTypes.map(async type => {
-                const routeElement = routeMatch.options[type];
+          routeMatch.__.componentsPromise = (async () => {
+            // then run all component and data loaders in parallel
+            // For each component type, potentially load it asynchronously
+            await Promise.all(componentTypes.map(async type => {
+              var _routeMatch$__$type;
 
-                if (typeof routeMatch.__[type] === 'function') {
-                  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,
-                    search: routeMatch.routeSearch,
-                    signal: routeMatch.__.abortController.signal
-                  });
-
-                  if (id !== routeMatch.__.latestId) {
-                    return routeMatch.__.loadPromise;
-                  }
+              const component = routeMatch.options[type];
 
-                  routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-                }
+              if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
+                routeMatch.__[type] = await router.options.loadComponent(component);
+              }
+            }));
+          })();
+
+          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,
+                  search: routeMatch.routeSearch,
+                  signal: routeMatch.__.abortController.signal
+                });
 
-                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.__.loadPromise;
                 }
 
-                {
-                  console.error(err);
-                }
-
-                routeMatch.error = err;
-                routeMatch.status = 'error';
-                routeMatch.updatedAt = Date.now();
+                routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
               }
-            });
-
-            try {
-              await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
 
+              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.__.loadPromise;
               }
 
-              if (routeMatch.__.pendingMinPromise) {
-                await routeMatch.__.pendingMinPromise;
-                delete routeMatch.__.pendingMinPromise;
-              }
-            } finally {
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loadPromise;
+              {
+                console.error(err);
               }
 
-              routeMatch.__.cancelPending();
+              routeMatch.error = err;
+              routeMatch.status = 'error';
+              routeMatch.updatedAt = Date.now();
+            }
+          });
 
-              routeMatch.isPending = false;
-              routeMatch.isFetching = false;
+          try {
+            await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise]);
 
-              routeMatch.__.notify();
+            if (id !== routeMatch.__.latestId) {
+              return routeMatch.__.loadPromise;
+            }
+          } finally {
+            if (id !== routeMatch.__.latestId) {
+              return routeMatch.__.loadPromise;
             }
-          })();
 
-          await routeMatch.__.loaderDataPromise;
+            routeMatch.isFetching = false;
 
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise;
+            routeMatch.__.notify();
           }
-
-          delete routeMatch.__.loaderDataPromise;
         });
         await routeMatch.__.loadPromise;
+
+        if (id !== routeMatch.__.latestId) {
+          return routeMatch.__.loadPromise;
+        }
+
         delete routeMatch.__.loadPromise;
       }
     });
@@ -1911,18 +1874,26 @@
         const matches = router.matchRoutes(router.location.pathname, {
           strictParseParams: true
         });
-        router.state = _extends({}, router.state, {
-          pending: {
+
+        if (typeof document !== 'undefined') {
+          router.state = _extends({}, router.state, {
+            pending: {
+              matches: matches,
+              location: router.location
+            },
+            status: 'loading'
+          });
+        } else {
+          router.state = _extends({}, router.state, {
             matches: matches,
-            location: router.location
-          },
-          status: 'loading'
-        });
+            location: router.location,
+            status: 'loading'
+          });
+        }
+
         router.notify(); // Load the matches
 
-        await router.loadMatches(matches, {
-          withPending: true
-        });
+        await router.loadMatches(matches);
 
         if (router.startedLoadingAt !== id) {
           // Ignore side-effects of match loading
@@ -2144,14 +2115,8 @@
 
           match.load(loaderOpts);
 
-          if (match.status === 'loading') {
-            // If requested, start the pending timers
-            if (loaderOpts != null && loaderOpts.withPending) match.__.startPending();
-          }
-
           if (match.__.loadPromise) {
             // Wait for the first sign of activity from the match
-            // This might be completion, error, or a pending state
             await match.__.loadPromise;
           }
         });
@@ -2603,6 +2568,12 @@
             next
           } = linkInfo;
 
+          const reactHandleClick = e => {
+            React__namespace.startTransition(() => {
+              handleClick(e);
+            });
+          };
+
           const composeHandlers = handlers => e => {
             e.persist();
             handlers.forEach(handler => {
@@ -2616,7 +2587,7 @@
           const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
           return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
             href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
+            onClick: composeHandlers([reactHandleClick, onClick]),
             onFocus: composeHandlers([handleFocus, onFocus]),
             onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
             onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -2696,18 +2667,12 @@
         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;
-          }
+      loadComponent: async component => {
+        if (component.preload && typeof document !== 'undefined') {
+          component.preload(); // return await component.preload()
         }
 
-        return element;
+        return component;
       }
     }));
     return coreRouter;
@@ -2744,64 +2709,43 @@
     return React__namespace.useContext(matchesContext);
   }
   function Outlet() {
-    var _match$options$catchE;
+    var _ref3, _match$__$pendingComp, _match$__$errorCompon;
 
     const router = useRouter();
     const matches = useMatches().slice(1);
     const match = matches[0];
+    const defaultPending = React__namespace.useCallback(() => null, []);
 
     if (!match) {
       return null;
     }
 
-    const element = (() => {
-      var _match$__$errorElemen, _ref4, _ref5;
-
-      if (!match) {
-        return null;
-      }
-
-      const errorElement = (_match$__$errorElemen = match.__.errorElement) != null ? _match$__$errorElemen : router.options.defaultErrorElement;
-
+    const PendingComponent = (_ref3 = (_match$__$pendingComp = match.__.pendingComponent) != null ? _match$__$pendingComp : router.options.defaultPendingComponent) != null ? _ref3 : defaultPending;
+    const errorComponent = (_match$__$errorCompon = match.__.errorComponent) != null ? _match$__$errorCompon : router.options.defaultErrorComponent;
+    return /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
+      value: matches
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      errorComponent: errorComponent
+    }, (() => {
       if (match.status === 'error') {
-        if (errorElement) {
-          return errorElement;
-        }
-
-        if (match.options.useErrorBoundary || router.options.useErrorBoundary) {
-          throw match.error;
-        }
-
-        return /*#__PURE__*/React__namespace.createElement(DefaultErrorBoundary, {
-          error: match.error
-        });
+        throw match.error;
       }
 
-      if (match.status === 'loading' || match.status === 'idle') {
-        if (match.isPending) {
-          var _match$__$pendingElem;
+      if (match.status === 'success') {
+        var _ref4, _ref5;
 
-          const pendingElement = (_match$__$pendingElem = match.__.pendingElement) != null ? _match$__$pendingElem : router.options.defaultPendingElement;
-
-          if (match.options.pendingMs || pendingElement) {
-            var _ref3;
-
-            return (_ref3 = pendingElement) != null ? _ref3 : null;
-          }
-        }
-
-        return null;
+        return /*#__PURE__*/React__namespace.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
       }
 
-      return (_ref4 = (_ref5 = match.__.element) != null ? _ref5 : router.options.defaultElement) != null ? _ref4 : /*#__PURE__*/React__namespace.createElement(Outlet, null);
-    })();
+      if (match.__.loadPromise) {
+        console.log(match.matchId, 'suspend');
+        throw match.__.loadPromise;
+      }
 
-    const catchElement = (_match$options$catchE = match == null ? void 0 : match.options.catchElement) != null ? _match$options$catchE : router.options.defaultCatchElement;
-    return /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-      value: matches
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      catchElement: catchElement
-    }, element));
+      invariant(false, 'This should never happen!');
+    })())));
   }
 
   class CatchBoundary extends React__namespace.Component {
@@ -2821,12 +2765,12 @@
     }
 
     render() {
-      var _this$props$catchElem;
+      var _this$props$errorComp;
 
-      const catchElement = (_this$props$catchElem = this.props.catchElement) != null ? _this$props$catchElem : DefaultErrorBoundary;
+      const errorComponent = (_this$props$errorComp = this.props.errorComponent) != null ? _this$props$errorComp : DefaultErrorBoundary;
 
       if (this.state.error) {
-        return typeof catchElement === 'function' ? catchElement(this.state) : catchElement;
+        return /*#__PURE__*/React__namespace.createElement(errorComponent, this.state);
       }
 
       return this.props.children;
@@ -2886,6 +2830,10 @@
     return children != null ? children : null;
   }
 
+  Object.defineProperty(exports, 'lazy', {
+    enumerable: true,
+    get: function () { return index.lazyWithPreload; }
+  });
   exports.DefaultErrorBoundary = DefaultErrorBoundary;
   exports.MatchesProvider = MatchesProvider;
   exports.Outlet = Outlet;