react-router 7.8.1 → 7.8.2-pre.1

package/dist/development/{chunk-UH6JLGW7.mjs → chunk-ZVD2KUIM.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.8.1
+ * react-router v7.8.2-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -699,7 +699,7 @@ function generatePath(originalPath, params = {}) {
       const [, key, optional] = keyMatch;
       let param = params[key];
       invariant(optional === "?" || param != null, `Missing ":${key}" param`);
-      return stringify2(param);
+      return encodeURIComponent(stringify2(param));
     }
     return segment.replace(/\?$/g, "");
   }).filter((segment) => !!segment);
@@ -1004,9 +1004,11 @@ function createRouter(init) {
   );
   let inFlightDataRoutes;
   let basename = init.basename || "/";
+  if (!basename.startsWith("/")) {
+    basename = `/${basename}`;
+  }
   let dataStrategyImpl = init.dataStrategy || defaultDataStrategyWithMiddleware;
   let future = {
-    unstable_middleware: false,
     ...init.future
   };
   let unlistenHistory = null;
@@ -1553,6 +1555,19 @@ function createRouter(init) {
       if (discoverResult.type === "aborted") {
         return { shortCircuited: true };
       } else if (discoverResult.type === "error") {
+        if (discoverResult.partialMatches.length === 0) {
+          let { matches: matches2, route } = getShortCircuitMatches(dataRoutes);
+          return {
+            matches: matches2,
+            pendingActionResult: [
+              route.id,
+              {
+                type: "error" /* error */,
+                error: discoverResult.error
+              }
+            ]
+          };
+        }
         let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
         return {
           matches: discoverResult.partialMatches,
@@ -1684,6 +1699,16 @@ function createRouter(init) {
       if (discoverResult.type === "aborted") {
         return { shortCircuited: true };
       } else if (discoverResult.type === "error") {
+        if (discoverResult.partialMatches.length === 0) {
+          let { matches: matches2, route } = getShortCircuitMatches(dataRoutes);
+          return {
+            matches: matches2,
+            loaderData: {},
+            errors: {
+              [route.id]: discoverResult.error
+            }
+          };
+        }
         let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;
         return {
           matches: discoverResult.partialMatches,
@@ -2801,7 +2826,7 @@ function createStaticHandler(routes, opts) {
           },
           async () => {
             let res = await generateMiddlewareResponse(
-              async (revalidationRequest) => {
+              async (revalidationRequest, opts2 = {}) => {
                 let result2 = await queryImpl(
                   revalidationRequest,
                   location,
@@ -2810,7 +2835,7 @@ function createStaticHandler(routes, opts) {
                   dataStrategy || null,
                   skipLoaderErrorBubbling === true,
                   null,
-                  filterMatchesToLoad || null,
+                  "filterMatchesToLoad" in opts2 ? opts2.filterMatchesToLoad ?? null : null,
                   skipRevalidation === true
                 );
                 if (isResponse(result2)) {
@@ -3947,198 +3972,116 @@ async function defaultDataStrategyWithMiddleware(args) {
   if (!args.matches.some((m) => m.route.unstable_middleware)) {
     return defaultDataStrategy(args);
   }
-  let didCallHandler = false;
-  return runClientMiddlewarePipeline(
+  return runClientMiddlewarePipeline(args, () => defaultDataStrategy(args));
+}
+function runServerMiddlewarePipeline(args, handler, errorHandler) {
+  return runMiddlewarePipeline(
     args,
-    () => {
-      didCallHandler = true;
-      return defaultDataStrategy(args);
-    },
-    (error, routeId) => clientMiddlewareErrorHandler(
-      error,
-      routeId,
-      args.matches,
-      didCallHandler
-    )
+    handler,
+    processResult,
+    isResponse,
+    errorHandler
   );
-}
-function clientMiddlewareErrorHandler(error, routeId, matches, didCallHandler) {
-  if (didCallHandler) {
-    return {
-      [routeId]: { type: "error", result: error }
-    };
-  } else {
-    let maxBoundaryIdx = Math.min(
-      // Throwing route
-      matches.findIndex((m) => m.route.id === routeId) || 0,
-      // or the shallowest route that needs to load data
-      matches.findIndex((m) => m.unstable_shouldCallHandler()) || 0
-    );
-    let boundaryRouteId = findNearestBoundary(
-      matches,
-      matches[maxBoundaryIdx].route.id
-    ).route.id;
-    return {
-      [boundaryRouteId]: { type: "error", result: error }
-    };
+  function processResult(result) {
+    return isDataWithResponseInit(result) ? dataWithResponseInitToResponse(result) : result;
   }
 }
-async function runServerMiddlewarePipeline(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 result = await callServerRouteMiddleware(
-    { request, params, context },
-    tuples,
+function runClientMiddlewarePipeline(args, handler) {
+  return runMiddlewarePipeline(
+    args,
     handler,
+    (r) => r,
+    // No post-processing needed on the client
+    isDataStrategyResults,
     errorHandler
   );
-  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}`
-    );
-  }
-  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");
-    }
-    nextCalled = true;
-    try {
-      let result = await callServerRouteMiddleware(
-        args,
-        middlewares,
-        handler,
-        errorHandler,
-        idx + 1
+  function errorHandler(error, routeId, nextResult) {
+    if (nextResult) {
+      return Promise.resolve(
+        Object.assign(nextResult.value, {
+          [routeId]: { type: "error", result: error }
+        })
       );
-      if (isDataWithResponseInit(result)) {
-        result = dataWithResponseInitToResponse(result);
-      }
-      nextResult = result;
-      return nextResult;
-    } catch (e) {
-      nextResult = await errorHandler(e, routeId);
-      return nextResult;
-    }
-  };
-  try {
-    let result = await middleware(
-      {
-        request: args.request,
-        params: args.params,
-        context: args.context
-      },
-      next
-    );
-    if (isDataWithResponseInit(result)) {
-      result = dataWithResponseInitToResponse(result);
-    }
-    if (nextCalled) {
-      return typeof result === "undefined" ? nextResult : result;
-    } else if (isResponse(result)) {
-      return result;
     } else {
-      nextResult = await next();
-      return nextResult;
+      let { matches } = args;
+      let maxBoundaryIdx = Math.min(
+        // Throwing route
+        matches.findIndex((m) => m.route.id === routeId) || 0,
+        // or the shallowest route that needs to load data
+        matches.findIndex((m) => m.unstable_shouldCallHandler()) || 0
+      );
+      let boundaryRouteId = findNearestBoundary(
+        matches,
+        matches[maxBoundaryIdx].route.id
+      ).route.id;
+      return Promise.resolve({
+        [boundaryRouteId]: { type: "error", result: error }
+      });
     }
-  } catch (e) {
-    let response = await errorHandler(e, routeId);
-    return response;
   }
 }
-async function runClientMiddlewarePipeline(args, handler, errorHandler) {
+async function runMiddlewarePipeline(args, handler, processResult, isResult, 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(
+  let result = await callRouteMiddleware(
     { request, params, context },
     tuples,
     handler,
-    errorHandler,
-    handlerResult
+    processResult,
+    isResult,
+    errorHandler
   );
-  return handlerResult;
+  return result;
 }
-async function callClientRouteMiddleware(args, middlewares, handler, errorHandler, handlerResult = {}, idx = 0) {
+async function callRouteMiddleware(args, middlewares, handler, processResult, isResult, 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}`
-    );
+    throw request.signal.reason ?? new Error(`Request aborted: ${request.method} ${request.url}`);
   }
   let tuple = middlewares[idx];
   if (!tuple) {
     let result = await handler();
-    Object.assign(handlerResult, result);
-    return;
+    return result;
   }
   let [routeId, middleware] = tuple;
-  let nextCalled = false;
+  let nextResult;
   let next = async () => {
-    if (nextCalled) {
+    if (nextResult) {
       throw new Error("You may only call `next()` once per middleware");
     }
-    nextCalled = true;
     try {
-      let result = await callClientRouteMiddleware(
+      let result = await callRouteMiddleware(
         args,
         middlewares,
         handler,
+        processResult,
+        isResult,
         errorHandler,
-        handlerResult,
         idx + 1
       );
-      Object.assign(handlerResult, result);
-    } catch (e) {
-      let result = await errorHandler(e, routeId);
-      Object.assign(handlerResult, result);
+      nextResult = { value: result };
+      return nextResult.value;
+    } catch (error) {
+      nextResult = { value: await errorHandler(error, routeId, nextResult) };
+      return nextResult.value;
     }
   };
   try {
-    let result = await middleware(
-      {
-        request: args.request,
-        params: args.params,
-        context: args.context
-      },
-      next
-    );
-    if (typeof result !== "undefined") {
-      console.warn(
-        "client middlewares are not intended to return values, the value will be ignored",
-        result
-      );
-    }
-    if (!nextCalled) {
-      await next();
+    let value = await middleware(args, next);
+    let result = value != null ? processResult(value) : void 0;
+    if (isResult(result)) {
+      return result;
+    } else if (nextResult) {
+      return result ?? nextResult.value;
+    } else {
+      nextResult = { value: await next() };
+      return nextResult.value;
     }
   } catch (error) {
-    let result = await errorHandler(error, routeId);
-    Object.assign(handlerResult, result);
+    let response = await errorHandler(error, routeId, nextResult);
+    return response;
   }
 }
 function getDataStrategyMatchLazyPromises(mapRouteProperties2, manifest, request, match, lazyRoutePropertiesToSkip) {
@@ -4249,28 +4192,17 @@ async function callDataStrategyImpl(dataStrategyImpl, request, matches, fetcherK
     );
   } : (cb) => {
     let typedDataStrategyArgs = dataStrategyArgs;
-    let didCallHandler = false;
-    return runClientMiddlewarePipeline(
-      typedDataStrategyArgs,
-      () => {
-        didCallHandler = true;
-        return cb({
-          ...typedDataStrategyArgs,
-          fetcherKey,
-          unstable_runClientMiddleware: () => {
-            throw new Error(
-              "Cannot call `unstable_runClientMiddleware()` from within an `unstable_runClientMiddleware` handler"
-            );
-          }
-        });
-      },
-      (error, routeId) => clientMiddlewareErrorHandler(
-        error,
-        routeId,
-        matches,
-        didCallHandler
-      )
-    );
+    return runClientMiddlewarePipeline(typedDataStrategyArgs, () => {
+      return cb({
+        ...typedDataStrategyArgs,
+        fetcherKey,
+        unstable_runClientMiddleware: () => {
+          throw new Error(
+            "Cannot call `unstable_runClientMiddleware()` from within an `unstable_runClientMiddleware` handler"
+          );
+        }
+      });
+    });
   };
   let results = await dataStrategyImpl({
     ...dataStrategyArgs,
@@ -4738,6 +4670,11 @@ function dataWithResponseInitToErrorResponse(data2) {
     data2.data
   );
 }
+function isDataStrategyResults(result) {
+  return result != null && typeof result === "object" && Object.entries(result).every(
+    ([key, value]) => typeof key === "string" && isDataStrategyResult(value)
+  );
+}
 function isDataStrategyResult(result) {
   return result != null && typeof result === "object" && "type" in result && "result" in result && (result.type === "data" /* data */ || result.type === "error" /* error */);
 }
@@ -5145,7 +5082,7 @@ function useResolvedPath(to, { relative } = {}) {
 function useRoutes(routes, locationArg) {
   return useRoutesImpl(routes, locationArg);
 }
-function useRoutesImpl(routes, locationArg, dataRouterState, future) {
+function useRoutesImpl(routes, locationArg, dataRouterState, unstable_onError, future) {
   invariant(
     useInRouterContext(),
     // TODO: This error is probably because they somehow have 2 versions of the
@@ -5217,6 +5154,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     ),
     parentMatches,
     dataRouterState,
+    unstable_onError,
     future
   );
   if (locationArg && renderedMatches) {
@@ -5285,11 +5223,14 @@ var RenderErrorBoundary = class extends React2.Component {
     };
   }
   componentDidCatch(error, errorInfo) {
-    console.error(
-      "React Router caught the following error during render",
-      error,
-      errorInfo
-    );
+    if (this.props.unstable_onError) {
+      this.props.unstable_onError(error, errorInfo);
+    } else {
+      console.error(
+        "React Router caught the following error during render",
+        error
+      );
+    }
   }
   render() {
     return this.state.error !== void 0 ? /* @__PURE__ */ React2.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React2.createElement(
@@ -5308,7 +5249,7 @@ function RenderedRoute({ routeContext, match, children }) {
   }
   return /* @__PURE__ */ React2.createElement(RouteContext.Provider, { value: routeContext }, children);
 }
-function _renderMatches(matches, parentMatches = [], dataRouterState = null, future = null) {
+function _renderMatches(matches, parentMatches = [], dataRouterState = null, unstable_onError = null, future = null) {
   if (matches == null) {
     if (!dataRouterState) {
       return null;
@@ -5420,7 +5361,8 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null, fut
           component: errorElement,
           error,
           children: getChildren(),
-          routeContext: { outlet: null, matches: matches2, isDataRoute: true }
+          routeContext: { outlet: null, matches: matches2, isDataRoute: true },
+          unstable_onError
         }
       ) : getChildren();
     },
@@ -5686,7 +5628,8 @@ var Deferred = class {
 };
 function RouterProvider({
   router,
-  flushSync: reactDomFlushSyncImpl
+  flushSync: reactDomFlushSyncImpl,
+  unstable_onError
 }) {
   let [state, setStateImpl] = React3.useState(router.state);
   let [pendingState, setPendingState] = React3.useState();
@@ -5697,6 +5640,21 @@ function RouterProvider({
   let [transition, setTransition] = React3.useState();
   let [interruption, setInterruption] = React3.useState();
   let fetcherData = React3.useRef(/* @__PURE__ */ new Map());
+  let logErrorsAndSetState = React3.useCallback(
+    (newState) => {
+      setStateImpl((prevState) => {
+        if (newState.errors && unstable_onError) {
+          Object.entries(newState.errors).forEach(([routeId, error]) => {
+            if (prevState.errors?.[routeId] !== error) {
+              unstable_onError(error);
+            }
+          });
+        }
+        return newState;
+      });
+    },
+    [unstable_onError]
+  );
   let setState = React3.useCallback(
     (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
       newState.fetchers.forEach((fetcher, key) => {
@@ -5716,9 +5674,9 @@ function RouterProvider({
       );
       if (!viewTransitionOpts || !isViewTransitionAvailable) {
         if (reactDomFlushSyncImpl && flushSync) {
-          reactDomFlushSyncImpl(() => setStateImpl(newState));
+          reactDomFlushSyncImpl(() => logErrorsAndSetState(newState));
         } else {
-          React3.startTransition(() => setStateImpl(newState));
+          React3.startTransition(() => logErrorsAndSetState(newState));
         }
         return;
       }
@@ -5736,7 +5694,7 @@ function RouterProvider({
           });
         });
         let t = router.window.document.startViewTransition(() => {
-          reactDomFlushSyncImpl(() => setStateImpl(newState));
+          reactDomFlushSyncImpl(() => logErrorsAndSetState(newState));
         });
         t.finished.finally(() => {
           reactDomFlushSyncImpl(() => {
@@ -5767,7 +5725,13 @@ function RouterProvider({
         });
       }
     },
-    [router.window, reactDomFlushSyncImpl, transition, renderDfd]
+    [
+      router.window,
+      reactDomFlushSyncImpl,
+      transition,
+      renderDfd,
+      logErrorsAndSetState
+    ]
   );
   React3.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
   React3.useEffect(() => {
@@ -5780,7 +5744,7 @@ function RouterProvider({
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
       let transition2 = router.window.document.startViewTransition(async () => {
-        React3.startTransition(() => setStateImpl(newState));
+        React3.startTransition(() => logErrorsAndSetState(newState));
         await renderPromise;
       });
       transition2.finished.finally(() => {
@@ -5791,7 +5755,7 @@ function RouterProvider({
       });
       setTransition(transition2);
     }
-  }, [pendingState, renderDfd, router.window]);
+  }, [pendingState, renderDfd, router.window, logErrorsAndSetState]);
   React3.useEffect(() => {
     if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
       renderDfd.resolve();
@@ -5831,9 +5795,10 @@ function RouterProvider({
       router,
       navigator,
       static: false,
-      basename
+      basename,
+      unstable_onError
     }),
-    [router, navigator, basename]
+    [router, navigator, basename, unstable_onError]
   );
   return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React3.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React3.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React3.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React3.createElement(
     Router,
@@ -5848,7 +5813,8 @@ function RouterProvider({
       {
         routes: router.routes,
         future: router.future,
-        state
+        state,
+        unstable_onError
       }
     )
   ))))), null);
@@ -5857,9 +5823,10 @@ var MemoizedDataRoutes = React3.memo(DataRoutes);
 function DataRoutes({
   routes,
   future,
-  state
+  state,
+  unstable_onError
 }) {
-  return useRoutesImpl(routes, void 0, state, future);
+  return useRoutesImpl(routes, void 0, state, unstable_onError, future);
 }
 function MemoryRouter({
   basename,
@@ -6007,7 +5974,16 @@ function Await({
   errorElement,
   resolve
 }) {
-  return /* @__PURE__ */ React3.createElement(AwaitErrorBoundary, { resolve, errorElement }, /* @__PURE__ */ React3.createElement(ResolveAwait, null, children));
+  let dataRouterContext = React3.useContext(DataRouterContext);
+  return /* @__PURE__ */ React3.createElement(
+    AwaitErrorBoundary,
+    {
+      resolve,
+      errorElement,
+      unstable_onError: dataRouterContext?.unstable_onError
+    },
+    /* @__PURE__ */ React3.createElement(ResolveAwait, null, children)
+  );
 }
 var AwaitErrorBoundary = class extends React3.Component {
   constructor(props) {
@@ -6018,11 +5994,15 @@ var AwaitErrorBoundary = class extends React3.Component {
     return { error };
   }
   componentDidCatch(error, errorInfo) {
-    console.error(
-      "<Await> caught the following error during render",
-      error,
-      errorInfo
-    );
+    if (this.props.unstable_onError) {
+      this.props.unstable_onError(error, errorInfo);
+    } else {
+      console.error(
+        "<Await> caught the following error during render",
+        error,
+        errorInfo
+      );
+    }
   }
   render() {
     let { children, errorElement, resolve } = this.props;
@@ -6048,7 +6028,10 @@ var AwaitErrorBoundary = class extends React3.Component {
       Object.defineProperty(resolve, "_tracked", { get: () => true });
       promise = resolve.then(
         (data2) => Object.defineProperty(resolve, "_data", { get: () => data2 }),
-        (error) => Object.defineProperty(resolve, "_error", { get: () => error })
+        (error) => {
+          this.props.unstable_onError?.(error);
+          Object.defineProperty(resolve, "_error", { get: () => error });
+        }
       );
     }
     if (status === 2 /* error */ && !errorElement) {
@@ -8986,7 +8969,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "7.8.1";
+    "7.8.2-pre.1";
   }
 } catch (e) {
 }
@@ -9893,7 +9876,7 @@ function DataRoutes2({
   future,
   state
 }) {
-  return useRoutesImpl(routes, void 0, state, future);
+  return useRoutesImpl(routes, void 0, state, void 0, future);
 }
 function serializeErrors(errors) {
   if (!errors) return null;