react-router 0.0.0-experimental-3f68c7c20 → 0.0.0-experimental-e87ed2fd4

package/dist/production/rsc-export.mjs

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { splitCookiesString } from 'set-cookie-parser';
 
 /**
- * react-router v0.0.0-experimental-3f68c7c20
+ * react-router v0.0.0-experimental-e87ed2fd4
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -84,6 +84,9 @@ function parsePath(path) {
 }
 
 // lib/router/utils.ts
+function unstable_createContext(defaultValue) {
+  return { defaultValue };
+}
 var _map;
 var unstable_RouterContextProvider = class {
   constructor(init) {
@@ -2346,7 +2349,19 @@ function createMemorySessionStorage({ cookie } = {}) {
     }
   });
 }
-function getDocumentHeaders(context, getRouteHeadersFn) {
+
+// lib/server-runtime/invariant.ts
+function invariant2(value, message) {
+  if (value === false || value === null || typeof value === "undefined") {
+    console.error(
+      "The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose"
+    );
+    throw new Error(message);
+  }
+}
+
+// lib/server-runtime/headers.ts
+function getDocumentHeadersImpl(context, getRouteHeadersFn) {
   let boundaryIdx = context.errors ? context.matches.findIndex((m) => context.errors[m.route.id]) : -1;
   let matches = boundaryIdx >= 0 ? context.matches.slice(0, boundaryIdx + 1) : context.matches;
   let errorHeaders;
@@ -2408,16 +2423,6 @@ function prependCookies(parentHeaders, childHeaders) {
   }
 }
 
-// lib/server-runtime/invariant.ts
-function invariant2(value, message) {
-  if (value === false || value === null || typeof value === "undefined") {
-    console.error(
-      "The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose"
-    );
-    throw new Error(message);
-  }
-}
-
 // lib/rsc/server.rsc.ts
 async function matchRSCServerRequest({
   decodeCallServer,
@@ -2436,7 +2441,7 @@ async function matchRSCServerRequest({
     );
     return response2;
   }
-  let response = await getRenderPayload(
+  let response = await generateRenderResponse(
     request,
     routes,
     decodeCallServer,
@@ -2449,24 +2454,27 @@ async function matchRSCServerRequest({
 }
 async function generateManifestResponse(routes, request, generateResponse) {
   let url = new URL(request.url);
-  const matches = matchRoutes(routes, url.pathname.replace(/\.manifest$/, ""));
+  let matches = matchRoutes(routes, url.pathname.replace(/\.manifest$/, ""));
+  let payload = {
+    type: "manifest",
+    matches: await Promise.all(
+      matches?.map(
+        (m, i) => getManifestRoute(m.route, matches[i - 1]?.route.id)
+      ) ?? []
+    ),
+    patches: await getAdditionalRoutePatches(
+      url.pathname,
+      routes,
+      matches?.map((m) => m.route.id) ?? []
+    )
+  };
   return generateResponse({
     statusCode: 200,
     headers: new Headers({
       "Content-Type": "text/x-component",
       Vary: "Content-Type"
     }),
-    payload: {
-      type: "manifest",
-      matches: await Promise.all(
-        matches?.map((m, i) => getRoute(m.route, matches[i - 1]?.route.id)) ?? []
-      ),
-      patches: await getAdditionalRoutePatches(
-        url.pathname,
-        routes,
-        matches?.map((m) => m.route.id) ?? []
-      )
-    }
+    payload
   });
 }
 async function processServerAction(request, decodeCallServer, decodeFormAction, onError) {
@@ -2515,7 +2523,7 @@ async function processServerAction(request, decodeCallServer, decodeFormAction,
     }
   }
 }
-async function getRenderPayload(request, routes, decodeCallServer, decodeFormAction, onError, generateResponse, actionResult) {
+async function generateRenderResponse(request, routes, decodeCallServer, decodeFormAction, onError, generateResponse) {
   let statusCode = 200;
   let url = new URL(request.url);
   let isDataRequest = request.headers.has("X-React-Router-Data-Request");
@@ -2526,22 +2534,12 @@ async function getRenderPayload(request, routes, decodeCallServer, decodeFormAct
     await Promise.all(matches.map((m) => explodeLazyRoute(m.route)));
   }
   const handler = createStaticHandler(routes);
-  const respond = (staticContext, actionResult2) => generateStaticContextResponse(
-    routes,
-    generateResponse,
-    statusCode,
-    routeIdsToLoad,
-    isDataRequest,
-    isSubmission,
-    actionResult2,
-    staticContext
-  );
   const result = await handler.query(request, {
     skipLoaderErrorBubbling: isDataRequest,
     skipRevalidation: isSubmission,
     ...routeIdsToLoad ? { filterMatchesToLoad: (m) => routeIdsToLoad.includes(m.route.id) } : null,
-    async unstable_stream(context, query) {
-      let actionResult2;
+    async unstable_stream(_, query) {
+      let actionResult;
       if (request.method === "POST") {
         let result2 = await processServerAction(
           request,
@@ -2549,7 +2547,7 @@ async function getRenderPayload(request, routes, decodeCallServer, decodeFormAct
           decodeFormAction,
           onError
         );
-        actionResult2 = result2?.actionResult;
+        actionResult = result2?.actionResult;
         request = result2?.revalidationRequest ?? request;
       }
       let staticContext = await query(request);
@@ -2560,7 +2558,16 @@ async function getRenderPayload(request, routes, decodeCallServer, decodeFormAct
           generateResponse
         );
       }
-      return respond(staticContext, actionResult2);
+      return generateStaticContextResponse(
+        routes,
+        generateResponse,
+        statusCode,
+        routeIdsToLoad,
+        isDataRequest,
+        isSubmission,
+        actionResult,
+        staticContext
+      );
     }
   });
   if (isRedirectResponse(result)) {
@@ -2570,169 +2577,197 @@ async function getRenderPayload(request, routes, decodeCallServer, decodeFormAct
   return result;
 }
 function generateRedirectResponse(statusCode, response, generateResponse) {
+  let payload = {
+    type: "redirect",
+    location: response.headers.get("Location") || "",
+    reload: response.headers.get("X-Remix-Reload-Document") === "true",
+    replace: response.headers.get("X-Remix-Replace") === "true",
+    status: response.status
+  };
   return generateResponse({
     statusCode,
     headers: new Headers({
       "Content-Type": "text/x-component",
       Vary: "Content-Type"
     }),
-    payload: {
-      type: "redirect",
-      location: response.headers.get("Location") || "",
-      reload: response.headers.get("X-Remix-Reload-Document") === "true",
-      replace: response.headers.get("X-Remix-Replace") === "true",
-      status: response.status
-    }
+    payload
   });
 }
 async function generateStaticContextResponse(routes, generateResponse, statusCode, routeIdsToLoad, isDataRequest, isSubmission, actionResult, staticContext) {
   statusCode = staticContext.statusCode ?? statusCode;
-  const errors = staticContext.errors ? Object.fromEntries(
-    Object.entries(staticContext.errors).map(([key, error]) => [
-      key,
-      isRouteErrorResponse(error) ? Object.fromEntries(Object.entries(error)) : error
-    ])
-  ) : staticContext.errors;
+  if (staticContext.errors) {
+    staticContext.errors = Object.fromEntries(
+      Object.entries(staticContext.errors).map(([key, error]) => [
+        key,
+        isRouteErrorResponse(error) ? Object.fromEntries(Object.entries(error)) : error
+      ])
+    );
+  }
   staticContext.matches.forEach((m) => {
     if (staticContext.loaderData[m.route.id] === void 0) {
       staticContext.loaderData[m.route.id] = null;
     }
   });
-  let headers = getDocumentHeaders(
+  let headers = getDocumentHeadersImpl(
     staticContext,
     (match) => match.route.headers
   );
-  const payload = {
+  const baseRenderPayload = {
     type: "render",
     actionData: staticContext.actionData,
-    errors,
+    errors: staticContext.errors,
     loaderData: staticContext.loaderData,
     location: staticContext.location
   };
-  if (!actionResult && isSubmission) {
-    return generateResponse({
-      statusCode,
-      headers,
-      payload: {
-        ...payload,
-        matches: [],
-        patches: []
-      }
-    });
+  const renderPayloadPromise = () => getRenderPayload(
+    baseRenderPayload,
+    routes,
+    routeIdsToLoad,
+    isDataRequest,
+    staticContext
+  );
+  let payload;
+  if (actionResult) {
+    payload = {
+      type: "action",
+      actionResult,
+      rerender: renderPayloadPromise()
+    };
+  } else if (isSubmission && isDataRequest) {
+    payload = {
+      ...baseRenderPayload,
+      matches: [],
+      patches: []
+    };
+  } else {
+    payload = await renderPayloadPromise();
   }
-  let lastMatch = null;
+  return generateResponse({
+    statusCode,
+    headers,
+    payload
+  });
+}
+async function getRenderPayload(baseRenderPayload, routes, routeIdsToLoad, isDataRequest, staticContext) {
+  let deepestRenderedRouteIdx = staticContext.matches.length - 1;
+  let parentIds = {};
+  staticContext.matches.forEach((m, i) => {
+    if (i > 0) {
+      parentIds[m.route.id] = staticContext.matches[i - 1].route.id;
+    }
+    if (staticContext.errors && m.route.id in staticContext.errors && deepestRenderedRouteIdx > i) {
+      deepestRenderedRouteIdx = i;
+    }
+  });
   let matchesPromise = Promise.all(
-    staticContext.matches.map(async (match) => {
-      if ("lazy" in match.route && match.route.lazy) {
-        Object.assign(match.route, {
-          // @ts-expect-error - FIXME: Fix the types here
-          ...await match.route.lazy(),
-          path: match.route.path,
-          index: match.route.index,
-          id: match.route.id
-        });
-        match.route.lazy = void 0;
-      }
-      const Layout = match.route.Layout || React.Fragment;
-      const Component = match.route.default;
-      const ErrorBoundary = match.route.ErrorBoundary;
-      const HydrateFallback = match.route.HydrateFallback;
-      const loaderData = staticContext.loaderData[match.route.id];
-      const actionData = staticContext.actionData?.[match.route.id];
-      const params = match.params;
-      const element = Component ? staticContext.errors?.[match.route.id] ? false : React.createElement(
-        Layout,
-        null,
-        React.createElement(Component, {
-          loaderData,
-          actionData,
-          params,
-          matches: staticContext.matches.map(
-            (match2) => convertRouteMatchToUiMatch(match2, staticContext.loaderData)
-          )
-        })
-      ) : void 0;
-      const errorElement = ErrorBoundary ? React.createElement(
-        Layout,
-        null,
-        React.createElement(ErrorBoundary, {
-          loaderData,
-          actionData,
-          params,
-          error: [...staticContext.matches].reverse().find((match2) => staticContext.errors?.[match2.route.id])
-        })
-      ) : void 0;
-      const hydrateFallbackElement = HydrateFallback ? React.createElement(
-        Layout,
-        null,
-        React.createElement(HydrateFallback, {
-          loaderData,
-          actionData,
-          params
-        })
-      ) : match.route.id === "root" ? (
-        // FIXME: This should use the `RemixRootDefaultErrorBoundary` but that
-        // currently uses a hook internally so it fails during RSC.  Restructure
-        // so it can be used safely in an RSC render pass.
-        React.createElement("p", null, "Loading!")
-      ) : void 0;
-      let result = {
-        clientAction: match.route.clientAction,
-        clientLoader: match.route.clientLoader,
-        element,
-        errorElement,
-        handle: match.route.handle,
-        hasAction: !!match.route.action,
-        hasErrorBoundary: !!match.route.ErrorBoundary,
-        hasLoader: !!match.route.loader,
-        hydrateFallbackElement,
-        id: match.route.id,
-        index: match.route.index,
-        links: match.route.links,
-        meta: match.route.meta,
-        params,
-        parentId: lastMatch?.route.id,
-        path: match.route.path,
-        pathname: match.pathname,
-        pathnameBase: match.pathnameBase,
-        shouldRevalidate: match.route.shouldRevalidate
-      };
-      lastMatch = match;
-      return result;
+    staticContext.matches.map((match, i) => {
+      let shouldRenderComponent = i <= deepestRenderedRouteIdx && (!routeIdsToLoad || routeIdsToLoad.includes(match.route.id)) && (!staticContext.errors || !(match.route.id in staticContext.errors));
+      return getServerRouteMatch(
+        staticContext,
+        match,
+        shouldRenderComponent,
+        parentIds[match.route.id]
+      );
     })
   );
-  const getPayload = async () => {
-    const matches = await matchesPromise;
-    return {
-      ...payload,
-      matches: routeIdsToLoad ? matches.filter((m) => routeIdsToLoad.includes(m.id)) : matches,
-      patches: !isDataRequest ? await getAdditionalRoutePatches(
-        staticContext.location.pathname,
-        routes,
-        matches.map((m) => m.id)
-      ) : void 0
-    };
+  let patchesPromise = !isDataRequest ? getAdditionalRoutePatches(
+    staticContext.location.pathname,
+    routes,
+    staticContext.matches.map((m) => m.route.id)
+  ) : void 0;
+  let [matches, patches] = await Promise.all([matchesPromise, patchesPromise]);
+  return {
+    ...baseRenderPayload,
+    matches,
+    patches
   };
-  if (actionResult) {
-    return generateResponse({
-      statusCode,
-      headers,
-      payload: {
-        type: "action",
-        actionResult,
-        rerender: getPayload()
-      }
-    });
-  } else {
-    let payload2 = await getPayload();
-    return generateResponse({
-      statusCode,
-      headers,
-      payload: payload2
+}
+async function getServerRouteMatch(staticContext, match, shouldRenderComponent, parentId) {
+  if ("lazy" in match.route && match.route.lazy) {
+    Object.assign(match.route, {
+      // @ts-expect-error - FIXME: Fix the types here
+      ...await match.route.lazy(),
+      path: match.route.path,
+      index: match.route.index,
+      id: match.route.id
     });
+    match.route.lazy = void 0;
+  }
+  const Layout = match.route.Layout || React.Fragment;
+  const Component = match.route.default;
+  const ErrorBoundary = match.route.ErrorBoundary;
+  const HydrateFallback = match.route.HydrateFallback;
+  const loaderData = staticContext.loaderData[match.route.id];
+  const actionData = staticContext.actionData?.[match.route.id];
+  const params = match.params;
+  const element = Component && shouldRenderComponent ? React.createElement(
+    Layout,
+    null,
+    React.createElement(Component, {
+      loaderData,
+      actionData,
+      params,
+      matches: staticContext.matches.map(
+        (match2) => convertRouteMatchToUiMatch(match2, staticContext.loaderData)
+      )
+    })
+  ) : void 0;
+  let error = void 0;
+  if (ErrorBoundary && staticContext.errors) {
+    for (const match2 of [...staticContext.matches].reverse()) {
+      if (match2.route.id in staticContext.errors) {
+        error = staticContext.errors[match2.route.id];
+        break;
+      }
+    }
   }
+  const errorElement = ErrorBoundary ? React.createElement(
+    Layout,
+    null,
+    React.createElement(ErrorBoundary, {
+      loaderData,
+      actionData,
+      params,
+      error
+    })
+  ) : void 0;
+  const hydrateFallbackElement = HydrateFallback ? React.createElement(
+    Layout,
+    null,
+    React.createElement(HydrateFallback, {
+      loaderData,
+      actionData,
+      params
+    })
+  ) : match.route.id === "root" ? (
+    // FIXME: This should use the `RemixRootDefaultErrorBoundary` but that
+    // currently uses a hook internally so it fails during RSC.  Restructure
+    // so it can be used safely in an RSC render pass.
+    React.createElement("p", null, "Loading!")
+  ) : void 0;
+  return {
+    clientAction: match.route.clientAction,
+    clientLoader: match.route.clientLoader,
+    element,
+    errorElement,
+    handle: match.route.handle,
+    hasAction: !!match.route.action,
+    hasErrorBoundary: !!match.route.ErrorBoundary,
+    hasLoader: !!match.route.loader,
+    hydrateFallbackElement,
+    id: match.route.id,
+    index: match.route.index,
+    links: match.route.links,
+    meta: match.route.meta,
+    params,
+    parentId,
+    path: match.route.path,
+    pathname: match.pathname,
+    pathnameBase: match.pathnameBase,
+    shouldRevalidate: match.route.shouldRevalidate
+  };
 }
-async function getRoute(route, parentId) {
+async function getManifestRoute(route, parentId) {
   await explodeLazyRoute(route);
   const Layout = route.Layout || React.Fragment;
   const errorElement = route.ErrorBoundary ? React.createElement(
@@ -2784,7 +2819,7 @@ async function getAdditionalRoutePatches(pathname, routes, matchedRouteIds) {
     );
   });
   let patches = await Promise.all(
-    [...patchRouteMatches.values()].filter((route) => !matchedRouteIds.some((id) => id === route.id)).map((route) => getRoute(route, route.parentId))
+    [...patchRouteMatches.values()].filter((route) => !matchedRouteIds.some((id) => id === route.id)).map((route) => getManifestRoute(route, route.parentId))
   );
   return patches;
 }
@@ -2796,4 +2831,4 @@ function canDecodeWithFormData(contentType) {
   return contentType.match(/\bapplication\/x-www-form-urlencoded\b/) || contentType.match(/\bmultipart\/form-data\b/);
 }
 
-export { createCookie, createCookieSessionStorage, createMemorySessionStorage, createSession, createSessionStorage, createStaticHandler, data, isCookie, isSession, matchRSCServerRequest, matchRoutes, redirect, redirectDocument, replace };
+export { createCookie, createCookieSessionStorage, createMemorySessionStorage, createSession, createSessionStorage, createStaticHandler, data, isCookie, isSession, matchRSCServerRequest, matchRoutes, redirect, redirectDocument, replace, unstable_createContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "0.0.0-experimental-3f68c7c20",
+  "version": "0.0.0-experimental-e87ed2fd4",
   "description": "Declarative routing for React",
   "keywords": [
     "react",