@reckona/mreact-router 0.0.115 → 0.0.116

package/dist/build.js

@@ -171,7 +171,7 @@ export async function buildApp(options) {
         ...route,
         file: relative(project.projectRoot, route.file),
     }));
-    const [serverModuleArtifacts, clientRoutes] = await Promise.all([
+    const [serverModuleArtifacts, clientBundle] = await Promise.all([
         timingSink === undefined
             ? writeServerModuleArtifactFiles(serverDir, serverModules, generatedImportPolicy.runtimePackages)
             : timeBuildPhase(timingSink, "serverModuleArtifacts", () => writeServerModuleArtifactFiles(serverDir, serverModules, generatedImportPolicy.runtimePackages)),
@@ -203,6 +203,7 @@ export async function buildApp(options) {
                 vitePlugins,
             })),
     ]);
+    const clientRoutes = clientBundle.routes;
     const navigationRuntimeScript = clientRoutes.some((route) => route.navigation === true && !route.client)
         ? timingSink === undefined
             ? await writeNavigationRuntimeBundle(clientDir, project.clientConsolePureFunctions)
@@ -213,6 +214,10 @@ export async function buildApp(options) {
         : clientRoutes.map((route) => route.navigation === true && !route.client
             ? { ...route, navigationScript: navigationRuntimeScript }
             : route);
+    const clientManifestAssets = Array.from(new Set([
+        ...clientBundle.assets,
+        ...(navigationRuntimeScript === undefined ? [] : [navigationRuntimeScript]),
+    ])).sort();
     const prerenderedRoutes = timingSink === undefined
         ? await prerenderStaticRoutes({
             appDir: project.routesDir,
@@ -290,6 +295,7 @@ export async function buildApp(options) {
             : { serverModuleRenderFiles: serverModuleArtifacts.renderFiles }),
     };
     const clientManifest = {
+        ...(clientManifestAssets.length === 0 ? {} : { assets: clientManifestAssets }),
         ...(publicAssets.length === 0 ? {} : { publicAssets }),
         routes: clientManifestRoutes,
     };
@@ -1993,7 +1999,7 @@ async function renderCloudflareStringRoute(props) {
   for (const shell of layoutShells) {
     html += shell.prefix;
   }
-  html += String(await pageComponent(props) ?? "");
+  html += withCloudflareHydrationMarkers(props, String(await pageComponent(props) ?? ""));
   for (const shell of [...layoutShells].reverse()) {
     html += shell.suffix;
   }
@@ -2130,7 +2136,7 @@ async function renderCloudflareStringRoute(props) {
   for (const shell of layoutShells) {
     html += shell.prefix;
   }
-  html += String(await pageComponent(props) ?? "");
+  html += withCloudflareHydrationMarkers(props, String(await pageComponent(props) ?? ""));
   for (const shell of [...layoutShells].reverse()) {
     html += shell.suffix;
   }
@@ -2222,7 +2228,10 @@ function renderCloudflareStreamRoute(props) {
       const shell = layoutShells[index];
       $sink.append(index === 0 ? injectCloudflareHead(shell.prefix, metadata, routeHeadTags) : shell.prefix);
     }
+    const hydrationMarker = cloudflareHydrationMarkerParts(props);
+    $sink.append(hydrationMarker.prefix);
     await pageComponent($sink, props);
+    $sink.append(hydrationMarker.suffix);
     renderOutOfOrderReorderScript($sink);
     for (const shell of [...layoutShells].reverse()) {
       $sink.append(shell.suffix);
@@ -2343,6 +2352,54 @@ function readSlotName(attributes) {
   return match?.[1] ?? match?.[2];
 }
 
+function withCloudflareHydrationMarkers(props, html) {
+  const marker = cloudflareHydrationMarkerParts(props);
+  return marker.prefix === "" && marker.suffix === "" ? html : \`\${marker.prefix}\${html}\${marker.suffix}\`;
+}
+
+function cloudflareHydrationMarkerParts(props) {
+  const route = props.clientManifest.routes.find((route) => route.path === props.route.path && route.client === true);
+  if (route?.script === undefined) {
+    return { prefix: "", suffix: "" };
+  }
+  const routeId = route.routeId ?? cloudflareRouteIdForPath(props.route.path);
+  const escapedRouteId = escapeHtmlAttribute(routeId);
+  const propsJson = escapeScriptJson(JSON.stringify({
+    params: props.params,
+    request: { url: props.request.url },
+    data: props.data,
+  }));
+  const clientReferencesJson = route.clientReferenceManifest === undefined || route.clientReferenceManifest.length === 0
+    ? undefined
+    : escapeScriptJson(JSON.stringify(route.clientReferenceManifest));
+  return {
+    prefix: \`<div data-mreact-route-id="\${escapedRouteId}">\`,
+    suffix: [
+      "</div>",
+      \`<script type="application/json" id="mreact-props-\${escapedRouteId}">\${propsJson}</script>\`,
+      clientReferencesJson === undefined
+        ? undefined
+        : \`<script type="application/json" id="mreact-client-references-\${escapedRouteId}">\${clientReferencesJson}</script>\`,
+      \`<script type="module" src="/_mreact/client/\${escapeHtmlAttribute(route.script)}"></script>\`,
+    ].filter((part) => part !== undefined).join(""),
+  };
+}
+
+function escapeScriptJson(json) {
+  return json.replaceAll("<", "\\\\u003c");
+}
+
+function cloudflareRouteIdForPath(path) {
+  if (path === "/") {
+    return "index";
+  }
+  return path
+    .slice(1)
+    .replaceAll("/", "_")
+    .replaceAll(":", "_")
+    .replace(/[^A-Za-z0-9_$-]/g, "_");
+}
+
 async function resolveRouteMetadata(modules, props) {
   const metadata = [];
   const context = {
@@ -3022,7 +3079,10 @@ async function writeClientRouteBundles(options) {
     }));
     const clientEntries = entries.filter((entry) => "build" in entry);
     if (clientEntries.length === 0) {
-        return entries.flatMap((entry) => ("manifest" in entry ? [entry.manifest] : []));
+        return {
+            assets: [],
+            routes: entries.flatMap((entry) => ("manifest" in entry ? [entry.manifest] : [])),
+        };
     }
     let output;
     try {
@@ -3069,7 +3129,17 @@ async function writeClientRouteBundles(options) {
         await mkdir(dirname(join(options.clientDir, asset.fileName)), { recursive: true });
         await writeFile(join(options.clientDir, asset.fileName), source);
     }
-    return entries.map((entry) => {
+    const generatedAssets = new Set();
+    for (const chunk of output.chunks) {
+        generatedAssets.add(chunk.fileName);
+        if (options.sourceMaps === "linked" && chunk.map !== undefined) {
+            generatedAssets.add(`${chunk.fileName}.map`);
+        }
+    }
+    for (const asset of output.assets ?? []) {
+        generatedAssets.add(asset.fileName);
+    }
+    const routes = entries.map((entry) => {
         if (!("build" in entry)) {
             return entry.manifest;
         }
@@ -3089,6 +3159,10 @@ async function writeClientRouteBundles(options) {
             path: entry.route.path,
             kind: entry.route.kind,
             client: true,
+            ...(entry.build.clientReferenceManifest === undefined ||
+                entry.build.clientReferenceManifest.length === 0
+                ? {}
+                : { clientReferenceManifest: entry.build.clientReferenceManifest }),
             ...(entry.css.length === 0 ? {} : { css: entry.css }),
             ...(routeOutput.chunk.imports.length === 0 ? {} : { imports: routeOutput.chunk.imports }),
             ...(entry.navigation ? { navigation: entry.navigation } : {}),
@@ -3098,6 +3172,10 @@ async function writeClientRouteBundles(options) {
             devScript: clientScriptForPath(entry.route.path),
         };
     });
+    return {
+        assets: Array.from(generatedAssets).sort(),
+        routes,
+    };
 }
 async function writeRouteCssAssetBatches(options) {
     const cssInputs = await mapWithBuildConcurrency(options.pageRoutes, async (route) => {