@remix-run/router 0.0.0-experimental-e192105b → 0.0.0-experimental-178bc9ee

package/dist/router.d.ts

@@ -12,6 +12,13 @@ export interface Router {
      * Return the basename for the router
      */
     get basename(): RouterInit["basename"];
+    /**
+     * @internal
+     * PRIVATE - DO NOT USE
+     *
+     * Return the future config for the router
+     */
+    get future(): FutureConfig;
     /**
      * @internal
      * PRIVATE - DO NOT USE
@@ -248,6 +255,7 @@ export type HydrationState = Partial<Pick<RouterState, "loaderData" | "actionDat
 export interface FutureConfig {
     v7_fetcherPersist: boolean;
     v7_normalizeFormMethod: boolean;
+    v7_partialHydration: boolean;
     v7_prependBasename: boolean;
 }
 /**
@@ -306,7 +314,7 @@ export interface RouterSubscriber {
     (state: RouterState, opts: {
         deletedFetchers: string[];
         unstable_viewTransitionOpts?: ViewTransitionOpts;
-        unstable_flushSync?: boolean;
+        unstable_flushSync: boolean;
     }): void;
 }
 /**

package/dist/router.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-e192105b
+ * @remix-run/router v0.0.0-experimental-178bc9ee
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -938,6 +938,12 @@ function getInvalidPathError(char, field, dest, path) {
 function getPathContributingMatches(matches) {
   return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
 }
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+function getResolveToMatches(matches) {
+  // Use the full pathname for the leaf match so we include splat values for "." links
+  return getPathContributingMatches(matches).map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase);
+}
 /**
  * @private
  */
@@ -966,15 +972,28 @@ function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
   // `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;
@@ -1317,6 +1336,7 @@ function createRouter(init) {
   let future = _extends({
     v7_fetcherPersist: false,
     v7_normalizeFormMethod: false,
+    v7_partialHydration: false,
     v7_prependBasename: false
   }, init.future);
   // Cleanup function for history
@@ -1353,7 +1373,12 @@ function createRouter(init) {
       [route.id]: error
     };
   }
-  let initialized =
+  // "Initialized" here really means "Can `RouterProvider` render my route tree?"
+  // Prior to `route.Fallback`, we only had a root `fallbackElement` so we used
+  // `state.initialized` to render that instead of `<DataRoutes>`.  Now that we
+  // support route level fallbacks we can always render and we'll just render
+  // as deep as we have data for and detect the nearest ancestor Fallback
+  let initialized = future.v7_partialHydration ||
   // All initialMatches need to be loaded before we're ready.  If we have lazy
   // functions around still then we'll need to run them in initialize()
   !initialMatches.some(m => m.route.lazy) && (
@@ -1386,8 +1411,6 @@ function createRouter(init) {
   let pendingNavigationController;
   // Should the current navigation enable document.startViewTransition?
   let pendingViewTransitionEnabled = false;
-  // Should the current navigation use flushSync for state updates?
-  let pendingFlushSync = false;
   // Store applied view transitions so we can apply them on POP
   let appliedViewTransitions = new Map();
   // Cleanup function for persisting applied transitions to sessionStorage
@@ -1483,8 +1506,6 @@ function createRouter(init) {
             blockers.set(blockerKey, IDLE_BLOCKER);
             updateState({
               blockers
-            }, {
-              flushSync: false
             });
           }
         });
@@ -1505,8 +1526,10 @@ function createRouter(init) {
     // in the normal navigation flow.  For SSR it's expected that lazy modules are
     // resolved prior to router creation since we can't go into a fallbackElement
     // UI for SSR'd apps
-    if (!state.initialized) {
-      startNavigation(Action.Pop, state.location);
+    if (!state.initialized || future.v7_partialHydration && state.matches.some(m => m.route.loader && state.loaderData[m.route.id] === undefined)) {
+      startNavigation(Action.Pop, state.location, {
+        initialHydration: true
+      });
     }
     return router;
   }
@@ -1530,6 +1553,9 @@ function createRouter(init) {
   }
   // Update our state and notify the calling context of the change
   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
     // can be removed
@@ -1555,7 +1581,7 @@ function createRouter(init) {
     [...subscribers].forEach(subscriber => subscriber(state, {
       deletedFetchers: deletedFetchersKeys,
       unstable_viewTransitionOpts: opts.viewTransitionOpts,
-      unstable_flushSync: opts.flushSync
+      unstable_flushSync: opts.flushSync === true
     }));
     // Remove idle fetchers from state since we only care about in-flight fetchers.
     if (future.v7_fetcherPersist) {
@@ -1568,8 +1594,11 @@ function createRouter(init) {
   // - 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
@@ -1657,13 +1686,12 @@ function createRouter(init) {
       blockers
     }), {
       viewTransitionOpts,
-      flushSync: pendingFlushSync
+      flushSync: flushSync === true
     });
     // Reset stateful navigation vars
     pendingAction = Action.Pop;
     pendingPreventScrollReset = false;
     pendingViewTransitionEnabled = false;
-    pendingFlushSync = false;
     isUninterruptedRevalidation = false;
     isRevalidationRequired = false;
     cancelledDeferredRoutes = [];
@@ -1728,8 +1756,6 @@ function createRouter(init) {
           blockers.set(blockerKey, IDLE_BLOCKER);
           updateState({
             blockers
-          }, {
-            flushSync
           });
         }
       });
@@ -1753,8 +1779,6 @@ function createRouter(init) {
     interruptActiveLoads();
     updateState({
       revalidation: "loading"
-    }, {
-      flushSync: false
     });
     // 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
@@ -1793,10 +1817,10 @@ function createRouter(init) {
     saveScrollPosition(state.location, state.matches);
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
     pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
-    pendingFlushSync = (opts && opts.flushSync) === true;
     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) {
       let error = getInternalRouterError(404, {
@@ -1814,6 +1838,8 @@ function createRouter(init) {
         errors: {
           [route.id]: error
         }
+      }, {
+        flushSync
       });
       return;
     }
@@ -1826,12 +1852,14 @@ function createRouter(init) {
     if (state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
       completeNavigation(location, {
         matches
+      }, {
+        flushSync
       });
       return;
     }
     // Create a controller/Request for this navigation
     pendingNavigationController = new AbortController();
-    let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
+    let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.initialHydration === true, opts && opts.submission);
     let pendingActionData;
     let pendingError;
     if (opts && opts.pendingError) {
@@ -1845,7 +1873,8 @@ function createRouter(init) {
     } 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;
@@ -1853,6 +1882,7 @@ function createRouter(init) {
       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, {
         signal: request.signal
@@ -1863,7 +1893,7 @@ function createRouter(init) {
       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, opts && opts.initialHydration === true, flushSync, pendingActionData, pendingError);
     if (shortCircuited) {
       return;
     }
@@ -1892,7 +1922,7 @@ function createRouter(init) {
     updateState({
       navigation
     }, {
-      flushSync: pendingFlushSync
+      flushSync: opts.flushSync === true
     });
     // Call our action and get the result
     let result;
@@ -1964,14 +1994,14 @@ function createRouter(init) {
   }
   // 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, initialHydration, flushSync, pendingActionData, pendingError) {
     // Figure out the right navigation we want to use for data loading
     let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
     // If this was a redirect from an action we don't have a "submission" but
     // we have it on the loading navigation so use that if available
     let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
     let routesToUse = inFlightDataRoutes || dataRoutes;
-    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError);
+    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, future.v7_partialHydration && initialHydration === true, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError);
     // Cancel pending deferreds for no-longer-matched routes or routes we're
     // about to reload.  Note that if this is an action reload we would have
     // already cancelled all pending deferreds so this would be a no-op
@@ -1989,7 +2019,9 @@ function createRouter(init) {
         actionData: pendingActionData
       } : {}, updatedFetchers ? {
         fetchers: new Map(state.fetchers)
-      } : {}));
+      } : {}), {
+        flushSync
+      });
       return {
         shortCircuited: true
       };
