@remix-run/router 1.11.0 → 1.12.0

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.11.0
+ * @remix-run/router v1.12.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1223,16 +1223,30 @@
     // `to` values that do not provide a pathname. `to` can simply be a search or
     // hash string, in which case we should assume that the navigation is relative
     // to the current location's pathname and *not* the route pathname.
-    if (isPathRelative || toPathname == null) {
+    if (toPathname == null) {
       from = locationPathname;
+    } else if (isPathRelative) {
+      let fromSegments = routePathnames[routePathnames.length - 1].replace(/^\//, "").split("/");
+      if (toPathname.startsWith("..")) {
+        let toSegments = toPathname.split("/");
+
+        // With relative="path", each leading .. segment means "go up one URL segment"
+        while (toSegments[0] === "..") {
+          toSegments.shift();
+          fromSegments.pop();
+        }
+        to.pathname = toSegments.join("/");
+      }
+      from = "/" + fromSegments.join("/");
     } else {
       let routePathnameIndex = routePathnames.length - 1;
       if (toPathname.startsWith("..")) {
         let toSegments = toPathname.split("/");
 
-        // Each leading .. segment means "go up one route" instead of "go up one
-        // URL segment".  This is a key difference from how <a href> works and a
-        // major reason we call this a "to" value instead of a "href".
+        // With relative="route" (the default), each leading .. segment means
+        // "go up one route" instead of "go up one URL segment".  This is a key
+        // difference from how <a href> works and a major reason we call this a
+        // "to" value instead of a "href".
         while (toSegments[0] === "..") {
           toSegments.shift();
           routePathnameIndex -= 1;
@@ -1902,7 +1916,10 @@
     }
 
     // Update our state and notify the calling context of the change
-    function updateState(newState, viewTransitionOpts) {
+    function updateState(newState, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
       state = _extends({}, state, newState);
 
       // Prep fetcher cleanup so we can tell the UI which fetcher data entries
@@ -1923,9 +1940,14 @@
           }
         });
       }
-      subscribers.forEach(subscriber => subscriber(state, {
+
+      // Iterate over a local copy so that if flushSync is used and we end up
+      // removing and adding a new subscriber due to the useCallback dependencies,
+      // we don't get ourselves into a loop calling the new subscriber immediately
+      [...subscribers].forEach(subscriber => subscriber(state, {
         deletedFetchers: deletedFetchersKeys,
-        unstable_viewTransitionOpts: viewTransitionOpts
+        unstable_viewTransitionOpts: opts.viewTransitionOpts,
+        unstable_flushSync: opts.flushSync === true
       }));
 
       // Remove idle fetchers from state since we only care about in-flight fetchers.
@@ -1940,8 +1962,11 @@
     // - Location is a required param
     // - Navigation will always be set to IDLE_NAVIGATION
     // - Can pass any other state in newState
-    function completeNavigation(location, newState) {
+    function completeNavigation(location, newState, _temp) {
       var _location$state, _location$state2;
+      let {
+        flushSync
+      } = _temp === void 0 ? {} : _temp;
       // Deduce if we're in a loading/actionReload state:
       // - We have committed actionData in the store
       // - The current navigation was a mutation submission
@@ -2032,7 +2057,10 @@
         restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
         preventScrollReset,
         blockers
-      }), viewTransitionOpts);
+      }), {
+        viewTransitionOpts,
+        flushSync: flushSync === true
+      });
 
       // Reset stateful navigation vars
       pendingAction = Action.Pop;
@@ -2078,6 +2106,7 @@
         historyAction = Action.Replace;
       }
       let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
+      let flushSync = (opts && opts.unstable_flushSync) === true;
       let blockerKey = shouldBlockNavigation({
         currentLocation,
         nextLocation,
@@ -2115,7 +2144,8 @@
         pendingError: error,
         preventScrollReset,
         replace: opts && opts.replace,
-        enableViewTransition: opts && opts.unstable_viewTransition
+        enableViewTransition: opts && opts.unstable_viewTransition,
+        flushSync
       });
     }
 
