react-router 0.0.0-experimental-afe1c2609 → 0.0.0-experimental-e2130f538

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # `react-router`
 
+## 7.9.3
+
+### Patch Changes
+
+- Do not try to use `turbo-stream` to decode CDN errors that never reached the server ([#14385](https://github.com/remix-run/react-router/pull/14385))
+  - We used to do this but lost this check with the adoption of single fetch
+
+- Fix Data Mode regression causing a 404 during initial load in when `middleware` exists without any `loader` functions ([#14393](https://github.com/remix-run/react-router/pull/14393))
+
+## 7.9.2
+
+### Patch Changes
+
+- - Update client-side router to run client `middleware` on initial load even if no loaders exist ([#14348](https://github.com/remix-run/react-router/pull/14348))
+  - Update `createRoutesStub` to run route middleware
+    - You will need to set the `<RoutesStub future={{ v8_middleware: true }} />` flag to enable the proper `context` type
+
+- Update Lazy Route Discovery manifest requests to use a singular comma-separated `paths` query param instead of repeated `p` query params ([#14321](https://github.com/remix-run/react-router/pull/14321))
+  - This is because Cloudflare has a hard limit of 100 URL search param key/value pairs when used as a key for caching purposes
+  - If more that 100 paths were included, the cache key would be incomplete and could produce false-positive cache hits
+
+- \[UNSTABLE] Add `fetcher.unstable_reset()` API ([#14206](https://github.com/remix-run/react-router/pull/14206))
+
+- Made useOutlet element reference have stable identity in-between route chages ([#13382](https://github.com/remix-run/react-router/pull/13382))
+
+- feat: enable full transition support for the rsc router ([#14362](https://github.com/remix-run/react-router/pull/14362))
+
+- In RSC Data Mode, handle SSR'd client errors and re-try in the browser ([#14342](https://github.com/remix-run/react-router/pull/14342))
+
+- Support `middleware` prop on `<Route>` for usage with a data router via `createRoutesFromElements` ([#14357](https://github.com/remix-run/react-router/pull/14357))
+
+- Handle encoded question mark and hash characters in ancestor splat routes ([#14249](https://github.com/remix-run/react-router/pull/14249))
+
+- Fail gracefully on manifest version mismatch logic if `sessionStorage` access is blocked ([#14335](https://github.com/remix-run/react-router/pull/14335))
+
 ## 7.9.1
 
 ### Patch Changes

package/dist/development/{chunk-LUBA2YEY.mjs → chunk-KLLSQY3I.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-afe1c2609
+ * react-router v0.0.0-experimental-e2130f538
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -22,6 +22,7 @@ import {
   SingleFetchRedirectSymbol,
   StaticRouterProvider,
   StreamTransfer,
+  UNSTABLE_TransitionEnabledRouterProvider,
   convertRoutesToDataRoutes,
   createBrowserHistory,
   createContext,
@@ -59,7 +60,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-V6EJ2E6X.mjs";
+} from "./chunk-KNNCBCIS.mjs";
 
 // lib/dom/ssr/server.tsx
 import * as React from "react";
@@ -1458,7 +1459,6 @@ async function handleResourceRequest(serverMode, build, staticHandler, routeId,
   }
   function handleQueryRouteError(error) {
     if (isResponse(error)) {
-      error.headers.set("X-Remix-Catch", "yes");
       return error;
     }
     if (isRouteErrorResponse(error)) {
@@ -1485,10 +1485,7 @@ function errorResponseToJson(errorResponse, serverMode) {
     ),
     {
       status: errorResponse.status,
-      statusText: errorResponse.statusText,
-      headers: {
-        "X-Remix-Error": "yes"
-      }
+      statusText: errorResponse.statusText
     }
   );
 }
@@ -1856,7 +1853,7 @@ function createCallServer({
   return async (id, args) => {
     let actionId = globalVar.__routerActionID = (globalVar.__routerActionID ?? (globalVar.__routerActionID = 0)) + 1;
     const temporaryReferences = createTemporaryReferenceSet();
-    const response = await fetchImplementation(
+    const payloadPromise = fetchImplementation(
       new Request(location.href, {
         body: await encodeReply(args, { temporaryReferences }),
         method: "POST",
@@ -1865,44 +1862,45 @@ function createCallServer({
           "rsc-action-id": id
         }
       })
-    );
-    if (!response.body) {
-      throw new Error("No response body");
-    }
-    const payload = await createFromReadableStream(response.body, {
-      temporaryReferences
-    });
-    if (payload.type === "redirect") {
-      if (payload.reload) {
-        window.location.href = payload.location;
-        return;
+    ).then((response) => {
+      if (!response.body) {
+        throw new Error("No response body");
       }
-      globalVar.__reactRouterDataRouter.navigate(payload.location, {
-        replace: payload.replace
+      return createFromReadableStream(response.body, {
+        temporaryReferences
       });
-      return payload.actionResult;
-    }
-    if (payload.type !== "action") {
-      throw new Error("Unexpected payload type");
-    }
-    if (payload.rerender) {
-      React4.startTransition(
-        // @ts-expect-error - We have old react types that don't know this can be async
-        async () => {
-          const rerender = await payload.rerender;
-          if (!rerender) return;
-          if (landedActionId < actionId && globalVar.__routerActionID <= actionId) {
-            landedActionId = actionId;
-            if (rerender.type === "redirect") {
-              if (rerender.reload) {
-                window.location.href = rerender.location;
-                return;
-              }
+    });
+    globalVar.__reactRouterDataRouter.__setPendingRerender(
+      Promise.resolve(payloadPromise).then(async (payload) => {
+        if (payload.type === "redirect") {
+          if (payload.reload) {
+            window.location.href = payload.location;
+            return () => {
+            };
+          }
+          return () => {
+            globalVar.__reactRouterDataRouter.navigate(payload.location, {
+              replace: payload.replace
+            });
+          };
+        }
+        if (payload.type !== "action") {
+          throw new Error("Unexpected payload type");
+        }
+        const rerender = await payload.rerender;
+        if (rerender && landedActionId < actionId && globalVar.__routerActionID <= actionId) {
+          if (rerender.type === "redirect") {
+            if (rerender.reload) {
+              window.location.href = rerender.location;
+              return;
+            }
+            return () => {
               globalVar.__reactRouterDataRouter.navigate(rerender.location, {
                 replace: rerender.replace
               });
-              return;
-            }
+            };
+          }
+          return () => {
             let lastMatch;
             for (const match of rerender.matches) {
               globalVar.__reactRouterDataRouter.patchRoutes(
@@ -1913,29 +1911,32 @@ function createCallServer({
               lastMatch = match;
             }
             window.__reactRouterDataRouter._internalSetStateDoNotUseOrYouWillBreakYourApp(
-              {}
+              {
+                loaderData: Object.assign(
+                  {},
+                  globalVar.__reactRouterDataRouter.state.loaderData,
+                  rerender.loaderData
+                ),
+                errors: rerender.errors ? Object.assign(
+                  {},
+                  globalVar.__reactRouterDataRouter.state.errors,
+                  rerender.errors
+                ) : null
+              }
             );
-            React4.startTransition(() => {
-              window.__reactRouterDataRouter._internalSetStateDoNotUseOrYouWillBreakYourApp(
-                {
-                  loaderData: Object.assign(
-                    {},
-                    globalVar.__reactRouterDataRouter.state.loaderData,
-                    rerender.loaderData
-                  ),
-                  errors: rerender.errors ? Object.assign(
-                    {},
-                    globalVar.__reactRouterDataRouter.state.errors,
-                    rerender.errors
-                  ) : null
-                }
-              );
-            });
-          }
+          };
         }
-      );
-    }
-    return payload.actionResult;
+        return () => {
+        };
+      }).catch(() => {
+      })
+    );
+    return payloadPromise.then((payload) => {
+      if (payload.type !== "action" && payload.type !== "redirect") {
+        throw new Error("Unexpected payload type");
+      }
+      return payload.actionResult;
+    });
   };
 }
 function createRouterFromPayload({
@@ -2155,8 +2156,8 @@ function getFetchAndDecodeViaRSC(createFromReadableStream, fetchImplementation)
     let res = await fetchImplementation(
       new Request(url, await createRequestInit(request))
     );
-    if (res.status === 404 && !res.headers.has("X-Remix-Response")) {
-      throw new ErrorResponseImpl(404, "Not Found", true);
+    if (res.status >= 400 && !res.headers.has("X-Remix-Response")) {
+      throw new ErrorResponseImpl(res.status, res.statusText, await res.text());
     }
     invariant(res.body, "No response body to decode");
     try {
@@ -2302,7 +2303,7 @@ function RSCHydratedRouter({
     routeDiscovery: { mode: "lazy", manifestPath: "/__manifest" },
     routeModules
   };
-  return /* @__PURE__ */ React4.createElement(RSCRouterContext.Provider, { value: true }, /* @__PURE__ */ React4.createElement(RSCRouterGlobalErrorBoundary, { location: location2 }, /* @__PURE__ */ React4.createElement(FrameworkContext.Provider, { value: frameworkContext }, /* @__PURE__ */ React4.createElement(RouterProvider, { router, flushSync: ReactDOM.flushSync }))));
+  return /* @__PURE__ */ React4.createElement(RSCRouterContext.Provider, { value: true }, /* @__PURE__ */ React4.createElement(RSCRouterGlobalErrorBoundary, { location: location2 }, /* @__PURE__ */ React4.createElement(FrameworkContext.Provider, { value: frameworkContext }, /* @__PURE__ */ React4.createElement(UNSTABLE_TransitionEnabledRouterProvider, { router, flushSync: ReactDOM.flushSync }))));
 }
 function createRouteFromServerManifest(match, payload) {
   let hasInitialData = payload && match.id in payload.loaderData;
@@ -2644,7 +2645,7 @@ async function routeRSCServerRequest({
       headers2.delete("Content-Encoding");
       headers2.delete("Content-Length");
       headers2.delete("Content-Type");
-      headers2.delete("x-remix-response");
+      headers2.delete("X-Remix-Response");
       headers2.set("Location", payload.location);
       return new Response(serverResponseB?.body || "", {
         headers: headers2,

package/dist/development/{chunk-V6EJ2E6X.mjs → chunk-KNNCBCIS.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-afe1c2609
+ * react-router v0.0.0-experimental-e2130f538
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -4148,7 +4148,10 @@ function getDataStrategyMatch(mapRouteProperties2, manifest, request, match, laz
       return shouldRevalidateLoader(match, unstable_shouldRevalidateArgs);
     },
     resolve(handlerOverride) {
-      if (isUsingNewApi || shouldLoad || handlerOverride && !isMutationMethod(request.method) && (match.route.lazy || match.route.loader)) {
+      let { lazy, loader, middleware } = match.route;
+      let callHandler = isUsingNewApi || shouldLoad || handlerOverride && !isMutationMethod(request.method) && (lazy || loader);
+      let isMiddlewareOnlyRoute = middleware && middleware.length > 0 && !loader && !lazy;
+      if (callHandler && !isMiddlewareOnlyRoute) {
         return callLoaderOrAction({
           request,
           match,
@@ -5653,6 +5656,119 @@ var Deferred = class {
     });
   }
 };
+function shallowDiff(a, b) {
+  if (a === b) {
+    return false;
+  }
+  let aKeys = Object.keys(a);
+  let bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return true;
+  }
+  for (let key of aKeys) {
+    if (a[key] !== b[key]) {
+      return true;
+    }
+  }
+  return false;
+}
+function UNSTABLE_TransitionEnabledRouterProvider({
+  router,
+  flushSync: reactDomFlushSyncImpl,
+  unstable_onError
+}) {
+  let fetcherData = React3.useRef(/* @__PURE__ */ new Map());
+  let [revalidating, startRevalidation] = React3.useTransition();
+  let [state, setState] = React3.useState(router.state);
+  router.__setPendingRerender = (promise) => startRevalidation(
+    // @ts-expect-error - need react 19 types for this to be async
+    async () => {
+      const rerender = await promise;
+      startRevalidation(() => {
+        rerender();
+      });
+    }
+  );
+  let navigator = React3.useMemo(() => {
+    return {
+      createHref: router.createHref,
+      encodeLocation: router.encodeLocation,
+      go: (n) => router.navigate(n),
+      push: (to, state2, opts) => router.navigate(to, {
+        state: state2,
+        preventScrollReset: opts?.preventScrollReset
+      }),
+      replace: (to, state2, opts) => router.navigate(to, {
+        replace: true,
+        state: state2,
+        preventScrollReset: opts?.preventScrollReset
+      })
+    };
+  }, [router]);
+  let basename = router.basename || "/";
+  let dataRouterContext = React3.useMemo(
+    () => ({
+      router,
+      navigator,
+      static: false,
+      basename,
+      unstable_onError
+    }),
+    [router, navigator, basename, unstable_onError]
+  );
+  React3.useLayoutEffect(() => {
+    return router.subscribe(
+      (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
+        newState.fetchers.forEach((fetcher, key) => {
+          if (fetcher.data !== void 0) {
+            fetcherData.current.set(key, fetcher.data);
+          }
+        });
+        deletedFetchers.forEach((key) => fetcherData.current.delete(key));
+        const diff = shallowDiff(state, newState);
+        if (!diff) return;
+        if (flushSync) {
+          if (reactDomFlushSyncImpl) {
+            reactDomFlushSyncImpl(() => setState(newState));
+          } else {
+            setState(newState);
+          }
+        } else {
+          React3.startTransition(() => {
+            setState(newState);
+          });
+        }
+      }
+    );
+  }, [router, reactDomFlushSyncImpl, state]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React3.createElement(
+    DataRouterStateContext.Provider,
+    {
+      value: {
+        ...state,
+        revalidation: revalidating ? "loading" : state.revalidation
+      }
+    },
+    /* @__PURE__ */ React3.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React3.createElement(
+      Router,
+      {
+        basename,
+        location: state.location,
+        navigationType: state.historyAction,
+        navigator
+      },
+      /* @__PURE__ */ React3.createElement(
+        MemoizedDataRoutes,
+        {
+          routes: router.routes,
+          future: router.future,
+          state,
+          unstable_onError
+        }
+      )
+    ))
+  )), null);
+}
 function RouterProvider({
   router,
   flushSync: reactDomFlushSyncImpl,
@@ -7355,8 +7471,8 @@ async function fetchAndDecodeViaTurboStream(args, basename, targetRoutes) {
     }
   }
   let res = await fetch(url, await createRequestInit(request));
-  if (res.status === 404 && !res.headers.has("X-Remix-Response")) {
-    throw new ErrorResponseImpl(404, "Not Found", true);
+  if (res.status >= 400 && !res.headers.has("X-Remix-Response")) {
+    throw new ErrorResponseImpl(res.status, res.statusText, await res.text());
   }
   if (res.status === 204 && res.headers.has("X-Remix-Redirect")) {
     return {
@@ -8997,7 +9113,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "0.0.0-experimental-afe1c2609";
+    "0.0.0-experimental-e2130f538";
   }
 } catch (e) {
 }
@@ -10159,6 +10275,7 @@ export {
   mapRouteProperties,
   hydrationRouteProperties,
   createMemoryRouter,
+  UNSTABLE_TransitionEnabledRouterProvider,
   RouterProvider,
   MemoryRouter,
   Navigate,