@antelopejs/dms-frontend 0.3.7 → 0.3.9

package/templates/vue/server/cli-report.mjs

@@ -0,0 +1,91 @@
+// What the server tells whoever started it. Started by `ajs dms dev` or
+// `ajs dms start`, it reports over IPC and the CLI words what the user reads.
+// Started on its own, it prints the line itself.
+
+import { resolve } from "node:path";
+
+const WILDCARD_ADDRESSES = ["0.0.0.0", "::"];
+
+async function report(message, line, write) {
+  if (!process.send) return write(line);
+  await new Promise((sent) => process.send(message, () => sent()));
+}
+
+/** The server answers at `address`:`port`. */
+export async function reportReady(address, port) {
+  const host = WILDCARD_ADDRESSES.includes(address)
+    ? "localhost"
+    : address.includes(":")
+      ? `[${address}]`
+      : address;
+  await report(
+    { type: "dms:ready", address, port },
+    `✓ Server ready on http://${host}:${port}`,
+    console.log,
+  );
+}
+
+/**
+ * The server cannot listen: a port taken by another process, an address this
+ * host does not have. Reported instead of Node's unhandled-error dump, then
+ * the server exits.
+ */
+export async function reportListenError(error, host, port) {
+  await report(
+    {
+      type: "dms:listen-error",
+      code: error.code,
+      message: error.message,
+      host,
+      port,
+    },
+    `DMS server cannot listen on ${host}:${port}: ${error.message}`,
+    console.error,
+  );
+  process.exit(1);
+}
+
+/**
+ * Where a startup error points, when it says: esbuild's location for a config
+ * it could not bundle, Rollup's for a plugin that failed on a file.
+ */
+function errorLocation(error) {
+  const location = error?.errors?.[0]?.location;
+  if (location?.file) {
+    return {
+      file: resolve(location.file),
+      line: location.line,
+      column: location.column,
+      lineText: location.lineText,
+    };
+  }
+  const file = error?.loc?.file ?? error?.id;
+  if (typeof file !== "string") return undefined;
+  return { file, line: error.loc?.line, column: error.loc?.column };
+}
+
+/** The first line of what went wrong, without esbuild's error count. */
+function errorText(error) {
+  const text = error?.errors?.[0]?.text;
+  if (typeof text === "string") return text;
+  const message = error instanceof Error ? error.message : String(error);
+  return message.split(/\r?\n/)[0];
+}
+
+/**
+ * Vite could not start, so no page can be served: the error and where it
+ * points instead of a stack trace, then the server exits.
+ */
+export async function reportStartError(error) {
+  const message = errorText(error);
+  const location = errorLocation(error);
+  const where = location
+    ? `${location.file}${location.line ? `:${location.line}:${location.column ?? 0}` : ""}: `
+    : "";
+  await report(
+    { type: "dms:start-error", message, code: error?.code, location },
+    `DMS development server failed to start: ${where}${message}`,
+    console.error,
+  );
+  process.exit(1);
+}

package/templates/vue/server.mjs

@@ -20,6 +20,11 @@ import {
   UNEXPECTED_ERROR_BODY,
 } from "./server/backend-response.mjs";
 import { handleClientError } from "./server/client-error.mjs";
