react-router 7.8.2 → 7.9.0-pre.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # `react-router`
 
+## 7.9.0-pre.1
+
+### Patch Changes
+
+- Escape HTML in `meta()` JSON-LD content ([#14316](https://github.com/remix-run/react-router/pull/14316))
+
+## 7.9.0-pre.0
+
+### Minor Changes
+
+- Stabilize middleware and context APIs. ([#14215](https://github.com/remix-run/react-router/pull/14215))
+
+  We have removed the `unstable_` prefix from the following APIs and they are now considered stable and ready for production use:
+  - [`RouterContextProvider`](https://reactrouter.com/api/utils/RouterContextProvider)
+  - [`createContext`](https://reactrouter.com/api/utils/createContext)
+  - `createBrowserRouter` [`getContext`](https://reactrouter.com/api/data-routers/createBrowserRouter#optsgetcontext) option
+  - `<HydratedRouter>` [`getContext`](https://reactrouter.com/api/framework-routers/HydratedRouter#getcontext) prop
+
+  Please see the [Middleware Docs](https://reactrouter.com/how-to/middleware), the [Middleware RFC](https://github.com/remix-run/remix/discussions/7642), and the [Client-side Context RFC](https://github.com/remix-run/react-router/discussions/9856) for more information.
+
+### Patch Changes
+
+- Add react-server Await component implementation ([#14261](https://github.com/remix-run/react-router/pull/14261))
+- In RSC Data Mode when using a custom basename, fix hydration errors for routes that only have client loaders ([#14264](https://github.com/remix-run/react-router/pull/14264))
+- Make `href` function available in a react-server context ([#14262](https://github.com/remix-run/react-router/pull/14262))
+- decode each time `getPayload()` is called to allow for "in-context" decoding and hoisting of contextual assets ([#14248](https://github.com/remix-run/react-router/pull/14248))
+- `href()` now correctly processes routes that have an extension after the parameter or are a single optional parameter. ([#13797](https://github.com/remix-run/react-router/pull/13797))
+
 ## 7.8.2
 
 ### Patch Changes

package/dist/development/{chunk-5UALIXAM.mjs → chunk-AVXIT45F.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.8.2
+ * react-router v7.9.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -16,6 +16,7 @@ import {
   Outlet,
   RSCRouterContext,
   RemixErrorBoundary,
+  RouterContextProvider,
   RouterProvider,
   SINGLE_FETCH_REDIRECT_STATUS,
   SingleFetchRedirectSymbol,
@@ -23,6 +24,7 @@ import {
   StreamTransfer,
   convertRoutesToDataRoutes,
   createBrowserHistory,
+  createContext,
   createMemoryRouter,
   createRequestInit,
   createRouter,
@@ -31,6 +33,7 @@ import {
   createStaticRouter,
   decodeViaTurboStream,
   encode,
+  escapeHtml,
   getManifestPath,
   getSingleFetchDataStrategyImpl,
   getStaticContextFromError,
@@ -51,14 +54,12 @@ import {
   singleFetchUrl,
   stripBasename,
   stripIndexParam,
-  unstable_RouterContextProvider,
-  unstable_createContext,
   useRouteError,
   warnOnce,
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-PVWAREVJ.mjs";
+} from "./chunk-QZH3B547.mjs";
 
 // lib/dom/ssr/server.tsx
 import * as React from "react";
@@ -145,7 +146,7 @@ function createRoutesStub(routes, _context) {
       frameworkContextRef.current = {
         future: {
           unstable_subResourceIntegrity: future?.unstable_subResourceIntegrity === true,
-          unstable_middleware: future?.unstable_middleware === true
+          v8_middleware: future?.v8_middleware === true
         },
         manifest: {
           routes: {},
@@ -162,7 +163,7 @@ function createRoutesStub(routes, _context) {
         // @ts-expect-error `StubRouteObject` is stricter about `loader`/`action`
         // types compared to `AgnosticRouteObject`
         convertRoutesToDataRoutes(routes, (r) => r),
-        _context !== void 0 ? _context : future?.unstable_middleware ? new unstable_RouterContextProvider() : {},
+        _context !== void 0 ? _context : future?.v8_middleware ? new RouterContextProvider() : {},
         frameworkContextRef.current.manifest,
         frameworkContextRef.current.routeModules
       );
@@ -612,7 +613,7 @@ function createStaticHandlerDataRoutes(manifest, future, parentId = "", routesBy
       hasErrorBoundary: route.id === "root" || route.module.ErrorBoundary != null,
       id: route.id,
       path: route.path,
-      unstable_middleware: route.module.unstable_middleware,
+      middleware: route.module.middleware,
       // 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) => {
@@ -677,19 +678,6 @@ function createStaticHandlerDataRoutes(manifest, future, parentId = "", routesBy
   });
 }
 
-// lib/server-runtime/markup.ts
-var ESCAPE_LOOKUP = {
-  "&": "\\u0026",
-  ">": "\\u003e",
-  "<": "\\u003c",
-  "\u2028": "\\u2028",
-  "\u2029": "\\u2029"
-};
-var ESCAPE_REGEX = /[&><\u2028\u2029]/g;
-function escapeHtml(html) {
-  return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
-}
-
 // lib/server-runtime/serverHandoff.ts
 function createServerHandoffString(serverHandoff) {
   return escapeHtml(JSON.stringify(serverHandoff));
@@ -785,7 +773,7 @@ async function singleFetchAction(build, serverMode, staticHandler, request, hand
       requestContext: loadContext,
       skipLoaderErrorBubbling: true,
       skipRevalidation: true,
-      unstable_generateMiddlewareResponse: build.future.unstable_middleware ? async (query) => {
+      generateMiddlewareResponse: build.future.v8_middleware ? async (query) => {
         try {
           let innerResult = await query(handlerRequest);
           return handleQueryResult(innerResult);
@@ -849,7 +837,7 @@ async function singleFetchLoaders(build, serverMode, staticHandler, request, han
       requestContext: loadContext,
       filterMatchesToLoad: (m) => !loadRouteIds || loadRouteIds.has(m.route.id),
       skipLoaderErrorBubbling: true,
-      unstable_generateMiddlewareResponse: build.future.unstable_middleware ? async (query) => {
+      generateMiddlewareResponse: build.future.v8_middleware ? async (query) => {
         try {
           let innerResult = await query(handlerRequest);
           return handleQueryResult(innerResult);
@@ -1066,15 +1054,15 @@ var createRequestHandler = (build, mode) => {
         request
       });
     };
-    if (_build.future.unstable_middleware) {
-      if (initialContext && !(initialContext instanceof unstable_RouterContextProvider)) {
+    if (_build.future.v8_middleware) {
+      if (initialContext && !(initialContext instanceof RouterContextProvider)) {
         let error = new Error(
-          "Invalid `context` value provided to `handleRequest`. When middleware is enabled you must return an instance of `unstable_RouterContextProvider` from your `getLoadContext` function."
+          "Invalid `context` value provided to `handleRequest`. When middleware is enabled you must return an instance of `RouterContextProvider` from your `getLoadContext` function."
         );
         handleError(error);
         return returnLastResortErrorResponse(error, serverMode);
       }
-      loadContext = initialContext || new unstable_RouterContextProvider();
+      loadContext = initialContext || new RouterContextProvider();
     } else {
       loadContext = initialContext || {};
     }
@@ -1302,7 +1290,7 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
   try {
     let result = await staticHandler.query(request, {
       requestContext: loadContext,
-      unstable_generateMiddlewareResponse: build.future.unstable_middleware ? async (query) => {
+      generateMiddlewareResponse: build.future.v8_middleware ? async (query) => {
         try {
           let innerResult = await query(request);
           if (!isResponse(innerResult)) {
@@ -1438,7 +1426,7 @@ async function handleResourceRequest(serverMode, build, staticHandler, routeId,
     let result = await staticHandler.queryRoute(request, {
       routeId,
       requestContext: loadContext,
-      unstable_generateMiddlewareResponse: build.future.unstable_middleware ? async (queryRoute) => {
+      generateMiddlewareResponse: build.future.v8_middleware ? async (queryRoute) => {
         try {
           let innerResult = await queryRoute(request);
           return handleQueryRouteResult(innerResult);
@@ -1658,22 +1646,27 @@ function createMemorySessionStorage({ cookie } = {}) {
 // lib/href.ts
 function href(path, ...args) {
   let params = args[0];
-  return path.split("/").map((segment) => {
-    if (segment === "*") {
-      return params ? params["*"] : void 0;
-    }
-    const match = segment.match(/^:([\w-]+)(\?)?/);
-    if (!match) return segment;
-    const param = match[1];
-    const value = params ? params[param] : void 0;
-    const isRequired = match[2] === void 0;
-    if (isRequired && value === void 0) {
-      throw Error(
-        `Path '${path}' requires param '${param}' but it was not provided`
-      );
+  let result = path.replace(/\/*\*?$/, "").replace(
+    /\/:([\w-]+)(\?)?/g,
+    // same regex as in .\router\utils.ts: compilePath().
+    (_, param, questionMark) => {
+      const isRequired = questionMark === void 0;
+      const value = params ? params[param] : void 0;
+      if (isRequired && value === void 0) {
+        throw new Error(
+          `Path '${path}' requires param '${param}' but it was not provided`
+        );
+      }
+      return value === void 0 ? "" : "/" + value;
     }
-    return value;
-  }).filter((segment) => segment !== void 0).join("/");
+  );
+  if (path.endsWith("*")) {
+    const value = params ? params["*"] : void 0;
+    if (value !== void 0) {
+      result += "/" + value;
+    }
+  }
+  return result || "/";
 }
 
 // lib/rsc/browser.tsx
@@ -1681,7 +1674,14 @@ import * as React4 from "react";
 import * as ReactDOM from "react-dom";
 
 // lib/dom/ssr/hydration.tsx
-function getHydrationData(state, routes, getRouteInfo, location2, basename, isSpaMode) {
+function getHydrationData({
+  state,
+  routes,
+  getRouteInfo,
+  location: location2,
+  basename,
+  isSpaMode
+}) {
   let hydrationData = {
     ...state,
     loaderData: { ...state.loaderData }
@@ -1933,7 +1933,7 @@ function createCallServer({
 function createRouterFromPayload({
   fetchImplementation,
   createFromReadableStream,
-  unstable_getContext,
+  getContext,
   payload
 }) {
   const globalVar = window;
@@ -1971,17 +1971,17 @@ function createRouterFromPayload({
   }, []);
   globalVar.__reactRouterDataRouter = createRouter({
     routes,
-    unstable_getContext,
+    getContext,
     basename: payload.basename,
     history: createBrowserHistory(),
-    hydrationData: getHydrationData(
-      {
+    hydrationData: getHydrationData({
+      state: {
         loaderData: payload.loaderData,
         actionData: payload.actionData,
         errors: payload.errors
       },
       routes,
-      (routeId) => {
+      getRouteInfo: (routeId) => {
         let match = payload.matches.find((m) => m.id === routeId);
         invariant(match, "Route not found in payload");
         return {
@@ -1990,10 +1990,10 @@ function createRouterFromPayload({
           hasHydrateFallback: match.hydrateFallbackElement != null
         };
       },
-      payload.location,
-      void 0,
-      false
-    ),
+      location: payload.location,
+      basename: payload.basename,
+      isSpaMode: false
+    }),
     async patchRoutesOnNavigation({ path, signal }) {
       if (discoveredPaths.has(path)) {
         return;
@@ -2081,7 +2081,7 @@ function createRouterFromPayload({
     routeModules: globalVar.__reactRouterRouteModules
   };
 }
-var renderedRoutesContext = unstable_createContext();
+var renderedRoutesContext = createContext();
 function getRSCSingleFetchDataStrategy(getRouter, ssr, basename, createFromReadableStream, fetchImplementation) {
   let dataStrategy = getSingleFetchDataStrategyImpl(
     getRouter,
@@ -2108,7 +2108,7 @@ function getRSCSingleFetchDataStrategy(getRouter, ssr, basename, createFromReada
       return M.route.hasComponent && !M.route.element;
     }
   );
-  return async (args) => args.unstable_runClientMiddleware(async () => {
+  return async (args) => args.runClientMiddleware(async () => {
     let context = args.context;
     context.set(renderedRoutesContext, []);
     let results = await dataStrategy(args);
@@ -2194,22 +2194,17 @@ function RSCHydratedRouter({
   fetch: fetchImplementation = fetch,
   payload,
   routeDiscovery = "eager",
-  unstable_getContext
+  getContext
 }) {
   if (payload.type !== "render") throw new Error("Invalid payload type");
   let { router, routeModules } = React4.useMemo(
     () => createRouterFromPayload({
       payload,
       fetchImplementation,
-      unstable_getContext,
+      getContext,
       createFromReadableStream
     }),
-    [
-      createFromReadableStream,
-      payload,
-      fetchImplementation,
-      unstable_getContext
-    ]
+    [createFromReadableStream, payload, fetchImplementation, getContext]
   );
   React4.useEffect(() => {
     setIsHydrated();
@@ -2281,7 +2276,7 @@ function RSCHydratedRouter({
     future: {
       // These flags have no runtime impact so can always be false.  If we add
       // flags that drive runtime behavior they'll need to be proxied through.
-      unstable_middleware: false,
+      v8_middleware: false,
       unstable_subResourceIntegrity: false
     },
     isSpaMode: false,
@@ -2574,19 +2569,48 @@ async function routeRSCServerRequest({
   if (!serverResponse.body) {
     throw new Error("Missing body in server response");
   }
+  const detectRedirectResponse = serverResponse.clone();
   let serverResponseB = null;
   if (hydrate) {
     serverResponseB = serverResponse.clone();
   }
   const body = serverResponse.body;
-  let payloadPromise;
+  let buffer;
+  let streamControllers = [];
+  const createStream = () => {
+    if (!buffer) {
+      buffer = [];
+      return body.pipeThrough(
+        new TransformStream({
+          transform(chunk, controller) {
+            buffer.push(chunk);
+            controller.enqueue(chunk);
+            streamControllers.forEach((c) => c.enqueue(chunk));
+          },
+          flush() {
+            streamControllers.forEach((c) => c.close());
+            streamControllers = [];
+          }
+        })
+      );
+    }
+    return new ReadableStream({
+      start(controller) {
+        buffer.forEach((chunk) => controller.enqueue(chunk));
+        streamControllers.push(controller);
+      }
+    });
+  };
   const getPayload = async () => {
-    if (payloadPromise) return payloadPromise;
-    payloadPromise = createFromReadableStream(body);
-    return payloadPromise;
+    return createFromReadableStream(createStream());
   };
   try {
-    const payload = await getPayload();
+    if (!detectRedirectResponse.body) {
+      throw new Error("Failed to clone server response");
+    }
+    const payload = await createFromReadableStream(
+      detectRedirectResponse.body
+    );
     if (serverResponse.status === SINGLE_FETCH_REDIRECT_STATUS && payload.type === "redirect") {
       const headers2 = new Headers(serverResponse.headers);
       headers2.delete("Content-Encoding");
@@ -2697,7 +2721,7 @@ function RSCStaticRouter({ getPayload }) {
     future: {
       // These flags have no runtime impact so can always be false.  If we add
       // flags that drive runtime behavior they'll need to be proxied through.
-      unstable_middleware: false,
+      v8_middleware: false,
       unstable_subResourceIntegrity: false
     },
     isSpaMode: false,