react-router 0.0.0-experimental-c0856287f → 0.0.0-experimental-79e23be50

package/dist/index.d.ts

@@ -6,10 +6,6 @@ import type { DataRouteMatch, DataRouteObject, IndexRouteObject, NavigateOptions
 import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
 import { useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteId, useRouteLoaderData, useRoutes, useRoutesImpl } from "./lib/hooks";
-declare global {
-    const __DEV__: boolean;
-}
-export {};
 type Hash = string;
 type Pathname = string;
 type Search = string;

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-c0856287f
+ * React Router v0.0.0-experimental-79e23be50
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1603,6 +1603,7 @@ function createRouter(init) {
   // Flag to ignore the next history update, so we can revert the URL change on
   // a POP navigation that was blocked by the user without touching router state
   let ignoreNextHistoryUpdate = false;
+  let pendingRevalidationDfd = null;
   // Initialize the router, all side effects should be kicked off from here.
   // Implemented as a Fluent API for ease of:
   //   let router = createRouter(init).initialize();
@@ -1739,7 +1740,7 @@ function createRouter(init) {
   // - Navigation will always be set to IDLE_NAVIGATION
   // - Can pass any other state in newState
   function completeNavigation(location, newState, _temp) {
-    var _location$state, _location$state2;
+    var _location$state, _location$state2, _pendingRevalidationD;
     let {
       flushSync
     } = _temp === void 0 ? {} : _temp;
@@ -1839,6 +1840,8 @@ function createRouter(init) {
     pendingViewTransitionEnabled = false;
     isUninterruptedRevalidation = false;
     isRevalidationRequired = false;
+    (_pendingRevalidationD = pendingRevalidationDfd) == null ? void 0 : _pendingRevalidationD.resolve();
+    pendingRevalidationDfd = null;
     cancelledDeferredRoutes = [];
     cancelledFetcherLoads = [];
   }
@@ -1906,7 +1909,7 @@ function createRouter(init) {
       });
       return;
     }
-    return await startNavigation(historyAction, nextLocation, {
+    await startNavigation(historyAction, nextLocation, {
       submission,
       // Send through the formData serialization error if we have one so we can
       // render at the right error boundary after we match routes
@@ -1921,14 +1924,29 @@ function createRouter(init) {
   // is interrupted by a navigation, allow this to "succeed" by calling all
   // loaders during the next loader round
   function revalidate() {
+    // We can't just return the promise from `startNavigation` because that
+    // navigation may be interrupted and our revalidation wouldn't be finished
+    // until the _next_ navigation completes.  Instead we just track via a
+    // deferred and resolve it the next time we run through `completeNavigation`
+    // This is different than navigations which will settle if interrupted
+    // because the navigation to a specific location is no longer relevant.
+    // Revalidations are location-independent and will settle whenever we land
+    // on our final location
+    if (!pendingRevalidationDfd) {
+      pendingRevalidationDfd = createDeferred();
+    }
     interruptActiveLoads();
     updateState({
       revalidation: "loading"
     });
+    // Capture this here for the edge-case that we have a fully synchronous
+    // startNavigation which would resolve and null out pendingRevalidationDfd
+    // before we return from this function
+    let promise = pendingRevalidationDfd.promise;
     // If we're currently submitting an action, we don't need to start a new
     // navigation, we'll just let the follow up loader execution call all loaders
     if (state.navigation.state === "submitting") {
-      return;
+      return promise;
     }
     // If we're currently in an idle state, start a new navigation for the current
     // action/location and mark it as uninterrupted, which will skip the history
@@ -1937,7 +1955,7 @@ function createRouter(init) {
       startNavigation(state.historyAction, state.location, {
         startUninterruptedRevalidation: true
       });
-      return;
+      return promise;
     }
     // Otherwise, if we're currently in a loading state, just start a new
     // navigation to the navigation.location but do not trigger an uninterrupted
@@ -1945,6 +1963,7 @@ function createRouter(init) {
     startNavigation(pendingAction || state.historyAction, state.navigation.location, {
       overrideNavigation: state.navigation
     });
+    return promise;
   }
   // Start a navigation to the given action/location.  Can optionally provide a
   // overrideNavigation which will override the normalLoad in the case of a redirect
@@ -2287,7 +2306,7 @@ function createRouter(init) {
     } : {});
   }
   // Trigger a fetcher load/submit for the given fetcher key
-  function fetch(key, routeId, href, opts) {
+  async function fetch(key, routeId, href, opts) {
     if (isServer) {
       throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
     }
@@ -2318,7 +2337,7 @@ function createRouter(init) {
     let match = getTargetMatch(matches, path);
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
     if (submission && isMutationMethod(submission.formMethod)) {
-      handleFetcherAction(key, routeId, path, match, matches, flushSync, submission);
+      await handleFetcherAction(key, routeId, path, match, matches, flushSync, submission);
       return;
     }
     // Store off the match so we can call it's shouldRevalidate on subsequent
@@ -2327,7 +2346,7 @@ function createRouter(init) {
       routeId,
       path
     });
-    handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission);
+    await handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission);
   }
   // Call the action for the matched fetcher.submit(), and then handle redirects,
   // errors, and revalidation
@@ -4593,40 +4612,51 @@ function persistAppliedTransitions(_window, transitions) {
     }
   }
 }
+function createDeferred() {
+  let resolve;
+  let reject;
+  let promise = new Promise((res, rej) => {
+    resolve = async val => {
+      res(val);
+      try {
+        await promise;
+      } catch (e) {}
+    };
+    reject = async error => {
+      rej(error);
+      try {
+        await promise;
+      } catch (e) {}
+    };
+  });
+  return {
+    promise,
+    //@ts-ignore
+    resolve,
+    //@ts-ignore
+    reject
+  };
+}
 //#endregion
 
 const DataRouterContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  DataRouterContext.displayName = "DataRouter";
-}
+DataRouterContext.displayName = "DataRouter";
 const DataRouterStateContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  DataRouterStateContext.displayName = "DataRouterState";
-}
+DataRouterStateContext.displayName = "DataRouterState";
 const AwaitContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  AwaitContext.displayName = "Await";
-}
+AwaitContext.displayName = "Await";
 const NavigationContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  NavigationContext.displayName = "Navigation";
