@remix-run/router 0.0.0-experimental-432fcb2e → 0.0.0-experimental-c7dd3d3a

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # `@remix-run/router`
 
+## 1.15.3
+
+### Patch Changes
+
+- Fix a `future.v7_partialHydration` bug that would re-run loaders below the boundary on hydration if SSR loader errors bubbled to a parent boundary ([#11324](https://github.com/remix-run/react-router/pull/11324))
+- Fix a `future.v7_partialHydration` bug that would consider the router uninitialized if a route did not have a loader ([#11325](https://github.com/remix-run/react-router/pull/11325))
+
 ## 1.15.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyMatch, ErrorResponse, FormEncType, FormMethod, HandlerResult as unstable_HandlerResult, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathParam, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, } from "./utils";
+export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, DataStrategyFunction as unstable_DataStrategyFunction, DataStrategyFunctionArgs as unstable_DataStrategyFunctionArgs, DataStrategyMatch as unstable_DataStrategyMatch, ErrorResponse, FormEncType, FormMethod, HandlerResult as unstable_HandlerResult, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathParam, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, } from "./utils";
 export { AbortedDeferredError, defer, generatePath, getToPathname, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, redirect, redirectDocument, resolvePath, resolveTo, stripBasename, } from "./utils";
 export type { BrowserHistory, BrowserHistoryOptions, HashHistory, HashHistoryOptions, History, InitialEntry, Location, MemoryHistory, MemoryHistoryOptions, Path, To, } from "./history";
 export { Action, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, parsePath, } from "./history";

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-432fcb2e
+ * @remix-run/router v0.0.0-experimental-c7dd3d3a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1676,7 +1676,7 @@ function createRouter(init) {
     v7_partialHydration: false,
     v7_prependBasename: false,
     v7_relativeSplatPath: false,
-    unstable_skipActionErrorRevalidation: true
+    unstable_skipActionErrorRevalidation: false
   }, init.future);
   // Cleanup function for history
   let unlistenHistory = null;
@@ -1728,7 +1728,26 @@ function createRouter(init) {
     // were marked for explicit hydration
     let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
     let errors = init.hydrationData ? init.hydrationData.errors : null;
-    initialized = initialMatches.every(m => m.route.loader && (typeof m.route.loader !== "function" || m.route.loader.hydrate !== true) && (loaderData && loaderData[m.route.id] !== undefined || errors && errors[m.route.id] !== undefined));
+    let isRouteInitialized = m => {
+      // No loader, nothing to initialize
+      if (!m.route.loader) {
+        return true;
+      }
+      // Explicitly opting-in to running on hydration
+      if (typeof m.route.loader === "function" && m.route.loader.hydrate === true) {
+        return false;
+      }
+      // Otherwise, initialized if hydrated with data or an error
+      return loaderData && loaderData[m.route.id] !== undefined || errors && errors[m.route.id] !== undefined;
+    };
+
+    // If errors exist, don't consider routes below the boundary
+    if (errors) {
+      let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
+      initialized = initialMatches.slice(0, idx + 1).every(isRouteInitialized);
+    } else {
+      initialized = initialMatches.every(isRouteInitialized);
+    }
   } else {
     // Without partial hydration - we're initialized if we were provided any
     // hydrationData - which is expected to be complete
@@ -2352,7 +2371,8 @@ function createRouter(init) {
         // If the user didn't explicity indicate replace behavior, replace if
         // we redirected to the exact same location we're currently at to avoid
         // double back-buttons
-        replace = result.response.headers.get("Location") === state.location.pathname + state.location.search;
+        let location = normalizeRedirectLocation(result.response.headers.get("Location"), new URL(request.url), basename);
+        replace = location === state.location.pathname + state.location.search;
       }
       await startRedirectNavigation(request, result, {
         submission,
@@ -2870,22 +2890,10 @@ function createRouter(init) {
     }
     let location = redirect.response.headers.get("Location");
     invariant(location, "Expected a Location header on the redirect Response");
+    location = normalizeRedirectLocation(location, new URL(request.url), basename);
     let redirectLocation = createLocation(state.location, location, {
       _isRedirect: true
     });
-    if (ABSOLUTE_URL_REGEX.test(location)) {
-      // Strip off the protocol+origin for same-origin + same-basename absolute redirects
-      let normalizedLocation = location;
-      let currentUrl = new URL(request.url);
-      let url = normalizedLocation.startsWith("//") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);
-      let isSameBasename = stripBasename(url.pathname, basename) != null;
-      if (url.origin === currentUrl.origin && isSameBasename) {
-        normalizedLocation = url.pathname + url.search + url.hash;
-        redirectLocation = createLocation(state.location, normalizedLocation, {
-          _isRedirect: true
-        });
-      }
-    }
     if (isBrowser) {
       let isDocumentReload = false;
       if (redirect.response.headers.has("X-Remix-Reload-Document")) {
@@ -2958,9 +2966,10 @@ function createRouter(init) {
       let results = await callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLoad, matches, manifest, mapRouteProperties);
       return await Promise.all(results.map((result, i) => {
         if (isRedirectHandlerResult(result)) {
+          let response = result.result;
           return {
             type: ResultType.redirect,
-            response: normalizeRelativeRoutingRedirectResponse(result.result, request, matchesToLoad[i].route.id, matches, basename, future.v7_relativeSplatPath)
+            response: normalizeRelativeRoutingRedirectResponse(response, request, matchesToLoad[i].route.id, matches, basename, future.v7_relativeSplatPath)
           };
         }
         return convertHandlerResultToDataResult(result);
@@ -3342,14 +3351,19 @@ function createStaticHandler(routes, opts) {
    * return it directly.
    *
    * - `opts.loadRouteIds` is an optional array of routeIds if you wish to only
-   *    run a subset of route loaders on a GET request
+   *   run a subset of route loaders on a GET request
    * - `opts.requestContext` is an optional server context that will be passed
-   *    to actions/loaders in the `context` parameter
+   *   to actions/loaders in the `context` parameter
+   * - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
+   *   the bubbling of loader errors which allows single-fetch-type implementations
+   *   where the client will handle the bubbling and we may need to return data
+   *   for the handling route
    */
   async function query(request, _temp3) {
     let {
       loadRouteIds,
-      requestContext
+      requestContext,
+      skipLoaderErrorBubbling
     } = _temp3 === void 0 ? {} : _temp3;
     let url = new URL(request.url);
     let method = request.method;
@@ -3402,7 +3416,7 @@ function createStaticHandler(routes, opts) {
         activeDeferreds: null
       };
     }
-    let result = await queryImpl(request, location, matches, requestContext, loadRouteIds || null, null);
+    let result = await queryImpl(request, location, matches, requestContext, loadRouteIds || null, skipLoaderErrorBubbling === true, null);
     if (isResponse(result)) {
       return result;
     }
@@ -3474,7 +3488,7 @@ function createStaticHandler(routes, opts) {
         pathname: location.pathname
       });
     }
-    let result = await queryImpl(request, location, matches, requestContext, null, match);
+    let result = await queryImpl(request, location, matches, requestContext, null, false, match);
     if (isResponse(result)) {
       return result;
     }
@@ -3501,14 +3515,14 @@ function createStaticHandler(routes, opts) {
     }
     return undefined;
   }
-  async function queryImpl(request, location, matches, requestContext, loadRouteIds, routeMatch) {
+  async function queryImpl(request, location, matches, requestContext, loadRouteIds, skipLoaderErrorBubbling, routeMatch) {
     invariant(request.signal, "query()/queryRoute() requests must contain an AbortController signal");
     try {
       if (isMutationMethod(request.method.toLowerCase())) {
-        let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, loadRouteIds, routeMatch != null);
+        let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, loadRouteIds, skipLoaderErrorBubbling, routeMatch != null);
         return result;
       }
-      let result = await loadRouteData(request, matches, requestContext, loadRouteIds, routeMatch);
+      let result = await loadRouteData(request, matches, requestContext, loadRouteIds, skipLoaderErrorBubbling, routeMatch);
       return isResponse(result) ? result : _extends({}, result, {
         actionData: null,
         actionHeaders: {}
@@ -3531,7 +3545,7 @@ function createStaticHandler(routes, opts) {
       throw e;
     }
   }
-  async function submit(request, matches, actionMatch, requestContext, loadRouteIds, isRouteRequest) {
+  async function submit(request, matches, actionMatch, requestContext, loadRouteIds, skipLoaderErrorBubbling, isRouteRequest) {
     let result;
     if (!actionMatch.route.action && !actionMatch.route.lazy) {
       let error = getInternalRouterError(405, {
@@ -3609,7 +3623,7 @@ function createStaticHandler(routes, opts) {
       // Store off the pending error - we use it to determine which loaders
       // to call and will commit it when we complete the navigation
       let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
-      let context = await loadRouteData(loaderRequest, matches, requestContext, loadRouteIds, null, [boundaryMatch.route.id, result]);
+      let context = await loadRouteData(loaderRequest, matches, requestContext, loadRouteIds, skipLoaderErrorBubbling, null, [boundaryMatch.route.id, result]);
 
       // action status codes take precedence over loader status codes
       return _extends({}, context, {
@@ -3620,7 +3634,7 @@ function createStaticHandler(routes, opts) {
         } : {})
       });
     }
-    let context = await loadRouteData(loaderRequest, matches, requestContext, loadRouteIds, null);
+    let context = await loadRouteData(loaderRequest, matches, requestContext, loadRouteIds, skipLoaderErrorBubbling, null);
     return _extends({}, context, {
       actionData: {
         [actionMatch.route.id]: result.data
@@ -3633,7 +3647,7 @@ function createStaticHandler(routes, opts) {
       } : {}
     });
   }
-  async function loadRouteData(request, matches, requestContext, loadRouteIds, routeMatch, pendingActionResult) {
+  async function loadRouteData(request, matches, requestContext, loadRouteIds, skipLoaderErrorBubbling, routeMatch, pendingActionResult) {
     let isRouteRequest = routeMatch != null;
 
     // Short circuit if we have no loaders to run (queryRoute())
@@ -3673,7 +3687,7 @@ function createStaticHandler(routes, opts) {
 
     // Process and commit output from loaders
     let activeDeferreds = new Map();
-    let context = processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds);
+    let context = processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling);
 
     // Add a null for any non-loader matches for proper revalidation on the client
     let executedLoaders = new Set(matchesToLoad.map(match => match.route.id));
@@ -3694,8 +3708,9 @@ function createStaticHandler(routes, opts) {
     let results = await callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLoad, matches, manifest, mapRouteProperties, requestContext);
     return await Promise.all(results.map((result, i) => {
       if (isRedirectHandlerResult(result)) {
+        let response = result.result;
         // Throw redirects and let the server handle them with an HTTP redirect
-        throw normalizeRelativeRoutingRedirectResponse(result.result, request, matchesToLoad[i].route.id, matches, basename, future.v7_relativeSplatPath);
+        throw normalizeRelativeRoutingRedirectResponse(response, request, matchesToLoad[i].route.id, matches, basename, future.v7_relativeSplatPath);
       }
       if (isResponse(result.result) && isRouteRequest) {
         // For SSR single-route requests, we want to hand Responses back
@@ -3937,7 +3952,8 @@ function getMatchesToLoad(history, state, matches, submission, location, isIniti
   // Don't revalidate loaders by default after action 4xx/5xx responses
   // when the flag is enabled.  They can still opt-into revalidation via
   // `shouldRevalidate` via `actionResult`
-  let shouldSkipRevalidation = skipActionErrorRevalidation && pendingActionResult && typeof pendingActionResult[1].statusCode === "number" && pendingActionResult[1].statusCode >= 400;
+  let actionStatus = pendingActionResult ? pendingActionResult[1].statusCode : undefined;
+  let shouldSkipRevalidation = skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
   let navigationMatches = boundaryMatches.filter((match, index) => {
     let {
       route
@@ -3976,6 +3992,7 @@ function getMatchesToLoad(history, state, matches, submission, location, isIniti
       nextParams: nextRouteMatch.params
     }, submission, {
       actionResult,
+      unstable_actionStatus: actionStatus,
       defaultShouldRevalidate: shouldSkipRevalidation ? false :
       // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
       isRevalidationRequired || currentUrl.pathname + currentUrl.search === nextUrl.pathname + nextUrl.search ||
@@ -4040,6 +4057,7 @@ function getMatchesToLoad(history, state, matches, submission, location, isIniti
         nextParams: matches[matches.length - 1].params
       }, submission, {
         actionResult,
+        unstable_actionStatus: actionStatus,
         defaultShouldRevalidate: shouldSkipRevalidation ? false : isRevalidationRequired
       }));
     }
@@ -4163,13 +4181,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
       // over the execution of the loader/action
       let resolve = handlerOverride => {
         loadedMatches.add(match.route.id);
-        return shouldLoad ? callLoaderOrAction(type, request, match, manifest, mapRouteProperties, handlerOverride, requestContext) :
-        // TODO: What's the best thing to do here - return an empty "success" result?
-        // Or return a success result with the current route loader/action data?
-        // We strip these results out if the route didn't need to be revalidated in
-        // `callDataStrategy` so it doesn't matter for us.  It's more of a question
-        // of whether exposing the current data to the user is useful?
-        Promise.resolve({
+        return shouldLoad ? callLoaderOrAction(type, request, match, manifest, mapRouteProperties, handlerOverride, requestContext) : Promise.resolve({
           type: ResultType.data,
           result: undefined
         });
@@ -4185,8 +4197,6 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
 
   // Throw if any loadRoute implementations not called since they are what
   // ensures a route is fully loaded
-  // Throw if any loadRoute implementations not called since they are what
-  // ensure a route is fully loaded
   matches.forEach(m => invariant(loadedMatches.has(m.route.id), "`match.resolve()` was not called for route id \"" + m.route.id + "\". " + "You must call `match.resolve()` on every match passed to " + "`dataStrategy` to ensure all routes are properly loaded."));
 
   // Filter out any middleware-only matches for which we didn't need to run handlers
@@ -4380,6 +4390,18 @@ function normalizeRelativeRoutingRedirectResponse(response, request, routeId, ma
   }
   return response;
 }
+function normalizeRedirectLocation(location, currentUrl, basename) {
+  if (ABSOLUTE_URL_REGEX.test(location)) {
+    // Strip off the protocol+origin for same-origin + same-basename absolute redirects
+    let normalizedLocation = location;
+    let url = normalizedLocation.startsWith("//") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);
+    let isSameBasename = stripBasename(url.pathname, basename) != null;
+    if (url.origin === currentUrl.origin && isSameBasename) {
+      return url.pathname + url.search + url.hash;
+    }
+  }
+  return location;
+}
 
 // Utility method for creating the Request instances for loaders/actions during
 // client-side navigations and fetches.  During SSR we will always have a
@@ -4431,7 +4453,7 @@ function convertSearchParamsToFormData(searchParams) {
   }
   return formData;
 }
-function processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds) {
+function processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds, skipLoaderErrorBubbling) {
   // Fill in loaderData/errors from our loaders
   let loaderData = {};
   let errors = null;
@@ -4445,9 +4467,6 @@ function processRouteLoaderData(matches, matchesToLoad, results, pendingActionRe
     let id = matchesToLoad[index].route.id;
     invariant(!isRedirectResult(result), "Cannot handle redirect results in processLoaderData");
     if (isErrorResult(result)) {
-      // Look upwards from the matched route for the closest ancestor
-      // error boundary, defaulting to the root match
-      let boundaryMatch = findNearestBoundary(matches, id);
       let error = result.error;
       // If we have a pending action error, we report it at the highest-route
       // that throws a loader error, and then clear it out to indicate that
@@ -4457,10 +4476,16 @@ function processRouteLoaderData(matches, matchesToLoad, results, pendingActionRe
         pendingError = undefined;
       }
       errors = errors || {};
-
-      // Prefer higher error values if lower errors bubble to the same boundary
-      if (errors[boundaryMatch.route.id] == null) {
-        errors[boundaryMatch.route.id] = error;
+      if (skipLoaderErrorBubbling) {
+        errors[id] = error;
+      } else {
+        // Look upwards from the matched route for the closest ancestor error
+        // boundary, defaulting to the root match.  Prefer higher error values
+        // if lower errors bubble to the same boundary
+        let boundaryMatch = findNearestBoundary(matches, id);
+        if (errors[boundaryMatch.route.id] == null) {
+          errors[boundaryMatch.route.id] = error;
+        }
       }
 
       // Clear our any prior loaderData for the throwing route
@@ -4521,7 +4546,8 @@ function processLoaderData(state, matches, matchesToLoad, results, pendingAction
   let {
     loaderData,
     errors
-  } = processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds);
+  } = processRouteLoaderData(matches, matchesToLoad, results, pendingActionResult, activeDeferreds, false // This method is only called client side so we always want to bubble
+  );
 
   // Process results from our revalidating fetchers
   for (let index = 0; index < revalidatingFetchers.length; index++) {