@reckona/mreact-router 0.0.149 → 0.0.150

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-router",
-  "version": "0.0.149",
+  "version": "0.0.150",
   "description": "File-system app router, SSR, actions, and deployment adapters for mreact.",
   "keywords": [
     "jsx",
@@ -105,20 +105,20 @@
   },
   "dependencies": {
     "typescript": "^6.0.3",
-    "@reckona/mreact": "0.0.149",
-    "@reckona/mreact-compiler": "0.0.149",
-    "@reckona/mreact-query": "0.0.149",
-    "@reckona/mreact-compat": "0.0.149",
-    "@reckona/mreact-devtools": "0.0.149",
-    "@reckona/mreact-reactive-core": "0.0.149",
-    "@reckona/mreact-server": "0.0.149",
-    "@reckona/mreact-shared": "0.0.149",
-    "@reckona/mreact-reactive-dom": "0.0.149"
+    "@reckona/mreact": "0.0.150",
+    "@reckona/mreact-compiler": "0.0.150",
+    "@reckona/mreact-devtools": "0.0.150",
+    "@reckona/mreact-query": "0.0.150",
+    "@reckona/mreact-reactive-core": "0.0.150",
+    "@reckona/mreact-compat": "0.0.150",
+    "@reckona/mreact-reactive-dom": "0.0.150",
+    "@reckona/mreact-server": "0.0.150",
+    "@reckona/mreact-shared": "0.0.150"
   },
   "peerDependencies": {
     "vite": ">=8 <9"
   },
   "optionalDependencies": {
-    "@reckona/mreact-router-native": "0.0.149"
+    "@reckona/mreact-router-native": "0.0.150"
   }
 }

package/src/actions.ts

