@antelopejs/dms-frontend 0.6.1 → 0.6.3

package/templates/vue/server/proxy-headers.mjs

@@ -11,8 +11,28 @@ const HOP_BY_HOP_HEADERS = [
   "upgrade",
 ];
 
-/** Writes the backend's status and end-to-end headers on `response`. */
-export function writeProxyHeaders(response, upstream) {
+/** `Accept-Encoding` added to the backend's own `Vary`, once. */
+function varyWithEncoding(vary) {
+  const names = (vary ?? "")
+    .split(",")
+    .map((name) => name.trim())
+    .filter(Boolean);
+  if (names.some((name) => name === "*" || /^accept-encoding$/i.test(name)))
+    return names.join(", ");
+  return [...names, "Accept-Encoding"].join(", ");
+}
+
+/**
+ * Writes the backend's status and end-to-end headers on `response`. With an
+ * `encoding`, the proxy compresses the body itself: its length is no longer
+ * known, and a strong validator no longer names these bytes.
+ */
+export function writeProxyHeaders(
+  response,
+  upstream,
+  encoding,
+  varies = false,
+) {
   const headers = Object.fromEntries(upstream.headers);
   const named = (headers.connection ?? "")
     .split(",")
@@ -21,5 +41,12 @@ export function writeProxyHeaders(response, upstream) {
   delete headers["set-cookie"];
   const cookies = upstream.headers.getSetCookie?.() ?? [];
   if (cookies.length) headers["set-cookie"] = cookies;
+  if (encoding || varies) headers.vary = varyWithEncoding(headers.vary);
+  if (encoding) {
+    delete headers["content-length"];
+    headers["content-encoding"] = encoding;
+    if (headers.etag && !headers.etag.startsWith("W/"))
+      headers.etag = `W/${headers.etag}`;
+  }
   response.writeHead(upstream.status, headers);
 }

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

@@ -0,0 +1,109 @@
+import { createReadStream, existsSync, statSync } from "node:fs";
+import { extname } from "node:path";
+
+// What a build or a module's `public/` directory may hold. A type missing
+// here went out as `application/octet-stream`: fonts among them, which a
+// browser then reports as a mismatch against the `font/woff2` it preloaded.
+const MIME_TYPES = {
+  ".avif": "image/avif",
+  ".css": "text/css",
+  ".gif": "image/gif",
+  ".html": "text/html; charset=utf-8",
+  ".ico": "image/x-icon",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript",
+  ".json": "application/json",
+  ".map": "application/json",
+  ".mjs": "text/javascript",
+  ".mp4": "video/mp4",
+  ".otf": "font/otf",
+  ".pdf": "application/pdf",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".ttf": "font/ttf",
+  ".txt": "text/plain; charset=utf-8",
+  ".wasm": "application/wasm",
+  ".webm": "video/webm",
+  ".webmanifest": "application/manifest+json",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".xml": "application/xml",
+};
+const DEFAULT_MIME_TYPE = "application/octet-stream";
+// Vite names everything under `assets/` after its content: a new build
+// writes new names, so a client never needs to ask again.
+const IMMUTABLE_CACHE = "public, max-age=31536000, immutable";
+// Any other file keeps its name across builds (a module's `public/` file,
+// a favicon): the client asks again on each use, and is answered 304 while
+// it has not changed.
+const REVALIDATED_CACHE = "no-cache";
+
+const isFile = (path) => existsSync(path) && statSync(path).isFile();
+
+/** The precompressed variant of `file` the client accepts, if the build wrote one. */
+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 };
+}
+
+/**
+ * Weak, as the bytes of one representation are not compared: the size and
+ * modification time of the file sent, so each encoding has its own.
+ */
+function entityTag(stats) {
+  return `W/"${stats.size.toString(16)}-${Math.floor(stats.mtimeMs).toString(16)}"`;
+}
+
+const opaqueTag = (tag) => tag.trim().replace(/^W\//, "");
+
+/** RFC 9110 §13.1.2 and §13.1.3: `If-None-Match` first, the date otherwise. */
+function isNotModified(request, tag, stats) {
+  const noneMatch = request.headers["if-none-match"];
+  if (noneMatch !== undefined) {
+    if (noneMatch.trim() === "*") return true;
+    const wanted = opaqueTag(tag);
+    return noneMatch
+      .split(",")
+      .some((candidate) => opaqueTag(candidate) === wanted);
+  }
+  const since = Date.parse(request.headers["if-modified-since"] ?? "");
+  // The header has a one-second resolution.
+  return (
+    !Number.isNaN(since) && Math.floor(stats.mtimeMs / 1000) * 1000 <= since
+  );
+}
+
+/**
+ * Send `file`, a file the caller already resolved and checked (see
+ * `publicBuildFile`), as the variant the client accepts, or answer 304 when the
+ * client's copy is current. `immutable` for a file named after its content.
+ */
+export function serveStaticFile(file, request, response, { immutable }) {
+  const selected = acceptedVariant(file, request);
+  const stats = statSync(selected.file);
+  const tag = entityTag(stats);
+  const headers = {
+    "cache-control": immutable ? IMMUTABLE_CACHE : REVALIDATED_CACHE,
+    etag: tag,
+    "last-modified": stats.mtime.toUTCString(),
+    vary: "Accept-Encoding",
+  };
+  if (isNotModified(request, tag, stats)) {
+    response.writeHead(304, headers);
+    response.end();
+    return;
+  }
+  headers["content-type"] =
+    MIME_TYPES[extname(file).toLowerCase()] ?? DEFAULT_MIME_TYPE;
+  headers["content-length"] = stats.size;
+  if (selected.encoding) headers["content-encoding"] = selected.encoding;
+  response.writeHead(200, headers);
+  if (request.method === "HEAD") response.end();
+  else createReadStream(selected.file).pipe(response);
+}

package/templates/vue/server.mjs

@@ -1,8 +1,6 @@
-import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
+import { existsSync, readFileSync, statSync } from "node:fs";
 import { createServer, maxHeaderSize } from "node:http";
 import { extname, join, resolve, sep } from "node:path";
-import { Readable } from "node:stream";
-import { pipeline } from "node:stream/promises";
 import { fileURLToPath } from "node:url";
 import { ofetch } from "ofetch";
 import {
@@ -25,6 +23,8 @@ import {
   reportReady,
   reportStartError,
 } from "./server/cli-report.mjs";
+import { publicBuildFile } from "./server/built-files.mjs";
+import { serveStaticFile } from "./server/static-files.mjs";
 import { productionHtmlTemplate } from "./server/client-manifest.mjs";
 import { writeContent } from "./server/content.mjs";
 import {
@@ -49,7 +49,10 @@ import { htmlTag } from "./server/html-tag.mjs";
 import { listenHost } from "./server/listen-host.mjs";
 import * as icons from "./server/icons.mjs";
 import * as requestFailure from "./server/request-failure.mjs";
-import { writeProxyHeaders } from "./server/proxy-headers.mjs";
+import {
+  PLAIN_ANSWER_HEADERS,
+  relayAnswer,
+} from "./server/proxy-compression.mjs";
 import { backendUrl, refuseForeignTarget } from "./server/request-target.mjs";
 import {
   createInertiaPage,
@@ -65,13 +68,9 @@ export * from "./server/inertia.mjs";
 const INERTIA_HEADER = "x-inertia";
 const JSON_TYPE = "application/json";
 const PROJECT_ROOT = fileURLToPath(new URL(".", import.meta.url));
-const MIME_TYPES = {
-  ".css": "text/css",
-  ".js": "text/javascript",
-  ".svg": "image/svg+xml",
-};
 const SAFE_METHODS = new Set(["GET", "HEAD", "OPTIONS"]);
 const LOCAL_ROUTES = [[icons.isIconRequest, icons.handleIcons]];
+const CLIENT_ROOT = join(PROJECT_ROOT, "dist/client");
 const SOURCE_TEMPLATE_PATH = join(PROJECT_ROOT, "index.html");
 const BUILT_SSR_RENDERER_PATH = join(PROJECT_ROOT, "dist/ssr/ssr-renderer.js");
 // The SSR bundle keeps vue-i18n external, so Node loads its esm-bundler build,
@@ -215,48 +214,24 @@ async function proxy(request, response, backendProxy) {
   const upstream = await fetch(backendUrl(request.url), {
     signal: abandoned.signal,
     method: request.method,
-    headers: backendHeaders(request, access),
+    headers: { ...backendHeaders(request, access), ...PLAIN_ANSWER_HEADERS },
     body: ["GET", "HEAD"].includes(request.method) ? undefined : request,
     duplex: "half",
   });
-  writeProxyHeaders(response, upstream);
-  if (!upstream.body || request.method === "HEAD") response.end();
-  else await pipeline(Readable.fromWeb(upstream.body), response);
-}
-
-function acceptedAsset(pathname, request) {
-  const file = resolve(PROJECT_ROOT, "dist/client", `.${pathname}`);
-  const accepted = request.headers["accept-encoding"] ?? "";
-  if (accepted.includes("br") && existsSync(`${file}.br`))
-    return { file: `${file}.br`, encoding: "br", source: file };
-  if (accepted.includes("gzip") && existsSync(`${file}.gz`))
-    return { file: `${file}.gz`, encoding: "gzip", source: file };
-  return { file, encoding: undefined, source: file };
+  await relayAnswer(request, response, upstream, { fetched: true });
 }
 
+/**
+ * Send the built file `pathname` names, or `false` when the build has none
+ * there. `publicBuildFile` decides which file that is; `serveStaticFile` how
+ * it goes out.
+ */
 function serveAsset(pathname, request, response) {
-  const selected = acceptedAsset(pathname, request);
-  // Native separator: `selected.source` comes from `resolve`, so a hardcoded
-  // `/` here would make the containment check fail for every asset on Windows.
-  const assetRoot = `${resolve(PROJECT_ROOT, "dist/client")}${sep}`;
-  if (
-    !selected.source.startsWith(assetRoot) ||
-    !existsSync(selected.file) ||
-    !statSync(selected.file).isFile()
-  )
-    return false;
-  const headers = {
-    "cache-control": pathname.startsWith("/assets/")
-      ? "public, max-age=31536000, immutable"
-      : "no-cache",
-    "content-type":
-      MIME_TYPES[extname(selected.source)] ?? "application/octet-stream",
-    "content-length": statSync(selected.file).size,
-    vary: "Accept-Encoding",
-  };
-  if (selected.encoding) headers["content-encoding"] = selected.encoding;
-  response.writeHead(200, headers);
-  createReadStream(selected.file).pipe(response);
+  const file = publicBuildFile(CLIENT_ROOT, pathname);
+  if (!file) return false;
+  serveStaticFile(file, request, response, {
+    immutable: pathname.startsWith("/assets/"),
+  });
   return true;
 }
 
@@ -391,8 +366,8 @@ async function answeredByVite(devServer, request, response) {
 
 /**
  * Whether the renderer has a file at `pathname`: a development source Vite
- * serves (under the workspace or its `public/`), or a built asset. Only a
- * path with an extension names one.
+ * serves (under the workspace or its `public/`), or a built asset the
+ * production server serves. Only a path with an extension names one.
  */
 function hasRendererFile(devServer, requested) {
   let pathname;
@@ -403,9 +378,10 @@ function hasRendererFile(devServer, requested) {
     return false;
   }
   if (extname(pathname) === "") return false;
-  const roots = devServer
-    ? [devServer.config.root, devServer.config.publicDir].filter(Boolean)
-    : [join(PROJECT_ROOT, "dist/client")];
+  if (!devServer) return publicBuildFile(CLIENT_ROOT, requested) !== undefined;
+  const roots = [devServer.config.root, devServer.config.publicDir].filter(
+    Boolean,
+  );
   return roots.some((root) => {
     const file = resolve(root, `.${pathname}`);
     return (

package/templates/vue/ui-request-state.mjs

@@ -0,0 +1,53 @@
+// Nuxt UI's `useState` outside Nuxt keeps its state in one object for the
+// whole module: on a server, for the whole process. A toast one render adds
+// (`useToast()` keeps its list there) would then show in every later render,
+// whoever asks for the page, until the server restarts. Nuxt UI's stub keeps
+// its state in the DMS's per-application state instead, as Nuxt's own
+// `useState` does, and the build fails if the stub changes form or another
+// Nuxt UI file defines `useState`, rather than letting the leak come back
+// unnoticed with a Nuxt UI release.
+
+/** Nuxt UI's stub of Nuxt's composables, which defines `useState`. */
+const STUB = /\/@nuxt\/ui\/dist\/runtime\/vue\/stubs\/base\.js$/;
+/** `useState` as Nuxt UI 4 defines it: a module-wide record of refs. */
+const MODULE_STATE =
+  /const state = \{\};\s*export const useState = \(key, init\) => \{\s*if \(state\[key\]\) \{\s*return state\[key\];\s*\}\s*const value = ref\(init\(\)\);\s*state\[key\] = value;\s*return value;\s*\};/;
+/** A definition of `useState`, wherever Nuxt UI moves it. */
+const DEFINES_USE_STATE = /export\s+(?:const|function|let|var)\s+useState\b/;
+const APPLICATION_STATE =
+  'import { useDmsState } from "#dms/frontend-module";\n' +
+  "export const useState = (key, init) => useDmsState(`nuxt-ui:${key}`, init);";
+
+/**
+ * The rewrite, as a Vite plugin.
+ *
+ * @param isNuxtUiFile `(id) => boolean`, whether a module is Nuxt UI's
+ */
+export function uiRequestState(isNuxtUiFile) {
+  return {
+    name: "dms-ui-request-state",
+    enforce: "pre",
+    transform(code, id) {
+      const path = id.replaceAll("\\", "/").split("?")[0];
+      if (!isNuxtUiFile(id)) return null;
+      if (!STUB.test(path)) {
+        if (DEFINES_USE_STATE.test(code))
+          this.error(
+            `${id} defines useState outside the stub the DMS rewrites: a ` +
+              "server render could show another request's state. Update " +
+              "ui-request-state.mjs for this Nuxt UI release.",
+          );
+        return null;
+      }
+      if (!MODULE_STATE.test(code)) {
+        if (!code.includes("useState")) return null;
+        this.error(
+          `${id} defines useState in a form the DMS does not rewrite: a ` +
+            "server render could show another request's state. Update " +
+            "ui-request-state.mjs for this Nuxt UI release.",
+        );
+      }
+      return { code: code.replace(MODULE_STATE, APPLICATION_STATE), map: null };
+    },
+  };
+}

package/templates/vue/vite.config.ts

@@ -11,6 +11,7 @@ import {
 } from "vite";
 import { rejectServerSourcesInClient } from "./client-server-guard.mjs";
 import { uiInertiaPage } from "./ui-inertia-page.mjs";
+import { uiRequestState } from "./ui-request-state.mjs";
 import { autoImportDirectories } from "./frontend-build-loader";
 import { frontendBuilds } from "./frontend-builds.generated";
 import { orderHeadForFirstPaint } from "./head-order.mjs";
@@ -64,6 +65,12 @@ const importDirectories = autoImportDirectories(
   frontendBuilds,
   (message) => logger.warn(message),
 );
+/**
+ * Dependencies pre-bundled by name. A module's own dependencies need no entry:
+ * the startup crawl below (`optimizerEntries`) finds them in its sources. A
+ * name no module installs any more only earns a "Failed to resolve
+ * dependency" warning at every start.
+ */
 const optimizedDependencies = [
   "vue",
   "@inertiajs/vue3",
@@ -73,7 +80,6 @@ const optimizedDependencies = [
   "@vueuse/core",
   "reka-ui",
   "@internationalized/date",
-  "vuedraggable",
   "vue3-apexcharts",
   "apexcharts",
   "tailwind-variants",
@@ -130,7 +136,9 @@ const uiInertiaLinkImport = resolve(
  * Inertia keeps a single page for the whole process, written by each server
  * render as it starts: a link rendered after an await could take another
  * request's URL to set its active state. Their `usePage()` is the DMS one,
- * which gives the page of the request being rendered.
+ * which gives the page of the request being rendered. Likewise, their
+ * `useState()` (the toasts among others) is the DMS's per-application state,
+ * not one record for the whole process.
  */
 const isNuxtUiFile = (id: string) =>
   normalizePath(id).includes("/node_modules/@nuxt/ui/");
@@ -149,6 +157,7 @@ export default defineConfig({
       },
     },
     uiInertiaPage(isNuxtUiFile),
+    uiRequestState(isNuxtUiFile),
     vue(),
     ui({
       router: "inertia",