@@ -2172,6 +2202,7 @@
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let loadingNavigation = opts && opts.overrideNavigation;
       let matches = matchRoutes(routesToUse, location, basename);
+      let flushSync = (opts && opts.flushSync) === true;
 
       // Short circuit with a 404 on the root error boundary if we match nothing
       if (!matches) {
@@ -2190,6 +2221,8 @@
           errors: {
             [route.id]: error
           }
+        }, {
+          flushSync
         });
         return;
       }
@@ -2203,6 +2236,8 @@
       if (state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
         completeNavigation(location, {
           matches
+        }, {
+          flushSync
         });
         return;
       }
@@ -2223,7 +2258,8 @@
       } else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {
         // Call action if we received an action submission
         let actionOutput = await handleAction(request, location, opts.submission, matches, {
-          replace: opts.replace
+          replace: opts.replace,
+          flushSync
         });
         if (actionOutput.shortCircuited) {
           return;
@@ -2231,6 +2267,7 @@
         pendingActionData = actionOutput.pendingActionData;
         pendingError = actionOutput.pendingActionError;
         loadingNavigation = getLoadingNavigation(location, opts.submission);
+        flushSync = false;
 
         // Create a GET request for the loaders
         request = new Request(request.url, {
@@ -2243,7 +2280,7 @@
         shortCircuited,
         loaderData,
         errors
-      } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, pendingActionData, pendingError);
+      } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, flushSync, pendingActionData, pendingError);
       if (shortCircuited) {
         return;
       }
@@ -2274,6 +2311,8 @@
       let navigation = getSubmittingNavigation(location, submission);
       updateState({
         navigation
+      }, {
+        flushSync: opts.flushSync === true
       });
 
       // Call our action and get the result
@@ -2348,7 +2387,7 @@
 
     // Call all applicable loaders for the given matches, handling redirects,
     // errors, etc.
-    async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, pendingActionData, pendingError) {
+    async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, flushSync, pendingActionData, pendingError) {
       // Figure out the right navigation we want to use for data loading
       let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
 
@@ -2376,7 +2415,9 @@
           actionData: pendingActionData
         } : {}, updatedFetchers ? {
           fetchers: new Map(state.fetchers)
-        } : {}));
+        } : {}), {
+          flushSync
+        });
         return {
           shortCircuited: true
         };
@@ -2401,7 +2442,9 @@
           actionData
         } : {}, revalidatingFetchers.length > 0 ? {
           fetchers: new Map(state.fetchers)
-        } : {}));
+        } : {}), {
+          flushSync
+        });
       }
       revalidatingFetchers.forEach(rf => {
         if (fetchControllers.has(rf.key)) {
@@ -2484,17 +2527,6 @@
         fetchers: new Map(state.fetchers)
       } : {});
     }
-    function getFetcher(key) {
-      if (future.v7_fetcherPersist) {
-        activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
-        // If this fetcher was previously marked for deletion, unmark it since we
-        // have a new instance
-        if (deletedFetchers.has(key)) {
-          deletedFetchers.delete(key);
-        }
-      }
-      return state.fetchers.get(key) || IDLE_FETCHER;
-    }
 
     // Trigger a fetcher load/submit for the given fetcher key
     function fetch(key, routeId, href, opts) {
@@ -2502,13 +2534,16 @@
         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.");
       }
       if (fetchControllers.has(key)) abortFetcher(key);
+      let flushSync = (opts && opts.unstable_flushSync) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, routeId, opts == null ? void 0 : opts.relative);
       let matches = matchRoutes(routesToUse, normalizedPath, basename);
       if (!matches) {
         setFetcherError(key, routeId, getInternalRouterError(404, {
           pathname: normalizedPath
-        }));
+        }), {
+          flushSync
+        });
         return;
       }
       let {
@@ -2517,13 +2552,15 @@
         error
       } = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
       if (error) {
-        setFetcherError(key, routeId, error);
+        setFetcherError(key, routeId, error, {
+          flushSync
+        });
         return;
       }
       let match = getTargetMatch(matches, path);
       pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
       if (submission && isMutationMethod(submission.formMethod)) {
-        handleFetcherAction(key, routeId, path, match, matches, submission);
+        handleFetcherAction(key, routeId, path, match, matches, flushSync, submission);
         return;
       }
 
