react-router 0.0.0-experimental-28357fd2a → 0.0.0-experimental-2eb7164

package/CHANGELOG.md

@@ -1,18 +1,6 @@
 # `react-router`
 
-## 7.8.0-pre.2
-
-### Patch Changes
-
-- proxy server action side-effect redirects from actions for document and callServer requests ([#14131](https://github.com/remix-run/react-router/pull/14131))
-
-## 7.8.0-pre.1
-
-### Patch Changes
-
-- [REMOVE] Few additional fixes for returning/throwing data from middleware - attach to #14093 ([#14128](https://github.com/remix-run/react-router/pull/14128))
-
-## 7.8.0-pre.0
+## 7.8.0
 
 ### Minor Changes
 
@@ -23,14 +11,50 @@
 
 ### 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))
+
+- Bubble client-side middleware errors prior to `next` to the appropriate ancestor error boundary ([#14138](https://github.com/remix-run/react-router/pull/14138))
+
 - 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))
+
+- 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))
+
+- 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] Ensure resource route errors go through `handleError` w/middleware enabled ([#14078](https://github.com/remix-run/react-router/pull/14078))
+
+- \[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>`
@@ -57,41 +81,20 @@
   });
   ```
 
-- [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))
+- \[UNSTABLE] Convert internal middleware implementations to use the new `unstable_generateMiddlewareResponse` API ([#14103](https://github.com/remix-run/react-router/pull/14103))
+
+- \[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] 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))
+- \[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))
+- [UNSTABLE] proxy server action side-effect redirects from actions for document and callServer requests ([#14131](https://github.com/remix-run/react-router/pull/14131))
+
+- [UNSTABLE] 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
 

package/dist/development/{chunk-Z4HFX7Q2.mjs → chunk-433YBOKX.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-28357fd2a
+ * react-router v0.0.0-experimental-2eb7164
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -513,8 +513,8 @@ function convertRouteMatchToUiMatch(match, loaderData) {
     handle: route.handle
   };
 }
-function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "") {
-  let flattenRoute = (route, index, relativePath) => {
+function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "", _hasParentOptionalSegments = false) {
+  let flattenRoute = (route, index, hasParentOptionalSegments = _hasParentOptionalSegments, relativePath) => {
     let meta = {
       relativePath: relativePath === void 0 ? route.path || "" : relativePath,
       caseSensitive: route.caseSensitive === true,
@@ -522,6 +522,9 @@ function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "")
       route
     };
     if (meta.relativePath.startsWith("/")) {
+      if (!meta.relativePath.startsWith(parentPath) && hasParentOptionalSegments) {
+        return;
+      }
       invariant(
         meta.relativePath.startsWith(parentPath),
         `Absolute route path "${meta.relativePath}" nested under path "${parentPath}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`
@@ -537,7 +540,13 @@ function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "")
         route.index !== true,
         `Index routes must not have child routes. Please remove all child routes from route path "${path}".`
       );
-      flattenRoutes(route.children, branches, routesMeta, path);
+      flattenRoutes(
+        route.children,
+        branches,
+        routesMeta,
+        path,
+        hasParentOptionalSegments
+      );
     }
     if (route.path == null && !route.index) {
       return;
@@ -553,7 +562,7 @@ function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "")
       flattenRoute(route, index);
     } else {
       for (let exploded of explodeOptionalSegments(route.path)) {
-        flattenRoute(route, index, exploded);
+        flattenRoute(route, index, true, exploded);
       }
     }
   });
@@ -745,7 +754,7 @@ function compilePath(path, caseSensitive = false, end = true) {
       params.push({ paramName, isOptional: isOptional != null });
       return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
     }
