@tanstack/react-router 0.0.1-beta.16 → 0.0.1-beta.19

package/build/esm/index.js

@@ -10,7 +10,6 @@
  */
 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) {
@@ -1534,11 +1533,19 @@ function createRouteMatch(router, route, opts) {
       }
     },
     fetch: async opts => {
-      const id = '' + Date.now() + Math.random();
-      routeMatch.__.latestId = id; // If the match was in an error state, set it
+      const loadId = '' + Date.now() + Math.random();
+      routeMatch.__.latestId = loadId;
+
+      const checkLatest = async () => {
+        if (loadId !== routeMatch.__.latestId) {
+          // warning(true, 'Data loader is out of date!')
+          return new Promise(() => {});
+        }
+      }; // If the match was in an error state, set it
       // to a loading state again. Otherwise, keep it
       // as loading or resolved
 
+
       if (routeMatch.status === 'idle') {
         routeMatch.status = 'loading';
       } // We started loading the route, so it's no longer invalid
@@ -1570,19 +1577,8 @@ function createRouteMatch(router, route, opts) {
             var _ref, _ref2, _opts$maxAge;
 
             if (routeMatch.options.loader) {
-              var _routeMatch$parentMat3;
-
-              const data = await routeMatch.options.loader({
-                parentLoaderPromise: (_routeMatch$parentMat3 = routeMatch.parentMatch) == null ? void 0 : _routeMatch$parentMat3.__.dataPromise,
-                params: routeMatch.params,
-                search: routeMatch.routeSearch,
-                signal: routeMatch.__.abortController.signal
-              });
-
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loadPromise;
-              }
-
+              const data = await router.loadMatchData(routeMatch);
+              await checkLatest();
               routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
             }
 
@@ -1592,9 +1588,7 @@ function createRouteMatch(router, route, opts) {
             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);
             return routeMatch.routeLoaderData;
           } catch (err) {
-            if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loadPromise;
-            }
+            await checkLatest();
 
             if (process.env.NODE_ENV !== 'production') {
               console.error(err);
@@ -1607,29 +1601,23 @@ function createRouteMatch(router, route, opts) {
           }
         });
 
-        try {
-          await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
-
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise;
-          }
-        } finally {
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise;
-          }
-
+        const after = async () => {
+          await checkLatest();
           routeMatch.isFetching = false;
+          delete routeMatch.__.loadPromise;
 
           routeMatch.__.notify();
+        };
+
+        try {
+          await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
+          after();
+        } catch (_unused) {
+          after();
         }
       });
       await routeMatch.__.loadPromise;
-
-      if (id !== routeMatch.__.latestId) {
-        return routeMatch.__.loadPromise;
-      }
-
-      delete routeMatch.__.loadPromise;
+      await checkLatest();
     }
   });
 
