@antelopejs/dms-frontend 0.9.1 → 0.9.3

package/templates/vue/app-runtime.ts

@@ -4,6 +4,7 @@ import { useToast } from "@nuxt/ui/composables/useToast";
 import { useAppConfig } from "@nuxt/ui/runtime/vue/composables/useAppConfig";
 import { en as uiEn, fr as uiFr } from "@nuxt/ui/locale";
 import ui from "@nuxt/ui/vue-plugin";
+import { router } from "@inertiajs/vue3";
 import { useHead } from "@unhead/vue";
 import type { VueHeadClient } from "@unhead/vue/types";
 import type { IconifyIcon } from "@iconify/vue";
@@ -64,7 +65,13 @@ import {
   supportedLocales,
   syncLocaleMessages,
 } from "./locales.generated";
-import { showNetworkErrors } from "./network-error";
+import {
+  type DmsMessageSubset,
+  SSR_MESSAGES_ID,
+  recordMessageReads,
+} from "./message-subset";
+import { NETWORK_ERROR_KEYS, showNetworkErrors } from "./network-error";
+import { loadIconBundle } from "./icon-bundle";
 import { createUiAppConfigMerger } from "./ui-app-config";
 
 export interface DmsInertiaSetupProps {
@@ -86,8 +93,16 @@ export interface DmsAppOptions {
 }
 
 export interface DmsConfiguredApp {
-  /** The locale of the catalog the app shows its messages from now. */
+  /**
+   * The locale of the catalog the app shows its messages from now, none when
+   * the page is served the messages it read alone.
+   */
   catalogLocale: () => string | undefined;
+  /**
+   * On the server, for a page of a visitor who is not signed in: the messages
+   * the render read, which the page carries instead of the whole catalog.
+   */
+  messageSubset: () => DmsMessageSubset | undefined;
   mounted: () => Promise<void>;
   runtime: ReturnType<typeof createDmsFrontendRuntime>;
 }
@@ -238,8 +253,18 @@ const DmsPersistentInertiaPage = Object.assign(DmsInertiaPage, {
   layout: DmsPersistentLayout,
 });
 
-export function resolveDmsInertiaPage(): Component {
-  return DmsPersistentInertiaPage;
+/**
+ * What a visit waits for before it shows its page, set when the first one
+ * starts from a page that began without what the pages after it read: a
+ * subset of the catalog, the icon bundle. Inertia also resolves the first page
+ * once the app is set up, which must not wait for it.
+ */
+let completeInitialAssets: (() => Promise<void>) | undefined;
+
+export function resolveDmsInertiaPage(): Component | Promise<Component> {
+  return completeInitialAssets
+    ? completeInitialAssets().then(() => DmsPersistentInertiaPage)
+    : DmsPersistentInertiaPage;
 }
 
 function renderDmsPage(
@@ -310,13 +335,66 @@ export async function configureDmsApp(
     userLocale(options.initialPageProps.user) ??
     readDmsLocaleCookie(runtime, supportedLocales) ??
     DEFAULT_LOCALE;
-  const messages = await loadLocaleMessages(locale);
+  const anonymous = !options.initialPageProps.user;
+  const subset = anonymous
+    ? readServerRendered<DmsMessageSubset | undefined>(
+        SSR_MESSAGES_ID,
+        undefined,
+      )
+    : undefined;
+  const started = subset?.locale === locale ? subset : undefined;
+  const messages = started?.messages ?? (await loadLocaleMessages(locale));
+  const recorder =
+    anonymous && typeof window === "undefined"
+      ? recordMessageReads(messages)
+      : undefined;
+  let loading: Promise<void> | undefined;
   const i18n = createI18n({
     legacy: false,
     locale,
     fallbackLocale: DEFAULT_LOCALE,
-    messages: { ...localeMessages, [locale]: messages },
+    messages: started
+      ? { [locale]: messages }
+      : { ...localeMessages, [locale]: recorder?.messages ?? messages },
+    ...(started && {
+      missing: (_locale: string, key: string) => {
+        if (i18n.global.locale.value !== locale) return key;
+        void loadCompleteCatalog();
+        return "";
+      },
+    }),
   });
+  function loadCompleteCatalog(): Promise<void> {
+    if (i18n.global.locale.value !== locale) return Promise.resolve();
+    loading ??= loadLocaleMessages(locale).then(
+      (complete) => {
+        i18n.global.setLocaleMessage(locale, complete);
+        i18n.global.setMissingHandler(null);
+      },
+      () => {
+        loading = undefined;
+      },
+    );
+    return loading;
+  }
+  if (anonymous && typeof window !== "undefined") {
+    const complete = async (): Promise<void> => {
+      await Promise.all([
+        started ? loadCompleteCatalog() : undefined,
+        loadIconBundle(),
+      ]);
+    };
+    router.on("before", () => {
+      completeInitialAssets = complete;
+      void complete();
+    });
+    for (const type of ["pointerdown", "keydown", "focusin", "touchstart"])
+      addEventListener(type, () => void loadIconBundle(), {
+        once: true,
+        capture: true,
+      });
+  }
+  if (recorder) for (const key of NETWORK_ERROR_KEYS) i18n.global.te(key);
   // A translation changed in a layer during development reaches the page
   // without a reload. A server render imports the new catalogs instead.
   if (typeof window !== "undefined") syncLocaleMessages(i18n.global);
@@ -339,6 +417,7 @@ export async function configureDmsApp(
   // rendered: the page, its layout, and the components the render reached.
   // Hydration then adopts the server-rendered markup instead of discarding it.
   await Promise.all([
+    anonymous ? undefined : loadIconBundle(),
     preloadDmsPage(options.initialPageProps),
     resolveDmsAsyncComponents(
       readServerRendered<string[]>(SSR_ASYNC_COMPONENTS_ID, []),
@@ -352,7 +431,9 @@ export async function configureDmsApp(
     supportedLocales,
   );
   return {
-    catalogLocale: () => catalogLocale(i18n.global.locale.value),
+    catalogLocale: () =>
+      recorder ? undefined : catalogLocale(i18n.global.locale.value),
+    messageSubset: () => recorder && { locale, messages: recorder.subset() },
     mounted,
     runtime,
   };

package/templates/vue/client-chunking.mjs

@@ -1,8 +1,3 @@
-// How the client bundle is cut into files, and what the build says about it.
-//
-// Kept beside vite.config.ts rather than inside it so the options can be
-// exercised on their own, the way head-order.mjs and client-server-guard.mjs are.
-
 /**
  * Rolldown's `output.codeSplitting` for the client build.
  *

package/templates/vue/client-server-guard.mjs

@@ -1,16 +1,3 @@
-// Keeping server code out of the browser.
-//
-// A module's `dms.server.ts` and the files under its `server/` directories run
-// in the generated server only: they read private options, sign tokens, talk
-// to the backend with its secrets. A client file that imports one of them,
-// even statically and through an alias, would ship that code in the client
-// bundle. Rollup's manifest only lists entries and dynamic imports, so a check
-// on the built output misses a static import; the guard sits in the module
-// graph instead, where every resolved file passes.
-//
-// Kept beside vite.config.ts rather than inside it so the plugin can be
-// exercised on its own, the way head-order.mjs is.
-
 import { relative, sep } from "node:path";
 
 const SERVER_ENTRY = /(?:^|[\\/])dms\.server\.[cm]?[jt]sx?$/;
@@ -47,6 +34,16 @@ export function isServerSource(id, moduleRoots) {
  * Fail a client build, and a client request in development, that loads server
  * code. Server-side rendering and the server modules build load it through
  * SSR, which the guard leaves alone.
+ *
+ * Keeps server code out of the browser. A module's `dms.server.ts` and the
+ * files under its `server/` directories run in the generated server only: they
+ * read private options, sign tokens, talk to the backend with its secrets. A
+ * client file that imports one of them, even statically and through an alias,
+ * would ship that code in the client bundle. Rollup's manifest only lists
+ * entries and dynamic imports, so a check on the built output misses a static
+ * import; the guard sits in the module graph instead, where every resolved file
+ * passes. Kept beside vite.config.ts rather than inside it so the plugin can be
+ * exercised on its own, the way head-order.mjs is.
  */
 export function rejectServerSourcesInClient(moduleRoots) {
   let ssrBuild = false;

package/templates/vue/entry-weight.mjs

@@ -1,15 +1,3 @@
-// What each frontend module adds to the client entry.
-//
-// Every page loads the entry, and everything it imports statically, before it
-// runs anything: a module's `dms.frontend.ts`, its plugins and whatever they
-// import land there, on every page of every application that loads the
-// module. The client build records, from the bundle's own metadata, how much
-// of the entry each module's sources make up; `ajs dms build` reports it and
-// warns about a module above its threshold.
-//
-// Kept beside vite.config.ts rather than inside it so the plugin can be
-// exercised on its own, the way client-chunking.mjs is.
-
 import { mkdirSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, sep } from "node:path";
 
@@ -109,6 +97,18 @@ export function attributeEntry(bundle, modules) {
  * Records, in the client build, what each frontend module adds to the entry
  * (`ENTRY_WEIGHT_FILE`). Server builds are left alone: their bundle is no
  * page's entry.
+ *
+ * What each frontend module adds to the client entry. Every page loads the
+ * entry, and everything it imports statically, before it runs anything: a
+ * module's `dms.frontend.ts`, its plugins and whatever they import land there,
+ * on every page of every application that loads the module. The client build
+ * records, from the bundle's own metadata, how much of the entry each module's
+ * sources make up; `ajs dms build` reports it and warns about a module above
+ * its threshold. Kept beside vite.config.ts rather than inside it so the plugin
+ * can be exercised on its own, the way client-chunking.mjs is.
+ *
+ * The weight is recorded once the bundle is written: plugins that generate the
+ * bundle after this one still rewrite the chunks' code.
  */
 export function recordEntryWeight(modules) {
   let ssrBuild = false;
@@ -117,8 +117,6 @@ export function recordEntryWeight(modules) {
     configResolved(config) {
       ssrBuild = Boolean(config.build.ssr);
     },
-    // Once the bundle is written: plugins that generate the bundle after this
-    // one still rewrite the chunks' code.
     writeBundle(options, bundle) {
       if (ssrBuild || !options.dir) return;
       const file = join(options.dir, ENTRY_WEIGHT_FILE);