@@ -2533,12 +2570,12 @@
         routeId,
         path
       });
-      handleFetcherLoader(key, routeId, path, match, matches, submission);
+      handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission);
     }
 
     // Call the action for the matched fetcher.submit(), and then handle redirects,
     // errors, and revalidation
-    async function handleFetcherAction(key, routeId, path, match, requestMatches, submission) {
+    async function handleFetcherAction(key, routeId, path, match, requestMatches, flushSync, submission) {
       interruptActiveLoads();
       fetchLoadMatches.delete(key);
       if (!match.route.action && !match.route.lazy) {
@@ -2547,16 +2584,16 @@
           pathname: path,
           routeId: routeId
         });
-        setFetcherError(key, routeId, error);
+        setFetcherError(key, routeId, error, {
+          flushSync
+        });
         return;
       }
 
       // Put this fetcher into it's submitting state
       let existingFetcher = state.fetchers.get(key);
-      let fetcher = getSubmittingFetcher(submission, existingFetcher);
-      state.fetchers.set(key, fetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
+      updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
+        flushSync
       });
 
       // Call the action for the fetcher
@@ -2574,10 +2611,7 @@
         return;
       }
       if (deletedFetchers.has(key)) {
-        state.fetchers.set(key, getDoneFetcher(undefined));
-        updateState({
-          fetchers: new Map(state.fetchers)
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       }
       if (isRedirectResult(actionResult)) {
@@ -2587,19 +2621,11 @@
           // should take precedence over this redirect navigation.  We already
           // set isRevalidationRequired so all loaders for the new route should
           // fire unless opted out via shouldRevalidate
-          let doneFetcher = getDoneFetcher(undefined);
-          state.fetchers.set(key, doneFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
-          });
+          updateFetcherState(key, getDoneFetcher(undefined));
           return;
         } else {
           fetchRedirectIds.add(key);
-          let loadingFetcher = getLoadingFetcher(submission);
-          state.fetchers.set(key, loadingFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
-          });
+          updateFetcherState(key, getLoadingFetcher(submission));
           return startRedirectNavigation(state, actionResult, {
             fetcherSubmission: submission
           });
@@ -2717,13 +2743,10 @@
     }
 
     // Call the matched loader for fetcher.load(), handling redirects, errors, etc.
-    async function handleFetcherLoader(key, routeId, path, match, matches, submission) {
+    async function handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission) {
       let existingFetcher = state.fetchers.get(key);
-      // Put this fetcher into it's loading state
-      let loadingFetcher = getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined);
-      state.fetchers.set(key, loadingFetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
+      updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
+        flushSync
       });
 
       // Call the loader for this fetcher route match
@@ -2750,10 +2773,7 @@
         return;
       }
       if (deletedFetchers.has(key)) {
-        state.fetchers.set(key, getDoneFetcher(undefined));
-        updateState({
-          fetchers: new Map(state.fetchers)
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       }
 
@@ -2762,11 +2782,7 @@
         if (pendingNavigationLoadId > originatingLoadId) {
           // A new navigation was kicked off after our loader started, so that
           // should take precedence over this redirect navigation
-          let doneFetcher = getDoneFetcher(undefined);
-          state.fetchers.set(key, doneFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
-          });
+          updateFetcherState(key, getDoneFetcher(undefined));
           return;
         } else {
           fetchRedirectIds.add(key);
@@ -2783,11 +2799,7 @@
       invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
 
       // Put the fetcher back into an idle state
-      let doneFetcher = getDoneFetcher(result.data);
-      state.fetchers.set(key, doneFetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
-      });
+      updateFetcherState(key, getDoneFetcher(result.data));
     }
 
     /**
@@ -2809,12 +2821,12 @@
      * actually touch history until we've processed redirects, so we just use
      * the history action from the original navigation (PUSH or REPLACE).
      */
