@reckona/mreact-router 0.0.65 → 0.0.67

package/src/dev-server.ts

@@ -0,0 +1,262 @@
+import { createServer, type Server } from "node:http";
+import type { ServerResponse } from "node:http";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { createServer as createViteServer, type UserConfig, type ViteDevServer } from "vite";
+import type { AppRouterServerActionOptions } from "./actions.js";
+import { createMemoryRouteCache, type AppRouterCache } from "./cache.js";
+import { resolveAppRouterProjectOptions, type AppRouterProjectOptions } from "./config.js";
+import type { AppRouterImportPolicy } from "./import-policy.js";
+import { createAppRouterVitePlugin } from "./vite.js";
+import {
+  loadMreactRouterViteConfigDetails,
+  type LoadedMreactRouterViteConfig,
+} from "./vite-config.js";
+import {
+  emitRouterLog,
+  logDurationMs,
+  logNow,
+  nodeRequestPath,
+  type AppRouterLogger,
+} from "./logger.js";
+import type { HttpUpgradeHandler } from "./upgrade.js";
+
+export interface StartDevServerOptions extends AppRouterProjectOptions {
+  port?: number | undefined;
+  hostname?: string;
+  importPolicy?: AppRouterImportPolicy | undefined;
+  logger?: AppRouterLogger | undefined;
+  routeCache?: AppRouterCache | undefined;
+  serverActions?: AppRouterServerActionOptions | undefined;
+  viteConfig?: UserConfig | undefined;
+  onUpgrade?: HttpUpgradeHandler | undefined;
+}
+
+export async function startDevServer(
+  options: StartDevServerOptions,
+): Promise<{ close(): Promise<void>; server: Server; url: string }> {
+  const hostname = options.hostname ?? "127.0.0.1";
+  const resolved = await resolveStartDevServerProject(options);
+  const project = resolved.project;
+  const userViteConfig = options.viteConfig ?? resolved.viteConfig ?? {};
+  const userViteServerConfig =
+    typeof userViteConfig.server === "object" ? userViteConfig.server : {};
+  const userHmrConfig =
+    typeof userViteServerConfig.hmr === "object" ? userViteServerConfig.hmr : {};
+  const port = options.port ?? resolved.serverPort ?? 3001;
+  const routeCache = options.routeCache ?? createMemoryRouteCache();
+  const declaredPackages = await readDeclaredProjectPackages(project.projectRoot);
+  const importPolicy: AppRouterImportPolicy = {
+    ...options.importPolicy,
+    allowedPackages: [
+      ...new Set([...declaredPackages, ...(options.importPolicy?.allowedPackages ?? [])]),
+    ],
+  };
+  let vite: ViteDevServer | undefined;
+  const server = createServer((incoming, outgoing) => {
+    const logger = options.logger;
+    const startedAt = logger === undefined ? undefined : logNow();
+    const logFields =
+      logger === undefined
+        ? undefined
+        : {
+            method: incoming.method ?? "GET",
+            path: nodeRequestPath(incoming.url),
+            runtime: "node" as const,
+          };
+
+    if (logger !== undefined && logFields !== undefined && startedAt !== undefined) {
+      emitRouterLog(logger, "info", {
+        ...logFields,
+        type: "router:request:start",
+      });
+      outgoing.once("finish", () => {
+        emitRouterLog(logger, "info", {
+          ...logFields,
+          durationMs: logDurationMs(startedAt),
+          status: outgoing.statusCode,
+          type: "router:request:end",
+        });
+      });
+    }
+
+    if (vite === undefined) {
+      sendDevServerError(outgoing, new Error("Vite dev server is not initialized."));
+      return;
+    }
+
+    vite.middlewares(incoming, outgoing, (error?: unknown) => {
+      if (error !== undefined) {
+        if (error instanceof Error) {
+          vite?.ssrFixStacktrace(error);
+        }
+        sendDevServerError(outgoing, error);
+        return;
+      }
+
+      outgoing.statusCode = 404;
+      outgoing.setHeader("content-type", "text/plain; charset=utf-8");
+      outgoing.end("Not Found");
+    });
+  });
+
+  if (options.onUpgrade !== undefined) {
+    server.on("upgrade", options.onUpgrade);
+  }
+
+  vite = await createViteServer({
+    ...userViteConfig,
+    appType: "custom",
+    configFile: false,
+    root: project.projectRoot,
+    server: {
+      ...userViteServerConfig,
+      hmr: { ...userHmrConfig, server },
+      middlewareMode: true,
+    },
+    plugins: [
+      ...(userViteConfig.plugins ?? []),
+      createAppRouterVitePlugin({
+        allowedSourceDirs: project.allowedSourceDirs,
+        projectRoot: project.projectRoot,
+        publicDir: project.publicDir,
+        routesDir: project.routesDir,
+        importPolicy,
+        routeCache,
+        serverActions: options.serverActions,
+      }),
+    ],
+  });
+
+  try {
+    await listenDevHttpServer(server, port, hostname);
+  } catch (error) {
+    await vite.close();
+    throw error;
+  }
+  const address = server.address();
+  const actualPort = typeof address === "object" && address !== null ? address.port : port;
+
+  return {
+    server,
+    url: `http://${hostname}:${actualPort}`,
+    close: async () => {
+      await vite?.close();
+      await new Promise<void>((resolve, reject) => {
+        server.close((error) => (error ? reject(error) : resolve()));
+      });
+    },
+  };
+}
+
+function listenDevHttpServer(server: Server, port: number, hostname: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const onError = (error: Error) => {
+      server.off("listening", onListening);
+      reject(formatDevListenError(error, hostname, port));
+    };
+    const onListening = () => {
+      server.off("error", onError);
+      resolve();
+    };
+
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(port, hostname);
+  });
+}
+
+function formatDevListenError(error: Error, hostname: string, port: number): Error {
+  if (isNodeErrorCode(error, "EADDRINUSE")) {
+    return new Error(
+      `mreact dev server could not start because ${hostname}:${port} is already in use. Stop the process using that port or run with PORT=<free-port>.`,
+    );
+  }
+
+  return error;
+}
+
+function isNodeErrorCode(error: unknown, code: string): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === code
+  );
+}
+
+async function resolveStartDevServerProject(options: StartDevServerOptions): Promise<{
+  project: ReturnType<typeof resolveAppRouterProjectOptions>;
+  serverPort?: number | undefined;
+  viteConfig?: LoadedMreactRouterViteConfig["viteConfig"];
+}> {
+  if (options.appDir !== undefined || options.routesDir !== undefined) {
+    return { project: resolveAppRouterProjectOptions(options) };
+  }
+
+  const config = await loadOptionalMreactRouterViteConfig(
+    resolve(options.projectRoot ?? process.cwd()),
+  );
+
+  return {
+    project: resolveAppRouterProjectOptions({
+      ...config?.project,
+      ...definedProjectOptions(options),
+    }),
+    serverPort: config?.serverPort,
+    viteConfig: config?.viteConfig,
+  };
+}
+
+async function loadOptionalMreactRouterViteConfig(cwd: string) {
+  try {
+    return await loadMreactRouterViteConfigDetails({
+      command: "serve",
+      cwd,
+    });
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("vite.config.ts is required")) {
+      return undefined;
+    }
+
+    throw error;
+  }
+}
+
+async function readDeclaredProjectPackages(projectRoot: string): Promise<string[]> {
+  try {
+    const json = JSON.parse(await readFile(resolve(projectRoot, "package.json"), "utf8")) as {
+      dependencies?: Record<string, unknown> | undefined;
+      devDependencies?: Record<string, unknown> | undefined;
+      optionalDependencies?: Record<string, unknown> | undefined;
+      peerDependencies?: Record<string, unknown> | undefined;
+    };
+
+    return [
+      ...Object.keys(json.dependencies ?? {}),
+      ...Object.keys(json.devDependencies ?? {}),
+      ...Object.keys(json.optionalDependencies ?? {}),
+      ...Object.keys(json.peerDependencies ?? {}),
+    ];
+  } catch {
+    return [];
+  }
+}
+
+function definedProjectOptions(options: StartDevServerOptions): AppRouterProjectOptions {
+  return {
+    ...(options.allowedSourceDirs === undefined
+      ? {}
+      : { allowedSourceDirs: options.allowedSourceDirs }),
+    ...(options.appDir === undefined ? {} : { appDir: options.appDir }),
+    ...(options.projectRoot === undefined ? {} : { projectRoot: options.projectRoot }),
+    ...(options.publicDir === undefined ? {} : { publicDir: options.publicDir }),
+    ...(options.routesDir === undefined ? {} : { routesDir: options.routesDir }),
+  };
+}
+
+function sendDevServerError(outgoing: ServerResponse, error: unknown): void {
+  outgoing.statusCode = 500;
+  outgoing.setHeader("content-type", "text/plain; charset=utf-8");
+  outgoing.end(error instanceof Error ? error.stack : String(error));
+}

