@reckona/mreact-router 0.0.201 → 0.0.203

package/src/cli.ts

@@ -25,6 +25,8 @@ import {
   resolveCliHost,
   resolveCliHostPolicy,
   resolveCliRequestLogMode,
+  resolveCliStartPort,
+  resolveCliTrustForwardedProto,
 } from "./cli-options.js";
 import { startDevServer } from "./dev-server.js";
 import { startServer } from "./serve.js";
@@ -168,7 +170,11 @@ if (parsed !== undefined) {
           hostname: resolveCliHost(parsed.host, process.env),
           logger,
           outDir: resolve(routeArg ?? ".mreact"),
-          port: Number(process.env.PORT ?? 3001),
+          port: resolveCliStartPort(parsed.port, process.env),
+          trustForwardedProto: resolveCliTrustForwardedProto(
+            parsed.trustForwardedProto,
+            process.env,
+          ),
         });
         console.log(`mreact app router serving built output at ${server.url}`);
       } else {

package/src/client.ts

@@ -78,6 +78,7 @@ export interface BuildClientRouteOutputOptions {
   filename: string;
   minify?: boolean | undefined;
   routePath: string;
+  restoreRequestUrl?: boolean | undefined;
   sourceMap?: boolean | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
   clientNavigation?: boolean | undefined;
@@ -2632,9 +2633,18 @@ export function withHydrationMarkers(options: {
 }
 
 export function withRouteMarkers(options: { html: string; routePath: string }): string {
-  const routeId = routeIdForPath(options.routePath);
+  const marker = routeMarkerParts(options.routePath);
+
+  return `${marker.prefix}${options.html}${marker.suffix}`;
+}
 
-  return `<div ${routeHydrationContract.routeMarkerAttribute}="${escapeHtmlAttribute(routeId)}">${options.html}</div>`;
+export function routeMarkerParts(routePath: string): { prefix: string; suffix: string } {
+  const routeId = routeIdForPath(routePath);
+
+  return {
+    prefix: `<div ${routeHydrationContract.routeMarkerAttribute}="${escapeHtmlAttribute(routeId)}">`,
+    suffix: "</div>",
+  };
 }
 
 export function hydrationMarkerParts(options: {
@@ -2872,6 +2882,8 @@ export async function buildClientRouteEntrySource(
   );
 
   const routeId = routeIdForPath(options.routePath);
+  const restoreRequestUrl =
+    options.restoreRequestUrl ?? (options.debugLabels === true || /\brequest\b/.test(options.code));
   const routeUsesCells = detectRouteCellStateHint(compiled.code);
   const routeUsesReactiveEffect = detectRouteReactiveEffectHint(compiled.code);
   const routeUsesDomRefs = compiled.metadata.imports.some(
@@ -3401,6 +3413,7 @@ ${routeOutOfOrderFragmentHydration}  const __mreactMarker = document.querySelect
   const __mreactProps = __mreactPropsText === undefined
     ? {}
     : JSON.parse(__mreactPropsText);
+${restoreRequestUrl ? "  if (__mreactProps.request) __mreactProps.request.url = document.URL;\n" : ""}
   const __mreactClientReferences = __mreactClientReferencesElement?.textContent === undefined
     ? []
     : JSON.parse(__mreactClientReferencesElement.textContent);

package/src/navigation-marker.ts

@@ -0,0 +1,353 @@
+import { routeHydrationContract } from "./route-hydration-contract.js";
+
+const markerAttribute = routeHydrationContract.routeMarkerAttribute;
+const rawTextElementNames = new Set([
+  "iframe",
+  "noembed",
+  "noframes",
+  "noscript",
+  "style",
+  "textarea",
+  "title",
+  "xmp",
+]);
+
+interface ParsedStartTag {
+  end: number;
+  hasMarker: boolean;
+  name: string;
+}
+
+export function hasNavigationRouteMarker(html: string): boolean {
+  let cursor = 0;
+
+  while (cursor < html.length) {
+    const openingBracket = html.indexOf("<", cursor);
+    if (openingBracket < 0) {
+      return false;
+    }
+
+    if (html.startsWith("<!--", openingBracket)) {
+      cursor = skipComment(html, openingBracket + 4);
+      continue;
+    }
+
+    if (html.startsWith("<![CDATA[", openingBracket)) {
+      cursor = skipCdataSection(html, openingBracket + 9);
+      continue;
+    }
+
+    const discriminator = html[openingBracket + 1];
+    if (discriminator === "!" || discriminator === "?" || discriminator === "/") {
+      cursor = skipTagTail(html, openingBracket + 2);
+      continue;
+    }
+    if (!isAsciiLetter(discriminator)) {
+      cursor = openingBracket + 1;
+      continue;
+    }
+
+    const tag = parseStartTag(html, openingBracket);
+    if (tag === undefined) {
+      cursor = openingBracket + 1;
+      continue;
+    }
+    if (tag.hasMarker) {
+      return true;
+    }
+
+    if (tag.name === "plaintext") {
+      return false;
+    }
+
+    cursor =
+      tag.name === "script"
+        ? skipScriptElement(html, tag.end)
+        : rawTextElementNames.has(tag.name)
+          ? skipRawTextElement(html, tag.end, tag.name)
+          : tag.end;
+  }
+
+  return false;
+}
+
+function parseStartTag(html: string, openingBracket: number): ParsedStartTag | undefined {
+  let cursor = openingBracket + 1;
+  const nameStart = cursor;
+
+  while (cursor < html.length && !isTagNameTerminator(html[cursor])) {
+    if (isForbiddenTagNameCharacter(html[cursor])) {
+      return invalidStartTag(html, cursor, "");
+    }
+    cursor += 1;
+  }
+
+  if (cursor === nameStart) {
+    return undefined;
+  }
+
+  const name = html.slice(nameStart, cursor).toLowerCase();
+  let markerValueIsNonEmpty: boolean | undefined;
+
+  for (;;) {
+    cursor = skipAsciiWhitespace(html, cursor);
+    if (cursor >= html.length) {
+      return { end: html.length, hasMarker: false, name };
+    }
+    if (html[cursor] === ">") {
+      return { end: cursor + 1, hasMarker: markerValueIsNonEmpty === true, name };
+    }
+    if (html[cursor] === "/" && html[cursor + 1] === ">") {
+      return { end: cursor + 2, hasMarker: markerValueIsNonEmpty === true, name };
+    }
+    if (html[cursor] === "/") {
+      return invalidStartTag(html, cursor, name);
+    }
+
+    const attributeNameStart = cursor;
+    while (cursor < html.length && !isAttributeNameTerminator(html[cursor])) {
+      if (isForbiddenAttributeNameCharacter(html[cursor])) {
+        return invalidStartTag(html, cursor, name);
+      }
+      cursor += 1;
+    }
+    if (cursor === attributeNameStart) {
+      return invalidStartTag(html, cursor, name);
+    }
+
+    const attributeName = html.slice(attributeNameStart, cursor).toLowerCase();
+    cursor = skipAsciiWhitespace(html, cursor);
+    let valueIsNonEmpty = false;
+
+    if (html[cursor] === "=") {
+      cursor = skipAsciiWhitespace(html, cursor + 1);
+      const quote = html[cursor];
+
+      if (quote === '"' || quote === "'") {
+        const valueStart = cursor + 1;
+        const valueEnd = html.indexOf(quote, valueStart);
+        if (valueEnd < 0) {
+          return { end: html.length, hasMarker: false, name };
+        }
+        valueIsNonEmpty = valueEnd > valueStart;
+        cursor = valueEnd + 1;
+      } else {
+        const valueStart = cursor;
+        while (cursor < html.length && !isUnquotedValueTerminator(html[cursor])) {
+          if (isForbiddenUnquotedValueCharacter(html[cursor])) {
+            return invalidStartTag(html, cursor, name);
+          }
+          cursor += 1;
+        }
+        if (cursor === valueStart) {
+          return invalidStartTag(html, cursor, name);
+        }
+        valueIsNonEmpty = true;
+      }
+    }
+
+    if (attributeName === markerAttribute && markerValueIsNonEmpty === undefined) {
+      markerValueIsNonEmpty = valueIsNonEmpty;
+    }
+  }
+}
+
+function invalidStartTag(html: string, cursor: number, name: string): ParsedStartTag {
+  return { end: skipTagTail(html, cursor), hasMarker: false, name };
+}
+
+function skipComment(html: string, cursor: number): number {
+  const standardEnd = html.indexOf("-->", cursor);
+  const abruptEnd = html.indexOf("--!>", cursor);
+  const end =
+    standardEnd < 0 ? abruptEnd : abruptEnd < 0 ? standardEnd : Math.min(standardEnd, abruptEnd);
+  return end < 0 ? html.length : end + (end === abruptEnd ? 4 : 3);
+}
+
+function skipCdataSection(html: string, cursor: number): number {
+  const end = html.indexOf("]]>", cursor);
+  return end < 0 ? html.length : end + 3;
+}
+
+function skipTagTail(html: string, cursor: number): number {
+  let quote: '"' | "'" | undefined;
+  while (cursor < html.length) {
+    const character = html[cursor];
+    if (quote !== undefined) {
+      if (character === quote) {
+        quote = undefined;
+      }
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return cursor + 1;
+    }
+    cursor += 1;
+  }
+  return html.length;
+}
+
+function skipRawTextElement(html: string, cursor: number, name: string): number {
+  const closingPrefix = `</${name}`;
+  for (;;) {
+    const closingStart = indexOfAsciiCaseInsensitive(html, closingPrefix, cursor);
+    if (closingStart < 0) {
+      return html.length;
+    }
+    const delimiter = html[closingStart + closingPrefix.length];
+    if (delimiter === ">" || delimiter === "/" || isAsciiWhitespace(delimiter)) {
+      return skipTagTail(html, closingStart + closingPrefix.length);
+    }
+    cursor = closingStart + 2;
+  }
+}
+
+function skipScriptElement(html: string, cursor: number): number {
+  let state: "data" | "double-escaped" | "escaped" = "data";
+
+  while (cursor < html.length) {
+    if (state === "data" && html.startsWith("<!--", cursor)) {
+      state = "escaped";
+      cursor += 4;
+      continue;
+    }
+
+    if (state !== "data" && html.startsWith("-->", cursor)) {
+      state = "data";
+      cursor += 3;
+      continue;
+    }
+
+    if (html[cursor] === "<") {
+      if (isScriptTagAt(html, cursor, true)) {
+        if (state === "double-escaped") {
+          state = "escaped";
+          cursor += 8;
+          continue;
+        }
+        return skipTagTail(html, cursor + 8);
+      }
+
+      if (state === "escaped" && isScriptTagAt(html, cursor, false)) {
+        state = "double-escaped";
+        cursor += 7;
+        continue;
+      }
+    }
+
+    cursor += 1;
+  }
+
+  return html.length;
+}
+
+function isScriptTagAt(html: string, cursor: number, closing: boolean): boolean {
+  const prefix = closing ? "</script" : "<script";
+  if (!matchesAsciiCaseInsensitive(html, prefix, cursor)) {
+    return false;
+  }
+  const delimiter = html[cursor + prefix.length];
+  return delimiter === ">" || delimiter === "/" || isAsciiWhitespace(delimiter);
+}
+
+function matchesAsciiCaseInsensitive(html: string, needle: string, start: number): boolean {
+  if (start + needle.length > html.length) {
+    return false;
+  }
+  for (let offset = 0; offset < needle.length; offset += 1) {
+    if (html.charAt(start + offset).toLowerCase() !== needle.charAt(offset)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function indexOfAsciiCaseInsensitive(html: string, needle: string, start: number): number {
+  const lastStart = html.length - needle.length;
+  for (let index = start; index <= lastStart; index += 1) {
+    let offset = 0;
+    while (
+      offset < needle.length &&
+      html.charAt(index + offset).toLowerCase() === needle.charAt(offset)
+    ) {
+      offset += 1;
+    }
+    if (offset === needle.length) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+function skipAsciiWhitespace(html: string, cursor: number): number {
+  while (isAsciiWhitespace(html[cursor])) {
+    cursor += 1;
+  }
+  return cursor;
+}
+
+function isAsciiWhitespace(character: string | undefined): boolean {
+  return (
+    character === " " ||
+    character === "\t" ||
+    character === "\n" ||
+    character === "\f" ||
+    character === "\r"
+  );
+}
+
+function isAsciiLetter(character: string | undefined): boolean {
+  if (character === undefined) {
+    return false;
+  }
+  const code = character.charCodeAt(0);
+  return (code >= 65 && code <= 90) || (code >= 97 && code <= 122);
+}
+
+function isTagNameTerminator(character: string | undefined): boolean {
+  return (
+    character === undefined ||
+    character === ">" ||
+    character === "/" ||
+    isAsciiWhitespace(character)
+  );
+}
+
+function isForbiddenTagNameCharacter(character: string | undefined): boolean {
+  return (
+    character === "\0" ||
+    character === '"' ||
+    character === "'" ||
+    character === "<" ||
+    character === "="
+  );
+}
+
+function isAttributeNameTerminator(character: string | undefined): boolean {
+  return (
+    character === undefined ||
+    character === ">" ||
+    character === "/" ||
+    character === "=" ||
+    isAsciiWhitespace(character)
+  );
+}
+
+function isForbiddenAttributeNameCharacter(character: string | undefined): boolean {
+  return character === "\0" || character === '"' || character === "'" || character === "<";
+}
+
+function isUnquotedValueTerminator(character: string | undefined): boolean {
+  return character === undefined || character === ">" || isAsciiWhitespace(character);
+}
+
+function isForbiddenUnquotedValueCharacter(character: string | undefined): boolean {
+  return (
+    character === "\0" ||
+    character === '"' ||
+    character === "'" ||
+    character === "`" ||
+    character === "<" ||
+    character === "="
+  );
+}

package/src/navigation-runtime.ts

@@ -7,6 +7,7 @@ export {
   clientScriptForPath,
   hydrationMarkerParts,
   navigationRuntimeScriptForDev,
+  routeMarkerParts,
   routeIdForPath,
   withHydrationMarkers,
   withRouteMarkers,

package/src/node-server.ts

@@ -30,6 +30,27 @@ export interface StartNodeRequestServerOptions {
     hostPolicy?: "strict" | "trusted-proxy" | undefined;
     rawHost: string | undefined;
   }) => string) | undefined;
+  trustForwardedProto?: boolean | undefined;
+}
+
+export function resolveNodeRequestProtocol(options: {
+  encrypted: boolean;
+  forwardedProto: string | readonly string[] | undefined;
+  trustForwardedProto?: boolean | undefined;
+}): "http" | "https" {
+  if (options.encrypted) {
+    return "https";
+  }
+
+  if (options.trustForwardedProto !== true) {
+    return "http";
+  }
+
+  const forwarded = Array.isArray(options.forwardedProto)
+    ? options.forwardedProto[0]
+    : options.forwardedProto;
+  const first = forwarded?.split(",", 1)[0]?.trim().toLowerCase();
+  return first === "https" ? "https" : "http";
 }
 
 export async function startNodeRequestServer(
@@ -51,7 +72,12 @@ export async function startNodeRequestServer(
         hostPolicy: options.hostPolicy,
         rawHost: incoming.headers.host,
       });
-      const request = nodeRequestToWebRequest(incoming, `http://${host}`);
+      const protocol = resolveNodeRequestProtocol({
+        encrypted: (incoming.socket as { encrypted?: boolean }).encrypted === true,
+        forwardedProto: incoming.headers["x-forwarded-proto"],
+        trustForwardedProto: options.trustForwardedProto,
+      });
+      const request = nodeRequestToWebRequest(incoming, `${protocol}://${host}`);
       const logFields = requestLogFields(request, "node");
       emitRouterLog(options.logger, "info", {
         ...logFields,

package/src/prerender-entry.ts

@@ -0,0 +1,129 @@
+import type { BuiltPrerenderedRoute } from "./build.js";
+import { hasNavigationRouteMarker } from "./navigation-marker.js";
+
+export const PRERENDERED_ROUTE_SCHEMA_VERSION = 4;
+
+export function isCurrentPrerenderedRoute(value: unknown): value is BuiltPrerenderedRoute {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return false;
+  }
+
+  const entry = value as Partial<BuiltPrerenderedRoute>;
+  return (
+    entry.schemaVersion === PRERENDERED_ROUTE_SCHEMA_VERSION &&
+    isStringRecord(entry.headers) &&
+    isShareableHeaderRecord(entry.headers) &&
+    hasRequiredNavigationVary(entry.headers) &&
+    !hasStoredHstsHeader(entry.headers) &&
+    isCanonicalHstsHeader(entry.strictTransportSecurity) &&
+    typeof entry.html === "string" &&
+    (entry.navigationHtml === undefined ||
+      (typeof entry.navigationHtml === "string" &&
+        hasNavigationRouteMarker(entry.navigationHtml))) &&
+    typeof entry.status === "number" &&
+    Number.isInteger(entry.status) &&
+    entry.status >= 100 &&
+    entry.status <= 599
+  );
+}
+
+function hasStoredHstsHeader(headers: Record<string, string>): boolean {
+  try {
+    return new Headers(headers).has("strict-transport-security");
+  } catch {
+    return true;
+  }
+}
+
+function isCanonicalHstsHeader(value: unknown): value is string | undefined {
+  return (
+    value === undefined ||
+    (typeof value === "string" &&
+      /^max-age=(?:0|[1-9][0-9]*)(?:; includeSubDomains)?(?:; preload)?$/.test(value))
+  );
+}
+
+export function isVisitorDependentResponse(response: Response): boolean {
+  return isVisitorDependentHeaders(response.headers);
+}
+
+export function storedPrerenderedRouteHeaders(headers: Headers): Record<string, string> {
+  const stored: Record<string, string> = {};
+
+  headers.forEach((value, key) => {
+    if (key !== "strict-transport-security") {
+      stored[key] = value;
+    }
+  });
+
+  return stored;
+}
+
+export function replayedPrerenderedRouteHeaders(
+  entry: BuiltPrerenderedRoute,
+  request: Request,
+): Headers {
+  const headers = new Headers(entry.headers);
+
+  if (!hasNavigationVary(headers)) {
+    headers.append("vary", "x-mreact-navigation");
+  }
+
+  if (entry.strictTransportSecurity !== undefined && request.url.startsWith("https://")) {
+    headers.set("strict-transport-security", entry.strictTransportSecurity);
+  }
+
+  return headers;
+}
+
+function hasRequiredNavigationVary(headers: Record<string, string>): boolean {
+  try {
+    return hasNavigationVary(new Headers(headers));
+  } catch {
+    return false;
+  }
+}
+
+function hasNavigationVary(headers: Headers): boolean {
+  return (
+    headers
+      .get("vary")
+      ?.split(",")
+      .some((value) => value.trim().toLowerCase() === "x-mreact-navigation") === true
+  );
+}
+
+function isShareableHeaderRecord(headers: Record<string, string>): boolean {
+  try {
+    return !isVisitorDependentHeaders(new Headers(headers));
+  } catch {
+    return false;
+  }
+}
+
+function isVisitorDependentHeaders(headers: Headers): boolean {
+  const cacheControl = headers.get("cache-control") ?? "";
+  const vary = headers.get("vary");
+  const hasVisitorDependentVary =
+    vary !== null &&
+    vary.split(",").some((value) => value.trim().toLowerCase() !== "x-mreact-navigation");
+  const forbidsSharedStorage = cacheControl
+    .split(",")
+    .some((directive) => /^(?:private|no-cache|no-store)(?:=|$)/i.test(directive.trim()));
+
+  return (
+    headers.get("x-mreact-cache")?.toUpperCase() === "DYNAMIC" ||
+    headers.has("set-cookie") ||
+    hasVisitorDependentVary ||
+    forbidsSharedStorage
+  );
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.values(value).every((entry) => typeof entry === "string")
+  );
+}