react-router 0.0.0-experimental-e89ad3012 → 0.0.0-experimental-d5a247381

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # `react-router`
 
+## 7.8.0-pre.0
+
+### Minor Changes
+
+- Add `nonce` prop to `Links` & `PrefetchPageLinks` ([#14048](https://github.com/remix-run/react-router/pull/14048))
+- Add `loaderData` arguments/properties alongside existing `data` arguments/properties to provide consistency and clarity between `loaderData` and `actionData` across the board ([#14047](https://github.com/remix-run/react-router/pull/14047))
+  - Updated types: `Route.MetaArgs`, `Route.MetaMatch`, `MetaArgs`, `MetaMatch`, `Route.ComponentProps.matches`, `UIMatch`
+  - `@deprecated` warnings have been added to the existing `data` properties to point users to new `loaderData` properties, in preparation for removing the `data` properties in a future major release
+
+### Patch Changes
+
+- [UNSTABLE] Ensure resource route errors go through `handleError` w/middleware enabled ([#14078](https://github.com/remix-run/react-router/pull/14078))
+- Prevent _"Did not find corresponding fetcher result"_ console error when navigating during a `fetcher.submit` revalidation ([#14114](https://github.com/remix-run/react-router/pull/14114))
+- Switch Lazy Route Discovery manifest URL generation to usea standalone `URLSearchParams` instance instead of `URL.searchParams` to avoid a major performance bottleneck in Chrome ([#14084](https://github.com/remix-run/react-router/pull/14084))
+- [UNSTABLE] Propagate returned Response from server middleware if next wasn't called ([#14093](https://github.com/remix-run/react-router/pull/14093))
+- [UNSTABLE] Allow server middlewares to return `data()` values which will be converted into a `Response` ([#14093](https://github.com/remix-run/react-router/pull/14093))
+- [UNSTABLE] Update middleware error handling so that the `next` function never throws and instead handles any middleware errors at the proper `ErrorBoundary` and returns the `Response` up through the ancestor `next` function ([#14118](https://github.com/remix-run/react-router/pull/14118))
+- - [UNSTABLE] When middleware is enabled, make the `context` parameter read-only (via `Readonly<unstable_RouterContextProvider>`) so that TypeScript will not allow you to write arbitrary fields to it in loaders, actions, or middleware. ([#14097](https://github.com/remix-run/react-router/pull/14097))
+- [UNSTABLE] Rename and alter the signature/functionality of the `unstable_respond` API in `staticHandler.query`/`staticHandler.queryRoute` ([#14103](https://github.com/remix-run/react-router/pull/14103))
+  - The API has been renamed to `unstable_generateMiddlewareResponse` for clarity
+  - The main functional change is that instead of running the loaders/actions before calling `unstable_respond` and handing you the result, we now pass a `query`/`queryRoute` function as a parameter and you execute the loaders/actions inside your callback, giving you full access to pre-processing and error handling
+  - The `query` version of the API now has a signature of `(query: (r: Request) => Promise<StaticHandlerContext | Response>) => Promise<Response>`
+  - The `queryRoute` version of the API now has a signature of `(queryRoute: (r: Request) => Promise<Response>) => Promise<Response>`
+  - This allows for more advanced usages such as running logic before/after calling `query` and direct error handling of errors thrown from query
+  - ⚠️ This is a breaking change if you've adopted the `staticHandler` `unstable_respond` API
+
+  ```tsx
+  let response = await staticHandler.query(request, {
+    requestContext: new unstable_RouterContextProvider(),
+    async unstable_generateMiddlewareResponse(query) {
+      try {
+        // At this point we've run middleware top-down so we need to call the
+        // handlers and generate the Response to bubble back up the middleware
+        let result = await query(request);
+        if (isResponse(result)) {
+          return result; // Redirects, etc.
+        }
+        return await generateHtmlResponse(result);
+      } catch (error: unknown) {
+        return generateErrorResponse(error);
+      }
+    },
+  });
+  ```
+
+- [UNSTABLE] Convert internal middleware implementations to use the new `unstable_generateMiddlewareResponse` API ([#14103](https://github.com/remix-run/react-router/pull/14103))
+- Adjust internal RSC usage of `React.use` to avoid Webpack compilation errors when using React 18 ([#14113](https://github.com/remix-run/react-router/pull/14113))
+- [UNSTABLE] Change `getLoadContext` signature (`type GetLoadContextFunction`) when `future.unstable_middleware` is enabled so that it returns an `unstable_RouterContextProvider` instance instead of a `Map` used to contruct the instance internally ([#14097](https://github.com/remix-run/react-router/pull/14097))
+  - This also removes the `type unstable_InitialContext` export
+  - ⚠️ This is a breaking change if you have adopted middleware and are using a custom server with a `getLoadContext` function
+
+- Remove dependency on `@types/node` in TypeScript declaration files ([#14059](https://github.com/remix-run/react-router/pull/14059))
+- Fix types for `UIMatch` to reflect that the `loaderData`/`data` properties may be `undefined` ([#12206](https://github.com/remix-run/react-router/pull/12206))
+  - When an `ErrorBoundary` is being rendered, not all active matches will have loader data available, since it may have been their `loader` that threw to trigger the boundary
+  - The `UIMatch.data` type was not correctly handing this and would always reflect the presence of data, leading to the unexpected runtime errors when an `ErrorBoundary` was rendered
+  - ⚠️ This may cause some type errors to show up in your code for unguarded `match.data` accesses - you should properly guard for `undefined` values in those scenarios.
+
+  ```tsx
+  // app/root.tsx
+  export function loader() {
+    someFunctionThatThrows(); // ❌ Throws an Error
+    return { title: "My Title" };
+  }
+
+  export function Layout({ children }: { children: React.ReactNode }) {
+    let matches = useMatches();
+    let rootMatch = matches[0] as UIMatch<Awaited<ReturnType<typeof loader>>>;
+    //  ^ rootMatch.data is incorrectly typed here, so TypeScript does not
+    //    complain if you do the following which throws an error at runtime:
+    let { title } = rootMatch.data; // 💥
+
+    return <html>...</html>;
+  }
+  ```
+
+- [UNSTABLE] Run client middleware on client navigations even if no loaders exist ([#14106](https://github.com/remix-run/react-router/pull/14106))
+- [UNSTABLE] Change the `unstable_getContext` signature on `RouterProvider`/`HydratedRouter`/`unstable_RSCHydratedRouter` so that it returns an `unstable_RouterContextProvider` instance instead of a `Map` used to contruct the instance internally ([#14097](https://github.com/remix-run/react-router/pull/14097))
+  - ⚠️ This is a breaking change if you have adopted the `unstable_getContext` prop
+
+- Fix RSC Data Mode issue where routes that return `false` from `shouldRevalidate` would be replaced by an `<Outlet />` ([#14071](https://github.com/remix-run/react-router/pull/14071))
+
 ## 7.7.1
 
 ### Patch Changes

package/dist/development/{chunk-3O4L5GVQ.mjs → chunk-5CZ4IYHY.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-e89ad3012
+ * react-router v0.0.0-experimental-d5a247381
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -380,11 +380,11 @@ var unstable_RouterContextProvider = class {
     }
   }
   /**
-   * Access a value from the context. If no value has been set for the
-   * context, it will return the context's `defaultValue` if provided, or throw an
-   * error if no `defaultValue` was set.
+   * Access a value from the context. If no value has been set for the context,
+   * it will return the context's `defaultValue` if provided, or throw an error
+   * if no `defaultValue` was set.
    * @param context The context to get the value for
-   * @returns The value for the context, or the contexts `defaultValue` if no
+   * @returns The value for the context, or the context's `defaultValue` if no
    * value was set
    */
   get(context) {
@@ -397,8 +397,8 @@ var unstable_RouterContextProvider = class {
     throw new Error("No value found for context");
   }
   /**
-   * Set a value for the context. If the context already has a value set,
-   * this will overwrite it.
+   * Set a value for the context. If the context already has a value set, this
+   * will overwrite it.
    *
    * @param context The context to set the value for
    * @param value The value to set for the context
@@ -2781,7 +2781,7 @@ function createStaticHandler(routes, opts) {
           mapRouteProperties2
         );
         let renderedStaticContext;
-        let response = await runMiddlewarePipeline(
+        let response = await runServerMiddlewarePipeline(
           {
             request,
             matches,
@@ -2790,7 +2790,6 @@ function createStaticHandler(routes, opts) {
             // this to the proper type knowing it's not an `AppLoadContext`
             context: requestContext
           },
-          true,
           async () => {
             let res = await generateMiddlewareResponse(
               async (revalidationRequest) => {
@@ -2913,7 +2912,7 @@ function createStaticHandler(routes, opts) {
         "When using middleware in `staticHandler.queryRoute()`, any provided `requestContext` must be an instance of `unstable_RouterContextProvider`"
       );
       await loadLazyMiddlewareForMatches(matches, manifest, mapRouteProperties2);
-      let response = await runMiddlewarePipeline(
+      let response = await runServerMiddlewarePipeline(
         {
           request,
           matches,
@@ -2922,7 +2921,6 @@ function createStaticHandler(routes, opts) {
           // this to the proper type knowing it's not an `AppLoadContext`
           context: requestContext
         },
-        true,
         async () => {
           let res = await generateMiddlewareResponse(
             async (innerRequest) => {
@@ -2945,7 +2943,7 @@ function createStaticHandler(routes, opts) {
         },
         (error) => {
           if (isResponse(error)) {
-            return error;
+            return Promise.resolve(error);
           }
           throw error;
         }
@@ -3919,60 +3917,110 @@ async function defaultDataStrategyWithMiddleware(args) {
   if (!args.matches.some((m) => m.route.unstable_middleware)) {
     return defaultDataStrategy(args);
   }
-  return runMiddlewarePipeline(
+  return runClientMiddlewarePipeline(
     args,
-    false,
     () => defaultDataStrategy(args),
     (error, routeId) => ({ [routeId]: { type: "error", result: error } })
   );
 }
-async function runMiddlewarePipeline(args, propagateResult, handler, errorHandler) {
+async function runServerMiddlewarePipeline(args, handler, errorHandler) {
   let { matches, request, params, context } = args;
-  let middlewareState = {
-    handlerResult: void 0
-  };
-  try {
-    let tuples = matches.flatMap(
-      (m) => m.route.unstable_middleware ? m.route.unstable_middleware.map((fn) => [m.route.id, fn]) : []
+  let tuples = matches.flatMap(
+    (m) => m.route.unstable_middleware ? m.route.unstable_middleware.map((fn) => [m.route.id, fn]) : []
+  );
+  let result = await callServerRouteMiddleware(
+    { request, params, context },
+    tuples,
+    handler,
+    errorHandler
+  );
+  if (isDataWithResponseInit(result)) {
+    return new Response(
+      typeof result.data === "string" ? result.data : JSON.stringify(result.data),
+      { ...result.init }
     );
-    let result = await callRouteMiddleware(
-      { request, params, context },
-      tuples,
-      propagateResult,
-      middlewareState,
-      handler
+  }
+  if (isResponse(result)) {
+    return result;
+  }
+  invariant(false, `Expected a Response to be returned from route middleware`);
+}
+async function callServerRouteMiddleware(args, middlewares, handler, errorHandler, idx = 0) {
+  let { request } = args;
+  if (request.signal.aborted) {
+    if (request.signal.reason) {
+      throw request.signal.reason;
+    }
+    throw new Error(
+      `Request aborted without an \`AbortSignal.reason\`: ${request.method} ${request.url}`
     );
-    if (propagateResult) {
-      invariant(
-        isResponse(result) || isDataWithResponseInit(result),
-        `Expected a Response to be returned from route middleware`
-      );
-      if (isDataWithResponseInit(result)) {
-        return new Response(
-          typeof result.data === "string" ? result.data : JSON.stringify(result.data),
-          { ...result.init }
-        );
-      } else {
-        return result;
-      }
-    } else {
-      return middlewareState.handlerResult;
+  }
+  let tuple = middlewares[idx];
+  if (!tuple) {
+    let result = await handler();
+    return result;
+  }
+  let [routeId, middleware] = tuple;
+  let nextCalled = false;
+  let nextResult = void 0;
+  let next = async () => {
+    if (nextCalled) {
+      throw new Error("You may only call `next()` once per middleware");
     }
-  } catch (e) {
-    if (!middlewareState.middlewareError) {
-      throw e;
+    nextCalled = true;
+    try {
+      let result = await callServerRouteMiddleware(
+        args,
+        middlewares,
+        handler,
+        errorHandler,
+        idx + 1
+      );
+      nextResult = result;
+      return nextResult;
+    } catch (e) {
+      nextResult = await errorHandler(e, routeId);
+      return nextResult;
     }
-    let result = await errorHandler(
-      middlewareState.middlewareError.error,
-      middlewareState.middlewareError.routeId
+  };
+  try {
+    let result = await middleware(
+      {
+        request: args.request,
+        params: args.params,
+        context: args.context
+      },
+      next
     );
-    if (propagateResult || !middlewareState.handlerResult) {
+    if (nextCalled) {
+      return typeof result === "undefined" ? nextResult : result;
+    } else if (isResponse(result) || isDataWithResponseInit(result)) {
       return result;
+    } else {
+      nextResult = await next();
+      return nextResult;
     }
-    return Object.assign(middlewareState.handlerResult, result);
+  } catch (error) {
+    let response = await errorHandler(error, routeId);
+    return response;
   }
 }
-async function callRouteMiddleware(args, middlewares, propagateResult, middlewareState, handler, idx = 0) {
+async function runClientMiddlewarePipeline(args, handler, errorHandler) {
+  let { matches, request, params, context } = args;
+  let tuples = matches.flatMap(
+    (m) => m.route.unstable_middleware ? m.route.unstable_middleware.map((fn) => [m.route.id, fn]) : []
+  );
+  let handlerResult = {};
+  await callClientRouteMiddleware(
+    { request, params, context },
+    tuples,
+    handler,
+    errorHandler,
+    handlerResult
+  );
+  return handlerResult;
+}
+async function callClientRouteMiddleware(args, middlewares, handler, errorHandler, handlerResult = {}, idx = 0) {
   let { request } = args;
   if (request.signal.aborted) {
     if (request.signal.reason) {
@@ -3984,28 +4032,30 @@ async function callRouteMiddleware(args, middlewares, propagateResult, middlewar
   }
   let tuple = middlewares[idx];
   if (!tuple) {
-    middlewareState.handlerResult = await handler();
-    return middlewareState.handlerResult;
+    let result = await handler();
+    Object.assign(handlerResult, result);
+    return;
   }
   let [routeId, middleware] = tuple;
   let nextCalled = false;
-  let nextResult = void 0;
   let next = async () => {
     if (nextCalled) {
       throw new Error("You may only call `next()` once per middleware");
     }
     nextCalled = true;
-    let result = await callRouteMiddleware(
-      args,
-      middlewares,
-      propagateResult,
-      middlewareState,
-      handler,
-      idx + 1
-    );
-    if (propagateResult) {
-      nextResult = result;
-      return nextResult;
+    try {
+      let result = await callClientRouteMiddleware(
+        args,
+        middlewares,
+        handler,
+        errorHandler,
+        handlerResult,
+        idx + 1
+      );
+      Object.assign(handlerResult, result);
+    } catch (e) {
+      let result = await errorHandler(e, routeId);
+      Object.assign(handlerResult, result);
     }
   };
   try {
@@ -4017,33 +4067,18 @@ async function callRouteMiddleware(args, middlewares, propagateResult, middlewar
       },
       next
     );
-    if (propagateResult) {
-      if (nextCalled) {
-        return typeof result === "undefined" ? nextResult : result;
-      } else if (isResponse(result) || isDataWithResponseInit(result)) {
-        return result;
-      } else {
-        nextResult = await next();
-        return nextResult;
-      }
-    } else {
-      if (typeof result !== "undefined") {
-        console.warn(
-          "client middlewares are not intended to return values, the value will be ignored",
-          result
-        );
-      }
-      if (!nextCalled) {
-        await next();
-      }
+    if (typeof result !== "undefined") {
+      console.warn(
+        "client middlewares are not intended to return values, the value will be ignored",
+        result
+      );
     }
-  } catch (error) {
-    if (!middlewareState.middlewareError) {
-      middlewareState.middlewareError = { routeId, error };
-    } else if (middlewareState.middlewareError.error !== error) {
-      middlewareState.middlewareError = { routeId, error };
+    if (!nextCalled) {
+      await next();
     }
-    throw error;
+  } catch (error) {
+    let result = await errorHandler(error, routeId);
+    Object.assign(handlerResult, result);
   }
 }
 function getDataStrategyMatchLazyPromises(mapRouteProperties2, manifest, request, match, lazyRoutePropertiesToSkip) {
@@ -4154,9 +4189,8 @@ async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherK
     );
   } : (cb) => {
     let typedDataStrategyArgs = dataStrategyArgs;
-    return runMiddlewarePipeline(
+    return runClientMiddlewarePipeline(
       typedDataStrategyArgs,
-      false,
       () => cb({
         ...typedDataStrategyArgs,
         fetcherKey,
@@ -4494,11 +4528,12 @@ function processLoaderData(state, matches, results, pendingActionResult, revalid
   );
   revalidatingFetchers.filter((f) => !f.matches || f.matches.some((m) => m.shouldLoad)).forEach((rf) => {
     let { key, match, controller } = rf;
-    let result = fetcherResults[key];
-    invariant(result, "Did not find corresponding fetcher result");
     if (controller && controller.signal.aborted) {
       return;
-    } else if (isErrorResult(result)) {
+    }
+    let result = fetcherResults[key];
+    invariant(result, "Did not find corresponding fetcher result");
+    if (isErrorResult(result)) {
       let boundaryMatch = findNearestBoundary(state.matches, match?.route.id);
       if (!(errors && errors[boundaryMatch.route.id])) {
         errors = {
@@ -7164,6 +7199,12 @@ async function bubbleMiddlewareErrors(singleFetchPromise, matches, routesParams,
           let routeResult = fetchedData.routes[match.route.id];
           if ("error" in routeResult) {
             middlewareError = routeResult.error;
+            if (results[match.route.id]?.result == null) {
+              results[match.route.id] = {
+                type: "error",
+                result: middlewareError
+              };
+            }
             break;
           }
         }
@@ -8867,7 +8908,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "0.0.0-experimental-e89ad3012";
+    "0.0.0-experimental-d5a247381";
   }
 } catch (e) {
 }