@antelopejs/dms-frontend 0.10.0 → 0.10.2

package/templates/vue/server/request-target.mjs

@@ -1,4 +1,3 @@
-import { writeBadRequest } from "./request-failure.mjs";
 import { isString } from "./type-guards.mjs";
 
 const FRONTEND_ORIGIN = "http://frontend.local";
@@ -30,7 +29,7 @@ export function isOriginForm(target) {
  */
 export function backendUrl(
   target,
-  backendBaseUrl = process.env.DMS_API_BASE_URL,
+  backendBaseUrl = process.env.DMS_API_BASE_URL ?? "",
 ) {
   const { pathname, search } = new URL(target, FRONTEND_ORIGIN);
   const url = new URL(new URL(backendBaseUrl).origin);
@@ -40,8 +39,24 @@ export function backendUrl(
 }
 
 /**
- * Answers 400 to a request whose target is not origin-form, before any route
- * reads it. Returns whether it answered.
+ * A request a server received, whose `url` and `method` Node always sets
+ * (`isServerRequest`).
+ *
+ * @typedef {import("node:http").IncomingMessage & { url: string, method: string }} ServerRequest
+ */
+
+/**
+ * @template {import("node:http").IncomingMessage} Request
+ * @param {Request} request
+ * @returns {request is Request & ServerRequest}
+ */
+export function isServerRequest(request) {
+  return isString(request.url) && isString(request.method);
+}
+
+/**
+ * Whether the request target is origin-form, the only kind the server routes:
+ * a request that fails it is answered 400 before any route reads it.
  *
  * The request target as the server reads it. Node hands `request.url` over
  * verbatim, so it is not always a path: `//host/x`, `/\host/x` and the absolute
@@ -50,10 +65,8 @@ export function backendUrl(
  * backend read the same normalized path from here.
  *
  * @param {import("node:http").IncomingMessage} request
- * @param {import("node:http").ServerResponse} response
+ * @returns {request is ServerRequest}
  */
-export function refuseForeignTarget(request, response) {
-  if (isOriginForm(request.url)) return false;
-  writeBadRequest(response);
-  return true;
+export function hasOriginFormTarget(request) {
+  return isOriginForm(request.url) && isString(request.method);
 }

package/templates/vue/server/route-rules.mjs

@@ -1,5 +1,11 @@
-import { compilePathPattern } from "./path-patterns.mjs";
-import { isNonNullObject, isObjectLike, isString } from "./type-guards.mjs";
+import { compilePathPattern, PATH_PATTERN_FORMS } from "./path-patterns.mjs";
+import {
+  isNonNullObject,
+  isNumber,
+  isObjectLike,
+  isRecord,
+  isString,
+} from "./type-guards.mjs";
 
 /** @typedef {import("../server-module.ts").DmsRouteRule} RouteRule */
 /** @typedef {RouteRule & { headers: Record<string, string> }} MergedRouteRule */
@@ -37,7 +43,7 @@ const RESERVED_HEADERS = new Set([
 
 /** @param {unknown} value */
 function isSeconds(value) {
-  return Number.isSafeInteger(value) && value >= 0;
+  return isNumber(value) && Number.isSafeInteger(value) && value >= 0;
 }
 
 /** @param {unknown} headers */
@@ -63,7 +69,7 @@ function headersRejection(headers) {
 function cacheRejection(cache) {
   if (cache === undefined || cache === false) return undefined;
   if (
-    !isNonNullObject(cache) ||
+    !isRecord(cache) ||
     cache.public !== true ||
     !isSeconds(cache.maxAge) ||
     (cache.staleWhileRevalidate !== undefined &&
@@ -85,8 +91,8 @@ function cacheRejection(cache) {
  */
 export function ruleRejection(pattern, rule) {
   if (!compilePathPattern(pattern))
-    return "the pattern is not /x, /x/* or /x/**";
-  if (!isNonNullObject(rule)) return "it is not an object";
+    return `the pattern is not ${PATH_PATTERN_FORMS}`;
+  if (!isRecord(rule)) return "it is not an object";
   if (rule.ssr !== undefined && rule.ssr !== false)
     return "ssr is either left out or false";
   return headersRejection(rule.headers) ?? cacheRejection(rule.cache);

package/templates/vue/server/static-files.mjs

@@ -1,5 +1,6 @@
 import { createReadStream, existsSync, statSync } from "node:fs";
 import { extname } from "node:path";
+import { acceptedCodings } from "./content.mjs";
 
 /**
  * What a build or a module's `public/` directory may hold. A type missing
@@ -48,22 +49,26 @@ const IMMUTABLE_CACHE = "public, max-age=31536000, immutable";
  */
 const REVALIDATED_CACHE = "no-cache";
 
+/** The suffix the build gives the copy of a file in each coding. */
+const VARIANT_SUFFIXES = { br: ".br", gzip: ".gz" };
+
 /** @param {string} path */
 const isFile = (path) => existsSync(path) && statSync(path).isFile();
 
 /**
- * The precompressed variant of `file` the client accepts, if the build wrote one.
+ * The precompressed variant of `file` the client wants most among those the
+ * build wrote, or `file` itself.
  *
  * @param {string} file
  * @param {import("node:http").IncomingMessage} request
  */
 function acceptedVariant(file, request) {
-  const accepted = request.headers["accept-encoding"] ?? "";
-  if (accepted.includes("br") && isFile(`${file}.br`))
-    return { file: `${file}.br`, encoding: "br" };
-  if (accepted.includes("gzip") && isFile(`${file}.gz`))
-    return { file: `${file}.gz`, encoding: "gzip" };
-  return { file, encoding: undefined };
+  const encoding = acceptedCodings(request).find((coding) =>
+    isFile(`${file}${VARIANT_SUFFIXES[coding]}`),
+  );
+  return encoding
+    ? { file: `${file}${VARIANT_SUFFIXES[encoding]}`, encoding }
+    : { file, encoding: undefined };
 }
 
 /**

package/templates/vue/server/vite-errors.mjs

@@ -1,3 +1,5 @@
+import { isObjectLike, isString } from "./type-guards.mjs";
+
 const INTERNAL_ERROR_STATUS = 500;
 const ERROR_CONTENT_TYPE = "text/plain; charset=utf-8";
 const VITE_ERROR = Symbol("dms.viteError");
@@ -69,9 +71,18 @@ export function runViteMiddlewares(devServer, request, response) {
   });
 }
 
-/** Answers 500 with Vite's error message instead of rendering a page. */
+/**
+ * Answers 500 with Vite's error message instead of rendering a page.
+ *
+ * @param {import("node:http").ServerResponse} response
+ * @param {unknown} error
+ */
 export function writeViteError(response, error) {
   response.statusCode = INTERNAL_ERROR_STATUS;
   response.setHeader("content-type", ERROR_CONTENT_TYPE);
-  response.end(error?.message ?? String(error));
+  response.end(
+    isObjectLike(error) && isString(error.message)
+      ? error.message
+      : String(error),
+  );
 }

package/templates/vue/server/web-body.mjs

@@ -17,10 +17,11 @@ import { pipeline } from "node:stream/promises";
  */
 export async function pipeWebBody(body, ...streams) {
   const response = streams.at(-1);
+  if (!response) throw new TypeError("pipeWebBody needs a response to write");
   if (response.closed || response.destroyed) {
     for (const stream of streams.slice(0, -1)) stream.destroy();
     await body.cancel().catch(() => {});
     return;
   }
-  await pipeline(Readable.fromWeb(body), ...streams);
+  await pipeline([Readable.fromWeb(body), ...streams]);
 }

package/templates/vue/server-module.ts

@@ -186,7 +186,8 @@ export interface DmsServerRouteOptions {
  * The session logic the frontend server runs outside any route, which the
  * module owning sign-in provides. Without `publicSession`, pages carry no
  * `user` and `session`; without `refreshSession`, a session the backend
- * refuses is not renewed; `signInPath` is `/auth` by default.
+ * refuses is not renewed; `signInPath` is `/auth` by default. The server
+ * calls each hook with the registered object as `this`.
  */
 export interface DmsServerAuth {
   /** Where a signed-out visit to a private page goes, with `?redirect=`. */

package/templates/vue/server.mjs

@@ -17,6 +17,7 @@ import { handleClientError } from "./server/client-error.mjs";
 import {
   reportListenError,
   reportReady,
+  reportRouting,
   reportStartError,
 } from "./server/cli-report.mjs";
 import { publicBuildFile } from "./server/built-files.mjs";
@@ -64,7 +65,10 @@ import * as icons from "./server/icons.mjs";
 import { ssrRenderer } from "./server/ssr-module.mjs";
 import * as requestFailure from "./server/request-failure.mjs";
 import { proxy } from "./server/proxy-request.mjs";
-import { refuseForeignTarget } from "./server/request-target.mjs";
+import {
+  hasOriginFormTarget,
+  isServerRequest,
+} from "./server/request-target.mjs";
 import { SERVER_OPTIONS } from "./server/proxy-transfers.mjs";
 import {
   createInertiaPage,
@@ -74,10 +78,12 @@ import {
   isFrontendVisit,
   redirectFrontendVisit,
   handleAssetVersionMismatch,
+  isSsrPage,
 } from "./server/inertia.mjs";
 export * from "./server/inertia.mjs";
 
 /** @typedef {import("node:http").IncomingMessage} IncomingMessage */
+/** @typedef {import("./server/request-target.mjs").ServerRequest} ServerRequest */
 /** @typedef {import("node:http").ServerResponse} ServerResponse */
 /** @typedef {import("vite").ViteDevServer} ViteDevServer */
 /** @typedef {import("./server/inertia.mjs").InertiaPage} InertiaPage */
@@ -86,6 +92,12 @@ export * from "./server/inertia.mjs";
 const INERTIA_HEADER = "x-inertia";
 const JSON_TYPE = "application/json";
 const PROJECT_ROOT = fileURLToPath(new URL(".", import.meta.url));
+/**
+ * @type {[
+ *   (pathname: string) => boolean,
+ *   (request: ServerRequest, response: ServerResponse) => Promise<void>
+ * ][]}
+ */
 const LOCAL_ROUTES = [[icons.isIconRequest, icons.handleIcons]];
 const CLIENT_ROOT = join(PROJECT_ROOT, "dist/client");
 const SOURCE_TEMPLATE_PATH = join(PROJECT_ROOT, "index.html");
@@ -97,7 +109,9 @@ const SOURCE_TEMPLATE_PATH = join(PROJECT_ROOT, "index.html");
  * NODE_ENV=production throws a ReferenceError on the first render.
  */
 function defineVueCompileFlags() {
-  globalThis.__VUE_PROD_DEVTOOLS__ ??= false;
+  /** @type {typeof globalThis & { __VUE_PROD_DEVTOOLS__?: boolean }} */
+  const vueGlobals = globalThis;
+  vueGlobals.__VUE_PROD_DEVTOOLS__ ??= false;
 }
 
 defineVueCompileFlags();
@@ -145,7 +159,7 @@ async function currentAuth() {
 }
 
 /**
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @returns {import("./server/page-props.mjs").PageBackend}
  */
 function pageBackend(request) {
@@ -159,7 +173,7 @@ function pageBackend(request) {
 }
 
 /**
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @param {import("./server/page-props.mjs").PageAuth} auth
  */
 function pageProps(request, auth) {
@@ -207,6 +221,8 @@ function clientRenderedShell(page) {
 async function serverRendered(page, serverFetch, requestCookies, devServer) {
   try {
     const renderer = await ssrRenderer(devServer);
+    if (!isSsrPage(page))
+      throw new TypeError("The page has no path and no page props to render");
     return await renderer.renderDmsPage(page, serverFetch, requestCookies);
   } catch (error) {
     console.error(
@@ -222,7 +238,7 @@ async function serverRendered(page, serverFetch, requestCookies, devServer) {
  * renders the page from the shell instead.
  *
  * @param {InertiaPage} page
- * @param {string | undefined} requestUrl
+ * @param {string} requestUrl
  * @param {ServerReads} serverFetch
  * @param {string | undefined} requestCookies
  * @param {{ ssr?: false }} [options]
@@ -271,7 +287,7 @@ export async function renderHtml(
 
 /**
  * @param {InertiaPage} page
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @param {Pick<import("./server/route-rules.mjs").RouteRule, "ssr">} [rule]
  * @param {ServerReads} [reads]
  */
@@ -287,7 +303,7 @@ function renderRequestHtml(page, request, rule = {}, reads) {
  * see `renderInPlace`.
  *
  * @param {InertiaPage} page
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @param {import("./server/route-rules.mjs").MergedRouteRule} rule
  * @param {import("./server/page-props.mjs").PageAuth} auth
  */
@@ -304,7 +320,7 @@ function renderDocument(page, request, rule, auth) {
 
 /**
  * @param {unknown} error
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @param {ServerResponse} response
  */
 async function writeBackendError(error, request, response) {
@@ -422,7 +438,7 @@ function writeNotFound(response) {
 }
 
 /**
- * @param {IncomingMessage} request
+ * @param {ServerRequest} request
  * @param {ServerResponse} response
  */
 export async function handleRequest(request, response) {
@@ -488,6 +504,8 @@ export async function handleRequest(request, response) {
  */
 async function writeRequestFailure(error, request, response) {
   if (requestFailure.isResponseGone(error, response)) return;
+  if (!isServerRequest(request))
+    return requestFailure.abandonResponse(error, response);
   if (
     error instanceof BackendResponseError &&
     error.status === 401 &&
@@ -513,7 +531,10 @@ async function writeRequestFailure(error, request, response) {
  */
 export async function handleRequestSafely(request, response) {
   try {
-    if (refuseForeignTarget(request, response)) return;
+    if (!hasOriginFormTarget(request)) {
+      requestFailure.writeBadRequest(response);
+      return;
+    }
     await handleRequest(request, response);
   } catch (error) {
     await writeRequestFailure(error, request, response).catch(
@@ -528,26 +549,26 @@ if (
   import.meta.url === new URL(`file://${process.argv[1]}`).href
 ) {
   frontendHttpServer = createServer(SERVER_OPTIONS, handleRequestSafely);
-  frontendHttpServer.on("clientError", (error, socket) =>
+  const server = frontendHttpServer;
+  server.on("clientError", (error, socket) =>
     handleClientError(error, socket, maxHeaderSize),
   );
   const port = Number(process.env.PORT ?? 3001);
   const host = listenHost();
   /** @param {NodeJS.ErrnoException} error */
   const onListenError = (error) => void reportListenError(error, host, port);
-  frontendHttpServer.once("error", onListenError);
-  frontendHttpServer.listen(port, host, () => {
-    frontendHttpServer.off("error", onListenError);
+  server.once("error", onListenError);
+  server.listen(port, host, () => {
+    server.off("error", onListenError);
     void announceReady();
   });
 }
 
 /** Prints who owns which paths, once the server is up. */
-async function reportRouting() {
+async function reportServerModules() {
   try {
     const modules = await loadServerModules(await developmentServer());
-    for (const line of routingReport(modules.proxies, modules.routes.length))
-      console.log(line);
+    reportRouting(routingReport(modules.proxies, modules.routes.length));
   } catch (error) {
     console.error("DMS server modules failed to load", error);
   }
@@ -568,11 +589,11 @@ async function announceReady() {
     await reportStartError(error);
     return;
   }
-  const listening = frontendHttpServer.address();
-  if (listening === null || isString(listening))
+  const listening = frontendHttpServer?.address();
+  if (!listening || isString(listening))
     throw new TypeError("The DMS server is not listening on a port");
   const { address, port } = listening;
   await reportReady(address, port);
-  await reportRouting();
+  await reportServerModules();
   if (process.env.DMS_DEV === "true") watchEmailBundle();
 }

package/templates/vue/ui-inertia-page.mjs

@@ -13,7 +13,7 @@ const ANY_INERTIA_PAGE_IMPORT =
  *   name: string,
  *   enforce: "pre",
  *   transform: (
- *     this: import("vite").Rollup.TransformPluginContext,
+ *     this: Pick<import("vite").Rollup.TransformPluginContext, "error">,
  *     code: string,
  *     id: string,
  *   ) => { code: string, map: null } | null,

package/templates/vue/vite.config.ts

@@ -11,6 +11,7 @@ import {
 } from "vite";
 import { clientCodeSplitting, onBuildLog } from "./client-chunking.mjs";
 import { recordEntryWeight } from "./entry-weight.mjs";
+import { rejectBackendSources } from "./backend-boundary.mjs";
 import { rejectServerSourcesInClient } from "./client-server-guard.mjs";
 import { uiInertiaPage } from "./ui-inertia-page.mjs";
 import { uiKbd } from "./ui-kbd.mjs";
@@ -29,6 +30,7 @@ interface FrontendModuleRegistryEntry {
   id: string;
   name?: string;
   packageName?: string;
+  backendPackage?: string;
   root: string;
   priority: number;
 }
@@ -45,6 +47,9 @@ const registry = JSON.parse(
   readFileSync(registryPath, "utf8"),
 ) as FrontendModuleRegistry;
 const moduleRoots = registry.modules.map((module) => module.root);
+const backendPackages = registry.modules.flatMap((module) =>
+  module.backendPackage === undefined ? [] : [module.backendPackage],
+);
 const frontendSourceRoots = moduleRoots.flatMap((root) => {
   const layersRoot = resolve(root, "layers");
   if (!existsSync(layersRoot)) return [root];
@@ -175,6 +180,9 @@ export default defineConfig({
     // Fails a client build that imports a dms.server.ts or a file under a
     // module's server/ directory, however it is imported.
     rejectServerSourcesInClient(moduleRoots),
+    // Fails a build, a worker build or a dev request that resolves a file
+    // under the src of the package that ships a module.
+    rejectBackendSources(backendPackages),
     // What each module adds to the client entry, which `ajs dms build` reports.
     recordEntryWeight(registry.modules),
     {
@@ -267,6 +275,7 @@ export default defineConfig({
     paintBeforeHydrate(),
     ...vitePlugins(registry.modules, frontendBuilds),
   ],
+  worker: { plugins: () => vitePlugins(registry.modules, frontendBuilds) },
   resolve: {
     // `@iconify/vue` keeps its API providers in module state: `main.ts` and
     // Nuxt UI's `Icon` must share one copy for the same-origin provider to apply.