package/src/file-conventions.ts

@@ -0,0 +1,88 @@
+export type AppFileConvention =
+  | "apple-icon"
+  | "icon"
+  | "manifest"
+  | "opengraph-image"
+  | "robots"
+  | "sitemap";
+
+export type AppFileConventionRouteKind = "asset" | "metadata";
+
+export interface AppFileConventionRouteInfo {
+  convention: AppFileConvention;
+  kind: AppFileConventionRouteKind;
+  path: string;
+}
+
+const conventionByFilename = new Map<string, AppFileConventionRouteInfo>([
+  ["robots.ts", { convention: "robots", kind: "metadata", path: "/robots.txt" }],
+  ["robots.txt", { convention: "robots", kind: "asset", path: "/robots.txt" }],
+  ["sitemap.ts", { convention: "sitemap", kind: "metadata", path: "/sitemap.xml" }],
+  ["sitemap.xml", { convention: "sitemap", kind: "asset", path: "/sitemap.xml" }],
+  ["manifest.ts", { convention: "manifest", kind: "metadata", path: "/manifest.webmanifest" }],
+  [
+    "manifest.webmanifest",
+    { convention: "manifest", kind: "asset", path: "/manifest.webmanifest" },
+  ],
+  ["favicon.ico", { convention: "icon", kind: "asset", path: "/favicon.ico" }],
+  ["icon.ico", { convention: "icon", kind: "asset", path: "/icon" }],
+  ["icon.png", { convention: "icon", kind: "asset", path: "/icon" }],
+  ["icon.jpg", { convention: "icon", kind: "asset", path: "/icon" }],
+  ["icon.jpeg", { convention: "icon", kind: "asset", path: "/icon" }],
+  ["icon.svg", { convention: "icon", kind: "asset", path: "/icon" }],
+  ["apple-icon.png", { convention: "apple-icon", kind: "asset", path: "/apple-icon" }],
+  ["apple-icon.jpg", { convention: "apple-icon", kind: "asset", path: "/apple-icon" }],
+  ["apple-icon.jpeg", { convention: "apple-icon", kind: "asset", path: "/apple-icon" }],
+  ["apple-icon.svg", { convention: "apple-icon", kind: "asset", path: "/apple-icon" }],
+  [
+    "opengraph-image.png",
+    { convention: "opengraph-image", kind: "asset", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.jpg",
+    { convention: "opengraph-image", kind: "asset", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.jpeg",
+    { convention: "opengraph-image", kind: "asset", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.svg",
+    { convention: "opengraph-image", kind: "asset", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.ts",
+    { convention: "opengraph-image", kind: "metadata", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.tsx",
+    { convention: "opengraph-image", kind: "metadata", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.js",
+    { convention: "opengraph-image", kind: "metadata", path: "/opengraph-image" },
+  ],
+  [
+    "opengraph-image.jsx",
+    { convention: "opengraph-image", kind: "metadata", path: "/opengraph-image" },
+  ],
+]);
+
+export function appFileConventionForRootFilename(
+  filename: string,
+): AppFileConventionRouteInfo | undefined {
+  return conventionByFilename.get(filename);
+}
+
+export function appFileConventionContentType(filename: string): string {
+  if (filename.endsWith(".txt")) return "text/plain; charset=utf-8";
+  if (filename.endsWith(".xml")) return "application/xml; charset=utf-8";
+  if (filename.endsWith(".webmanifest")) return "application/manifest+json; charset=utf-8";
+  if (filename.endsWith(".json")) return "application/json; charset=utf-8";
+  if (filename.endsWith(".svg")) return "image/svg+xml";
+  if (filename.endsWith(".png")) return "image/png";
+  if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) return "image/jpeg";
+  if (filename.endsWith(".ico")) return "image/x-icon";
+
+  return "application/octet-stream";
+}

package/src/http.ts

@@ -0,0 +1,128 @@
+import type { ServerResponse } from "node:http";
+import type { IncomingMessage } from "node:http";
+import { Readable } from "node:stream";
+
+export function nodeRequestToWebRequest(
+  incoming: IncomingMessage,
+  origin: string,
+): Request {
+  const method = incoming.method ?? "GET";
+  const headers = new Headers();
+
+  for (const [name, value] of Object.entries(incoming.headers)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        headers.append(name, item);
+      }
+      continue;
+    }
+
+    if (value !== undefined) {
+      headers.set(name, value);
+    }
+  }
+
+  const init: RequestInit & { duplex?: "half" } = {
+    headers,
+    method,
+  };
+
+  if (method !== "GET" && method !== "HEAD") {
+    init.body = Readable.toWeb(incoming) as ReadableStream<Uint8Array>;
+    init.duplex = "half";
+  }
+
+  return new Request(new URL(incoming.url ?? "/", origin), init);
+}
+
+/**
+ * WeakMap-backed marker holding the underlying body for Response objects
+ * that mreact built from a known-shape body (string / Buffer /
+ * Uint8Array). When `sendResponse` sees this marker, it bypasses the
+ * `ReadableStream → reader.read()` pump and writes the body directly to
+ * the Node HTTP socket.
+ *
+ * A WeakMap is used instead of a Symbol property to avoid forcing a
+ * hidden-class transition on the Response — Response is a global host
+ * object whose IC chain is shared, and adding own properties slows down
+ * subsequent `response.headers` / `response.body` accesses.
+ *
+ * Measured savings (Node 24 / Linux x64, minimal page bench): ~10-15μs/req
+ * vs the stream path. See docs/issues/054.
+ */
+const rawBodyByResponse = new WeakMap<Response, string | Uint8Array>();
+
+/**
+ * Constructs a Response whose body is a single string (the common HTML
+ * render result). Equivalent to `new Response(html, init)` but tagged so
+ * `sendResponse` can take its string fast path.
+ */
+export function htmlResponse(html: string, init?: ResponseInit): Response {
+  const response = new Response(html, init);
+  rawBodyByResponse.set(response, html);
+  return response;
+}
+
+/**
+ * Constructs a Response whose body is raw bytes (e.g., pre-rendered HTML
+ * already encoded, or static assets). Tagged so `sendResponse` writes the
+ * bytes directly without going through the stream reader.
+ */
+export function bytesResponse(bytes: Uint8Array, init?: ResponseInit): Response {
+  const response = new Response(bytes as BodyInit, init);
+  rawBodyByResponse.set(response, bytes);
+  return response;
+}
+
+/**
+ * Test-only probe: returns true when the Response was constructed via
+ * `htmlResponse` / `bytesResponse` and is therefore eligible for the
+ * `sendResponse` raw-body fast path. Not part of the public runtime API.
+ */
+export function hasFastPathBody(response: Response): boolean {
+  return rawBodyByResponse.has(response);
+}
+
+export async function sendResponse(
+  outgoing: ServerResponse,
+  response: Response,
+): Promise<void> {
+  outgoing.statusCode = response.status;
+  response.headers.forEach((value, key) => outgoing.setHeader(key, value));
+
+  if (response.body === null) {
+    outgoing.end();
+    return;
+  }
+
+  // Fast path: when the Response was constructed via `htmlResponse` /
+  // `bytesResponse` (i.e., mreact knows the underlying body shape), skip
+  // the Response→ReadableStream→reader pump and write directly.
+  const rawBody = rawBodyByResponse.get(response);
+  if (rawBody !== undefined) {
+    outgoing.end(rawBody);
+    return;
+  }
+
+  outgoing.flushHeaders();
+  const reader = response.body.getReader();
+
+  try {
+    while (true) {
+      const result = await reader.read();
+
+      if (result.done) {
+        outgoing.end();
+        return;
+      }
+
+      if (!outgoing.write(result.value)) {
+        await new Promise<void>((resolve) => outgoing.once("drain", resolve));
+      }
+    }
+  } catch (error) {
+    outgoing.destroy(error instanceof Error ? error : new Error(String(error)));
+  } finally {
+    reader.releaseLock();
+  }
+}

package/src/i18n.ts

@@ -0,0 +1,98 @@
+export interface LocaleRoutingOptions<Locale extends string = string> {
+  defaultLocale: Locale;
+  locales: readonly Locale[];
+}
+
+export interface DetectedLocale<Locale extends string = string> {
+  locale: Locale;
+  pathname: string;
+  source: "accept-language" | "default" | "path";
+}
+
+export type MessageTree = {
+  readonly [key: string]: MessageTree | string;
+};
+
+export function detectLocale<Locale extends string>(
+  request: Request,
+  options: LocaleRoutingOptions<Locale>,
+): DetectedLocale<Locale> {
+  const url = new URL(request.url);
+  const pathMatch = localeFromPath(url.pathname, options.locales);
+
+  if (pathMatch !== undefined) {
+    return {
+      locale: pathMatch.locale,
+      pathname: pathMatch.pathname,
+      source: "path",
+    };
+  }
+
+  const accepted = localeFromAcceptLanguage(
+    request.headers.get("accept-language"),
+    options.locales,
+  );
+
+  if (accepted !== undefined) {
+    return {
+      locale: accepted,
+      pathname: url.pathname,
+      source: "accept-language",
+    };
+  }
+
+  return {
+    locale: options.defaultLocale,
+    pathname: url.pathname,
+    source: "default",
+  };
+}
+
+export function defineMessages<const Messages extends MessageTree>(messages: Messages): Messages {
+  return messages;
+}
+
+function localeFromPath<Locale extends string>(
+  pathname: string,
+  locales: readonly Locale[],
+): { locale: Locale; pathname: string } | undefined {
+  const [, firstSegment = "", ...rest] = pathname.split("/");
+  const locale = locales.find((candidate) => candidate === firstSegment);
+
+  if (locale === undefined) {
+    return undefined;
+  }
+
+  return {
+    locale,
+    pathname: rest.length === 0 ? "/" : `/${rest.join("/")}`,
+  };
+}
+
+function localeFromAcceptLanguage<Locale extends string>(
+  header: string | null,
+  locales: readonly Locale[],
+): Locale | undefined {
+  if (header === null) {
+    return undefined;
+  }
+
+  return header
+    .split(",")
+    .map((part) => {
+      const [tag = "", ...params] = part.trim().split(";");
+      const q = params
+        .map((param) => /^q=(?<value>\d(?:\.\d+)?)$/.exec(param.trim())?.groups?.value)
+        .find((value): value is string => value !== undefined);
+
+      return {
+        q: q === undefined ? 1 : Number(q),
+        tag: tag.toLowerCase(),
+      };
+    })
+    .filter((entry) => entry.tag !== "" && Number.isFinite(entry.q) && entry.q > 0)
+    .sort((left, right) => right.q - left.q)
+    .flatMap((entry) => [entry.tag, entry.tag.split("-")[0] ?? ""])
+    .map((tag) => locales.find((locale) => locale.toLowerCase() === tag))
+    .find((locale): locale is Locale => locale !== undefined);
+}