@reckona/mreact-router 0.0.82 → 0.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-router",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "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-compiler": "0.0.82",
-    "@reckona/mreact-query": "0.0.82",
-    "@reckona/mreact-reactive-core": "0.0.82",
-    "@reckona/mreact-compat": "0.0.82",
-    "@reckona/mreact-devtools": "0.0.82",
-    "@reckona/mreact": "0.0.82",
-    "@reckona/mreact-reactive-dom": "0.0.82",
-    "@reckona/mreact-server": "0.0.82",
-    "@reckona/mreact-shared": "0.0.82"
+    "@reckona/mreact-compat": "0.0.84",
+    "@reckona/mreact": "0.0.84",
+    "@reckona/mreact-devtools": "0.0.84",
+    "@reckona/mreact-query": "0.0.84",
+    "@reckona/mreact-reactive-core": "0.0.84",
+    "@reckona/mreact-compiler": "0.0.84",
+    "@reckona/mreact-reactive-dom": "0.0.84",
+    "@reckona/mreact-shared": "0.0.84",
+    "@reckona/mreact-server": "0.0.84"
   },
   "peerDependencies": {
     "vite": ">=8 <9"
   },
   "optionalDependencies": {
-    "@reckona/mreact-router-native": "0.0.82"
+    "@reckona/mreact-router-native": "0.0.84"
   }
 }

package/src/adapters/aws-lambda.ts

@@ -6,6 +6,10 @@ import { dirname, join } from "node:path";
 import type { AppRouterServerActionOptions } from "../actions.js";
 import type { AppRouterCache } from "../cache.js";
 import type { AppRouterImportPolicy } from "../import-policy.js";
