@antelopejs/dms-frontend 0.3.7 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-frontend",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Frontend-agnostic loader for AntelopeJS DMS, shipping the Vue 3 renderer (Vite, Inertia, SSR)",
   "keywords": [
     "antelope",

package/templates/vue/frontend-module.ts

@@ -333,6 +333,11 @@ export interface DmsFrontendRuntime {
   pendingNavigation?: Promise<void>;
   hasNavigationListener: boolean;
   pageVersion: number;
+  /**
+   * Identifies the page on screen (its path, or the error page shown at that
+   * path), whose meta `route.meta` holds.
+   */
+  pageKey?: string;
   /** The `Cookie` header of the request a server runtime renders. */
   requestCookies?: string;
   /**
@@ -495,7 +500,10 @@ function parseRoute(runtime: DmsFrontendRuntime, url: string): DmsRoute {
 }
 
 function updateRoute(runtime: DmsFrontendRuntime, url: string): void {
-  Object.assign(runtime.route, parseRoute(runtime, url));
+  // The meta is the page's, not the URL's: a page declares it, then reads its
+  // route, and the middleware the meta selected must still find it.
+  const { meta: _pageMeta, ...location } = parseRoute(runtime, url);
+  Object.assign(runtime.route, location);
 }
 
 function locationToUrl(
@@ -578,16 +586,22 @@ async function visit(
 export function useDmsRoute(pattern?: string): DmsRoute {
   const runtime = useDmsRuntime();
   runtime.currentRoutePattern = pattern;
+  // A server render answers one request, whose URL the runtime was given with
+  // its page, and never changes it. Inertia's page is one ref for the whole
+  // process, written by each render as it starts: after an await it may hold
+  // another request's URL, and while the plugins set up, the previous one's.
+  if (runtime.isServer) {
+    updateRoute(runtime, runtime.route.fullPath);
+    return runtime.route;
+  }
   const page = usePage();
-  updateRoute(runtime, page.url);
-  // A server render never changes its URL, and Inertia's page is shared by
-  // every render the process runs: a watcher there would only tie this
-  // request's runtime to all the requests after it.
-  if (!runtime.isServer)
-    watch(
-      () => page.url,
-      (url) => updateRoute(runtime, url),
-    );
+  // The browser's plugins set up before Inertia has a page: until then the
+  // runtime's route is the initial page's.
+  if (page.url !== undefined) updateRoute(runtime, page.url);
+  watch(
+    () => page.url,
+    (url) => updateRoute(runtime, url),
+  );
   return runtime.route;
 }
 
@@ -1360,6 +1374,14 @@ export function getDmsLayoutProps(
 export function hydrateDmsPageProps(props: DmsPageProps, url?: string): void {
   const runtime = useDmsRuntime();
   if (url) updateRoute(runtime, url);
+  // Pages are keyed by path: another path mounts another page, which declares
+  // its own meta, and so does an error page shown in place of the page. A
+  // visit that only changes the query keeps the page, and so its meta.
+  const pageKey = props.error ? `error:${props.path}` : props.path;
+  if (pageKey !== runtime.pageKey) {
+    runtime.pageKey = pageKey;
+    runtime.route.meta = {};
+  }
   runtime.pageVersion++;
   runtime.currentError.value = null;
   useDmsState<DmsUser | null>("dms-user", () => null).value =

package/templates/vue/server.mjs

@@ -401,6 +401,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 +437,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);