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

package/build/esm/index.js

@@ -10,6 +10,7 @@
  */
 import * as React from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
+export { lazyWithPreload as lazy } from 'react-lazy-with-preload/lib/index';
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -1427,7 +1428,7 @@ const createRouteConfig = function createRouteConfig(options, children, isRoot,
   };
 };
 
-const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
 function createRouteMatch(router, route, opts) {
   const routeMatch = _extends({}, route, opts, {
     router,
@@ -1437,7 +1438,6 @@ function createRouteMatch(router, route, opts) {
     status: 'idle',
     routeLoaderData: {},
     loaderData: {},
-    isPending: false,
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
@@ -1455,32 +1455,6 @@ function createRouteMatch(router, route, opts) {
 
         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;
 
@@ -1500,11 +1474,11 @@ function createRouteMatch(router, route, opts) {
 
           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) {
@@ -1524,14 +1498,16 @@ function createRouteMatch(router, route, opts) {
       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();
@@ -1575,91 +1551,79 @@ function createRouteMatch(router, route, opts) {
         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;
               }
 
-              if (process.env.NODE_ENV !== 'production') {
-                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;
+            if (process.env.NODE_ENV !== 'production') {
+              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;
     }
   });
@@ -1895,18 +1859,26 @@ function createRouter(userOptions) {
       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
@@ -2128,14 +2100,8 @@ function createRouter(userOptions) {
 
         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;
         }
       });
@@ -2587,6 +2553,12 @@ function createReactRouter(opts) {
           next
         } = linkInfo;
 
+        const reactHandleClick = e => {
+          React.startTransition(() => {
+            handleClick(e);
+          });
+        };
+
         const composeHandlers = handlers => e => {
           e.persist();
           handlers.forEach(handler => {
@@ -2600,7 +2572,7 @@ function createReactRouter(opts) {
         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]),
@@ -2680,18 +2652,12 @@ function createReactRouter(opts) {
       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;
-        }
+    loadComponent: async component => {
+      if (component.preload && typeof document !== 'undefined') {
+        component.preload(); // return await component.preload()
       }
 
-      return element;
+      return component;
     }
   }));
   return coreRouter;
@@ -2728,64 +2694,43 @@ function useMatches() {
   return React.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.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.createElement(MatchesProvider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(PendingComponent, null)
+  }, /*#__PURE__*/React.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.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.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.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.createElement(MatchesProvider, {
-    value: matches
-  }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    catchElement: catchElement
-  }, element));
+    invariant(false, 'This should never happen!');
+  })())));
 }
 
 class CatchBoundary extends React.Component {
@@ -2805,12 +2750,12 @@ class CatchBoundary extends React.Component {
   }
 
   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.createElement(errorComponent, this.state);
     }
 
     return this.props.children;