-  );
+  ).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
   if (path.endsWith("*")) {
     params.push({ paramName: "*" });
     regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
@@ -3941,9 +3950,15 @@ function clientMiddlewareErrorHandler(error, routeId, matches, didCallHandler) {
       [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.find((m) => m.route.id === routeId || m.route.loader)?.route.id || routeId
+      matches[maxBoundaryIdx].route.id
     ).route.id;
     return {
       [boundaryRouteId]: { type: "error", result: error }
@@ -5134,7 +5149,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_handleError, future) {
   invariant(
     useInRouterContext(),
     // TODO: This error is probably because they somehow have 2 versions of the
@@ -5206,6 +5221,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     ),
     parentMatches,
     dataRouterState,
+    unstable_handleError,
     future
   );
   if (locationArg && renderedMatches) {
@@ -5274,11 +5290,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_handleError) {
+      this.props.unstable_handleError(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(
@@ -5297,7 +5316,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_handleError = null, future = null) {
   if (matches == null) {
     if (!dataRouterState) {
       return null;
@@ -5409,7 +5428,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_handleError
         }
       ) : getChildren();
     },
@@ -5675,7 +5695,8 @@ var Deferred = class {
 };
 function RouterProvider({
   router,
-  flushSync: reactDomFlushSyncImpl
+  flushSync: reactDomFlushSyncImpl,
+  unstable_handleError
 }) {
   let [state, setStateImpl] = React3.useState(router.state);
   let [pendingState, setPendingState] = React3.useState();
@@ -5686,6 +5707,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_handleError) {
+          Object.entries(newState.errors).forEach(([routeId, error]) => {
+            if (prevState.errors?.[routeId] !== error) {
+              unstable_handleError(error);
+            }
+          });
+        }
+        return newState;
+      });
+    },
+    [unstable_handleError]
+  );
   let setState = React3.useCallback(
     (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
       newState.fetchers.forEach((fetcher, key) => {
@@ -5705,9 +5741,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;
       }
@@ -5725,7 +5761,7 @@ function RouterProvider({
           });
         });
         let t = router.window.document.startViewTransition(() => {
-          reactDomFlushSyncImpl(() => setStateImpl(newState));
+          reactDomFlushSyncImpl(() => logErrorsAndSetState(newState));
         });
         t.finished.finally(() => {
           reactDomFlushSyncImpl(() => {
@@ -5756,7 +5792,13 @@ function RouterProvider({
         });
       }
     },
-    [router.window, reactDomFlushSyncImpl, transition, renderDfd]
+    [
+      router.window,
+      reactDomFlushSyncImpl,
+      transition,
+      renderDfd,
+      logErrorsAndSetState
+    ]
   );
   React3.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
   React3.useEffect(() => {
@@ -5769,7 +5811,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(() => {
@@ -5780,7 +5822,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();
@@ -5820,9 +5862,10 @@ function RouterProvider({
       router,
       navigator,
       static: false,
-      basename
+      basename,
+      unstable_handleError
     }),
-    [router, navigator, basename]
+    [router, navigator, basename, unstable_handleError]
   );
   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,
@@ -5837,7 +5880,8 @@ function RouterProvider({
       {
         routes: router.routes,
         future: router.future,
-        state
+        state,
+        unstable_handleError
       }
     )
   ))))), null);
@@ -5846,9 +5890,10 @@ var MemoizedDataRoutes = React3.memo(DataRoutes);
 function DataRoutes({
   routes,
   future,
-  state
+  state,
+  unstable_handleError
 }) {
-  return useRoutesImpl(routes, void 0, state, future);
+  return useRoutesImpl(routes, void 0, state, unstable_handleError, future);
 }
 function MemoryRouter({
   basename,
@@ -5996,7 +6041,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_handleError: dataRouterContext?.unstable_handleError
+    },
+    /* @__PURE__ */ React3.createElement(ResolveAwait, null, children)
+  );
 }
 var AwaitErrorBoundary = class extends React3.Component {
   constructor(props) {
@@ -6007,11 +6061,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_handleError) {
+      this.props.unstable_handleError(error, errorInfo);
+    } else {
+      console.error(
+        "<Await> caught the following error during render",
+        error,
+        errorInfo
+      );
+    }
   }
   render() {
     let { children, errorElement, resolve } = this.props;
@@ -6037,7 +6095,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_handleError?.(error);
+          Object.defineProperty(resolve, "_error", { get: () => error });
+        }
       );
     }
     if (status === 2 /* error */ && !errorElement) {
@@ -8698,6 +8759,9 @@ function isValidMetaTag(tagName) {
   return typeof tagName === "string" && /^(meta|link)$/.test(tagName);
 }
 var isHydrated = false;
+function setIsHydrated() {
+  isHydrated = true;
+}
 function Scripts(scriptProps) {
   let {
     manifest,
@@ -8716,7 +8780,7 @@ function Scripts(scriptProps) {
   }
   let matches = getActiveMatches(routerMatches, null, isSpaMode);
   React8.useEffect(() => {
-    isHydrated = true;
+    setIsHydrated();
   }, []);
   let initialScripts = React8.useMemo(() => {
     if (isRSCRouterContext) {
@@ -8972,7 +9036,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "0.0.0-experimental-28357fd2a";
+    "0.0.0-experimental-2eb7164";
   }
 } catch (e) {
 }
@@ -9879,7 +9943,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;
@@ -10171,6 +10235,7 @@ export {
   Links,
   PrefetchPageLinks,
   Meta,
+  setIsHydrated,
   Scripts,
   createBrowserRouter,
   createHashRouter,