@@ -1723,6 +1711,8 @@ function createRouter(userOptions) {
   });
 
   let router = {
+    types: undefined,
+    // public api
     history,
     options: originalOptions,
     listeners: [],
@@ -1731,7 +1721,6 @@ function createRouter(userOptions) {
     routeTree: undefined,
     routesById: {},
     location: undefined,
-    allRouteInfo: undefined,
     //
     navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
@@ -2114,6 +2103,11 @@ function createRouter(userOptions) {
         match.__.validate();
 
         match.load(loaderOpts);
+        const search = match.search;
+
+        if (search.__data && search.__data.matchId !== match.matchId) {
+          return;
+        }
 
         if (match.__.loadPromise) {
           // Wait for the first sign of activity from the match
@@ -2123,6 +2117,37 @@ function createRouter(userOptions) {
       router.notify();
       await Promise.all(matchPromises);
     },
+    loadMatchData: async routeMatch => {
+      if (isServer || !router.options.useServerData) {
+        var _await$routeMatch$opt;
+
+        return (_await$routeMatch$opt = await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
+          // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
+          params: routeMatch.params,
+          search: routeMatch.routeSearch,
+          signal: routeMatch.__.abortController.signal
+        }))) != null ? _await$routeMatch$opt : {};
+      } else {
+        const next = router.buildNext({
+          to: '.',
+          search: d => _extends({}, d != null ? d : {}, {
+            __data: {
+              matchId: routeMatch.matchId
+            }
+          })
+        });
+        const res = await fetch(next.href, {
+          method: 'GET' // signal: routeMatch.__.abortController.signal,
+
+        });
+
+        if (res.ok) {
+          return res.json();
+        }
+
+        throw new Error('Failed to fetch match data');
+      }
+    },
     invalidateRoute: opts => {
       var _router$state$pending5, _router$state$pending6;
 
@@ -2499,9 +2524,38 @@ function cascadeLoaderData(matches) {
 const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
       _excluded2 = ["pending", "caseSensitive", "children"],
       _excluded3 = ["children", "router"];
+function lazy(importer) {
+  const lazyComp = /*#__PURE__*/React.lazy(importer);
+  let promise;
+  let resolvedComp;
+  const forwardedComp = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const resolvedCompRef = React.useRef(resolvedComp || lazyComp);
+    return /*#__PURE__*/React.createElement(resolvedCompRef.current, _extends$2({}, ref ? {
+      ref
+    } : {}, props));
+  });
+  const finalComp = forwardedComp;
+
+  finalComp.preload = () => {
+    if (!promise) {
+      promise = importer().then(module => {
+        resolvedComp = module.default;
+        return resolvedComp;
+      });
+    }
+
+    return promise;
+  };
+
+  return finalComp;
+}
 //
+function Link(props) {
+  const router = useRouter();
+  return /*#__PURE__*/React.createElement(router.Link, props);
+}
 const matchesContext = /*#__PURE__*/React.createContext(null);
-const routerContext = /*#__PURE__*/React.createContext(null); // Detect if we're in the DOM
+const routerContext = /*#__PURE__*/React.createContext(null);
 function MatchesProvider(props) {
   return /*#__PURE__*/React.createElement(matchesContext.Provider, props);
 }
@@ -2647,7 +2701,7 @@ function createReactRouter(opts) {
 
           if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
             invariant(match, "Could not find an active match for \"" + routeId + "\"!");
-            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch('" + (match == null ? void 0 : match.routeId) + "') is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useMatch(" + (match == null ? void 0 : match.routeId) + ", { strict: false })' or 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
+            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
           }
 
           return match;
@@ -2684,11 +2738,12 @@ function RouterProvider(_ref2) {
   router.update(rest);
   useRouterSubscription(router);
   React.useEffect(() => {
+    console.log('hello');
     return router.mount();
   }, [router]);
   return /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: {
-      router
+      router: router
     }
   }, /*#__PURE__*/React.createElement(MatchesProvider, {
     value: router.state.matches
@@ -2703,6 +2758,10 @@ function useRouter() {
 function useMatches() {
   return React.useContext(matchesContext);
 }
+function useMatch(routeId, opts) {
+  const router = useRouter();
+  return router.useMatch(routeId, opts);
+}
 function Outlet() {
   var _ref3, _match$__$pendingComp, _match$__$errorCompon;
 
@@ -2734,12 +2793,8 @@ function Outlet() {
       return /*#__PURE__*/React.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
     }
 
-    if (match.__.loadPromise) {
-      console.log(match.matchId, 'suspend');
-      throw match.__.loadPromise;
-    }
-
-    invariant(false, 'This should never happen!');
+    console.log(match.matchId, 'suspend');
+    throw match.__.loadPromise;
   })())));
 }
 
@@ -2825,5 +2880,5 @@ function Prompt(_ref7) {
   return children != null ? children : null;
 }
 
-export { DefaultErrorBoundary, MatchesProvider, Outlet, Prompt, RouterProvider, cleanPath, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, invariant, joinPaths, last, matchByPath, matchPathname, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useMatches, usePrompt, useRouter, warning };
+export { DefaultErrorBoundary, Link, MatchesProvider, Outlet, Prompt, RouterProvider, cleanPath, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, invariant, joinPaths, last, lazy, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, routerContext, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useMatch, useMatches, usePrompt, useRouter, warning };
 //# sourceMappingURL=index.js.map