@@ -286,6 +286,11 @@ export async function dispatchServerActionRequest(options: {
   appDir: string;
   importPolicy?: AppRouterImportPolicy | undefined;
   request: Request;
+  renderSingleFlightNavigation?: ((options: {
+    path: string;
+    request: Request;
+    revalidatedPaths: readonly string[];
+  }) => Promise<Response | undefined>) | undefined;
   routeCache?: AppRouterCache | undefined;
   serverActionCacheVersion?: string | undefined;
   serverActions?: AppRouterServerActionOptions | undefined;
@@ -293,8 +298,14 @@ export async function dispatchServerActionRequest(options: {
   const { revalidatedPaths, value } = await withRouteCacheContext(options.routeCache, () =>
     dispatchServerActionRequestWithoutCacheContext(options),
   );
+  const singleFlight = await renderSingleFlightActionResponse({
+    render: options.renderSingleFlightNavigation,
+    request: options.request,
+    response: value,
+    revalidatedPaths,
+  });
 
-  return withRevalidationHeader(value, revalidatedPaths);
+  return withRevalidationHeader(singleFlight ?? value, revalidatedPaths);
 }
 
 async function dispatchServerActionRequestWithoutCacheContext(options: {
@@ -568,6 +579,70 @@ function redirectToFormReferer(request: Request): Response {
   });
 }
 
+async function renderSingleFlightActionResponse(options: {
+  render:
+    | ((options: {
+      path: string;
+      request: Request;
+      revalidatedPaths: readonly string[];
+    }) => Promise<Response | undefined>)
+    | undefined;
+  request: Request;
+  response: Response;
+  revalidatedPaths: readonly string[];
+}): Promise<Response | undefined> {
+  if (
+    options.render === undefined ||
+    options.revalidatedPaths.length === 0 ||
+    options.request.headers.get("x-mreact-action-single-flight") !== "1" ||
+    !isFormActionRedirectResponse(options.response)
+  ) {
+    return undefined;
+  }
+
+  const path = sameOriginResponseLocationPath(options.request, options.response);
+
+  if (path === undefined || !options.revalidatedPaths.includes(normalizeActionPath(path))) {
+    return undefined;
+  }
+
+  const rendered = await options.render({
+    path,
+    request: options.request,
+    revalidatedPaths: options.revalidatedPaths,
+  });
+
+  if (rendered === undefined) {
+    return undefined;
+  }
+
+  rendered.headers.set("x-mreact-action-single-flight", "1");
+  return rendered;
+}
+
+function isFormActionRedirectResponse(response: Response): boolean {
+  return response.status >= 300 && response.status < 400 && response.headers.has("location");
+}
+
+function sameOriginResponseLocationPath(request: Request, response: Response): string | undefined {
+  const location = response.headers.get("location");
+
+  if (location === null) {
+    return undefined;
+  }
+
+  try {
+    const requestUrl = new URL(request.url);
+    const locationUrl = new URL(location, requestUrl);
+
+    return locationUrl.origin === requestUrl.origin
+      ? `${locationUrl.pathname}${locationUrl.search}`
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 function sameOriginRefererPath(request: Request): string | undefined {
   const referer = request.headers.get("referer");
 
@@ -587,6 +662,13 @@ function sameOriginRefererPath(request: Request): string | undefined {
   }
 }
 
+function normalizeActionPath(path: string): string {
+  const pathname = path.startsWith("/") ? path : `/${path}`;
+  const withoutTrailing = pathname.length > 1 ? pathname.replace(/\/+$/, "") : pathname;
+
+  return withoutTrailing === "" ? "/" : withoutTrailing;
+}
+
 function withRevalidationHeader(response: Response, paths: string[]): Response {
   if (paths.length > 0) {
     response.headers.set("x-mreact-revalidate", paths.join(","));

package/src/client.ts

@@ -3512,6 +3512,22 @@ function __mreactInstallNavigation() {
     }
   });
   __mreactObserveViewportPrefetchAnchors(document);
+  document.addEventListener("submit", (event) => {
+    if (event.defaultPrevented || typeof fetch !== "function") {
+      return;
+    }
+
+    const submission = __mreactServerActionSubmissionFromEvent(event);
+
+    if (submission === null) {
+      return;
+    }
+
+    event.preventDefault();
+    void __mreactSubmitServerActionForm(submission).catch(() => {
+      location.href = submission.action;
+    });
+  });
   document.addEventListener("click", (event) => {
     if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
       return;
@@ -3562,6 +3578,100 @@ function __mreactInstallNavigation() {
   });
 }
 
+function __mreactServerActionSubmissionFromEvent(event) {
+  const target = event.target;
+  const form = target instanceof Element ? target.closest("form") : null;
+  const submitter = __mreactFormSubmitterFromEvent(event);
+
+  if (!(form instanceof HTMLFormElement)) {
+    return null;
+  }
+
+  const action = submitter?.getAttribute("formaction") ?? form.action;
+  const method = submitter?.getAttribute("formmethod") ?? form.method;
+  const targetName = submitter?.getAttribute("formtarget") ?? form.target;
+  const actionUrl = new URL(action, location.href);
+
+  if (
+    targetName !== "" ||
+    actionUrl.origin !== location.origin ||
+    actionUrl.pathname !== "/_mreact/actions" ||
+    method.toUpperCase() !== "POST"
+  ) {
+    return null;
+  }
+
+  return { action: actionUrl.href, form, submitter };
+}
+
+function __mreactFormSubmitterFromEvent(event) {
+  const submitter = event.submitter;
+
+  return submitter instanceof HTMLElement ? submitter : null;
+}
+
+async function __mreactSubmitServerActionForm(submission) {
+  const response = await fetch(submission.action, {
+    body: __mreactServerActionFormData(submission.form, submission.submitter),
+    headers: { "x-mreact-action-single-flight": "1" },
+    method: "POST",
+  });
+  __mreactApplyRevalidationHeader(response);
+
+  const contentType = response.headers.get("content-type") ?? "";
+  const singleFlight = response.headers.get("x-mreact-action-single-flight") === "1";
+  if (
+    !singleFlight &&
+    !contentType.includes("text/html")
+  ) {
+    location.href = response.url || submission.action;
+    return;
+  }
+
+  const html = await response.text();
+  const applied = __mreactApplyServerActionHtml(html, singleFlight);
+
+  if (!applied) {
+    location.href = response.url || submission.action;
+  }
+}
+
+function __mreactServerActionFormData(form, submitter) {
+  if (submitter !== null) {
+    try {
+      return new FormData(form, submitter);
+    } catch {
+      // Older DOM implementations only accept the form argument.
+    }
+  }
+
+  return new FormData(form);
+}
+
+function __mreactApplyServerActionHtml(html, singleFlight) {
+  __mreactSaveCurrentHistoryState();
+  const applied = __mreactApplyNavigationHtml(html, location.href);
+
+  if (!applied) {
+    if (
+      !singleFlight ||
+      typeof document === "undefined" ||
+      typeof document.open !== "function"
+    ) {
+      return false;
+    }
+
+    document.open();
+    document.write(html);
+    document.close();
+    return true;
+  }
+
+  __mreactResetNavigationFocus();
+  __mreactAnnounceNavigation();
+  return true;
+}
+
 function __mreactInstallNavigationFetchRevalidation() {
   if (
     __mreactNavigationState.fetchRevalidationInstalled ||

package/src/render.ts

@@ -812,6 +812,16 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
       appDir: options.appDir,
       importPolicy: options.importPolicy,
       request: options.request,
+      renderSingleFlightNavigation: async (singleFlight) =>
+        renderAppRequestInternal({
+          ...options,
+          matchedRoute: undefined,
+          request: singleFlightNavigationRequest({
+            path: singleFlight.path,
+            request: singleFlight.request,
+          }),
+          requestUrl: undefined,
+        }),
       routeCache: options.routeCache,
       ...(options.serverModuleCacheVersion === undefined
         ? {}
@@ -1672,6 +1682,25 @@ function isNavigationRouteCacheReloadRequest(request: Request): boolean {
   );
 }
 
+function singleFlightNavigationRequest(options: { path: string; request: Request }): Request {
+  const actionUrl = new URL(options.request.url);
+  const targetUrl = new URL(options.path, actionUrl);
+  const headers = new Headers();
+  const cookie = options.request.headers.get("cookie");
+
+  if (cookie !== null) {
+    headers.set("cookie", cookie);
+  }
+
+  headers.set("x-mreact-navigation", "1");
+  headers.set("x-mreact-navigation-cache", "reload");
+
+  return new Request(targetUrl, {
+    headers,
+    method: "GET",
+  });
+}
+
 async function nearestBoundaryFileForPage(options: {
   appDir: string;
   filename: string;