@antelopejs/dms-frontend 0.9.2 → 0.10.0

package/templates/vue/ssr-renderer.ts

@@ -7,7 +7,6 @@ import { createSSRApp, h, readonly } from "vue";
 import { appConfigs } from "./app-configs.generated";
 import {
   DMS_PAYLOAD_ID,
-  type DmsServerFetch,
   SSR_ASYNC_COMPONENTS_ID,
   configureDmsApp,
   resolveDmsInertiaPage,
@@ -19,6 +18,7 @@ import {
   type DmsInertiaPage,
   type DmsPageProps,
   type DmsPayload,
+  type DmsServerFetch,
   createDmsFrontendRuntime,
   hasDmsPage,
   pageErrorData,
@@ -30,6 +30,7 @@ import {
   trackDmsServerScopes,
   withPublicOptions,
 } from "./frontend-module";
+import { type DmsMessageSubset, SSR_MESSAGES_ID } from "./message-subset";
 import { parsePublicOptions } from "./public-options";
 import { frontendModules } from "./frontend-modules.generated";
 import {
@@ -129,6 +130,12 @@ function asyncComponentsScript(names: Set<string>): string {
   return `<script id="${SSR_ASYNC_COMPONENTS_ID}" type="application/json">${value}</script>`;
 }
 
+function messagesScript(subset: DmsMessageSubset | undefined): string {
+  if (!subset) return "";
+  const value = JSON.stringify(subset).replaceAll("<", "\\u003c");
+  return `<script id="${SSR_MESSAGES_ID}" type="application/json">${value}</script>`;
+}
+
 function iconsScript(names: Set<string>): string {
   const value = JSON.stringify(serializeDmsIcons(names)).replaceAll(
     "<",
@@ -159,7 +166,7 @@ export async function renderDmsPage(
   requestCookies?: string,
 ): Promise<DmsSsrResult> {
   const runtime = createDmsFrontendRuntime(
-    serverFetch as typeof import("ofetch").ofetch,
+    serverFetch,
     {},
     true,
     requestCookies,
@@ -195,6 +202,7 @@ async function renderDmsPageWithRuntime(
     let iconSymbols = new Map<string, string>();
     let payload: DmsPayload = { data: {}, errors: {}, state: {} };
     let catalogLocale: (() => string | undefined) | undefined;
+    let messageSubset: (() => DmsMessageSubset | undefined) | undefined;
     const inertiaResult = await createInertiaApp({
       page,
       // Read as the HTML is complete: data a run settles afterwards was never
@@ -221,6 +229,7 @@ async function renderDmsPageWithRuntime(
           serverFetch,
         });
         catalogLocale = configured.catalogLocale;
+        messageSubset = configured.messageSubset;
         return app;
       },
     });
@@ -255,7 +264,7 @@ async function renderDmsPageWithRuntime(
     const renderedHead = await renderSSRHead(head);
     return {
       error: page.props.error,
-      body: `${inertiaResult.body}${dmsIconSprite(iconSymbols)}${payloadScript(payload)}${asyncComponentsScript(asyncComponents)}${iconsScript(icons)}`,
+      body: `${inertiaResult.body}${dmsIconSprite(iconSymbols)}${payloadScript(payload)}${asyncComponentsScript(asyncComponents)}${iconsScript(icons)}${messagesScript(messageSubset?.())}`,
       head: {
         bodyAttrs: renderedHead.bodyAttrs,
         headTags: `${inertiaResult.head.join("")}${renderedHead.headTags}`,

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

@@ -6,6 +6,20 @@ const DMS_PAGE_IMPORT =
 const ANY_INERTIA_PAGE_IMPORT =
   /import\s*\{[^}]*\busePage\b[^}]*\}\s*from\s*["']@inertiajs\/vue3["']|import\s*\*\s*as\s+\w+\s+from\s*["']@inertiajs\/vue3["']/;
 
+/**
+ * A Vite plugin that rewrites the source of Nuxt UI files.
+ *
+ * @typedef {{
+ *   name: string,
+ *   enforce: "pre",
+ *   transform: (
+ *     this: import("vite").Rollup.TransformPluginContext,
+ *     code: string,
+ *     id: string,
+ *   ) => { code: string, map: null } | null,
+ * }} NuxtUiRewrite
+ */
+
 /**
  * The rewrite, as a Vite plugin.
  *
@@ -16,7 +30,8 @@ const ANY_INERTIA_PAGE_IMPORT =
  * a form this rewrite does not know, rather than letting the leak come back
  * unnoticed with a Nuxt UI release.
  *
- * @param isNuxtUiFile `(id) => boolean`, whether a module is Nuxt UI's
+ * @param {(id: string) => boolean} isNuxtUiFile whether a module is Nuxt UI's
+ * @returns {NuxtUiRewrite}
  */
 export function uiInertiaPage(isNuxtUiFile) {
   return {

package/templates/vue/ui-kbd.mjs

@@ -21,7 +21,8 @@ const ROUTED_EXPORT =
  * changes the form rewritten here, rather than letting the mismatch come back
  * unnoticed.
  *
- * @param isNuxtUiFile `(id) => boolean`, whether a module is Nuxt UI's
+ * @param {(id: string) => boolean} isNuxtUiFile whether a module is Nuxt UI's
+ * @returns {import("./ui-inertia-page.mjs").NuxtUiRewrite}
  */
 export function uiKbd(isNuxtUiFile) {
   return {

package/templates/vue/ui-lazy-icons.mjs

@@ -0,0 +1,44 @@
+/**
+ * @typedef {object} IconsPluginContext
+ * @property {{ config: { consumer: string } }} environment
+ * @property {(message: string) => never} error
+ */
+
+/** Nuxt UI's plugin that installs the client icon bundle. */
+const ICONS_PLUGIN = /\/@nuxt\/ui\/dist\/runtime\/vue\/plugins\/icons\.js$/;
+
+/**
+ * The client build of Nuxt UI's icons plugin, as a Vite plugin.
+ *
+ * The plugin imports the bundle of every icon the sources name, which put it
+ * in the entry of every page, the sign-in page's included, for icons it draws
+ * from the server render's own copy. The client gets an empty plugin, and
+ * `loadIconBundle` (`icon-bundle.ts`) loads the bundle when the page needs it. The server render keeps the plugin as it is. The
+ * build fails if Nuxt UI changes the form rewritten here, rather than
+ * letting the bundle return to the entry unnoticed.
+ *
+ * @param {(id: string) => boolean} isNuxtUiFile whether a module is Nuxt UI's
+ * @returns {{ name: string, enforce: "pre", transform: (this: IconsPluginContext, code: string, id: string) => { code: string, map: null } | null }}
+ */
+export function uiLazyIcons(isNuxtUiFile) {
+  return {
+    name: "dms-ui-lazy-icons",
+    enforce: "pre",
+    transform(code, id) {
+      const path = id.replaceAll("\\", "/").split("?")[0];
+      if (
+        this.environment.config.consumer !== "client" ||
+        !isNuxtUiFile(id) ||
+        !ICONS_PLUGIN.test(path)
+      )
+        return null;
+      if (!code.includes("virtual:nuxt-ui-icons"))
+        this.error(
+          `${id} no longer installs the client icon bundle the way the DMS ` +
+            "defers it: the bundle would return to the entry. Update " +
+            "ui-lazy-icons.mjs for this Nuxt UI release.",
+        );
+      return { code: "export default { install() {} };", map: null };
+    },
+  };
+}

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

@@ -21,7 +21,8 @@ const APPLICATION_STATE =
  * UI file defines `useState`, rather than letting the leak come back unnoticed
  * with a Nuxt UI release.
  *
- * @param isNuxtUiFile `(id) => boolean`, whether a module is Nuxt UI's
+ * @param {(id: string) => boolean} isNuxtUiFile whether a module is Nuxt UI's
+ * @returns {import("./ui-inertia-page.mjs").NuxtUiRewrite}
  */
 export function uiRequestState(isNuxtUiFile) {
   return {

package/templates/vue/vite.config.ts

@@ -14,6 +14,7 @@ import { recordEntryWeight } from "./entry-weight.mjs";
 import { rejectServerSourcesInClient } from "./client-server-guard.mjs";
 import { uiInertiaPage } from "./ui-inertia-page.mjs";
 import { uiKbd } from "./ui-kbd.mjs";
+import { uiLazyIcons } from "./ui-lazy-icons.mjs";
 import { uiRequestState } from "./ui-request-state.mjs";
 import { autoImportDirectories, vitePlugins } from "./frontend-build-loader.ts";
 import { frontendBuilds } from "./frontend-builds.generated.ts";
@@ -184,6 +185,7 @@ export default defineConfig({
       },
     },
     uiKbd(isNuxtUiFile),
+    uiLazyIcons(isNuxtUiFile),
     uiInertiaPage(isNuxtUiFile),
     uiRequestState(isNuxtUiFile),
     vue({ script: { globalTypeFiles: [sfcGlobalTypesFile] } }),