-}
+NavigationContext.displayName = "Navigation";
 const LocationContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  LocationContext.displayName = "Location";
-}
+LocationContext.displayName = "Location";
 const RouteContext = /*#__PURE__*/React.createContext({
   outlet: null,
   matches: [],
   isDataRoute: false
 });
-if (process.env.NODE_ENV !== "production") {
-  RouteContext.displayName = "Route";
-}
+RouteContext.displayName = "Route";
 const RouteErrorContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-  RouteErrorContext.displayName = "RouteError";
-}
+RouteErrorContext.displayName = "RouteError";
 
 /**
  * Returns the full href for the given "to" value. This is useful for building
@@ -4872,7 +4902,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   let parentPathname = routeMatch ? routeMatch.pathname : "/";
   let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
   let parentRoute = routeMatch && routeMatch.route;
-  if (process.env.NODE_ENV !== "production") {
+  {
     // You won't get a warning about 2 different <Routes> under a <Route>
     // without a trailing *, but this is a best-effort warning anyway since we
     // cannot even give the warning unless they land at the parent route.
@@ -4930,7 +4960,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   let matches = matchRoutes(routes, {
     pathname: remainingPathname
   });
-  if (process.env.NODE_ENV !== "production") {
+  {
     process.env.NODE_ENV !== "production" ? warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") : void 0;
     process.env.NODE_ENV !== "production" ? warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined || matches[matches.length - 1].route.lazy !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") : void 0;
   }
@@ -4976,7 +5006,7 @@ function DefaultErrorComponent() {
     backgroundColor: lightgrey
   };
   let devInfo = null;
-  if (process.env.NODE_ENV !== "production") {
+  {
     console.error("Error handled by React Router default ErrorBoundary:", error);
     devInfo = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "\uD83D\uDCBF Hey developer \uD83D\uDC4B"), /*#__PURE__*/React.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /*#__PURE__*/React.createElement("code", {
       style: codeStyles
@@ -5255,9 +5285,11 @@ function useRevalidator() {
   let dataRouterContext = useDataRouterContext$2(DataRouterHook$1.UseRevalidator);
   let state = useDataRouterState$1(DataRouterStateHook$1.UseRevalidator);
   return React.useMemo(() => ({
-    revalidate: dataRouterContext.router.revalidate,
+    async revalidate() {
+      await dataRouterContext.router.revalidate();
+    },
     state: state.revalidation
-  }), [dataRouterContext.router.revalidate, state.revalidation]);
+  }), [dataRouterContext.router, state.revalidation]);
 }
 /**
  * Returns the active route matches, useful for accessing loaderData for
@@ -5401,7 +5433,7 @@ function useNavigateStable() {
   useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
   });
-  let navigate = React.useCallback(function (to, options) {
+  let navigate = React.useCallback(async function (to, options) {
     if (options === void 0) {
       options = {};
     }
@@ -5412,7 +5444,7 @@ function useNavigateStable() {
     if (typeof to === "number") {
       router.navigate(to);
     } else {
-      router.navigate(to, _extends({
+      await router.navigate(to, _extends({
         fromRouteId: id
       }, options));
     }
@@ -5434,7 +5466,7 @@ function mapRouteProperties(route) {
     hasErrorBoundary: route.hasErrorBoundary || route.ErrorBoundary != null || route.errorElement != null
   };
   if (route.Component) {
-    if (process.env.NODE_ENV !== "production") {
+    {
       if (route.element) {
         process.env.NODE_ENV !== "production" ? warning(false, "You should not include both `Component` and `element` on your route - " + "`Component` will be used.") : void 0;
       }
@@ -5445,7 +5477,7 @@ function mapRouteProperties(route) {
     });
   }
   if (route.HydrateFallback) {
-    if (process.env.NODE_ENV !== "production") {
+    {
       if (route.hydrateFallbackElement) {
         process.env.NODE_ENV !== "production" ? warning(false, "You should not include both `HydrateFallback` and `hydrateFallbackElement` on your route - " + "`HydrateFallback` will be used.") : void 0;
       }
@@ -5456,7 +5488,7 @@ function mapRouteProperties(route) {
     });
   }
   if (route.ErrorBoundary) {
-    if (process.env.NODE_ENV !== "production") {
+    {
       if (route.errorElement) {
         process.env.NODE_ENV !== "production" ? warning(false, "You should not include both `ErrorBoundary` and `errorElement` on your route - " + "`ErrorBoundary` will be used.") : void 0;
       }
@@ -5667,11 +5699,13 @@ function Navigate(_ref4) {
   // StrictMode they navigate to the same place
   let path = resolveTo(to, getResolveToMatches(matches, future.v7_relativeSplatPath), locationPathname, relative === "path");
   let jsonPath = JSON.stringify(path);
-  React.useEffect(() => navigate(JSON.parse(jsonPath), {
-    replace,
-    state,
-    relative
-  }), [navigate, jsonPath, relative, replace, state]);
+  React.useEffect(() => {
+    navigate(JSON.parse(jsonPath), {
+      replace,
+      state,
+      relative
+    });
+  }, [navigate, jsonPath, relative, replace, state]);
   return null;
 }
 /**
@@ -7698,13 +7732,9 @@ function deserializeErrors$1(errors) {
 const ViewTransitionContext = /*#__PURE__*/React.createContext({
   isTransitioning: false
 });
