@remix-run/router 1.13.1 → 1.14.0-pre.0

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.13.1
+ * @remix-run/router v1.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1194,6 +1194,20 @@
     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, v7_relativeSplatPath) {
+    let pathMatches = getPathContributingMatches(matches);
+
+    // When v7_relativeSplatPath is enabled, use the full pathname for the leaf
+    // match so we include splat values for "." links.  See:
+    // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
+    if (v7_relativeSplatPath) {
+      return pathMatches.map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase);
+    }
+    return pathMatches.map(match => match.pathnameBase);
+  }
+
   /**
    * @private
    */
@@ -1226,7 +1240,7 @@
     if (toPathname == null) {
       from = locationPathname;
     } else if (isPathRelative) {
-      let fromSegments = routePathnames[routePathnames.length - 1].replace(/^\//, "").split("/");
+      let fromSegments = routePathnames.length === 0 ? [] : routePathnames[routePathnames.length - 1].replace(/^\//, "").split("/");
       if (toPathname.startsWith("..")) {
         let toSegments = toPathname.split("/");
 
@@ -1681,7 +1695,9 @@
     let future = _extends({
       v7_fetcherPersist: false,
       v7_normalizeFormMethod: false,
-      v7_prependBasename: false
+      v7_partialHydration: false,
+      v7_prependBasename: false,
+      v7_relativeSplatPath: false
     }, init.future);
     // Cleanup function for history
     let unlistenHistory = null;
@@ -1717,7 +1733,13 @@
         [route.id]: error
       };
     }
-    let initialized =
+
+    // "Initialized" here really means "Can `RouterProvider` render my route tree?"
+    // Prior to `route.HydrateFallback`, 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 HydrateFallback
+    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) && (
@@ -1889,8 +1911,10 @@
       // 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 => isUnhydratedRoute(state, m.route))) {
+        startNavigation(Action.Pop, state.location, {
+          initialHydration: true
+        });
       }
       return router;
     }
@@ -2079,7 +2103,7 @@
         init.history.go(to);
         return;
       }
-      let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, to, opts == null ? void 0 : opts.fromRouteId, opts == null ? void 0 : opts.relative);
+      let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, to, future.v7_relativeSplatPath, opts == null ? void 0 : opts.fromRouteId, opts == null ? void 0 : opts.relative);
       let {
         path,
         submission,
@@ -2280,7 +2304,7 @@
         shortCircuited,
         loaderData,
         errors
-      } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, flushSync, 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;
       }
