@reckona/mreact-router 0.0.202 → 0.0.203

package/dist/render.js

@@ -7,7 +7,7 @@ import { formatDiagnostic, transform } from "@reckona/mreact-compiler";
 import { createQueryClient, dehydrate, __MREACT_QUERY_STATE_SCRIPT_ID, installQueryAsyncStorage, runWithQueryClient, } from "@reckona/mreact-query";
 import { createStringSink, renderAsyncBoundary, renderOutOfOrderReorderScript, renderReactNodeToString, renderToReadableStream, } from "@reckona/mreact-server";
 import { createClientRouteInferenceCache, formatClientRouteInferenceDiagnostic, inferClientRouteModule, } from "./client-route-inference.js";
-import { hydrationMarkerParts, routeIdForPath, withHydrationMarkers, withRouteMarkers, } from "./navigation-runtime.js";
+import { hydrationMarkerParts, routeMarkerParts, routeIdForPath, withHydrationMarkers, } from "./navigation-runtime.js";
 import { assetPath } from "./assets.js";
 import { escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
 import { matchRoute, scanAppRoutes } from "./routes.js";
@@ -493,6 +493,7 @@ async function renderAppRequestInternal(options) {
     let trackedRequest;
     let sourceUsesRequestInput = true;
     let invalidConfiguredHsts = false;
+    let renderedStrictTransportSecurity;
     return (await withRouteCacheContext(options.routeCache, async () => {
         try {
             if (matched.route.kind === "asset") {
@@ -561,7 +562,8 @@ async function renderAppRequestInternal(options) {
             finishRenderTimingPhase(timing, phaseStartedAt, "sourceAnalysisMs");
             const cachePolicy = originalAnalysis.cachePolicy;
             const navigationScript = options.navigationScripts?.get(matched.route.path);
-            const cacheKey = routeCacheKey(options.appDir, matched.route.path, url);
+            const navigationRequest = isNavigationRequest(options.request);
+            const cacheKey = routeCacheKey(options.appDir, matched.route.path, url, navigationRequest ? "navigation" : "document");
             const mayUseRouteCache = !sourceUsesRequestInput &&
                 (cachePolicy === undefined
                     ? originalAnalysis.usesRuntimeCacheControl
@@ -655,7 +657,7 @@ async function renderAppRequestInternal(options) {
                 clientRoute,
                 props: {
                     params: matched.params,
-                    request: { url: options.request.url },
+                    request: { url: url.pathname },
                 },
                 routePath: matched.route.path,
                 script: clientScript,
@@ -728,16 +730,11 @@ async function renderAppRequestInternal(options) {
                             script: clientScript,
                             props: {
                                 params: matched.params,
-                                request: { url: options.request.url },
+                                request: { url: url.pathname },
                                 data,
                             },
                         })
-                        : isNavigationRequest(options.request)
-                            ? withRouteMarkers({
-                                html: pageHtml,
-                                routePath: matched.route.path,
-                            })
-                            : pageHtml;
+                        : withServerOnlyRouteMarkers(pageHtml, matched.route.path, options.request);
                     let html = await runWithQueryClient(queryClient, () => applyLayouts({
                         appDir: options.appDir,
                         pageFile: matched.route.file,
@@ -782,7 +779,7 @@ async function renderAppRequestInternal(options) {
                         serverModuleCacheVersion: options.serverModuleCacheVersion,
                     });
                     html = injectAuthSessionClaims(html, originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined);
-                    html = injectQueryState(html, dehydrate(queryClient));
+                    html = injectQueryState(html, dehydrate(queryClient, options.dehydrateOptions));
                     const response = withOptionalActionCookie(htmlResponse(applyActionHtmlReplacements(`<!DOCTYPE html>${clientNavigationHeadTags({
                         assetBaseUrl: options.assetBaseUrl,
                         currentStyleSheets: clientStyleSheets,
@@ -794,6 +791,7 @@ async function renderAppRequestInternal(options) {
                             "x-mreact-stream": "1",
                         }),
                     }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+                    appendNavigationVary(response.headers);
                     emitRenderTiming(options, timing, response.status);
                     return response;
                 }
@@ -860,10 +858,12 @@ async function renderAppRequestInternal(options) {
                         data: streamDataPromise,
                         define: options.define,
                         loadingFile,
+                        markerRequest: options.request,
                         pageFile: matched.route.file,
                         params: matched.params,
                         queryClient,
                         request: appRequest,
+                        requestUrl: url.pathname,
                         trackedRequest,
                         routePath: matched.route.path,
                         routeScripts: options.clientScripts,
@@ -880,6 +880,7 @@ async function renderAppRequestInternal(options) {
                     const response = withOptionalActionCookie(new Response(stream, {
                         headers: streamShellResponseHeaders,
                     }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+                    appendNavigationVary(response.headers);
                     emitRenderTiming(options, timing, response.status);
                     return response;
                 }
@@ -894,7 +895,9 @@ async function renderAppRequestInternal(options) {
                     appDir: options.appDir,
                     assetBaseUrl: options.assetBaseUrl,
                     pageFile: matched.route.file,
+                    markerRequest: options.request,
                     props,
+                    requestUrl: url.pathname,
                     routePath: matched.route.path,
                     routeScripts: options.clientScripts,
                     serverModules: options.serverModules,
@@ -912,6 +915,7 @@ async function renderAppRequestInternal(options) {
                 const response = withOptionalActionCookie(new Response(stream, {
                     headers: streamShellResponseHeaders,
                 }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+                appendNavigationVary(response.headers);
                 emitRenderTiming(options, timing, response.status);
                 return response;
             }
@@ -974,16 +978,11 @@ async function renderAppRequestInternal(options) {
                     script: clientScript,
                     props: {
                         params: matched.params,
-                        request: { url: options.request.url },
+                        request: { url: url.pathname },
                         data,
                     },
                 })
-                : isNavigationRequest(options.request)
-                    ? withRouteMarkers({
-                        html: pageHtml,
-                        routePath: matched.route.path,
-                    })
-                    : pageHtml;
+                : withServerOnlyRouteMarkers(pageHtml, matched.route.path, options.request);
             phaseStartedAt = renderTimingPhaseStartedAt(timing);
             let html = await runWithQueryClient(queryClient, () => applyLayouts({
                 appDir: options.appDir,
@@ -1032,7 +1031,7 @@ async function renderAppRequestInternal(options) {
                 serverModuleCacheVersion: options.serverModuleCacheVersion,
             });
             html = injectAuthSessionClaims(html, originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined);
-            html = injectQueryState(html, dehydrate(queryClient));
+            html = injectQueryState(html, dehydrate(queryClient, options.dehydrateOptions));
             const response = withOptionalActionCookie(htmlResponse(applyActionHtmlReplacements(`<!DOCTYPE html>${clientNavigationHeadTags({
                 assetBaseUrl: options.assetBaseUrl,
                 currentStyleSheets: clientStyleSheets,
@@ -1042,8 +1041,10 @@ async function renderAppRequestInternal(options) {
             })}${html}`, preparedActions.htmlReplacements), {
                 headers: responseHeadersForMetadata(metadata, options.request),
             }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+            appendNavigationVary(response.headers);
             const effectiveCachePolicy = cachePolicy ?? activeRouteCacheContext()?.cachePolicy;
             const configuredHsts = configuredHstsHeader(metadata?.security);
+            renderedStrictTransportSecurity = configuredHsts;
             invalidConfiguredHsts = hasInvalidConfiguredHsts(metadata?.security);
             const finalResponse = preparedActions.hasFormActions
                 ? withRouteCacheHeader(response, effectiveCachePolicy)
@@ -1137,6 +1138,7 @@ async function renderAppRequestInternal(options) {
             if (options.renderSignals !== undefined) {
                 const tracked = trackedRequest;
                 options.renderSignals.headerDependent = () => sourceUsesRequestInput || invalidConfiguredHsts || (tracked?.requestDependent() ?? true);
+                options.renderSignals.strictTransportSecurity = () => renderedStrictTransportSecurity;
             }
         }
     })).value;
@@ -1274,6 +1276,32 @@ function routePrefetchManifestScript(routeScripts, assetBaseUrl) {
 function isNavigationRequest(request) {
     return request.headers.get("x-mreact-navigation") === "1";
 }
+function withServerOnlyRouteMarkers(html, routePath, request) {
+    const marker = serverOnlyRouteMarkerParts(routePath, request);
+    return marker === undefined ? html : `${marker.prefix}${html}${marker.suffix}`;
+}
+function serverOnlyRouteMarkerParts(routePath, request) {
+    if (request.headers.get("x-mreact-prerender-variant-capture") === "1") {
+        return prerenderVariantMarkerParts(routePath);
+    }
+    return isNavigationRequest(request) ? routeMarkerParts(routePath) : undefined;
+}
+export function prerenderVariantMarkerParts(routePath) {
+    const routeId = routeIdForPath(routePath);
+    return {
+        prefix: `<!--mreact-route-variant-start:${routeId}-->`,
+        suffix: `<!--mreact-route-variant-end:${routeId}-->`,
+    };
+}
+function appendNavigationVary(headers) {
+    const vary = headers.get("vary");
+    if (vary
+        ?.split(",")
+        .some((value) => value.trim().toLowerCase() === "x-mreact-navigation") === true) {
+        return;
+    }
+    headers.append("vary", "x-mreact-navigation");
+}
 function isNavigationRouteCacheReloadRequest(request) {
     return (isNavigationRequest(request) && request.headers.get("x-mreact-navigation-cache") === "reload");
 }
@@ -2184,11 +2212,11 @@ function runServerStreamModule(code, options) {
                 script: options.script,
                 props: {
                     params: options.props.params,
-                    request: { url: options.props.request.url },
+                    request: { url: options.requestUrl },
                     data: options.props.data,
                 },
             })
-            : undefined;
+            : serverOnlyRouteMarkerParts(options.routePath, options.markerRequest);
         sink.append("<!DOCTYPE html>");
         sink.append(clientNavigationHeadTags({
             assetBaseUrl: options.assetBaseUrl,
@@ -2317,10 +2345,10 @@ async function runServerStreamModuleWithLoading(code, options) {
             script: options.script,
             props: {
                 params: options.params,
-                request: { url: options.request.url },
+                request: { url: options.requestUrl },
             },
         })
-        : undefined;
+        : serverOnlyRouteMarkerParts(options.routePath, options.markerRequest);
     return renderToReadableStream((sink) => {
         sink.append("<!DOCTYPE html>");
         sink.append(clientNavigationHeadTags({