@reckona/mreact-router 0.0.202 → 0.0.204

package/dist/render.js

@@ -5,9 +5,9 @@ import { access, readFile, stat } from "node:fs/promises";
 import { dirname, join, relative, resolve, sep } from "node:path";
 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 { createStringSink, renderOutOfOrderBoundary, 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";
@@ -16,8 +16,9 @@ import { dispatchServerActionRequest, prepareRouteServerActionPlaceholders, prep
 import { serverActionCookie } from "./csrf.js";
 import { activeRouteCacheContext, withRouteCacheContext, cachedRouteResponse, cacheRouteResponse, routeCacheKey, routeCachePolicyFromSource, } from "./cache.js";
 import { trackRequestHeaderReads, withTrackedRequest, } from "./request-header-tracking.js";
-import { configuredHstsHeader, hasInvalidConfiguredHsts, } from "./security-headers.js";
+import { configuredHstsHeader, hasInvalidConfiguredHsts } from "./security-headers.js";
 import { resolveRouterCacheLimit } from "./cache-config.js";
+import { protectNonceBearingResponse } from "./prerender-entry.js";
 import { importAppRouterBuiltFileModule, importAppRouterFileModule, importAppRouterSourceModule, fileImportMetaUrlPlugin, rewriteCompatVendorPlaceholderImportsForRunner, } from "./module-runner.js";
 import { bytesResponse, htmlResponse } from "./http.js";
 import { isNotFoundError, isRedirectError, rewriteLocation } from "./navigation.js";
@@ -30,7 +31,7 @@ import { bundleRouterModule } from "./bundle-pipeline.js";
 import { viteDefineCacheKey, vitePluginsCacheKey } from "./vite-plugin-cache-key.js";
 import { invokeRouterInstrumentation, traceContextFromRequest, } from "./trace.js";
 import { mergeRouteMiddlewareControls, middlewareMatches, parseRouteMiddlewareControl, parseStaticMiddlewareConfig, shouldSkipMiddleware, validateRouteMiddlewareControl, } from "./middleware.js";
-import { applyFileConventionMetadata, injectHeadMetadata, mergeRouteMetadata, responseHeadersForMetadata, serializeRobots, serializeSitemap, validateRouteMetadata, } from "./metadata.js";
+import { applyFileConventionMetadataTemplate, fileConventionMetadataTemplate, injectHeadMetadata, mergeRouteMetadata, responseHeadersForMetadata, serializeRobots, serializeSitemap, validateRouteMetadata, } from "./metadata.js";
 import { createSlotRenderContext, markShellBoundary, shellBoundaryId, splitLayoutSlot, warnUnconsumedRouteSlots, } from "./layout-composer.js";
 import { importPolicyCacheKey, memoizedHashText, prebuiltRequestModuleArtifact, prebuiltRouteLoaderModuleArtifact, prebuiltServerComponentModuleCode, prebuiltServerModuleOutputMatches, prebuiltServerModuleOutputOptionsMatch, } from "./route-module-loader.js";
 import { loadRouteDataFromModule, } from "./route-loader-runtime.js";
@@ -272,7 +273,7 @@ export async function renderAppRequest(options) {
     };
     invokeRouterInstrumentation(options.instrumentation?.onRequestStart, requestEvent);
     const response = await renderAppRequestInternal({ ...options, requestUrl: url });
-    const finalResponse = await applyAppRouterResponseHook(response, options);
+    const finalResponse = protectNonceBearingResponse(await applyAppRouterResponseHook(response, options));
     invokeRouterInstrumentation(options.instrumentation?.onRequestEnd, {
         ...requestEvent,
         status: finalResponse.status,
@@ -291,31 +292,14 @@ function finishRenderTimingPhase(timing, startedAt, phaseName) {
     }
     timing.phases[phaseName] = logDurationMs(startedAt);
 }
-async function readSettledPromiseAtNextTask(promise) {
-    return await Promise.race([
-        promise.then((value) => ({ settled: true, value })),
-        new Promise((resolve) => {
-            setTimeout(() => resolve({ settled: false }), 0);
-        }),
-    ]);
-}
-function createDeferredSignal() {
-    let resolve;
-    const promise = new Promise((innerResolve) => {
-        resolve = innerResolve;
+function observePromiseSettlement(promise) {
+    let settlement = { status: "pending" };
+    void promise.then((value) => {
+        settlement = { status: "fulfilled", value };
+    }, (error) => {
+        settlement = { error, status: "rejected" };
     });
-    return {
-        promise,
-        resolve() {
-            resolve?.();
-        },
-    };
-}
-async function waitForLoaderReadyOrSettled(dataPromise, loaderReady) {
-    if (loaderReady === undefined) {
-        return;
-    }
-    await Promise.race([loaderReady, dataPromise.then(() => undefined, () => undefined)]);
+    return () => settlement;
 }
 function addRenderTimingPhaseDuration(timing, startedAt, phaseName) {
     if (timing === undefined || startedAt === undefined) {
@@ -323,11 +307,6 @@ function addRenderTimingPhaseDuration(timing, startedAt, phaseName) {
     }
     timing.phases[phaseName] = (timing.phases[phaseName] ?? 0) + logDurationMs(startedAt);
 }
-function routeLoaderMayReturnControlResponse(code) {
-    return (/\b(?:redirect|redirectExternal|rewrite|notFound|throwNotFound)\s*\(/.test(code) ||
-        /\bnew\s+Response\s*\(/.test(code) ||
-        /\bResponse\.(?:redirect|json)\s*\(/.test(code));
-}
 async function waitForRenderPreload(options, timing) {
     if (options.preload?.wait !== "before-render") {
         return;
@@ -493,6 +472,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 +541,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
@@ -625,7 +606,6 @@ async function renderAppRequestInternal(options) {
             const clientInference = routeAnalysis.clientInference;
             const clientRoute = clientInference.client;
             phaseStartedAt = renderTimingPhaseStartedAt(timing);
-            const loaderReady = routeAnalysis.hasLoader ? createDeferredSignal() : undefined;
             const dataPromise = routeAnalysis.hasLoader
                 ? loadRouteDataWithInstrumentation({
                     appDir: options.appDir,
@@ -647,15 +627,18 @@ async function renderAppRequestInternal(options) {
                     define: options.define,
                     vitePlugins: options.vitePlugins,
                     timing,
-                    onLoaderReady: loaderReady?.resolve,
                 })
                 : undefined;
+            // Route analysis and loading-boundary discovery can continue before the loader is awaited.
+            // Observe an early rejection immediately so strict unhandled-rejection runtimes do not
+            // terminate before the request-level control/error handler receives the same promise.
+            void dataPromise?.catch(() => { });
             finishRenderTimingPhase(timing, phaseStartedAt, "loaderStartMs");
             recoveryRoute = {
                 clientRoute,
                 props: {
                     params: matched.params,
-                    request: { url: options.request.url },
+                    request: { url: url.pathname },
                 },
                 routePath: matched.route.path,
                 script: clientScript,
@@ -728,16 +711,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, options.prerenderVariantCapture === true);
                     let html = await runWithQueryClient(queryClient, () => applyLayouts({
                         appDir: options.appDir,
                         pageFile: matched.route.file,
@@ -782,7 +760,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,43 +772,24 @@ async function renderAppRequestInternal(options) {
                             "x-mreact-stream": "1",
                         }),
                     }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+                    appendNavigationVary(response.headers);
                     emitRenderTiming(options, timing, response.status);
                     return response;
                 }
                 let streamData;
-                let streamDataPromise = dataPromise ?? Promise.resolve(undefined);
                 phaseStartedAt = renderTimingPhaseStartedAt(timing);
-                if (loadingFile === undefined || routeLoaderMayReturnControlResponse(originalCode)) {
-                    try {
-                        streamData = dataPromise === undefined ? undefined : await dataPromise;
-                    }
-                    finally {
-                        finishRenderTimingPhase(timing, phaseStartedAt, "loaderWaitMs");
-                    }
-                    if (streamData instanceof Response) {
-                        emitRenderTiming(options, timing, streamData.status);
-                        return streamData;
-                    }
-                    streamDataPromise = Promise.resolve(streamData);
+                try {
+                    streamData = dataPromise === undefined ? undefined : await dataPromise;
                 }
-                else {
-                    try {
-                        const settledData = await readSettledPromiseAtNextTask(streamDataPromise);
-                        if (settledData.settled) {
-                            if (settledData.value instanceof Response) {
-                                emitRenderTiming(options, timing, settledData.value.status);
-                                return settledData.value;
-                            }
-                            streamDataPromise = Promise.resolve(settledData.value);
-                        }
-                        else {
-                            await waitForLoaderReadyOrSettled(streamDataPromise, loaderReady?.promise);
-                        }
-                    }
-                    finally {
-                        finishRenderTimingPhase(timing, phaseStartedAt, "loaderWaitMs");
-                    }
+                finally {
+                    finishRenderTimingPhase(timing, phaseStartedAt, "loaderWaitMs");
                 }
+                if (streamData instanceof Response) {
+                    emitRenderTiming(options, timing, streamData.status);
+                    return streamData;
+                }
+                const streamDataPromise = Promise.resolve(streamData);
+                const streamDataSettlement = loadingFile === undefined ? undefined : observePromiseSettlement(streamDataPromise);
                 await waitForRenderPreload(options, timing);
                 await loadServerRenderArtifacts(options, matched.route.file, timing);
                 phaseStartedAt = renderTimingPhaseStartedAt(timing);
@@ -851,19 +810,31 @@ async function renderAppRequestInternal(options) {
                         headers: { "content-type": "text/plain; charset=utf-8" },
                     });
                 }
-                if (loadingFile !== undefined) {
+                if (loadingFile !== undefined && streamDataSettlement !== undefined) {
                     phaseStartedAt = renderTimingPhaseStartedAt(timing);
-                    const stream = await runServerStreamModuleWithLoading(output.code, {
+                    const errorFile = await nearestExistingBoundaryFileForPage({
+                        appDir: options.appDir,
+                        filename: "error.mreact.tsx",
+                        pageFile: matched.route.file,
+                        serverSourceFiles: options.serverSourceFiles,
+                    });
+                    const streamResult = await runServerStreamModuleWithLoading(output.code, {
                         appDir: options.appDir,
                         assetBaseUrl: options.assetBaseUrl,
                         clientRoute,
                         data: streamDataPromise,
+                        dataSettlement: streamDataSettlement,
                         define: options.define,
+                        errorFile,
                         loadingFile,
+                        markerRequest: options.request,
+                        onRenderError: options.onRenderError,
+                        prerenderVariantCapture: options.prerenderVariantCapture,
                         pageFile: matched.route.file,
                         params: matched.params,
                         queryClient,
                         request: appRequest,
+                        requestUrl: url.pathname,
                         trackedRequest,
                         routePath: matched.route.path,
                         routeScripts: options.clientScripts,
@@ -877,9 +848,14 @@ async function renderAppRequestInternal(options) {
                         clientReferenceManifest: output.metadata.clientReferenceManifest,
                     });
                     finishRenderTimingPhase(timing, phaseStartedAt, "streamConstructionMs");
-                    const response = withOptionalActionCookie(new Response(stream, {
+                    if (streamResult instanceof Response) {
+                        emitRenderTiming(options, timing, streamResult.status);
+                        return streamResult;
+                    }
+                    const response = withOptionalActionCookie(new Response(streamResult, {
                         headers: streamShellResponseHeaders,
                     }), preparedActions.csrfToken, preparedActions.csrfTokenIsNew === true);
+                    appendNavigationVary(response.headers);
                     emitRenderTiming(options, timing, response.status);
                     return response;
                 }
@@ -894,7 +870,10 @@ async function renderAppRequestInternal(options) {
                     appDir: options.appDir,
                     assetBaseUrl: options.assetBaseUrl,
                     pageFile: matched.route.file,
+                    markerRequest: options.request,
+                    prerenderVariantCapture: options.prerenderVariantCapture,
                     props,
+                    requestUrl: url.pathname,
                     routePath: matched.route.path,
                     routeScripts: options.clientScripts,
                     serverModules: options.serverModules,
@@ -912,6 +891,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 +954,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, options.prerenderVariantCapture === true);
             phaseStartedAt = renderTimingPhaseStartedAt(timing);
             let html = await runWithQueryClient(queryClient, () => applyLayouts({
                 appDir: options.appDir,
@@ -1032,7 +1007,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 +1017,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)
@@ -1136,7 +1113,10 @@ async function renderAppRequestInternal(options) {
             // after draining the body.
             if (options.renderSignals !== undefined) {
                 const tracked = trackedRequest;
-                options.renderSignals.headerDependent = () => sourceUsesRequestInput || invalidConfiguredHsts || (tracked?.requestDependent() ?? true);
+                options.renderSignals.headerDependent = () => sourceUsesRequestInput ||
+                    invalidConfiguredHsts ||
+                    (tracked?.requestDependent() ?? true);
+                options.renderSignals.strictTransportSecurity = () => renderedStrictTransportSecurity;
             }
         }
     })).value;
@@ -1274,6 +1254,30 @@ function routePrefetchManifestScript(routeScripts, assetBaseUrl) {
 function isNavigationRequest(request) {
     return request.headers.get("x-mreact-navigation") === "1";
 }
+function withServerOnlyRouteMarkers(html, routePath, request, prerenderVariantCapture) {
+    const marker = serverOnlyRouteMarkerParts(routePath, request, prerenderVariantCapture);
+    return marker === undefined ? html : `${marker.prefix}${html}${marker.suffix}`;
+}
+function serverOnlyRouteMarkerParts(routePath, request, prerenderVariantCapture) {
+    if (prerenderVariantCapture) {
+        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");
 }
@@ -1387,15 +1391,7 @@ async function renderSpecialRoute(options) {
         }
     }
     const props = {
-        data: undefined,
-        debug: errorDebugContext(options.error, options.routePath),
-        error: normalizeErrorForProps(options.error),
-        params: {},
-        queryClient: createQueryClient(),
-        request: options.request,
-        requestId: requestIdForErrorContext(options.request),
-        routeId: routeIdForPath(options.routePath ?? new URL(options.request.url).pathname),
-        traceId: traceContextFromRequest(options.request)?.traceId,
+        ...errorBoundaryProps(options.error, options.request, options.routePath),
     };
     const pageHtml = await renderServerFileToHtml(options.routeFile, props, options.serverModules, options.serverModuleCacheVersion, options.serverSourceFiles, options.define, options.vitePlugins);
     const pageHtmlForLayout = options.navigation?.clientRoute === true
@@ -1429,6 +1425,19 @@ async function renderSpecialRoute(options) {
         status: options.status,
     });
 }
+function errorBoundaryProps(error, request, routePath) {
+    return {
+        data: undefined,
+        debug: errorDebugContext(error, routePath),
+        error: normalizeErrorForProps(error),
+        params: {},
+        queryClient: createQueryClient(),
+        request,
+        requestId: requestIdForErrorContext(request),
+        routeId: routeIdForPath(routePath ?? new URL(request.url).pathname),
+        traceId: traceContextFromRequest(request)?.traceId,
+    };
+}
 async function renderServerFileToHtml(file, props, serverModules, serverModuleCacheVersion, serverSourceFiles, define, vitePlugins) {
     const code = await readServerSourceFile(file, serverModuleCacheVersion, serverSourceFiles);
     const output = transformServerModule({
@@ -2184,11 +2193,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, options.prerenderVariantCapture === true);
         sink.append("<!DOCTYPE html>");
         sink.append(clientNavigationHeadTags({
             assetBaseUrl: options.assetBaseUrl,
@@ -2317,10 +2326,17 @@ 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, options.prerenderVariantCapture === true);
+    const dataSettlement = options.dataSettlement();
+    if (dataSettlement.status === "rejected") {
+        throw dataSettlement.error;
+    }
+    if (dataSettlement.status === "fulfilled" && dataSettlement.value instanceof Response) {
+        return dataSettlement.value;
+    }
     return renderToReadableStream((sink) => {
         sink.append("<!DOCTYPE html>");
         sink.append(clientNavigationHeadTags({
@@ -2332,13 +2348,31 @@ async function runServerStreamModuleWithLoading(code, options) {
             sink.append(shell.prefix);
         }
         sink.append(marker?.prefix ?? "");
-        renderVisibleOutOfOrderBoundary(sink, "mreact-route", options.data, async (boundarySink, data) => {
+        renderOutOfOrderBoundary(sink, "mreact-route", options.data, async (boundarySink, data) => {
             await appendServerStreamModule(code, boundarySink, withTrackedRequest({
                 data,
                 params: options.params,
                 queryClient: options.queryClient,
             }, options.request, options.trackedRequest), options.pageFile, options.serverModules, options.serverModuleCacheVersion, options.define, options.vitePlugins, options.importPolicy);
         }, {
+            async catch(boundarySink, error) {
+                try {
+                    options.onRenderError?.(error);
+                }
+                catch {
+                    // Error reporting is best-effort and must not truncate a response that already flushed.
+                }
+                if (options.errorFile === undefined) {
+                    boundarySink.append("Internal Server Error");
+                    return;
+                }
+                try {
+                    boundarySink.append(await renderServerFileToHtml(options.errorFile, errorBoundaryProps(error, options.request, options.routePath), options.serverModules, options.serverModuleCacheVersion, options.serverSourceFiles, options.define, options.vitePlugins));
+                }
+                catch {
+                    boundarySink.append("Internal Server Error");
+                }
+            },
             placeholder(boundarySink) {
                 boundarySink.append(loadingHtml);
             },
@@ -2351,35 +2385,6 @@ async function runServerStreamModuleWithLoading(code, options) {
         renderOutOfOrderReorderScript(sink);
     });
 }
-function renderVisibleOutOfOrderBoundary(sink, id, value, render, options = {}) {
-    const placeholderSink = createStringSink();
-    void options.placeholder?.(placeholderSink);
-    const placeholderTag = normalizeVisibleOutOfOrderPlaceholderTag(options.placeholderTag);
-    sink.append(`<${placeholderTag} data-mreact-oob-placeholder="${escapeHtmlAttribute(id)}">${placeholderSink.toString()}</${placeholderTag}>`);
-    const task = renderVisibleOutOfOrderFragment(sink, id, value, render, options);
-    if (sink.defer === undefined) {
-        void task;
-        return;
-    }
-    sink.defer(task);
-}
-function normalizeVisibleOutOfOrderPlaceholderTag(tag) {
-    if (typeof tag !== "string") {
-        return "span";
-    }
-    const normalized = tag.trim().toLowerCase();
-    return /^[a-z][a-z0-9-]*$/.test(normalized) ? normalized : "span";
-}
-async function renderVisibleOutOfOrderFragment(sink, id, value, render, options) {
-    const fragmentSink = createStringSink();
-    await renderAsyncBoundary(fragmentSink, value, render, options.catch === undefined ? {} : { catch: options.catch });
-    await fragmentSink.drain();
-    sink.append(renderVisibleOutOfOrderFragmentHtml(id, fragmentSink.toString()));
-}
-function renderVisibleOutOfOrderFragmentHtml(id, html) {
-    const escapedId = escapeHtmlAttribute(id);
-    return `<template data-mreact-oob-fragment="${escapedId}">${html}</template><mreact-oob-complete hidden data-mreact-oob-complete="${escapedId}"></mreact-oob-complete>`;
-}
 async function appendServerStreamModule(code, sink, props, sourcefile, serverModules, serverModuleCacheVersion, define, vitePlugins, importPolicy) {
     const module = await loadServerStreamModule(code, sourcefile, serverModules, serverModuleCacheVersion, define, vitePlugins, importPolicy);
     const component = selectStreamComponent(module);
@@ -3089,15 +3094,16 @@ async function loadComposedRouteMetadata(options) {
     if (cacheKey !== undefined) {
         const cached = readRouterRuntimeCacheEntry(composedRouteMetadataCache, cacheKey, composedRouteMetadataCacheCounters);
         if (cached !== undefined) {
-            return cached;
+            const entry = await cached;
+            return applyFileConventionMetadataTemplate(entry.metadata, entry.template, options.context.params);
         }
     }
     try {
         const loaded = await loadComposedRouteMetadataUncached(options);
         if (cacheKey !== undefined && !loaded.dynamic) {
-            setBoundedCacheEntry(composedRouteMetadataCache, cacheKey, Promise.resolve(loaded.metadata), maxComposedRouteMetadataCacheEntries, composedRouteMetadataCacheCounters);
+            setBoundedCacheEntry(composedRouteMetadataCache, cacheKey, Promise.resolve({ metadata: loaded.metadata, template: loaded.template }), maxComposedRouteMetadataCacheEntries, composedRouteMetadataCacheCounters);
         }
-        return loaded.metadata;
+        return applyFileConventionMetadataTemplate(loaded.metadata, loaded.template, options.context.params);
     }
     catch (error) {
         if (cacheKey !== undefined) {
@@ -3163,7 +3169,8 @@ async function loadComposedRouteMetadataUncached(options) {
     }
     return {
         dynamic,
-        metadata: applyFileConventionMetadata(mergeRouteMetadata(metadata), options.routes, options.filename, options.context.params),
+        metadata: mergeRouteMetadata(metadata),
+        template: fileConventionMetadataTemplate(options.routes, options.filename),
     };
 }
 function hasMetadataExport(code) {