@@ -2014,7 +2046,7 @@ function createRouter(init) {
       } : {}, revalidatingFetchers.length > 0 ? {
         fetchers: new Map(state.fetchers)
       } : {}), {
-        flushSync: pendingFlushSync
+        flushSync
       });
     }
     revalidatingFetchers.forEach(rf => {
@@ -2159,7 +2191,7 @@ function createRouter(init) {
     });
     // Call the action for the fetcher
     let abortController = new AbortController();
-    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
+    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, false, submission);
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
     let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, mapRouteProperties, basename);
@@ -2172,9 +2204,7 @@ function createRouter(init) {
       return;
     }
     if (deletedFetchers.has(key)) {
-      updateFetcherState(key, getDoneFetcher(undefined), {
-        flushSync
-      });
+      updateFetcherState(key, getDoneFetcher(undefined));
       return;
     }
     if (isRedirectResult(actionResult)) {
@@ -2184,15 +2214,11 @@ function createRouter(init) {
         // 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
-        updateFetcherState(key, getDoneFetcher(undefined), {
-          flushSync
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       } else {
         fetchRedirectIds.add(key);
-        updateFetcherState(key, getLoadingFetcher(submission), {
-          flushSync
-        });
+        updateFetcherState(key, getLoadingFetcher(submission));
         return startRedirectNavigation(state, actionResult, {
           fetcherSubmission: submission
         });
@@ -2200,9 +2226,7 @@ function createRouter(init) {
     }
     // Process any non-redirect errors thrown
     if (isErrorResult(actionResult)) {
-      setFetcherError(key, routeId, actionResult.error, {
-        flushSync
-      });
+      setFetcherError(key, routeId, actionResult.error);
       return;
     }
     if (isDeferredResult(actionResult)) {
@@ -2213,7 +2237,7 @@ function createRouter(init) {
     // Start the data load for current matches, or the next location if we're
     // in the middle of a navigation
     let nextLocation = state.navigation.location || state.location;
-    let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
+    let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal, false);
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let matches = state.navigation.state !== "idle" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;
     invariant(matches, "Didn't find any matches after fetcher action");
@@ -2221,7 +2245,7 @@ function createRouter(init) {
     fetchReloadIds.set(key, loadId);
     let loadFetcher = getLoadingFetcher(submission, actionResult.data);
     state.fetchers.set(key, loadFetcher);
-    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, {
+    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, false, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, {
       [match.route.id]: actionResult.data
     }, undefined // No need to send through errors since we short circuit above
     );
@@ -2242,8 +2266,6 @@ function createRouter(init) {
     });
     updateState({
       fetchers: new Map(state.fetchers)
-    }, {
-      flushSync
     });
     let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
     abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
@@ -2302,8 +2324,6 @@ function createRouter(init) {
         errors,
         loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
         fetchers: new Map(state.fetchers)
-      }, {
-        flushSync
       });
       isRevalidationRequired = false;
     }
@@ -2316,7 +2336,7 @@ function createRouter(init) {
     });
     // Call the loader for this fetcher route match
     let abortController = new AbortController();
-    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
+    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, false);
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
     let result = await callLoaderOrAction("loader", fetchRequest, match, matches, manifest, mapRouteProperties, basename);
@@ -2336,9 +2356,7 @@ function createRouter(init) {
       return;
     }
     if (deletedFetchers.has(key)) {
-      updateFetcherState(key, getDoneFetcher(undefined), {
-        flushSync
-      });
+      updateFetcherState(key, getDoneFetcher(undefined));
       return;
     }
     // If the loader threw a redirect Response, start a new REPLACE navigation
@@ -2346,9 +2364,7 @@ function createRouter(init) {
       if (pendingNavigationLoadId > originatingLoadId) {
         // A new navigation was kicked off after our loader started, so that
         // should take precedence over this redirect navigation
-        updateFetcherState(key, getDoneFetcher(undefined), {
-          flushSync
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       } else {
         fetchRedirectIds.add(key);
@@ -2358,16 +2374,12 @@ function createRouter(init) {
     }
     // Process any non-redirect errors thrown
     if (isErrorResult(result)) {
-      setFetcherError(key, routeId, result.error, {
-        flushSync
-      });
+      setFetcherError(key, routeId, result.error);
       return;
     }
     invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
     // Put the fetcher back into an idle state
-    updateFetcherState(key, getDoneFetcher(result.data), {
-      flushSync
-    });
+    updateFetcherState(key, getDoneFetcher(result.data));
   }
   /**
    * Utility function to handle redirects returned from an action or loader.
@@ -2388,12 +2400,12 @@ function createRouter(init) {
    * 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;
     }
@@ -2468,7 +2480,7 @@ function createRouter(init) {
     // accordingly
     let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename)), ...fetchersToLoad.map(f => {
       if (f.matches && f.match && f.controller) {
-        return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, f.controller.signal), f.match, f.matches, manifest, mapRouteProperties, basename);
+        return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, f.controller.signal, false), f.match, f.matches, manifest, mapRouteProperties, basename);
       } else {
         let error = {
           type: ResultType.error,
@@ -2503,14 +2515,20 @@ function createRouter(init) {
     });
   }
   function updateFetcherState(key, fetcher, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
     state.fetchers.set(key, fetcher);
     updateState({
       fetchers: new Map(state.fetchers)
     }, {
-      flushSync: opts.flushSync
+      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({
@@ -2519,7 +2537,7 @@ function createRouter(init) {
       },
       fetchers: new Map(state.fetchers)
     }, {
-      flushSync: opts.flushSync
+      flushSync: (opts && opts.flushSync) === true
     });
   }
   function getFetcher(key) {
@@ -2561,8 +2579,6 @@ function createRouter(init) {
     }
     updateState({
       fetchers: new Map(state.fetchers)
-    }, {
-      flushSync: false
     });
   }
   function abortFetcher(key) {
@@ -2630,8 +2646,6 @@ function createRouter(init) {
     blockers.set(key, newBlocker);
     updateState({
       blockers
-    }, {
-      flushSync: false
     });
   }
   function shouldBlockNavigation(_ref2) {
@@ -2695,8 +2709,6 @@ function createRouter(init) {
       if (y != null) {
         updateState({
           restoreScrollPosition: y
-        }, {
-          flushSync: false
         });
       }
     }
@@ -2737,6 +2749,9 @@ function createRouter(init) {
     get basename() {
       return basename;
     },
+    get future() {
+      return future;
+    },
     get state() {
       return state;
     },
@@ -2810,10 +2825,10 @@ function createStaticHandler(routes, opts) {
    * 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");
@@ -2896,11 +2911,11 @@ function createStaticHandler(routes, opts) {
    * 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");
@@ -3167,11 +3182,9 @@ function isSubmissionNavigation(opts) {
 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);
@@ -3185,7 +3198,7 @@ function normalizeTo(location, matches, basename, prependBasename, to, fromRoute
     activeRouteMatch = matches[matches.length - 1];
   }
   // Resolve the relative path
-  let path = resolveTo(to ? to : ".", getPathContributingMatches(contextualMatches).map(m => m.pathnameBase), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
+  let path = resolveTo(to ? to : ".", getResolveToMatches(contextualMatches), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
   // When `to` is not specified we inherit search/hash from the current
   // location, unlike when to="." and we just inherit the path.
   // See https://github.com/remix-run/remix/issues/927
@@ -3342,7 +3355,7 @@ function getLoaderMatchesUntilBoundary(matches, boundaryId) {
   }
   return boundaryMatches;
 }
-function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError) {
+function getMatchesToLoad(history, state, matches, submission, location, isInitialLoad, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError) {
   let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined;
   let currentUrl = history.createURL(state.location);
   let nextUrl = history.createURL(location);
@@ -3350,6 +3363,11 @@ function getMatchesToLoad(history, state, matches, submission, location, isReval
   let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
   let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
   let navigationMatches = boundaryMatches.filter((match, index) => {
+    if (isInitialLoad) {
+      // On initial hydration we don't do any shouldRevalidate stuff - we just
+      // call the loaders that don't have hydration data
+      return match.route.loader && state.loaderData[match.route.id] === undefined;
+    }
     if (match.route.lazy) {
       // We haven't loaded this route yet so we don't know if it's got a loader!
       return true;
@@ -3386,8 +3404,12 @@ function getMatchesToLoad(history, state, matches, submission, location, isReval
   // Pick fetcher.loads that need to be revalidated
   let revalidatingFetchers = [];
   fetchLoadMatches.forEach((f, key) => {
-    // Don't revalidate if fetcher won't be present in the subsequent render
-    if (!matches.some(m => m.route.id === f.routeId)) {
+    // Don't revalidate:
+    //  - on initial load (shouldn't be any fetchers then anyway)
+    //  - if fetcher won't be present in the subsequent render
+    //    - no longer matches the URL (v7_fetcherPersist=false)
+    //    - was unmounted but persisted due to v7_fetcherPersist=true
+    if (isInitialLoad || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
       return;
     }
     let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
@@ -3700,11 +3722,16 @@ async function callLoaderOrAction(type, request, match, matches, manifest, mapRo
 // Utility method for creating the Request instances for loaders/actions during
 // client-side navigations and fetches.  During SSR we will always have a
 // Request instance from the static handler (query/queryRoute)
-function createClientSideRequest(history, location, signal, submission) {
+function createClientSideRequest(history, location, signal, initial, submission) {
   let url = history.createURL(stripHashFromPath(location)).toString();
   let init = {
     signal
   };
+  if (initial) {
+    init.headers = {
+      "X-Remix-Initial-Load": "yes"
+    };
+  }
   if (submission && isMutationMethod(submission.formMethod)) {
     let {
       formMethod,
@@ -3903,13 +3930,13 @@ function getShortCircuitMatches(routes) {
     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) {
@@ -4237,5 +4264,5 @@ function persistAppliedTransitions(_window, transitions) {
 }
 //#endregion
 
-export { AbortedDeferredError, Action, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getPathContributingMatches as UNSAFE_getPathContributingMatches, invariant as UNSAFE_invariant, warning as UNSAFE_warning, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, isDeferredData, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, redirectDocument, resolvePath, resolveTo, stripBasename };
+export { AbortedDeferredError, Action, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getResolveToMatches as UNSAFE_getResolveToMatches, invariant as UNSAFE_invariant, warning as UNSAFE_warning, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, isDeferredData, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, redirectDocument, resolvePath, resolveTo, stripBasename };
 //# sourceMappingURL=router.js.map