react-router 7.5.1 → 7.5.3-pre.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # `react-router`
 
+## 7.5.3-pre.0
+
+### Patch Changes
+
+- Fix bug where bubbled action errors would result in `loaderData` being cleared at the handling `ErrorBoundary` route ([#13476](https://github.com/remix-run/react-router/pull/13476))
+- Handle redirects from `clientLoader.hydrate` initial load executions ([#13477](https://github.com/remix-run/react-router/pull/13477))
+
+## 7.5.2
+
+### Patch Changes
+
+- Update Single Fetch to also handle the 204 redirects used in `?_data` requests in Remix v2 ([#13364](https://github.com/remix-run/react-router/pull/13364))
+
+  - This allows applications to return a redirect on `.data` requests from outside the scope of React Router (i.e., an `express`/`hono` middleware)
+  - ⚠️ Please note that doing so relies on implementation details that are subject to change without a SemVer major release
+  - This is primarily done to ease upgrading to Single Fetch for existing Remix v2 applications, but the recommended way to handle this is redirecting from a route middleware
+
+- Adjust approach for Prerendering/SPA Mode via headers ([#13453](https://github.com/remix-run/react-router/pull/13453))
+
 ## 7.5.1
 
 ### Patch Changes

package/dist/development/{chunk-LSOULM7L.mjs → chunk-MKZGATSN.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.5.1
+ * react-router v7.5.3-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1590,7 +1590,11 @@ function createRouter(init) {
       }
       return {
         matches,
-        pendingActionResult: [boundaryMatch.route.id, result]
+        pendingActionResult: [
+          boundaryMatch.route.id,
+          result,
+          actionMatch.route.id
+        ]
       };
     }
     return {
@@ -4361,7 +4365,9 @@ function processRouteLoaderData(matches, results, pendingActionResult, isStaticH
   });
   if (pendingError !== void 0 && pendingActionResult) {
     errors = { [pendingActionResult[0]]: pendingError };
-    loaderData[pendingActionResult[0]] = void 0;
+    if (pendingActionResult[2]) {
+      loaderData[pendingActionResult[2]] = void 0;
+    }
   }
   return {
     loaderData,
@@ -6312,6 +6318,7 @@ async function createRequestInit(request) {
 
 // lib/dom/ssr/single-fetch.tsx
 var SingleFetchRedirectSymbol = Symbol("SingleFetchRedirect");
+var SINGLE_FETCH_REDIRECT_STATUS = 202;
 var NO_BODY_STATUS_CODES = /* @__PURE__ */ new Set([100, 101, 204, 205]);
 function StreamTransfer({
   context,
@@ -6379,10 +6386,19 @@ function StreamTransfer({
     )));
   }
 }
-function getSingleFetchDataStrategy(getRouter, getRouteInfo, ssr, basename) {
+function getTurboStreamSingleFetchDataStrategy(getRouter, manifest, routeModules, ssr, basename) {
   let dataStrategy = getSingleFetchDataStrategyImpl(
     getRouter,
-    getRouteInfo,
+    (match) => {
+      let manifestRoute = manifest.routes[match.route.id];
+      invariant2(manifestRoute, "Route not found in manifest");
+      let routeModule = routeModules[match.route.id];
+      return {
+        hasLoader: manifestRoute.hasLoader,
+        hasClientLoader: manifestRoute.hasClientLoader,
+        hasShouldRevalidate: Boolean(routeModule?.shouldRevalidate)
+      };
+    },
     fetchAndDecodeViaTurboStream,
     ssr,
     basename
@@ -6397,7 +6413,7 @@ function getSingleFetchDataStrategyImpl(getRouter, getRouteInfo, fetchAndDecode,
       return singleFetchActionStrategy(args, fetchAndDecode, basename);
     }
     let foundRevalidatingServerLoader = matches.some((m) => {
-      let { hasLoader, hasClientLoader } = getRouteInfo(m.route.id);
+      let { hasLoader, hasClientLoader } = getRouteInfo(m);
       return m.unstable_shouldCallHandler() && hasLoader && !hasClientLoader;
     });
     if (!ssr && !foundRevalidatingServerLoader) {
@@ -6449,7 +6465,7 @@ async function nonSsrStrategy(args, getRouteInfo, fetchAndDecode, basename) {
     matchesToLoad.map(
       (m) => m.resolve(async (handler) => {
         try {
-          let { hasClientLoader } = getRouteInfo(m.route.id);
+          let { hasClientLoader } = getRouteInfo(m);
           let routeId = m.route.id;
           let result = hasClientLoader ? await handler(async () => {
             let { data: data2 } = await fetchAndDecode(args, basename, [routeId]);
@@ -6475,7 +6491,7 @@ async function singleFetchLoaderNavigationStrategy(args, router, getRouteInfo, f
       async (m, i) => m.resolve(async (handler) => {
         routeDfds[i].resolve();
         let routeId = m.route.id;
-        let { hasLoader, hasClientLoader, hasShouldRevalidate } = getRouteInfo(routeId);
+        let { hasLoader, hasClientLoader, hasShouldRevalidate } = getRouteInfo(m);
         let defaultShouldRevalidate = !m.unstable_shouldRevalidateArgs || m.unstable_shouldRevalidateArgs.actionStatus == null || m.unstable_shouldRevalidateArgs.actionStatus < 400;
         let shouldCall = m.unstable_shouldCallHandler(defaultShouldRevalidate);
         if (!shouldCall) {
@@ -6515,8 +6531,9 @@ async function singleFetchLoaderNavigationStrategy(args, router, getRouteInfo, f
     )
   );
   await Promise.all(routeDfds.map((d) => d.promise));
-  if ((!router.state.initialized || routesParams.size === 0) && !window.__reactRouterHdrActive) {
-    singleFetchDfd.resolve({});
+  let isInitialLoad = !router.state.initialized && router.state.navigation.state === "idle";
+  if ((isInitialLoad || routesParams.size === 0) && !window.__reactRouterHdrActive) {
+    singleFetchDfd.resolve({ routes: {} });
   } else {
     let targetRoutes = ssr && foundOptOutRoute && routesParams.size > 0 ? [...routesParams.keys()] : void 0;
     try {
@@ -6584,6 +6601,20 @@ async function fetchAndDecodeViaTurboStream(args, basename, targetRoutes) {
   if (res.status === 404 && !res.headers.has("X-Remix-Response")) {
     throw new ErrorResponseImpl(404, "Not Found", true);
   }
+  if (res.status === 204 && res.headers.has("X-Remix-Redirect")) {
+    return {
+      status: SINGLE_FETCH_REDIRECT_STATUS,
+      data: {
+        redirect: {
+          redirect: res.headers.get("X-Remix-Redirect"),
+          status: Number(res.headers.get("X-Remix-Status") || "302"),
+          revalidate: res.headers.get("X-Remix-Revalidate") === "true",
+          reload: res.headers.get("X-Remix-Reload-Document") === "true",
+          replace: res.headers.get("X-Remix-Replace") === "true"
+        }
+      }
+    };
+  }
   if (NO_BODY_STATUS_CODES.has(res.status)) {
     let routes = {};
     if (targetRoutes && request.method !== "GET") {
@@ -7034,8 +7065,9 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         }
       };
       dataRoute.loader.hydrate = shouldHydrateRouteLoader(
-        route,
-        routeModule,
+        route.id,
+        routeModule.clientLoader,
+        route.hasLoader,
         isSpaMode
       );
       dataRoute.action = ({ request, params, context }, singleFetch) => {
@@ -7233,8 +7265,8 @@ function getRouteModuleComponent(routeModule) {
     return routeModule.default;
   }
 }
-function shouldHydrateRouteLoader(route, routeModule, isSpaMode) {
-  return isSpaMode && route.id !== "root" || routeModule.clientLoader != null && (routeModule.clientLoader.hydrate === true || route.hasLoader !== true);
+function shouldHydrateRouteLoader(routeId, clientLoader, hasLoader, isSpaMode) {
+  return isSpaMode && routeId !== "root" || clientLoader != null && (clientLoader.hydrate === true || hasLoader !== true);
 }
 
 // lib/dom/ssr/fog-of-war.ts
@@ -7916,7 +7948,7 @@ function mergeRefs(...refs) {
 var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 try {
   if (isBrowser) {
-    window.__reactRouterVersion = "7.5.1";
+    window.__reactRouterVersion = "7.5.3-pre.0";
   }
 } catch (e) {
 }
@@ -9019,7 +9051,12 @@ function ServerRouter({
     let routeId = match.route.id;
     let route = routeModules[routeId];
     let manifestRoute = context.manifest.routes[routeId];
-    if (route && manifestRoute && shouldHydrateRouteLoader(manifestRoute, route, context.isSpaMode) && (route.HydrateFallback || !manifestRoute.hasLoader)) {
+    if (route && manifestRoute && shouldHydrateRouteLoader(
+      routeId,
+      route.clientLoader,
+      manifestRoute.hasLoader,
+      context.isSpaMode
+    ) && (route.HydrateFallback || !manifestRoute.hasLoader)) {
       delete context.staticHandlerContext.loaderData[routeId];
     }
   }
@@ -9488,6 +9525,26 @@ function invariant3(value, message) {
   }
 }
 
+// lib/server-runtime/dev.ts
+var globalDevServerHooksKey = "__reactRouterDevServerHooks";
+function setDevServerHooks(devServerHooks) {
+  globalThis[globalDevServerHooksKey] = devServerHooks;
+}
+function getDevServerHooks() {
+  return globalThis[globalDevServerHooksKey];
+}
+function getBuildTimeHeader(request, headerName) {
+  if (typeof process !== "undefined") {
+    try {
+      if (process.env?.IS_RR_BUILD_REQUEST === "yes") {
+        return request.headers.get(headerName);
+      }
+    } catch (e) {
+    }
+  }
+  return null;
+}
+
 // lib/server-runtime/routes.ts
 function groupRoutesByParentId2(manifest) {
   let routes = {};
@@ -9519,10 +9576,11 @@ function createStaticHandlerDataRoutes(manifest, future, parentId = "", routesBy
       // Need to use RR's version in the param typed here to permit the optional
       // context even though we know it'll always be provided in remix
       loader: route.module.loader ? async (args) => {
-        if (args.request.headers.has("X-React-Router-Prerender-Data")) {
-          const preRenderedData = args.request.headers.get(
-            "X-React-Router-Prerender-Data"
-          );
+        let preRenderedData = getBuildTimeHeader(
+          args.request,
+          "X-React-Router-Prerender-Data"
+        );
+        if (preRenderedData != null) {
           let encoded = preRenderedData ? decodeURI(preRenderedData) : preRenderedData;
           invariant3(encoded, "Missing prerendered data for route");
           let uint8array = new TextEncoder().encode(encoded);
@@ -9597,15 +9655,6 @@ function createServerHandoffString(serverHandoff) {
   return escapeHtml2(JSON.stringify(serverHandoff));
 }
 
-// lib/server-runtime/dev.ts
-var globalDevServerHooksKey = "__reactRouterDevServerHooks";
-function setDevServerHooks(devServerHooks) {
-  globalThis[globalDevServerHooksKey] = devServerHooks;
-}
-function getDevServerHooks() {
-  return globalThis[globalDevServerHooksKey];
-}
-
 // lib/server-runtime/single-fetch.ts
 import { encode } from "turbo-stream";
 
@@ -9676,7 +9725,6 @@ function prependCookies(parentHeaders, childHeaders) {
 }
 
 // lib/server-runtime/single-fetch.ts
-var SINGLE_FETCH_REDIRECT_STATUS = 202;
 var SERVER_NO_BODY_STATUS_CODES = /* @__PURE__ */ new Set([
   ...NO_BODY_STATUS_CODES,
   304
@@ -10015,9 +10063,10 @@ Error: ${e instanceof Error ? e.toString() : e}`
     if (stripBasename(normalizedPath, normalizedBasename) !== "/" && normalizedPath.endsWith("/")) {
       normalizedPath = normalizedPath.slice(0, -1);
     }
+    let isSpaMode = getBuildTimeHeader(request, "X-React-Router-SPA-Mode") === "yes";
     if (!_build.ssr) {
       if (_build.prerender.length === 0) {
-        request.headers.set("X-React-Router-SPA-Mode", "yes");
+        isSpaMode = true;
       } else if (!_build.prerender.includes(normalizedPath) && !_build.prerender.includes(normalizedPath + "/")) {
         if (url.pathname.endsWith(".data")) {
           errorHandler(
@@ -10037,7 +10086,7 @@ Error: ${e instanceof Error ? e.toString() : e}`
             statusText: "Not Found"
           });
         } else {
-          request.headers.set("X-React-Router-SPA-Mode", "yes");
+          isSpaMode = true;
         }
       }
     }
@@ -10106,7 +10155,7 @@ Error: ${e instanceof Error ? e.toString() : e}`
           );
         }
       }
-    } else if (!request.headers.has("X-React-Router-SPA-Mode") && matches && matches[matches.length - 1].route.module.default == null && matches[matches.length - 1].route.module.ErrorBoundary == null) {
+    } else if (!isSpaMode && matches && matches[matches.length - 1].route.module.default == null && matches[matches.length - 1].route.module.ErrorBoundary == null) {
       response = await handleResourceRequest(
         serverMode,
         _build,
@@ -10131,6 +10180,7 @@ Error: ${e instanceof Error ? e.toString() : e}`
         request,
         loadContext,
         handleError,
+        isSpaMode,
         criticalCss
       );
     }
@@ -10206,8 +10256,7 @@ async function handleSingleFetchRequest(serverMode, build, staticHandler, reques
   );
   return response;
 }
-async function handleDocumentRequest(serverMode, build, staticHandler, request, loadContext, handleError, criticalCss) {
-  let isSpaMode = request.headers.has("X-React-Router-SPA-Mode");
+async function handleDocumentRequest(serverMode, build, staticHandler, request, loadContext, handleError, isSpaMode, criticalCss) {
   try {
     let response = await staticHandler.query(request, {
       requestContext: loadContext,
@@ -10480,7 +10529,7 @@ function createSessionStorage({
 function warnOnceAboutSigningSessionCookie(cookie) {
   warnOnce(
     cookie.isSigned,
-    `The "${cookie.name}" cookie is not signed, but session cookies should be signed to prevent tampering on the client before they are sent back to the server. See https://remix.run/utils/cookies#signing-cookies for more information.`
+    `The "${cookie.name}" cookie is not signed, but session cookies should be signed to prevent tampering on the client before they are sent back to the server. See https://reactrouter.com/explanation/sessions-and-cookies#signing-cookies for more information.`
   );
 }
 
@@ -10597,6 +10646,32 @@ function deserializeErrors2(errors) {
   return serialized;
 }
 
+// lib/dom/ssr/hydration.tsx
+function getHydrationData(state, routes, getRouteInfo, location, basename, isSpaMode) {
+  let hydrationData = {
+    ...state,
+    loaderData: { ...state.loaderData }
+  };
+  let initialMatches = matchRoutes(routes, location, basename);
+  if (initialMatches) {
+    for (let match of initialMatches) {
+      let routeId = match.route.id;
+      let routeInfo = getRouteInfo(routeId);
+      if (shouldHydrateRouteLoader(
+        routeId,
+        routeInfo.clientLoader,
+        routeInfo.hasLoader,
+        isSpaMode
+      ) && (routeInfo.hasHydrateFallback || !routeInfo.hasLoader)) {
+        delete hydrationData.loaderData[routeId];
+      } else if (!routeInfo.hasLoader) {
+        hydrationData.loaderData[routeId] = null;
+      }
+    }
+  }
+  return hydrationData;
+}
+
 export {
   Action,
   createBrowserHistory,
@@ -10663,7 +10738,7 @@ export {
   renderMatches,
   createSearchParams,
   SingleFetchRedirectSymbol,
-  getSingleFetchDataStrategy,
+  getTurboStreamSingleFetchDataStrategy,
   decodeViaTurboStream,
   RemixErrorBoundary,
   createClientRoutesWithHMRRevalidationOptOut,
@@ -10712,5 +10787,6 @@ export {
   createCookieSessionStorage,
   createMemorySessionStorage,
   href,
-  deserializeErrors2 as deserializeErrors
+  deserializeErrors2 as deserializeErrors,
+  getHydrationData
 };

package/dist/development/dom-export.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { R as RouterProviderProps$1 } from './fog-of-war-CyHis97d.mjs';
-import { R as RouterInit } from './route-data-OcOrqK13.mjs';
+import { R as RouterProviderProps$1 } from './fog-of-war-D2zsXvum.mjs';
+import { R as RouterInit } from './route-data-C12CLHiN.mjs';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;

package/dist/development/dom-export.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { R as RouterProviderProps$1 } from './fog-of-war-D4x86-Xc.js';
-import { R as RouterInit } from './route-data-OcOrqK13.js';
+import { R as RouterProviderProps$1 } from './fog-of-war-BLArG-qZ.js';
+import { R as RouterInit } from './route-data-C12CLHiN.js';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;