@@ -2328,7 +2352,7 @@
           })
         };
       } else {
-        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename);
+        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath);
         if (request.signal.aborted) {
           return {
             shortCircuited: true
@@ -2387,7 +2411,7 @@
 
     // Call all applicable loaders for the given matches, handling redirects,
     // errors, etc.
-    async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, flushSync, 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);
 
@@ -2395,7 +2419,7 @@
       // 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, deletedFetchers, 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
@@ -2427,7 +2451,9 @@
       // state.  If not, we need to switch to our loading state and load data,
       // preserving any new action data or existing action data (in the case of
       // a revalidation interrupting an actionReload)
-      if (!isUninterruptedRevalidation) {
+      // If we have partialHydration enabled, then don't update the state for the
+      // initial data load since iot's not a "navigation"
+      if (!isUninterruptedRevalidation && (!future.v7_partialHydration || !initialHydration)) {
         revalidatingFetchers.forEach(rf => {
           let fetcher = state.fetchers.get(rf.key);
           let revalidatingFetcher = getLoadingFetcher(undefined, fetcher ? fetcher.data : undefined);
@@ -2536,7 +2562,7 @@
       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 normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, future.v7_relativeSplatPath, routeId, opts == null ? void 0 : opts.relative);
       let matches = matchRoutes(routesToUse, normalizedPath, basename);
       if (!matches) {
         setFetcherError(key, routeId, getInternalRouterError(404, {
@@ -2601,7 +2627,7 @@
       let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
       fetchControllers.set(key, abortController);
       let originatingLoadId = incrementingLoadId;
-      let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, mapRouteProperties, basename);
+      let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath);
       if (fetchRequest.signal.aborted) {
         // We can delete this so long as we weren't aborted by our own fetcher
         // re-submit which would have put _new_ controller is in fetchControllers
@@ -2654,7 +2680,7 @@
       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, deletedFetchers, 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
       );
@@ -2754,7 +2780,7 @@
       let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
       fetchControllers.set(key, abortController);
       let originatingLoadId = incrementingLoadId;
-      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, manifest, mapRouteProperties, basename);
+      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath);
 
       // Deferred isn't supported for fetcher loads, await everything and treat it
       // as a normal load.  resolveDeferredData will return undefined if this
@@ -2902,9 +2928,9 @@
       // Call all navigation loaders and revalidating fetcher loaders in parallel,
       // then slice off the results into separate arrays so we can handle them
       // accordingly
-      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename)), ...fetchersToLoad.map(f => {
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath)), ...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), f.match, f.matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath);
         } else {
           let error = {
             type: ResultType.error,
@@ -3181,6 +3207,9 @@
       get basename() {
         return basename;
       },
+      get future() {
+        return future;
+      },
       get state() {
         return state;
       },
@@ -3220,6 +3249,11 @@
   ////////////////////////////////////////////////////////////////////////////////
 
   const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
+
+  /**
+   * Future flags to toggle new feature behavior
+   */
+
   function createStaticHandler(routes, opts) {
     invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
     let manifest = {};
@@ -3236,6 +3270,10 @@
     } else {
       mapRouteProperties = defaultMapRouteProperties;
     }
+    // Config driven behavior flags
+    let future = _extends({
+      v7_relativeSplatPath: false
+    }, opts ? opts.future : null);
     let dataRoutes = convertRoutesToDataRoutes(routes, mapRouteProperties, undefined, manifest);
 
     /**
@@ -3451,7 +3489,7 @@
           error
         };
       } else {
-        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename, {
+        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath, {
           isStaticRequest: true,
           isRouteRequest,
           requestContext
@@ -3570,7 +3608,7 @@
           activeDeferreds: null
         };
       }
-      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, {
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath, {
         isStaticRequest: true,
         isRouteRequest,
         requestContext
@@ -3625,7 +3663,7 @@
   function isSubmissionNavigation(opts) {
     return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
   }
-  function normalizeTo(location, matches, basename, prependBasename, to, fromRouteId, relative) {
+  function normalizeTo(location, matches, basename, prependBasename, to, v7_relativeSplatPath, fromRouteId, relative) {
     let contextualMatches;
     let activeRouteMatch;
     if (fromRouteId) {
@@ -3645,7 +3683,7 @@
     }
 
     // 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, v7_relativeSplatPath), 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.
@@ -3809,7 +3847,7 @@
     }
     return boundaryMatches;
   }
-  function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, 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);
@@ -3818,6 +3856,11 @@
     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 unhydrated loaders
+        return isUnhydratedRoute(state, match.route);
+      }
       if (match.route.lazy) {
         // We haven't loaded this route yet so we don't know if it's got a loader!
         return true;
@@ -3857,8 +3900,12 @@
     // 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) || deletedFetchers.has(key)) {
+      // 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);
@@ -3922,6 +3969,20 @@
     });
     return [navigationMatches, revalidatingFetchers];
   }
+
+  // Is this route unhydrated (when v7_partialHydration=true) such that we need
+  // to call it's loader on the initial router creation
+  function isUnhydratedRoute(state, route) {
+    if (!route.loader) {
+      return false;
+    }
+    if (route.loader.hydrate) {
+      return true;
+    }
+    return state.loaderData[route.id] === undefined && (!state.errors ||
+    // Loader ran but errored - don't re-run
+    state.errors[route.id] === undefined);
+  }
   function isNewLoader(currentLoaderData, currentMatch, match) {
     let isNew =
     // [a] -> [a, b]
@@ -4008,7 +4069,7 @@
       lazy: undefined
     }));
   }
-  async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, opts) {
+  async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, v7_relativeSplatPath, opts) {
     if (opts === void 0) {
       opts = {};
     }
@@ -4098,7 +4159,7 @@
 
         // Support relative routing in internal redirects
         if (!ABSOLUTE_URL_REGEX.test(location)) {
-          location = normalizeTo(new URL(request.url), matches.slice(0, matches.indexOf(match) + 1), basename, true, location);
+          location = normalizeTo(new URL(request.url), matches.slice(0, matches.indexOf(match) + 1), basename, true, location, v7_relativeSplatPath);
         } else if (!opts.isStaticRequest) {
           // Strip off the protocol+origin for same-origin + same-basename absolute
           // redirects. If this is a static request, we can let it go back to the
@@ -4139,13 +4200,20 @@
         throw queryRouteResponse;
       }
       let data;
-      let contentType = result.headers.get("Content-Type");
-      // Check between word boundaries instead of startsWith() due to the last
-      // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
-      if (contentType && /\bapplication\/json\b/.test(contentType)) {
-        data = await result.json();
-      } else {
-        data = await result.text();
+      try {
+        let contentType = result.headers.get("Content-Type");
+        // Check between word boundaries instead of startsWith() due to the last
+        // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+        if (contentType && /\bapplication\/json\b/.test(contentType)) {
+          data = await result.json();
+        } else {
+          data = await result.text();
+        }
+      } catch (e) {
+        return {
+          type: ResultType.error,
+          error: e
+        };
       }
       if (resultType === ResultType.error) {
         return {
@@ -4744,7 +4812,7 @@
   exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;
   exports.UNSAFE_convertRouteMatchToUiMatch = convertRouteMatchToUiMatch;
   exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
-  exports.UNSAFE_getPathContributingMatches = getPathContributingMatches;
+  exports.UNSAFE_getResolveToMatches = getResolveToMatches;
   exports.UNSAFE_invariant = invariant;
   exports.UNSAFE_warning = warning;
   exports.createBrowserHistory = createBrowserHistory;