-if (process.env.NODE_ENV !== "production") {
-  ViewTransitionContext.displayName = "ViewTransition";
-}
+ViewTransitionContext.displayName = "ViewTransition";
 const FetchersContext = /*#__PURE__*/React.createContext(new Map());
-if (process.env.NODE_ENV !== "production") {
-  FetchersContext.displayName = "Fetchers";
-}
+FetchersContext.displayName = "Fetchers";
 //#endregion
 ////////////////////////////////////////////////////////////////////////////////
 //#region Components
@@ -8103,9 +8133,7 @@ function HistoryRouter(_ref6) {
     future: future
   });
 }
-if (process.env.NODE_ENV !== "production") {
-  HistoryRouter.displayName = "unstable_HistoryRouter";
-}
+HistoryRouter.displayName = "unstable_HistoryRouter";
 const ABSOLUTE_URL_REGEX$1 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 /**
  * The public API for rendering a history-aware `<a>`.
@@ -8184,9 +8212,7 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, forwarded
     page: href
   }))) : link;
 });
-if (process.env.NODE_ENV !== "production") {
-  Link.displayName = "Link";
-}
+Link.displayName = "Link";
 /**
  * A `<Link>` wrapper that knows if it's "active" or not.
  */
@@ -8261,9 +8287,7 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref
     unstable_viewTransition: unstable_viewTransition
   }), typeof children === "function" ? children(renderProps) : children);
 });