+import {
+  reportListenError,
+  reportReady,
+  reportStartError,
+} from "./server/cli-report.mjs";
 import { productionHtmlTemplate } from "./server/client-manifest.mjs";
 import { writeContent } from "./server/content.mjs";
 import {
@@ -401,6 +406,22 @@ async function answeredByVite(devServer, request, response) {
   return result.status !== "unhandled";
 }
 
+/**
+ * Vite's own URLs (`/@vite/client`, `/@id/…`, `/@fs/…`) and paths with an
+ * extension name files: modules, stylesheets, fonts, images, built assets.
+ * The backend's routes outside `/api` and `/dms` are mostly the paths of the
+ * pages they serve data for, which have none (`/<page>/pagelayout`).
+ */
+function isFilePath(pathname) {
+  return pathname.startsWith("/@") || extname(pathname) !== "";
+}
+
+/** Vite's files in development, the build's in production. */
+async function answeredWithFile(devServer, request, response, pathname) {
+  if (!devServer) return serveAsset(pathname, request, response);
+  return pathname !== "/" && answeredByVite(devServer, request, response);
+}
+
 export async function handleRequest(request, response) {
   const url = new URL(request.url, "http://frontend.local");
   const pathname = url.pathname;
@@ -421,13 +442,18 @@ export async function handleRequest(request, response) {
     return proxy(request, response);
   if (requestFailure.hasMalformedPath(request.url))
     return requestFailure.writeBadRequest(response);
-  if (!isFrontendVisit(request) && (await proxy(request, response, true)))
-    return;
   const devServer = await developmentServer();
-  if (devServer && pathname !== "/") {
-    if (await answeredByVite(devServer, request, response)) return;
-  }
-  if (!devServer && serveAsset(pathname, request, response)) return;
+  const visit = isFrontendVisit(request);
+  // A file is looked for among the frontend's own before the backend is asked
+  // for it: asking first cost a backend round trip for each of the hundreds of
+  // modules a development page loads, and for each built asset. A file the
+  // frontend does not have, a media file, is still the backend's.
+  const fileFirst = !visit && isFilePath(pathname);
+  const serveFile = () =>
+    answeredWithFile(devServer, request, response, pathname);
+  if (fileFirst && (await serveFile())) return;
+  if (!visit && (await proxy(request, response, true))) return;
+  if (!fileFirst && (await serveFile())) return;
   if (handleAssetVersionMismatch(request, response)) return;
   if (redirectToHomepage(request, response, pathname)) return;
   const props = await pageProps(request);
@@ -493,32 +519,30 @@ if (
   frontendHttpServer.on("clientError", (error, socket) =>
     handleClientError(error, socket, maxHeaderSize),
   );
-  frontendHttpServer.listen(
-    Number(process.env.PORT ?? 3001),
-    process.env.HOST ?? "0.0.0.0",
-    announceReady,
-  );
+  const port = Number(process.env.PORT ?? 3001);
+  const host = process.env.HOST ?? "0.0.0.0";
+  const onListenError = (error) => void reportListenError(error, host, port);
+  frontendHttpServer.once("error", onListenError);
+  frontendHttpServer.listen(port, host, () => {
+    frontendHttpServer.off("error", onListenError);
+    void announceReady();
+  });
 }
 
 /**
- * Print the line the CLI's "Starting … server" announcement waits for. In
- * development Vite would otherwise start with the first request, so it is
- * started here: "ready" then means the first page is served without that wait.
+ * Report the server ready. In development Vite would otherwise start with the
+ * first request, so it is started here: "ready" then means the first page is
+ * served without that wait.
  */
 async function announceReady() {
   try {
     await developmentServer();
   } catch (error) {
-    console.error("DMS development server failed to start", error);
+    await reportStartError(error);
     return;
   }
   const { address, port } = frontendHttpServer.address();
-  const host = ["0.0.0.0", "::"].includes(address)
-    ? "localhost"
-    : address.includes(":")
-      ? `[${address}]`
-      : address;
-  console.log(`✓ Server ready on http://${host}:${port}`);
+  await reportReady(address, port);
   // Only the production build produces the email bundle otherwise. Started
   // once the server answers, so it never delays the first page.
   if (process.env.DMS_DEV === "true") watchEmailBundle();

package/templates/vue/vite.config.ts

@@ -2,7 +2,7 @@ import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { basename, resolve } from "node:path";
 import ui from "@nuxt/ui/vite";
 import vue from "@vitejs/plugin-vue";
-import { defineConfig, normalizePath, type Plugin } from "vite";
+import { defineConfig, type LogLevel, normalizePath, type Plugin } from "vite";
 import { orderHeadForFirstPaint } from "./head-order.mjs";
 import { iconScanGlobs } from "./icon-scan.mjs";
 
@@ -117,7 +117,14 @@ const uiInertiaLinkImport = resolve(
   "node_modules/@nuxt/ui/dist/runtime/vue/overrides/inertia/Link.vue",
 );
 
+/**
+ * `ajs dms build` runs Vite at "warn" and reports the steps itself; a verbose
+ * run, `dev` and a hand-run build keep Vite's own output.
+ */
+const logLevel = (process.env.DMS_VITE_LOG_LEVEL ?? "info") as LogLevel;
+
 export default defineConfig({
+  logLevel,
   plugins: [
     {
       name: "dms-ui-inertia-link",

package/templates/vue/vite.email.config.ts

@@ -2,7 +2,7 @@ import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { basename, resolve } from "node:path";
 import vue from "@vitejs/plugin-vue";
 import AutoImport from "unplugin-auto-import/vite";
-import { defineConfig, normalizePath } from "vite";
+import { defineConfig, type LogLevel, normalizePath } from "vite";
 
 interface FrontendModuleRegistryEntry {
   id: string;
@@ -33,7 +33,11 @@ const stableModuleAliases = Object.fromEntries(
   }),
 );
 
+/** Set by `ajs dms build`, as in vite.config.ts. */
+const logLevel = (process.env.DMS_VITE_LOG_LEVEL ?? "info") as LogLevel;
+
 export default defineConfig({
+  logLevel,
   plugins: [
     {
       name: "dms-email-locale-assets",

package/dist/utils/cli-ui.d.ts

@@ -1,27 +0,0 @@
-import { type Options as BoxenOptions } from "boxen";
-export declare class Spinner {
-    private text;
-    private isRunning;
-    private interval?;
-    private currentCharIndex;
-    private isTerminal;
-    constructor(text: string);
-    start(text?: string): Promise<Spinner>;
-    update(text: string): Spinner;
-    log(stream: NodeJS.WriteStream, message: string): Spinner;
-    succeed(text?: string): Promise<void>;
-    fail(text?: string): Promise<void>;
-    info(text?: string): Promise<void>;
-    warn(text?: string): Promise<void>;
-    pause(): Promise<void>;
-    stop(): Promise<void>;
-    clear(): Promise<void>;
-}
-export declare function displayBox(message: string, title?: string, options?: BoxenOptions): void;
-export declare function displayBanner(text: string, font?: string): void;
-export declare function success(message: string): void;
-export declare function error(message: string): void;
-export declare function warning(message: string): void;
-export declare function info(message: string): void;
-export declare function header(text: string): void;
-export declare function keyValue(key: string, value: string | number | boolean): string;

package/dist/utils/cli-ui.js

@@ -1,178 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-exports.displayBox = displayBox;
-exports.displayBanner = displayBanner;
-exports.success = success;
-exports.error = error;
-exports.warning = warning;
-exports.info = info;
-exports.header = header;
-exports.keyValue = keyValue;
-const boxen_1 = __importDefault(require("boxen"));
-const chalk_1 = __importDefault(require("chalk"));
-const figlet_1 = __importDefault(require("figlet"));
-const clearLine = () => process.stdout.write("\r\x1b[K");
-const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const SPINNER_INTERVAL_MS = 80;
-function isTerminalOutput() {
-    return process.stdout.isTTY ?? false;
-}
-class Spinner {
-    constructor(text) {
-        this.isRunning = false;
-        this.currentCharIndex = 0;
-        this.isTerminal = isTerminalOutput();
-        this.text = text;
-    }
-    async start(text) {
-        if (text) {
-            this.text = text;
-        }
-        if (this.isRunning) {
-            return this;
-        }
-        this.isRunning = true;
-        this.currentCharIndex = 0;
-        if (!this.isTerminal) {
-            console.log(`  ${this.text}`);
-            return this;
-        }
-        this.interval = setInterval(() => {
-            if (this.isRunning) {
-                const spinnerChar = spinnerChars[this.currentCharIndex];
-                process.stdout.write(`\r${chalk_1.default.cyan(spinnerChar)} ${this.text}`);
-                this.currentCharIndex =
-                    (this.currentCharIndex + 1) % spinnerChars.length;
-            }
-        }, SPINNER_INTERVAL_MS);
-        return this;
-    }
-    update(text) {
-        this.text = text;
-        return this;
-    }
-    log(stream, message) {
-        if (this.isRunning && this.isTerminal) {
-            clearLine();
-            stream.write(`${message}\n`);
-            const spinnerChar = spinnerChars[this.currentCharIndex];
-            process.stdout.write(`${chalk_1.default.cyan(spinnerChar)} ${this.text}`);
-        }
-        else {
-            stream.write(`${message}\n`);
-        }
-        return this;
-    }
-    async succeed(text) {
-        if (!this.isRunning)
-            return;
-        await this.stop();
-        const message = text || this.text;
-        if (this.isTerminal) {
-            process.stdout.write(`\r${chalk_1.default.bold.green("✓")} ${message}\n`);
-        }
-        else {
-            console.log(`✓ ${message}`);
-        }
-    }
-    async fail(text) {
-        if (!this.isRunning)
-            return;
-        await this.stop();
-        const message = text || this.text;
-        if (this.isTerminal) {
-            process.stdout.write(`\r${chalk_1.default.bold.red("✗")} ${chalk_1.default.red(message)}\n`);
-        }
-        else {
-            console.log(`✗ ${message}`);
-        }
-    }
-    async info(text) {
-        if (!this.isRunning)
-            return;
-        await this.stop();
-        const message = text || this.text;
-        if (this.isTerminal) {
-            process.stdout.write(`\r${chalk_1.default.bold.blue("ℹ")} ${message}\n`);
-        }
-        else {
-            console.log(`ℹ ${message}`);
-        }
-    }
-    async warn(text) {
-        if (!this.isRunning)
-            return;
-        await this.stop();
-        const message = text || this.text;
-        if (this.isTerminal) {
-            process.stdout.write(`\r${chalk_1.default.bold.yellow("⚠")} ${message}\n`);
-        }
-        else {
-            console.log(`⚠ ${message}`);
-        }
-    }
-    async pause() {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = undefined;
-        }
-        if (this.isTerminal) {
-            clearLine();
-        }
-    }
-    async stop() {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = undefined;
-        }
-        this.isRunning = false;
-        if (this.isTerminal) {
-            clearLine();
-        }
-    }
-    async clear() {
-        await this.stop();
-    }
-}
-exports.Spinner = Spinner;
-function displayBox(message, title, options) {
-    const defaultOptions = {
-        padding: 1,
-        margin: 1,
-        borderStyle: "round",
-        borderColor: "blue",
-        title: title,
-        titleAlignment: "center",
-    };
-    console.log((0, boxen_1.default)(message, { ...defaultOptions, ...options }));
-}
-function displayBanner(text, font) {
-    const figletText = figlet_1.default.textSync(text, {
-        font: (font || "Standard"),
-    });
-    console.log(chalk_1.default.blue(figletText));
-}
-function success(message) {
-    console.log(`${chalk_1.default.green.bold("✓")} ${message}`);
-}
-function error(message) {
-    console.log(`${chalk_1.default.red.bold("✗")} ${chalk_1.default.red(message)}`);
-}
-function warning(message) {
-    console.log(`${chalk_1.default.yellow.bold("⚠")} ${chalk_1.default.yellow(message)}`);
-}
-function info(message) {
-    console.log(`${chalk_1.default.blue.bold("ℹ")} ${message}`);
-}
-function header(text) {
-    console.log("");
-    console.log(chalk_1.default.bold.blue(text));
-    console.log(chalk_1.default.blue("─".repeat(text.length)));
-}
-function keyValue(key, value) {
-    return `${chalk_1.default.cyan(key)}: ${value}`;
-}