@reckona/mreact-router 0.0.208 → 0.0.210

package/dist/build.js

@@ -5,10 +5,11 @@ import { builtinModules } from "node:module";
 import { availableParallelism } from "node:os";
 import { dirname, join, relative, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
+import { gzipSync } from "node:zlib";
 import { collectStaticImportReferences, collectTopLevelValueExportNames, formatDiagnostic, hasModuleDirective, transform, } from "@reckona/mreact-compiler";
 import { transformCompilerModuleContext } from "@reckona/mreact-compiler/internal";
 import { compilerModuleContextForSource, collectClientRouteReferences, createClientRouteInferenceCache, detectAnchorElementUsage, detectClientNavigationOverride, formatClientRouteInferenceDiagnostic, inferClientRouteModule, navigationRuntimeLinkDisabledDiagnostic, resolveNavigationRuntime, } from "./client-route-inference.js";
-import { createBoundaryReport } from "./boundaries.js";
+import { createBoundaryReport, validateBoundaryExecutionContracts, } from "./boundaries.js";
 import { buildClientRouteBatchOutput, buildNavigationRuntimeBundle, clientScriptForPath, routeIdForPath, routeMarkerParts, } from "./navigation-runtime.js";
 import { COMPAT_VENDOR_PLACEHOLDER_PREFIX, bundleAppRouterSourceModule, fileImportMetaUrlPlugin, importAppRouterSourceModule, resolveCompatVendorEntryFiles, sourceReferencesCompatVendorSpecifier, } from "./module-runner.js";
 import { dehydrateOptionsFromModule } from "./dehydrate-policy.js";
@@ -127,7 +128,7 @@ async function buildAppWithResolvedProject(options, project) {
             routes,
             vitePlugins,
         }));