+import {
+  normalizeBuiltAppRuntimePreloadStrategy,
+  type NormalizedBuiltAppRuntimePreloadStrategy,
+} from "../preload-policy.js";
 import {
   emitRouterLog,
   logDurationMs,
@@ -21,11 +25,10 @@ import type { RouterInstrumentation } from "../trace.js";
 export type { RouterInstrumentation } from "../trace.js";
 export type { AppRouterImportPolicy } from "../import-policy.js";
 import {
+  createBuiltRequestRuntime,
   preloadBuiltAppRuntime,
-  renderBuiltAppRequest,
   resolveRequestHost,
   warnIfImplicitHostTrust,
-  type BuiltAppRuntimePreloadStrategy,
   type AppRouterPrerenderStore,
   type RequestHostPolicy,
   type ResponseSinkStrategy,
@@ -110,9 +113,7 @@ export type AwsLambdaPreloadStrategy =
       wait?: "background" | "before-render" | "first-request" | undefined;
     };
 
-type NormalizedAwsLambdaPreloadStrategy = BuiltAppRuntimePreloadStrategy & {
-  wait: "background" | "before-render" | "first-request";
-};
+type NormalizedAwsLambdaPreloadStrategy = NormalizedBuiltAppRuntimePreloadStrategy;
 
 type AwsLambdaDefaultPreloadMode = "all" | "middleware";
 
@@ -186,22 +187,24 @@ function createAwsLambdaRequestHandlerFromRuntime(
       );
       const importPolicy = await resolveAwsLambdaImportPolicy(options);
       const renderStartedAt = phaseStartedAt(phases);
+      const builtRuntime = await createBuiltRequestRuntime({
+        immutableRuntime: true,
+        importPolicy,
+        outDir: options.outDir,
+        runtimeDir,
+      });
       const preload = awsLambdaRenderPreload(
         options,
         runtimePreloadPromise,
         defaultPreloadMode,
       );
-      const response = await renderBuiltAppRequest({
-        outDir: options.outDir,
-        importPolicy,
+      const response = await builtRuntime.render(request, {
         instrumentation: options.instrumentation,
         logger: awsLambdaRenderLogger(options),
         onResponse: options.onResponse,
         ...(preload === undefined ? {} : { preload }),
         prerenderStore: options.prerenderStore,
-        request,
         routeCache: options.routeCache,
-        runtimeDir,
         serverActions: options.serverActions,
         ...(options.sinkStrategy === undefined ? {} : { sinkStrategy: options.sinkStrategy }),
       });
@@ -416,19 +419,7 @@ function normalizeAwsLambdaPreload(
   strategy: AwsLambdaPreloadStrategy | undefined,
   defaultMode: AwsLambdaDefaultPreloadMode = "all",
 ): NormalizedAwsLambdaPreloadStrategy {
-  if (strategy === undefined) {
-    return { mode: defaultMode, wait: "background" };
-  }
-
-  if (typeof strategy === "string") {
-    return { mode: strategy, wait: "background" };
-  }
-
-  return {
-    mode: strategy.mode,
-    ...(strategy.routes === undefined ? {} : { routes: strategy.routes }),
-    wait: strategy.wait ?? "background",
-  };
+  return normalizeBuiltAppRuntimePreloadStrategy(strategy, defaultMode);
 }
 
 function createAwsLambdaStreamingRequestHandlerFromRuntime<TContext = unknown>(
@@ -462,22 +453,24 @@ function createAwsLambdaStreamingRequestHandlerFromRuntime<TContext = unknown>(
       );
       const importPolicy = await resolveAwsLambdaImportPolicy(options);
       const renderStartedAt = phaseStartedAt(phases);
+      const builtRuntime = await createBuiltRequestRuntime({
+        immutableRuntime: true,
+        importPolicy,
+        outDir: options.outDir,
+        runtimeDir,
+      });
       const preload = awsLambdaRenderPreload(
         options,
         runtimePreloadPromise,
         defaultPreloadMode,
       );
-      const response = await renderBuiltAppRequest({
-        outDir: options.outDir,
-        importPolicy,
+      const response = await builtRuntime.render(request, {
         instrumentation: options.instrumentation,
         logger: awsLambdaRenderLogger(options),
         onResponse: options.onResponse,
         ...(preload === undefined ? {} : { preload }),
         prerenderStore: options.prerenderStore,
-        request,
         routeCache: options.routeCache,
-        runtimeDir,
         serverActions: options.serverActions,
         ...(options.sinkStrategy === undefined ? {} : { sinkStrategy: options.sinkStrategy }),
       });

package/src/build.ts

@@ -13,9 +13,6 @@ import {
 import { transformCompilerModuleContext } from "@reckona/mreact-compiler/internal";
 import type { ServerOutputMode } from "@reckona/mreact-compiler";
 import {
-  buildClientRouteBatchOutput,
-  buildNavigationRuntimeBundle,
-  clientScriptForPath,
   compilerModuleContextForSource,
   collectClientRouteReferences,
   createClientRouteInferenceCache,
@@ -23,11 +20,16 @@ import {
   detectNavigationRuntimeHint,
   formatClientRouteInferenceDiagnostic,
   inferClientRouteModule,
-  routeIdForPath,
-  type BuildClientRouteOutputOptions,
   type ClientRouteManifestEntry,
   type ClientRouteInferenceCache,
-} from "./client.js";
+} from "./client-route-inference.js";
+import {
+  buildClientRouteBatchOutput,
+  buildNavigationRuntimeBundle,
+  clientScriptForPath,
+  routeIdForPath,
+  type BuildClientRouteOutputOptions,
+} from "./navigation-runtime.js";
 import { bundleAppRouterSourceModule, importAppRouterSourceModule } from "./module-runner.js";
 import { scanAppRoutes } from "./routes.js";
 import type { AppRoute } from "./routes.js";
@@ -3099,6 +3101,7 @@ const here = dirname(fileURLToPath(import.meta.url));
 export const handler = await createPreloadedAwsLambdaRequestHandler({
   importPolicy: "generated",
   outDir: resolve(here, ${JSON.stringify(outDirRelativeToHandler)}),
+  preload: { mode: "all" },
   timings: process.env.MREACT_ROUTER_TIMINGS === "1",
 });
 `;

package/src/client-route-inference.ts

@@ -0,0 +1,18 @@
+export {
+  collectClientRouteReferences,
+  compilerModuleContextForSource,
+  createClientRouteInferenceCache,
+  detectClientNavigationHint,
+  detectNavigationRuntimeHint,
+  formatClientRouteInferenceDiagnostic,
+  inferClientRouteModule,
+  isClientRouteModule,
+  isClientRouteSource,
+  routeToClientManifestEntry,
+  type ClientReferenceImport,
+  type ClientRouteInferenceCache,
+  type ClientRouteInferenceDiagnostic,
+  type ClientRouteInferenceResult,
+  type ClientRouteManifestEntry,
+  type ClientRouteReferenceResult,
+} from "./client.js";

package/src/client.ts

@@ -10,10 +10,10 @@ import {
   type BoundaryGraphResult,
   type ClientRouteModuleAnalysis,
   type ClientRouteStaticImportReference,
-  type ClientReferenceMetadata,
   type StaticImportReference,
   type TopLevelExportRenderInfo,
 } from "@reckona/mreact-compiler";
+import type { ClientReferenceMetadata } from "@reckona/mreact-shared/compiler-contract";
 import {
   collectClientRouteModuleAnalysisFromContext,
   createCompilerModuleContext,
@@ -31,6 +31,11 @@ import {
 } from "./bundle-pipeline.js";
 import type { AppRoute } from "./routes.js";
 import { existingRouteShellCandidates } from "./route-shells.js";
+import {
+  routeDataScriptIds,
+  routeDataScriptSelector,
+  routeHydrationContract,
+} from "./route-hydration-contract.js";
 import { stripRouteClientSource } from "./route-source.js";
 import { hasJsxSyntax } from "./source-jsx.js";
 import { sourceModuleCandidates } from "./source-modules.js";
@@ -1375,7 +1380,7 @@ export function withHydrationMarkers(options: {
 export function withRouteMarkers(options: { html: string; routePath: string }): string {
   const routeId = routeIdForPath(options.routePath);
 
-  return `<div data-mreact-route-id="${escapeHtmlAttribute(routeId)}">${options.html}</div>`;
+  return `<div ${routeHydrationContract.routeMarkerAttribute}="${escapeHtmlAttribute(routeId)}">${options.html}</div>`;
 }
 
 export function hydrationMarkerParts(options: {
@@ -1387,6 +1392,9 @@ export function hydrationMarkerParts(options: {
 }): { prefix: string; suffix: string } {
   const routeId = routeIdForPath(options.routePath);
   const escapedRouteId = escapeHtmlAttribute(routeId);
+  const [propsScriptId, clientReferencesScriptId] = routeDataScriptIds(routeId).map((id) =>
+    escapeHtmlAttribute(id),
+  );
   const propsJson = escapeScriptJson(JSON.stringify(options.props));
   const script = options.script ?? clientScriptForPath(options.routePath);
   const scriptSrc = assetPath(script, options.assetBaseUrl ?? "/_mreact/client/");
@@ -1396,13 +1404,13 @@ export function hydrationMarkerParts(options: {
       : escapeScriptJson(JSON.stringify(options.clientReferenceManifest));
 
   return {
-    prefix: `<div data-mreact-route-id="${escapedRouteId}">`,
+    prefix: `<div ${routeHydrationContract.routeMarkerAttribute}="${escapedRouteId}">`,
     suffix: [
       "</div>",
-      `<script type="application/json" id="mreact-props-${escapedRouteId}">${propsJson}</script>`,
+      `<script type="application/json" id="${propsScriptId}">${propsJson}</script>`,
       clientReferencesJson === undefined
         ? undefined
-        : `<script type="application/json" id="mreact-client-references-${escapedRouteId}">${clientReferencesJson}</script>`,
+        : `<script type="application/json" id="${clientReferencesScriptId}">${clientReferencesJson}</script>`,
       `<script type="module" src="${escapeHtmlAttribute(scriptSrc)}"></script>`,
     ]
       .filter((part): part is string => part !== undefined)
@@ -1758,7 +1766,7 @@ function __mreactResolveRouteNode(value) {
   const boundaryOnlyHydrationBlock = routeRequiresFullHydration
     ? ""
     : `${routeCellHydrationIndent}if (!__mreactHasNonSerializableClientBoundaries(__mreactMarker) && __mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents)) {
-${routeCellHydrationIndent}  __mreactMarker.setAttribute("data-mreact-hydrated", "true");
+${routeCellHydrationIndent}  __mreactMarker.setAttribute(${JSON.stringify(routeHydrationContract.hydratedAttribute)}, "true");
 ${routeCellHydrationIndent}  return;
 ${routeCellHydrationIndent}}
 `;
@@ -1769,8 +1777,12 @@ ${routeCellHydrationIndent}}
   const entry = `${routeCellEffectImport}${routeCleanupScopeImport}${emitCompatClientReferenceImportBlock(compatClientReferenceNames)}${clientReferenceImportBlock}${routeHydrationCode}
 
 const __mreactRouteId = ${JSON.stringify(routeId)};
-const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
-const __mreactGlobal = globalThis;
+  const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
+  const __mreactRouteMarkerAttribute = ${JSON.stringify(routeHydrationContract.routeMarkerAttribute)};
+  const __mreactRouteHydratedAttribute = ${JSON.stringify(routeHydrationContract.hydratedAttribute)};
+  const __mreactPropsScriptPrefix = ${JSON.stringify(routeHydrationContract.propsScriptPrefix)};
+  const __mreactClientReferencesScriptPrefix = ${JSON.stringify(routeHydrationContract.clientReferencesScriptPrefix)};
+  const __mreactGlobal = globalThis;
 ${navigationStateDeclaration}
 ${routeCellStateDeclaration}
 ${routeCleanupStateDeclaration}
@@ -1780,9 +1792,9 @@ ${routeNodeResolver}
 
 export function __mreactHydrateRoute() {
   __mreactApplyOutOfOrderFragments(document);
-  const __mreactMarker = document.querySelector(\`[data-mreact-route-id="\${__mreactRouteId}"]\`);
-  const __mreactPropsElement = document.getElementById(\`mreact-props-\${__mreactRouteId}\`);
-  const __mreactClientReferencesElement = document.getElementById(\`mreact-client-references-\${__mreactRouteId}\`);
+  const __mreactMarker = document.querySelector(\`[\${__mreactRouteMarkerAttribute}="\${__mreactRouteId}"]\`);
+  const __mreactPropsElement = document.getElementById(\`\${__mreactPropsScriptPrefix}\${__mreactRouteId}\`);
+  const __mreactClientReferencesElement = document.getElementById(\`\${__mreactClientReferencesScriptPrefix}\${__mreactRouteId}\`);
   const __mreactProps = __mreactPropsElement?.textContent === undefined
     ? {}
     : JSON.parse(__mreactPropsElement.textContent);
@@ -1799,7 +1811,7 @@ export function __mreactHydrateRoute() {
 ${routeCellHydrationStart}${routeCleanupHydrationStart}${boundaryOnlyHydrationBlock}${routeComponentGuard}${routeCellHydrationIndent}const __mreactNode = ${routeNodeExpression};
 ${routeCellHydrationIndent}__mreactResumeRoute(__mreactMarker, __mreactNode);
 ${routeCellHydrationIndent}__mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents);
-${routeCellHydrationIndent}__mreactMarker.setAttribute("data-mreact-hydrated", "true");
+${routeCellHydrationIndent}__mreactMarker.setAttribute(__mreactRouteHydratedAttribute, "true");
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
 ${routeCleanupFunction}
@@ -2186,15 +2198,15 @@ function __mreactApplyNavigationHtml(html, url) {
   const template = document.createElement("template");
   template.innerHTML = html.replace(/^\\s*<!doctype html>/i, "");
   __mreactApplyOutOfOrderFragments(template.content);
-  const nextMarker = template.content.querySelector("[data-mreact-route-id]");
-  const currentMarker = document.querySelector("[data-mreact-route-id]");
+  const nextMarker = template.content.querySelector("[${routeHydrationContract.routeMarkerAttribute}]");
+  const currentMarker = document.querySelector("[${routeHydrationContract.routeMarkerAttribute}]");
 
   if (nextMarker === null || currentMarker === null) {
     return false;
   }
 
-  const currentRouteId = currentMarker.getAttribute("data-mreact-route-id");
-  const nextRouteId = nextMarker.getAttribute("data-mreact-route-id");
+  const currentRouteId = currentMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
+  const nextRouteId = nextMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
 
   __mreactSyncHeadMetadata(template.content, html);
   __mreactResumeNode(currentMarker, nextMarker);
@@ -2202,7 +2214,7 @@ ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content,
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
-    void import(/* @vite-ignore */ script).then((module) => module.__mreactHydrateRoute?.());
+    void import(/* @vite-ignore */ script).then((module) => module.${routeHydrationContract.routeHydrateExport}?.());
   }
 
   __mreactApplyOutOfOrderFragments(document);
@@ -2295,15 +2307,15 @@ function __mreactRouteDataScriptIds(...routeIds) {
       continue;
     }
 
-    ids.add(\`mreact-props-\${routeId}\`);
-    ids.add(\`mreact-client-references-\${routeId}\`);
+    ids.add(\`${routeHydrationContract.propsScriptPrefix}\${routeId}\`);
+    ids.add(\`${routeHydrationContract.clientReferencesScriptPrefix}\${routeId}\`);
   }
 
   return ids;
 }
 
 function __mreactRouteDataScriptSelector() {
-  return 'script[type="application/json"][id^="mreact-props-"], script[type="application/json"][id^="mreact-client-references-"]';
+  return ${JSON.stringify(routeDataScriptSelector())};
 }
 
 function __mreactCurrentHistoryState(url) {

package/src/layout-composer.ts

@@ -0,0 +1,142 @@
+import { relative, sep } from "node:path";
+import { escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
+
+export interface SlotRenderContext {
+  consumedSlots: Set<string>;
+  namedSlots: Readonly<Record<string, string>>;
+}
+
+export interface ShellFile {
+  file: string;
+  id: string;
+  kind: "layout" | "template";
+}
+
+export interface RenderedShellParts {
+  prefix: string;
+  suffix: string;
+}
+
+export function createSlotRenderContext(
+  namedSlots: Readonly<Record<string, string>> = {},
+): SlotRenderContext {
+  return {
+    consumedSlots: new Set(),
+    namedSlots,
+  };
+}
+
+export function splitLayoutSlot(
+  layoutHtml: string,
+  slotContext: SlotRenderContext = createSlotRenderContext(),
+): RenderedShellParts {
+  const html = replaceNamedLayoutSlots(layoutHtml, slotContext);
+  const match = findDefaultLayoutSlot(html);
+
+  if (match === null) {
+    return { prefix: html, suffix: "" };
+  }
+
+  return {
+    prefix: html.slice(0, match.index),
+    suffix: html.slice(match.index + match[0].length),
+  };
+}
+
+export function markShellBoundary(html: string, shell: ShellFile): string {
+  const attributeName =
+    shell.kind === "layout" ? "data-mreact-layout-boundary" : "data-mreact-template-boundary";
+
+  if (html.includes(`${attributeName}=`)) {
+    return html;
+  }
+
+  return html.replace(
+    /<([A-Za-z][^\s/>]*)([^>]*)>/,
+    `<$1$2 ${attributeName}="${escapeHtmlAttribute(shell.id)}">`,
+  );
+}
+
+export function shellBoundaryId(appDir: string, directory: string): string {
+  const relativeDirectory = relative(appDir, directory);
+
+  return relativeDirectory === ""
+    ? "root"
+    : relativeDirectory.replaceAll(sep, "/").replace(/[^A-Za-z0-9_$/-]/g, "_");
+}
+
+export function warnUnconsumedRouteSlots(options: {
+  appDir: string;
+  pageFile: string;
+  serverModuleCacheVersion: string | undefined;
+  slotContext: SlotRenderContext;
+}): void {
+  if (options.serverModuleCacheVersion !== undefined) {
+    return;
+  }
+
+  const slotNames = Object.keys(options.slotContext.namedSlots);
+  if (slotNames.length === 0) {
+    return;
+  }
+
+  const routeLabel = relative(options.appDir, options.pageFile).replaceAll(sep, "/");
+
+  for (const name of slotNames) {
+    if (name === "default") {
+      console.warn(
+        `[mreact] ${routeLabel}: slots.default does not target <Slot />; use the page body for default slot content.`,
+      );
+      continue;
+    }
+
+    if (!options.slotContext.consumedSlots.has(name)) {
+      console.warn(
+        `[mreact] ${routeLabel}: slots.{${name}} is not consumed by any ancestor layout or template.`,
+      );
+    }
+  }
+}
+
+function replaceNamedLayoutSlots(layoutHtml: string, slotContext: SlotRenderContext): string {
+  return layoutHtml.replace(SLOT_TAG_PATTERN, (source, openAttributes: string) => {
+    const name = readSlotName(openAttributes);
+
+    if (name === undefined || name === "default") {
+      return source;
+    }
+
+    if (Object.hasOwn(slotContext.namedSlots, name)) {
+      slotContext.consumedSlots.add(name);
+      return slotContext.namedSlots[name] ?? "";
+    }
+
+    return "";
+  });
+}
+
+const SLOT_TAG_PATTERN = /<slot\b([^>]*)>(?:<\/slot\s*>)?/g;
+
+function findDefaultLayoutSlot(html: string): RegExpExecArray | null {
+  SLOT_TAG_PATTERN.lastIndex = 0;
+
+  for (;;) {
+    const match = SLOT_TAG_PATTERN.exec(html);
+
+    if (match === null) {
+      return null;
+    }
+
+    const name = readSlotName(match[1] ?? "");
+
+    if (name === undefined || name === "default") {
+      return match;
+    }
+  }
+}
+
+function readSlotName(attributes: string): string | undefined {
+  const match = /\bname\s*=\s*(?:"([^"]*)"|'([^']*)')/.exec(attributes);
+
+  return match?.[1] ?? match?.[2];
+}