-    async function startRedirectNavigation(state, redirect, _temp) {
+    async function startRedirectNavigation(state, redirect, _temp2) {
       let {
         submission,
         fetcherSubmission,
         replace
-      } = _temp === void 0 ? {} : _temp;
+      } = _temp2 === void 0 ? {} : _temp2;
       if (redirect.revalidate) {
         isRevalidationRequired = true;
       }
@@ -2928,7 +2940,21 @@
         }
       });
     }
-    function setFetcherError(key, routeId, error) {
+    function updateFetcherState(key, fetcher, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
+      state.fetchers.set(key, fetcher);
+      updateState({
+        fetchers: new Map(state.fetchers)
+      }, {
+        flushSync: (opts && opts.flushSync) === true
+      });
+    }
+    function setFetcherError(key, routeId, error, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
       let boundaryMatch = findNearestBoundary(state.matches, routeId);
       deleteFetcher(key);
       updateState({
@@ -2936,8 +2962,21 @@
           [boundaryMatch.route.id]: error
         },
         fetchers: new Map(state.fetchers)
+      }, {
+        flushSync: (opts && opts.flushSync) === true
       });
     }
+    function getFetcher(key) {
+      if (future.v7_fetcherPersist) {
+        activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
+        // If this fetcher was previously marked for deletion, unmark it since we
+        // have a new instance
+        if (deletedFetchers.has(key)) {
+          deletedFetchers.delete(key);
+        }
+      }
+      return state.fetchers.get(key) || IDLE_FETCHER;
+    }
     function deleteFetcher(key) {
       let fetcher = state.fetchers.get(key);
       // Don't abort the controller if this is a deletion of a fetcher.submit()
@@ -3218,10 +3257,10 @@
      * propagate that out and return the raw Response so the HTTP server can
      * return it directly.
      */
-    async function query(request, _temp2) {
+    async function query(request, _temp3) {
       let {
         requestContext
-      } = _temp2 === void 0 ? {} : _temp2;
+      } = _temp3 === void 0 ? {} : _temp3;
       let url = new URL(request.url);
       let method = request.method;
       let location = createLocation("", createPath(url), null, "default");
@@ -3307,11 +3346,11 @@
      * code.  Examples here are 404 and 405 errors that occur prior to reaching
      * any user-defined loaders.
      */
-    async function queryRoute(request, _temp3) {
+    async function queryRoute(request, _temp4) {
       let {
         routeId,
         requestContext
-      } = _temp3 === void 0 ? {} : _temp3;
+      } = _temp4 === void 0 ? {} : _temp4;
       let url = new URL(request.url);
       let method = request.method;
       let location = createLocation("", createPath(url), null, "default");
@@ -3589,11 +3628,9 @@
   function normalizeTo(location, matches, basename, prependBasename, to, fromRouteId, relative) {
     let contextualMatches;
     let activeRouteMatch;
-    if (fromRouteId != null && relative !== "path") {
+    if (fromRouteId) {
       // Grab matches up to the calling route so our route-relative logic is
-      // relative to the correct source route.  When using relative:path,
-      // fromRouteId is ignored since that is always relative to the current
-      // location path
+      // relative to the correct source route
       contextualMatches = [];
       for (let match of matches) {
         contextualMatches.push(match);
@@ -4360,13 +4397,13 @@
       route
     };
   }
-  function getInternalRouterError(status, _temp4) {
+  function getInternalRouterError(status, _temp5) {
     let {
       pathname,
       routeId,
       method,
       type
-    } = _temp4 === void 0 ? {} : _temp4;
+    } = _temp5 === void 0 ? {} : _temp5;
     let statusText = "Unknown Server Error";
     let errorMessage = "Unknown @remix-run/router error";
     if (status === 400) {