-    options.onBoundaryReport?.(sourceAnalysis.boundaryReport);
+    validateBoundaryExecutionContracts(sourceAnalysis.boundaryReport, project.executionContracts);
     if (shouldTrackBuildPhases === false) {
         await validateProductionRoutes({
             clientRouteInferenceCache: serverClientRouteInferenceCache,
@@ -158,6 +159,15 @@ async function buildAppWithResolvedProject(options, project) {
             fingerprint: incrementalBuildFingerprint,
             outDir: options.outDir,
         }))) {
+        if (options.onBoundaryReport !== undefined) {
+            const clientManifest = await readJsonBuildOutput(join(options.outDir, "client", "manifest.json"));
+            options.onBoundaryReport(await boundaryReportWithArtifactCosts({
+                boundaryCost: options.boundaryCost,
+                clientDir,
+                manifest: clientManifest,
+                report: sourceAnalysis.boundaryReport,
+            }));
+        }
         return { routes };
     }
     if (shouldTrackBuildPhases === false) {
@@ -404,6 +414,7 @@ async function buildAppWithResolvedProject(options, project) {
     };
     const clientManifest = {
         ...(clientManifestAssets.length === 0 ? {} : { assets: clientManifestAssets }),
+        ...(clientBundle.chunks.length === 0 ? {} : { chunks: clientBundle.chunks }),
         ...(publicAssets.length === 0 ? {} : { publicAssets }),
         routes: clientManifestRoutes,
         ...(clientBundle.styles.length === 0 ? {} : { styles: clientBundle.styles }),
@@ -467,8 +478,216 @@ async function buildAppWithResolvedProject(options, project) {
     if (incrementalBuildFingerprint !== undefined) {
         await writeIncrementalBuildCacheManifest(options.outDir, incrementalBuildFingerprint);
     }
+    if (options.onBoundaryReport !== undefined) {
+        options.onBoundaryReport(await boundaryReportWithArtifactCosts({
+            boundaryCost: options.boundaryCost,
+            clientDir,
+            manifest: clientManifest,
+            report: sourceAnalysis.boundaryReport,
+        }));
+    }
     return { routes };
 }
+async function boundaryReportWithArtifactCosts(options) {
+    if (options.manifest === undefined) {
+        return {
+            ...options.report,
+            routes: options.report.routes.map((route) => ({
+                ...route,
+                cost: {
+                    reason: "Production client manifest is unavailable.",
+                    status: "unavailable",
+                },
+            })),
+        };
+    }
+    const manifest = options.manifest;
+    const chunks = new Map((manifest.chunks ?? []).map((chunk) => [chunk.file, chunk]));
+    const routeClosures = options.report.routes.map((route) => {
+        const manifestRoute = manifest.routes.find((candidate) => candidate.path === route.path);
+        if (manifestRoute === undefined) {
+            return { initial: undefined, navigation: undefined, route };
+        }
+        const initial = clientArtifactStaticClosure(manifestRoute, chunks);
+        const navigation = new Set(initial);
+        addFetchedDynamicImportClosures({
+            chunks,
+            fetchedDynamicImports: options.boundaryCost?.fetchedDynamicImports?.[route.path] ?? [],
+            navigation,
+            routeDynamicImports: manifestRoute.dynamicImports ?? [],
+        });
+        return { initial, navigation, route };
+    });
+    const availableClosures = routeClosures.flatMap((entry) => entry.initial === undefined ? [] : [entry.initial]);
+    const sharedPaths = intersectionOfPathSets(availableClosures);
+    const allPaths = new Set();
+    for (const entry of routeClosures) {
+        for (const path of entry.navigation ?? []) {
+            allPaths.add(path);
+        }
+    }
+    const measurements = await measureClientArtifactPaths(options.clientDir, allPaths);
+    return {
+        ...options.report,
+        routes: routeClosures.map((entry) => {
+            if (entry.initial === undefined || entry.navigation === undefined) {
+                return {
+                    ...entry.route,
+                    cost: {
+                        reason: "No client route artifact was generated for this route.",
+                        status: "unavailable",
+                    },
+                };
+            }
+            const routePaths = new Set(entry.navigation);
+            const unavailable = [...routePaths]
+                .filter((path) => measurements.get(path)?.available !== true)
+                .sort();
+            if (unavailable.length > 0) {
+                return {
+                    ...entry.route,
+                    cost: {
+                        reason: `Missing client artifacts: ${unavailable.join(", ")}.`,
+                        status: "unavailable",
+                    },
+                };
+            }
+            const initial = byteCostForPaths(entry.initial, measurements);
+            const navigation = byteCostForPaths(new Set([...entry.navigation].filter((path) => !sharedPaths.has(path))), measurements);
+            const shared = byteCostForPaths(sharedPaths, measurements);
+            return {
+                ...entry.route,
+                cost: {
+                    baseline: {
+                        initialGzipDeltaBytes: initial.gzipEstimateBytes - shared.gzipEstimateBytes,
+                        navigationGzipDeltaBytes: navigation.gzipEstimateBytes,
+                    },
+                    initial,
+                    navigation,
+                    status: "available",
+                },
+            };
+        }),
+    };
+}
+function clientArtifactStaticClosure(route, chunks) {
+    const paths = new Set();
+    for (const path of route.css ?? []) {
+        paths.add(path);
+    }
+    if (route.navigation === true && route.navigationScript !== undefined) {
+        paths.add(route.navigationScript);
+    }
+    for (const path of route.imports ?? []) {
+        addClientArtifactStaticClosure(paths, path, chunks);
+    }
+    if (route.script !== undefined) {
+        addClientArtifactStaticClosure(paths, route.script, chunks);
+    }
+    return paths;
+}
+function addFetchedDynamicImportClosures(options) {
+    const fetchedDynamicImports = new Set(options.fetchedDynamicImports);
+    const acceptedDynamicImports = new Set();
+    const reachableDynamicImports = new Set(options.routeDynamicImports);
+    for (;;) {
+        for (const dynamicImport of dynamicImportsReachableFromStaticClosure(options.navigation, options.chunks)) {
+            reachableDynamicImports.add(dynamicImport);
+        }
+        let added = false;
+        for (const dynamicImport of fetchedDynamicImports) {
+            if (acceptedDynamicImports.has(dynamicImport) ||
+                !reachableDynamicImports.has(dynamicImport) ||
+                !options.chunks.has(dynamicImport)) {
+                continue;
+            }
+            acceptedDynamicImports.add(dynamicImport);
+            addClientArtifactStaticClosure(options.navigation, dynamicImport, options.chunks);
+            added = true;
+        }
+        if (!added) {
+            return;
+        }
+    }
+}
+function dynamicImportsReachableFromStaticClosure(paths, chunks) {
+    const pending = [...paths];
+    const visited = new Set();
+    const dynamicImports = new Set();
+    while (pending.length > 0) {
+        const path = pending.pop();
+        if (path === undefined || visited.has(path)) {
+            continue;
+        }
+        visited.add(path);
+        const chunk = chunks.get(path);
+        if (chunk === undefined) {
+            continue;
+        }
+        for (const imported of chunk.imports ?? []) {
+            pending.push(imported);
+        }
+        for (const dynamicImport of chunk.dynamicImports ?? []) {
+            dynamicImports.add(dynamicImport);
+        }
+    }
+    return dynamicImports;
+}
+function addClientArtifactStaticClosure(paths, path, chunks) {
+    if (path === "" || paths.has(path)) {
+        return;
+    }
+    paths.add(path);
+    for (const imported of chunks.get(path)?.imports ?? []) {
+        addClientArtifactStaticClosure(paths, imported, chunks);
+    }
+}
+function intersectionOfPathSets(sets) {
+    const [first, ...rest] = sets;
+    if (first === undefined || sets.length < 2) {
+        return new Set();
+    }
+    return new Set([...first].filter((path) => rest.every((set) => set.has(path))));
+}
+async function measureClientArtifactPaths(clientDir, paths) {
+    const measurements = await Promise.all([...paths].map(async (path) => {
+        const absolutePath = safeClientArtifactPath(clientDir, path);
+        if (absolutePath === undefined) {
+            return [path, { available: false }];
+        }
+        try {
+            const content = await readFile(absolutePath);
+            return [
+                path,
+                {
+                    available: true,
+                    gzipEstimateBytes: gzipSync(content).byteLength,
+                    rawBytes: content.byteLength,
+                },
+            ];
+        }
+        catch {
+            return [path, { available: false }];
+        }
+    }));
+    return new Map(measurements);
+}
+function safeClientArtifactPath(clientDir, path) {
+    const absolutePath = resolve(clientDir, path);
+    const relativePath = relative(resolve(clientDir), absolutePath);
+    return relativePath === "" || relativePath === ".." || relativePath.startsWith(`..${sep}`)
+        ? undefined
+        : absolutePath;
+}
+function byteCostForPaths(paths, measurements) {
+    return [...paths].reduce((cost, path) => {
+        const measurement = measurements.get(path);
+        return {
+            gzipEstimateBytes: cost.gzipEstimateBytes + (measurement?.gzipEstimateBytes ?? 0),
+            rawBytes: cost.rawBytes + (measurement?.rawBytes ?? 0),
+        };
+    }, { gzipEstimateBytes: 0, rawBytes: 0 });
+}
 const incrementalBuildCacheFilename = "build-cache.json";
 const incrementalBuildCacheVersion = 2;
 async function createIncrementalBuildCacheFingerprint(options) {
@@ -584,6 +803,11 @@ function collectClientManifestOutputFiles(manifest) {
         files.add(asset);
         files.add(`public/${asset}`);
     }
+    for (const chunk of manifest.chunks ?? []) {
+        for (const file of [chunk.file, ...(chunk.imports ?? []), ...(chunk.dynamicImports ?? [])]) {
+            files.add(file);
+        }
+    }
     for (const route of manifest.routes) {
         for (const file of [
             route.script,
@@ -591,6 +815,7 @@ function collectClientManifestOutputFiles(manifest) {
             route.navigationScript,
             ...(route.css ?? []),
             ...(route.imports ?? []),
+            ...(route.dynamicImports ?? []),
         ]) {
             if (file !== undefined) {
                 files.add(file);
@@ -855,6 +1080,7 @@ async function analyzeBuildRouteSources(options) {
                 diagnostics: analysis.diagnostics,
                 entry: analysis.route.file,
                 path: analysis.route.path,
+                source: analysis.source,
             })),
         }),
         byFile,
@@ -2605,14 +2831,14 @@ const componentGenerateMetadata = readComponentModuleExport(componentModule, "ge
 const componentMetadata = readComponentModuleExport(componentModule, "metadata");
 const componentSecurityHeadersApplied = readComponentModuleExport(componentModule, "__mreactSecurityHeadersApplied");
 
-export function App(props) {
-  return renderCloudflareRouteComponent(props);
+export function App(props, request) {
+  return renderCloudflareRouteComponent(props, request);
 }
-export default function CloudflareDefaultRouteComponent(props) {
-  return renderCloudflareRouteComponent(props);
+export default function CloudflareDefaultRouteComponent(props, request) {
+  return renderCloudflareRouteComponent(props, request);
 }
-export function CloudflareRouteComponent(props) {
-  return renderCloudflareRouteComponent(props);
+export function CloudflareRouteComponent(props, request) {
+  return renderCloudflareRouteComponent(props, request);
 }
 export const slots = componentSlots === undefined ? undefined : { ...componentSlots };
 export const generateMetadata =
@@ -2620,13 +2846,13 @@ export const generateMetadata =
 export const metadata = componentMetadata;
 export const __mreactSecurityHeadersApplied = componentSecurityHeadersApplied === true;
 
-function renderCloudflareRouteComponent(props) {
+function renderCloudflareRouteComponent(props, request) {
   const routeComponent = resolveCloudflareRouteComponent();
   if (routeComponent === undefined) {
     throw new Error("No Cloudflare component export was found for ${componentImport}.");
   }
 
-  return routeComponent(props);
+  return routeComponent(props, request);
 }
 
 function resolveCloudflareRouteComponent() {
@@ -2881,14 +3107,14 @@ ${shellModules.join("\n")}
 const pageComponent = selectComponent(pageModule, ${JSON.stringify(options.filename)});
 const shells = [${shellDefinitions.join(", ")}];
 export const slots = pageModule.slots;
-export default function CloudflareStringRouteComponent(props) {
-  return renderCloudflareStringRoute(props);
+export default function CloudflareStringRouteComponent(props, request) {
+  return renderCloudflareStringRoute(props, request);
 }
 
-async function renderCloudflareStringRoute(props) {
+async function renderCloudflareStringRoute(props, request) {
   const slotHtml = await renderRouteSlots(pageModule.slots, props);
   const layoutShells = await renderLayoutShells(shells, props, slotHtml);
-  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], props);
+  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], { ...props, request });
   let html = "<!DOCTYPE html>";
   for (const shell of layoutShells) {
     html += shell.prefix;
@@ -2899,7 +3125,7 @@ async function renderCloudflareStringRoute(props) {
   }
   html = injectCloudflareHead(html, metadata, cloudflareRouteHeadTags(props.clientManifest, props.route.path));
   return new Response(html, {
-    headers: cloudflareMetadataHeaders(metadata, props.request, {
+    headers: cloudflareMetadataHeaders(metadata, request, {
       "content-type": "text/html; charset=utf-8"
     })
   });
@@ -3021,14 +3247,14 @@ ${shellImports.join("\n")}
 const pageComponent = selectComponent(pageModule, ${JSON.stringify(options.filename)});
 const shells = [${shellDefinitions.join(", ")}];
 export const slots = pageModule.slots;
-export default function CloudflareStringRouteComponent(props) {
-  return renderCloudflareStringRoute(props);
+export default function CloudflareStringRouteComponent(props, request) {
+  return renderCloudflareStringRoute(props, request);
 }
 
-async function renderCloudflareStringRoute(props) {
+async function renderCloudflareStringRoute(props, request) {
   const slotHtml = await renderRouteSlots(pageModule.slots, props);
   const layoutShells = await renderLayoutShells(shells, props, slotHtml);
-  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], props);
+  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], { ...props, request });
   let html = "<!DOCTYPE html>";
   for (const shell of layoutShells) {
     html += shell.prefix;
@@ -3039,7 +3265,7 @@ async function renderCloudflareStringRoute(props) {
   }
   html = injectCloudflareHead(html, metadata, cloudflareRouteHeadTags(props.clientManifest, props.route.path));
   return new Response(html, {
-    headers: cloudflareMetadataHeaders(metadata, props.request, {
+    headers: cloudflareMetadataHeaders(metadata, request, {
       "content-type": "text/html; charset=utf-8"
     })
   });
@@ -3114,8 +3340,8 @@ export const slots = pageModule.slots;
 export const App = renderCloudflareStreamRoute;
 export default renderCloudflareStreamRoute;
 
-async function renderCloudflareStreamRoute(props) {
-  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], props);
+async function renderCloudflareStreamRoute(props, request) {
+  const metadata = await resolveRouteMetadata([...shells.map((shell) => shell.module), pageModule], { ...props, request });
   const body = renderToReadableStream(async ($sink) => {
     const slotHtml = await renderRouteSlots(pageModule.slots, props);
     const layoutShells = await renderLayoutShells(shells, props, slotHtml);
@@ -3138,7 +3364,7 @@ async function renderCloudflareStreamRoute(props) {
     }
   });
   return new Response(body, {
-    headers: cloudflareMetadataHeaders(metadata, props.request, {
+    headers: cloudflareMetadataHeaders(metadata, request, {
       "content-type": "text/html; charset=utf-8",
       "x-mreact-stream": "1"
     })
@@ -3267,9 +3493,15 @@ function cloudflareHydrationMarkerParts(props) {
   }
   const routeId = route.routeId ?? cloudflareRouteIdForPath(props.route.path);
   const escapedRouteId = escapeHtmlAttribute(routeId);
+  const requestUrl = new URL(props.request.url);
   const propsJson = escapeScriptJson(JSON.stringify({
     params: props.params,
-    request: { url: new URL(props.request.url).pathname },
+    request: {
+      hash: "",
+      pathname: requestUrl.pathname,
+      search: "",
+      url: requestUrl.pathname,
+    },
     data: props.data,
   }));
   const clientReferencesJson = route.clientReferenceManifest === undefined || route.clientReferenceManifest.length === 0
@@ -4549,6 +4781,7 @@ async function writeClientRouteBundles(options) {
     if (clientEntries.length === 0) {
         return {
             assets: [...routeCssAssets.assets, ...specialCssAssets.assets].sort(),
+            chunks: [],
             routes: entries.flatMap((entry) => ("manifest" in entry ? [entry.manifest] : [])),
             styles: specialCssAssets.styles,
         };
@@ -4632,6 +4865,9 @@ async function writeClientRouteBundles(options) {
                 ? {}
                 : { clientReferenceManifest: entry.build.clientReferenceManifest }),
             ...(entry.css.length === 0 ? {} : { css: entry.css }),
+            ...(routeOutput.chunk.dynamicImports.length === 0
+                ? {}
+                : { dynamicImports: routeOutput.chunk.dynamicImports }),
             ...(routeOutput.chunk.imports.length === 0 ? {} : { imports: routeOutput.chunk.imports }),
             ...(navigation ? { navigation } : {}),
             routeId,
@@ -4642,6 +4878,11 @@ async function writeClientRouteBundles(options) {
     });
     return {
         assets: Array.from(generatedAssets).sort(),
+        chunks: output.chunks.map((chunk) => ({
+            ...(chunk.dynamicImports.length === 0 ? {} : { dynamicImports: chunk.dynamicImports }),
+            file: chunk.fileName,
+            ...(chunk.imports.length === 0 ? {} : { imports: chunk.imports }),
+        })),
         routes,
         styles: specialCssAssets.styles,
     };