-if (process.env.NODE_ENV !== "production") {
-  NavLink.displayName = "NavLink";
-}
+NavLink.displayName = "NavLink";
 /**
  * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
  * that the interaction with the server is with `fetch` instead of new document
@@ -8314,9 +8338,7 @@ const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
     onSubmit: reloadDocument ? onSubmit : submitHandler
   }, props));
 });
-if (process.env.NODE_ENV !== "production") {
-  Form.displayName = "Form";
-}
+Form.displayName = "Form";
 /**
  * This component will emulate the browser's scroll restoration on location
  * changes.
@@ -8381,9 +8403,7 @@ function ScrollRestoration(_ref10) {
     }
   }));
 }
-if (process.env.NODE_ENV !== "production") {
-  ScrollRestoration.displayName = "ScrollRestoration";
-}
+ScrollRestoration.displayName = "ScrollRestoration";
 //#endregion
 ////////////////////////////////////////////////////////////////////////////////
 //#region Hooks
@@ -8493,7 +8513,7 @@ function useSubmit() {
     basename
   } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
-  return React.useCallback(function (target, options) {
+  return React.useCallback(async function (target, options) {
     if (options === void 0) {
       options = {};
     }
@@ -8507,7 +8527,7 @@ function useSubmit() {
     } = getFormSubmissionInfo(target, basename);
     if (options.navigate === false) {
       let key = options.fetcherKey || getUniqueFetcherId();
-      router.fetch(key, currentRouteId, options.action || action, {
+      await router.fetch(key, currentRouteId, options.action || action, {
         preventScrollReset: options.preventScrollReset,
         formData,
         body,
@@ -8516,7 +8536,7 @@ function useSubmit() {
         unstable_flushSync: options.unstable_flushSync
       });
     } else {
-      router.navigate(options.action || action, {
+      await router.navigate(options.action || action, {
         preventScrollReset: options.preventScrollReset,
         formData,
         body,
@@ -8619,13 +8639,13 @@ function useFetcher(_temp3) {
     };
   }, [router, fetcherKey]);
   // Fetcher additions
-  let load = React.useCallback((href, opts) => {
+  let load = React.useCallback(async (href, opts) => {
     !routeId ? process.env.NODE_ENV !== "production" ? invariant$1(false, "No routeId available for fetcher.load()") : invariant$1(false) : void 0;
-    router.fetch(fetcherKey, routeId, href, opts);
+    await router.fetch(fetcherKey, routeId, href, opts);
   }, [fetcherKey, routeId, router]);
   let submitImpl = useSubmit();
-  let submit = React.useCallback((target, opts) => {
-    submitImpl(target, _extends({}, opts, {
+  let submit = React.useCallback(async (target, opts) => {
+    await submitImpl(target, _extends({}, opts, {
       navigate: false,
       fetcherKey
     }));
@@ -8638,9 +8658,7 @@ function useFetcher(_temp3) {
         ref: ref
       }));
     });
-    if (process.env.NODE_ENV !== "production") {
-      FetcherForm.displayName = "fetcher.Form";
-    }
+    FetcherForm.displayName = "fetcher.Form";
     return FetcherForm;
   }, [fetcherKey]);
   // Exposed FetcherWithComponents
@@ -9989,7 +10007,11 @@ function HydratedRouter() {
     }, /*#__PURE__*/React.createElement(RemixErrorBoundary, {
       location: location
     }, /*#__PURE__*/React.createElement(RouterProvider, {
-      router: router
+      router: router,
+      fallbackElement: null,
+      future: {
+        v7_startTransition: true
+      }
     }))), ssrInfo.context.future.unstable_singleFetch ? /*#__PURE__*/React.createElement(React.Fragment, null) : null)
   );
 }