@reckona/mreact-router 0.0.97 → 0.0.99

package/src/client.ts

@@ -67,6 +67,7 @@ export interface ClientRouteManifestEntry {
 }
 
 export interface BuildClientRouteOutputOptions {
+  cacheDir?: string | undefined;
   code: string;
   clientBoundaryImports?: readonly string[] | undefined;
   clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
@@ -145,16 +146,20 @@ export interface ClientRouteReferenceResult extends ClientRouteInferenceResult {
 export interface ClientRouteInferenceDiagnostic {
   code:
     | typeof clientBoundaryInferenceServerOnlyReferenceCode
+    | typeof clientBoundaryInferenceFunctionCallInteractiveCode
     | typeof clientBoundaryInferenceUnsupportedReferenceCode;
   filename: string;
   level: "warn";
   localNames: string[];
   message: string;
+  routePath?: string | undefined;
   source: string;
 }
 
 const clientBoundaryInferenceServerOnlyReferenceCode =
   "MR_CLIENT_BOUNDARY_INFERENCE_SERVER_ONLY_REFERENCE";
+const clientBoundaryInferenceFunctionCallInteractiveCode =
+  "MR_CLIENT_BOUNDARY_INFERENCE_FUNCTION_CALL_INTERACTIVE";
 const clientBoundaryInferenceUnsupportedReferenceCode =
   "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE";
 
@@ -244,7 +249,7 @@ export async function inferClientRouteModule(options: {
       : routeInference;
 
     if (options.appDir === undefined) {
-      return mergedRouteInference;
+      return withClientRouteDiagnosticPath(mergedRouteInference, options.routePath);
     }
 
     const shellInferences = await inferClientRouteShellModules({
@@ -254,14 +259,18 @@ export async function inferClientRouteModule(options: {
       sourceTransform,
     });
 
-    return {
-      client: mergedRouteInference.client || shellInferences.some((inference) => inference.client),
-      clientBoundaryImports: mergedRouteInference.clientBoundaryImports,
-      diagnostics: [
-        ...mergedRouteInference.diagnostics,
-        ...shellInferences.flatMap((inference) => inference.diagnostics),
-      ],
-    };
+    return withClientRouteDiagnosticPath(
+      {
+        client:
+          mergedRouteInference.client || shellInferences.some((inference) => inference.client),
+        clientBoundaryImports: mergedRouteInference.clientBoundaryImports,
+        diagnostics: [
+          ...mergedRouteInference.diagnostics,
+          ...shellInferences.flatMap((inference) => inference.diagnostics),
+        ],
+      },
+      options.routePath,
+    );
   } catch (error) {
     throw new Error(
       `Failed to infer client route for ${options.routePath ?? "<unknown>"} (${options.filename}).\n${errorMessage(error)}`,
@@ -337,6 +346,7 @@ export async function collectClientRouteReferences(options: {
   cache?: ClientRouteInferenceCache | undefined;
   code: string;
   filename: string;
+  routePath?: string | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
 }): Promise<ClientRouteReferenceResult> {
   const cache = options.cache ?? createClientRouteInferenceCache();
@@ -502,7 +512,9 @@ export async function collectClientRouteReferences(options: {
     clientBoundaryImports: routeInference.clientBoundaryImports,
     clientReferenceImports,
     clientReferenceManifest,
-    diagnostics: sources.flatMap((source) => source.inference.diagnostics),
+    diagnostics: sources
+      .flatMap((source) => source.inference.diagnostics)
+      .map((diagnostic) => withClientRouteDiagnosticPath(diagnostic, options.routePath)),
     usesNavigationLink:
       routeInference.usesNavigationLink ||
       sources.some(
@@ -813,6 +825,12 @@ async function inferClientRouteModuleSource(options: {
         }
 
         if (renderedByCall && !renderedByJsx) {
+          diagnostics.push(
+            functionCallInteractiveImportDiagnostic({
+              filename: options.filename,
+              reference,
+            }),
+          );
           continue;
         }
 
@@ -1145,6 +1163,28 @@ function serverOnlyClientImportReferenceDiagnostic(options: {
   };
 }
 
+function functionCallInteractiveImportDiagnostic(options: {
+  filename: string;
+  reference: StaticImportReference;
+}): ClientRouteInferenceDiagnostic {
+  const localNames = options.reference.localNames.filter(startsUppercase);
+  const component = localNames[0] ?? options.reference.localNames[0] ?? options.reference.source;
+  const componentUsage = startsUppercase(component) ? `<${component} />` : "JSX";
+
+  return {
+    code: clientBoundaryInferenceFunctionCallInteractiveCode,
+    filename: options.filename,
+    level: "warn",
+    localNames: localNames.length === 0 ? options.reference.localNames : localNames,
+    message:
+      `${options.filename}: interactive component import ${JSON.stringify(options.reference.source)} ` +
+      `is rendered through a function call as ${component}(), so its event handlers or cell() state ` +
+      "will not hydrate as a client boundary. Render it through JSX such as " +
+      `${componentUsage}, or move the call behind an explicit client boundary.`,
+    source: options.reference.source,
+  };
+}
+
 function unsupportedClientImportReferenceDiagnostic(options: {
   filename: string;
   identifierReferences: ReadonlySet<string>;
@@ -1186,7 +1226,31 @@ function startsUppercase(value: string): boolean {
 export function formatClientRouteInferenceDiagnostic(
   diagnostic: ClientRouteInferenceDiagnostic,
 ): string {
-  return `${diagnostic.code}: ${diagnostic.message}`;
+  const route = diagnostic.routePath === undefined ? "" : ` on route ${JSON.stringify(diagnostic.routePath)}`;
+  return `${diagnostic.code}: ${diagnostic.message}${route}`;
+}
+
+function withClientRouteDiagnosticPath<T extends ClientRouteInferenceDiagnostic | ClientRouteInferenceResult>(
+  value: T,
+  routePath: string | undefined,
+): T {
+  if (routePath === undefined) {
+    return value;
+  }
+
+  if ("diagnostics" in value) {
+    return {
+      ...value,
+      diagnostics: value.diagnostics.map((diagnostic) =>
+        withClientRouteDiagnosticPath(diagnostic, routePath),
+      ),
+    };
+  }
+
+  return {
+    ...value,
+    routePath: value.routePath ?? routePath,
+  };
 }
 
 async function resolveAppLocalModule(options: {
@@ -1579,6 +1643,7 @@ export async function buildClientRouteOutput(
     options.dropConsoleFunctions ?? resolveClientConsolePureFunctions(options.dropClientConsole);
   const bundled = await bundleRouterModule({
     code: entry.code,
+    cacheDir: options.cacheDir,
     define: {
       __MREACT_CLIENT_DEVTOOLS__: "false",
     },
@@ -1600,6 +1665,7 @@ export async function buildClientRouteOutput(
 
 export async function buildClientRouteBatchOutput(options: {
   assetBaseUrl?: string | undefined;
+  cacheDir?: string | undefined;
   dropConsoleFunctions?: readonly string[] | undefined;
   minify?: boolean;
   projectRoot?: string | undefined;
@@ -1622,6 +1688,7 @@ export async function buildClientRouteBatchOutput(options: {
   );
   const bundled = await bundleRouterModules({
     base: options.assetBaseUrl ?? "/_mreact/client/",
+    cacheDir: options.cacheDir,
     define: {
       __MREACT_CLIENT_DEVTOOLS__: "false",
     },
@@ -2091,6 +2158,10 @@ export async function __mreactPrefetch(url) {
     return false;
   }
 
+  if (__mreactIsCurrentLocationNavigationHref(href)) {
+    return false;
+  }
+
   const script = __mreactRouteScriptForNavigationUrl(href);
 
   if (script === undefined) {
@@ -2110,11 +2181,43 @@ function __mreactPrefetchNavigationHtml(href) {
       return false;
     }
 
-    __mreactNavigationState.cache.set(href, html);
+    __mreactRememberNavigationHtml(href, html);
     return true;
   }).catch(() => false);
 }
 
+const __mreactNavigationHtmlCacheMaxEntries = 64;
+
+function __mreactCachedNavigationHtml(href) {
+  const html = __mreactNavigationState.cache.get(href);
+
+  if (html === undefined) {
+    return undefined;
+  }
+
+  __mreactNavigationState.cache.delete(href);
+  __mreactNavigationState.cache.set(href, html);
+  return html;
+}
+
+function __mreactRememberNavigationHtml(href, html) {
+  if (__mreactNavigationState.cache.has(href)) {
+    __mreactNavigationState.cache.delete(href);
+  }
+
+  __mreactNavigationState.cache.set(href, html);
+
+  while (__mreactNavigationState.cache.size > __mreactNavigationHtmlCacheMaxEntries) {
+    const oldestHref = __mreactNavigationState.cache.keys().next().value;
+
+    if (oldestHref === undefined) {
+      return;
+    }
+
+    __mreactNavigationState.cache.delete(oldestHref);
+  }
+}
+
 function __mreactPrefetchRouteScript(script) {
   if (typeof document === "undefined") {
     return false;
@@ -2155,14 +2258,14 @@ export async function __mreactNavigate(url, options = {}) {
   __mreactSetNavigationState(__mreactPendingNavigationState(href, options.type ?? "push"));
 
   try {
-    const cachedHtml = __mreactNavigationState.cache.get(href);
+    const cachedHtml = __mreactCachedNavigationHtml(href);
     const html = cachedHtml ?? await __mreactFetchNavigationHtml(href);
 
     if (typeof html !== "string") {
       return false;
     }
 
-    __mreactNavigationState.cache.set(href, html);
+    __mreactRememberNavigationHtml(href, html);
     return await __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options);
   } finally {
     __mreactSetNavigationState(__mreactIdleNavigationState());
@@ -2828,6 +2931,24 @@ function __mreactIsHashOnlyNavigation(nextUrl) {
     nextUrl.hash !== location.hash;
 }
 
+function __mreactIsCurrentLocationNavigationHref(href) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return __mreactIsCurrentLocationNavigation(new URL(href, location.href));
+}
+
+function __mreactIsCurrentLocationNavigation(nextUrl) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search;
+}
+
 function __mreactInstallNavigation() {
   if (__mreactNavigationState.installed || typeof document === "undefined") {
     return;
@@ -2890,6 +3011,16 @@ function __mreactInstallNavigation() {
       return;
     }
 
+    if (__mreactIsCurrentLocationNavigation(nextUrl)) {
+      event.preventDefault();
+
+      if (__mreactAnchorScrollMode(anchor) !== false && nextUrl.hash === "") {
+        __mreactScrollTo(0, 0);
+      }
+
+      return;
+    }
+
     event.preventDefault();
     void __mreactNavigate(nextUrl.href, {
       scroll: __mreactAnchorScrollMode(anchor),

package/src/csrf.ts

@@ -1,6 +1,5 @@
 const csrfCookieNameProduction = "__Host-mreact.csrf";
 const csrfCookieNameDevelopment = "mreact.csrf";
-const csrfCookieNamesRead = [csrfCookieNameProduction, csrfCookieNameDevelopment];
 const formFieldCsrf = "__mreact_csrf";
 
 export const formCsrfFieldName = formFieldCsrf;
@@ -32,7 +31,7 @@ export function formCsrfCookie(csrfToken: string): string {
 export function validateFormCsrf(request: Request, formData: FormData): Response | undefined {
   const formToken = stringFormValue(formData.get(formFieldCsrf));
   const cookieHeader = request.headers.get("cookie");
-  const cookieToken = csrfCookieNamesRead
+  const cookieToken = csrfCookieNamesRead()
     .map((name) => readCookie(cookieHeader, name))
     .find((token) => token !== undefined);
 
@@ -48,7 +47,7 @@ export function validateFormCsrf(request: Request, formData: FormData): Response
 export function readExistingFormCsrfToken(request: Request | undefined): string | undefined {
   const cookieHeader = request?.headers.get("cookie") ?? null;
 
-  for (const name of csrfCookieNamesRead) {
+  for (const name of csrfCookieNamesRead()) {
     const token = readCookie(cookieHeader, name);
 
     if (token !== undefined && isCsrfTokenShape(token)) {
@@ -90,6 +89,12 @@ function currentCsrfCookieName(): string {
   return isProductionEnvironment() ? csrfCookieNameProduction : csrfCookieNameDevelopment;
 }
 
+function csrfCookieNamesRead(): readonly string[] {
+  return isProductionEnvironment()
+    ? [csrfCookieNameProduction]
+    : [csrfCookieNameProduction, csrfCookieNameDevelopment];
+}
+
 function timingSafeStringEqual(left: string, right: string): boolean {
   let diff = left.length ^ right.length;
   const length = Math.max(left.length, right.length);

package/src/http.ts

@@ -88,7 +88,16 @@ export async function sendResponse(
   response: Response,
 ): Promise<void> {
   outgoing.statusCode = response.status;
-  response.headers.forEach((value, key) => outgoing.setHeader(key, value));
+  const setCookieHeaders = responseSetCookieHeaders(response.headers);
+  response.headers.forEach((value, key) => {
+    if (key.toLowerCase() === "set-cookie" && setCookieHeaders.length > 0) {
+      return;
+    }
+    outgoing.setHeader(key, value);
+  });
+  if (setCookieHeaders.length > 0) {
+    outgoing.setHeader("set-cookie", setCookieHeaders);
+  }
 
   if (response.body === null) {
     outgoing.end();
@@ -126,3 +135,14 @@ export async function sendResponse(
     reader.releaseLock();
   }
 }
+
+function responseSetCookieHeaders(headers: Headers): string[] {
+  const getSetCookie = (headers as Headers & { getSetCookie?: () => string[] }).getSetCookie;
+
+  if (typeof getSetCookie === "function") {
+    return getSetCookie.call(headers);
+  }
+
+  const value = headers.get("set-cookie");
+  return value === null ? [] : [value];
+}

package/src/import-policy.ts

@@ -106,9 +106,14 @@ export function createAppRouterImportPolicyPlugin(options: AppRouterImportPolicy
 
         const resolvedPackage = resolvePackageSpecifier(args.path, args.resolveDir, options.appDir);
 
-        return resolvedPackage === undefined
-          ? undefined
-          : { external: true, path: pathToFileURL(resolvedPackage).href };
+        if (resolvedPackage === undefined) {
+          return undefined;
+        }
+
+        return {
+          external: true,
+          path: pathToFileURL(resolvedPackage).href,
+        };
       });
     },
   };

package/src/index.ts

@@ -71,6 +71,8 @@ export const getSession = getSessionInternal;
 export const rotateSession = rotateSessionInternal;
 export type {
   AwsLambdaArtifactManifest,
+  BuildAppPhase,
+  BuildAppPhaseTiming,
   BuildAppOptions,
   BuildAppResult,
   BuiltImportPolicyArtifact,
@@ -78,6 +80,7 @@ export type {
   PackageAwsLambdaArtifactOptions,
   PackageCloudflarePagesArtifactOptions,
 } from "./build.js";
+export type { ServerActionContext } from "./actions.js";
 export type {
   InferLoaderData,
   LayoutProps,
@@ -126,6 +129,7 @@ export type {
 export type { CookieOptions } from "./cookies.js";
 export type { AppRouterImportPolicy } from "./import-policy.js";
 export type {
+  LinkChild,
   LinkOptions,
   LinkPrefetch,
   LinkProps,
@@ -140,6 +144,7 @@ export type {
 export type { RouterRuntimeCacheStat } from "./runtime-cache.js";
 export type { MemorySessionStoreOptionsInternal as MemorySessionStoreOptions };
 export type {
+  AppRouterCspInlineNonceWarningLogEvent,
   AppRouterLogError,
   AppRouterLogEvent,
   AppRouterLogger,

package/src/link.ts

@@ -1,12 +1,12 @@
-import {
-  createElement,
-  type ReactCompatElement,
-  type ReactCompatNode,
-} from "@reckona/mreact-compat";
+import { escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
+import type { HtmlSink } from "@reckona/mreact-shared/compiler-contract";
+import type { ReactCompatElement, ReactCompatNode } from "@reckona/mreact-compat";
+import { safeUrlAttributeValue } from "@reckona/mreact-shared/url-safety";
 
 export type LinkPrefetch = "intent" | "viewport" | "none" | false;
 export type LinkScroll = "top" | "preserve";
 export type LinkTransition = "auto" | "none" | false;
+export type LinkChild = ReactCompatNode | Node | readonly LinkChild[];
 
 export interface LinkOptions {
   href: string;
@@ -17,7 +17,7 @@ export interface LinkOptions {
 }
 
 export interface LinkProps extends LinkOptions {
-  children?: ReactCompatNode;
+  children?: LinkChild;
   [attribute: string]: unknown;
 }
 
@@ -37,11 +37,132 @@ export function linkProps(options: LinkOptions): Record<string, string> {
   };
 }
 
-export function Link(props: LinkProps): ReactCompatElement {
+export function Link(props: LinkProps): ReactCompatElement;
+export function Link(sink: HtmlSink, props: LinkProps): void;
+export function Link(
+  sinkOrProps: HtmlSink | LinkProps,
+  maybeProps?: LinkProps,
+): ReactCompatElement | string | HTMLAnchorElement | void {
+  if (maybeProps !== undefined) {
+    (sinkOrProps as HtmlSink).append(renderLinkString(maybeProps));
+    return;
+  }
+
+  return renderLink(sinkOrProps as LinkProps);
+}
+
+function renderLink(props: LinkProps): string | HTMLAnchorElement {
+  const { href, prefetch, reload, scroll, transition, ...rest } = props;
+  const propsWithLinkAttrs = {
+    ...rest,
+    ...linkProps({ href, prefetch, reload, scroll, transition }),
+  };
+
+  if (typeof document !== "undefined" && typeof document.createElement === "function") {
+    return createAnchorElement(propsWithLinkAttrs);
+  }
+
+  return renderAnchorString(propsWithLinkAttrs);
+}
+
+function renderLinkString(props: LinkProps): string {
   const { href, prefetch, reload, scroll, transition, ...rest } = props;
 
-  return createElement("a", {
+  return renderAnchorString({
     ...rest,
     ...linkProps({ href, prefetch, reload, scroll, transition }),
   });
 }
+
+function createAnchorElement(props: Record<string, unknown>): HTMLAnchorElement {
+  const anchor = document.createElement("a");
+
+  for (const [name, value] of Object.entries(props)) {
+    if (name === "children") {
+      appendLinkChild(anchor, value as LinkChild);
+      continue;
+    }
+
+    if (!shouldSetAttribute(name, value)) {
+      continue;
+    }
+
+    anchor.setAttribute(attributeName(name), String(value));
+  }
+
+  return anchor;
+}
+
+function appendLinkChild(parent: Node, child: LinkChild): void {
+  if (child === null || child === undefined || typeof child === "boolean") {
+    return;
+  }
+
+  if (Array.isArray(child)) {
+    for (const item of child) {
+      appendLinkChild(parent, item);
+    }
+    return;
+  }
+
+  if (child instanceof Node) {
+    parent.appendChild(child);
+    return;
+  }
+
+  parent.appendChild(document.createTextNode(String(child)));
+}
+
+function renderAnchorString(props: Record<string, unknown>): string {
+  return `<a${renderAnchorAttributes(props)}>${renderChildren(props.children as LinkChild)}</a>`;
+}
+
+function renderAnchorAttributes(props: Record<string, unknown>): string {
+  const attrs: string[] = [];
+
+  for (const [name, value] of Object.entries(props)) {
+    if (name === "children" || !shouldSetAttribute(name, value)) {
+      continue;
+    }
+
+    const attrName = attributeName(name);
+    const attrValue = String(value);
+    const safeValue = safeUrlAttributeValue(attrName, attrValue);
+
+    if (safeValue === undefined) {
+      continue;
+    }
+
+    attrs.push(`${escapeHtmlAttribute(attrName)}="${escapeHtmlAttribute(safeValue)}"`);
+  }
+
+  return attrs.length === 0 ? "" : ` ${attrs.join(" ")}`;
+}
+
+function shouldSetAttribute(name: string, value: unknown): boolean {
+  return (
+    name !== "key" &&
+    name !== "ref" &&
+    value !== null &&
+    value !== undefined &&
+    value !== false &&
+    typeof value !== "function" &&
+    typeof value !== "symbol"
+  );
+}
+
+function attributeName(name: string): string {
+  return name === "className" ? "class" : name;
+}
+
+function renderChildren(child: LinkChild): string {
+  if (child === null || child === undefined || typeof child === "boolean") {
+    return "";
+  }
+
+  if (Array.isArray(child)) {
+    return child.map(renderChildren).join("");
+  }
+
+  return String(child);
+}

package/src/logger.ts

@@ -14,7 +14,8 @@ export type AppRouterLogEvent =
   | AppRouterRequestEndLogEvent
   | AppRouterRequestErrorLogEvent
   | AppRouterRequestTimingLogEvent
-  | AppRouterRenderTimingLogEvent;
+  | AppRouterRenderTimingLogEvent
+  | AppRouterCspInlineNonceWarningLogEvent;
 
 export interface AppRouterRequestStartLogEvent {
   method: string;
@@ -59,6 +60,13 @@ export interface AppRouterRenderTimingLogEvent {
   type: "router:render:timing";
 }
 
+export interface AppRouterCspInlineNonceWarningLogEvent {
+  directive: "script-src" | "style-src";
+  path: string;
+  tag: "script" | "style";
+  type: "router:csp:inline-nonce-warning";
+}
+
 export interface AppRouterLogError {
   message: string;
   name: string;

package/src/module-runner.ts

@@ -85,6 +85,7 @@ export async function importAppRouterSourceModule<T>(options: {
   label: string;
   plugins?: readonly RouterCompatPlugin[] | undefined;
   resolveDir?: string | undefined;
+  root?: string | undefined;
   serverSourceTransform?: ServerSourceTransformOptions | undefined;
   sourcefile?: string | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
@@ -125,6 +126,7 @@ async function importAppRouterSourceModuleWithoutCache<T>(options: {
   label: string;
   plugins?: readonly RouterCompatPlugin[] | undefined;
   resolveDir?: string | undefined;
+  root?: string | undefined;
   serverSourceTransform?: ServerSourceTransformOptions | undefined;
   sourcefile?: string | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
@@ -275,6 +277,7 @@ export async function bundleAppRouterSourceModule(options: {
   label: string;
   plugins?: readonly RouterCompatPlugin[] | undefined;
   resolveDir?: string | undefined;
+  root?: string | undefined;
   serverSourceTransform?: ServerSourceTransformOptions | undefined;
   sourcefile?: string | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
@@ -284,6 +287,7 @@ export async function bundleAppRouterSourceModule(options: {
     externalizeAppSourceModuleDirs: options.externalizeAppSourceModuleDirs,
     filename: options.sourcefile ?? join(options.resolveDir ?? process.cwd(), "module.js"),
     platform: "node",
+    root: options.root,
     vitePlugins: options.vitePlugins,
     plugins: [
       workspacePackageResolutionPlugin(),

package/src/native-route-matcher.ts

@@ -70,7 +70,7 @@ export function createNativeRouteMatcher(
   };
 }
 
-function normalizeNativeParams(
+export function normalizeNativeParams(
   route: AppRoute,
   params: Record<string, string>,
 ): MatchedRoute["params"] {
@@ -82,13 +82,24 @@ function normalizeNativeParams(
     }
     const value = normalized[segment.name];
     if (typeof value === "string") {
-      normalized[segment.name] = value.split("/").filter((part: string) => part !== "");
+      normalized[segment.name] = value
+        .split("/")
+        .filter((part: string) => part !== "")
+        .map((part: string) => safeDecodeURIComponent(part) ?? part);
     }
   }
 
   return normalized;
 }
 
+function safeDecodeURIComponent(value: string): string | undefined {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return undefined;
+  }
+}
+
 export function shouldUseNativeRouteMatcher(
   routeCount: number,
   mode: string | undefined,