@antelopejs/dms-frontend 0.2.7 → 0.3.0

package/README.md

@@ -133,6 +133,17 @@ export default frontendModule;
 
 The SDK also exposes `use` for Vue plugins. Entries execute by descending manifest priority, then stable module id. Modules without `dms.frontend.ts` are skipped by the generated loader. Registered page keys match a route's `fullSlug`, request path, or `default`; unregistered pages and components use the generic card renderer.
 
+### Components rendered inside `<svg>`
+
+Modules usually register their components lazily, with `defineAsyncComponent`, and the page is rendered under a `<Suspense>`. Vue mounts an async component that resolves under a `<Suspense>` with the `<Suspense>`'s element namespace rather than the namespace of the place it is rendered: a component resolved by name (`resolveComponent` or a template tag) whose root is an SVG element (`<path>`, `<g>`, …) is created as an HTML element inside the `<svg>`, and the browser draws nothing ([vuejs/core#15639](https://github.com/vuejs/core/issues/15639)). Import such components directly instead, for example the node and edge types passed to Vue Flow:
+
+```ts
+import { markRaw } from "vue";
+import RelationEdge from "./RelationEdge.vue";
+
+const edgeTypes = markRaw({ relation: RelationEdge });
+```
+
 ### Layer aliases outside the workspace
 
 Every layer a module ships under `layers/<name>/` answers to `#<name>` inside

package/dist/config.js

@@ -52,6 +52,7 @@ exports.TEMPLATE_FILES = [
     ["npmrc", ".npmrc"],
     ["gitignore", ".gitignore"],
     ["pnpm-workspace.yaml", "pnpm-workspace.yaml"],
+    ["patches", "patches"],
 ];
 exports.LAYERS_SUBDIR = "frontend-modules";
 exports.FRONTEND_MODULE_ENTRY = "dms.frontend.ts";

package/dist/workspace-setup.d.ts

@@ -1,6 +1,6 @@
 import { type SpawnOptions } from "node:child_process";
 import { ResolvedLayer } from "./workspace";
-export declare function computeDepsHash(layerPaths: string[], workspacePackage?: string): string;
+export declare function computeDepsHash(layerPaths: string[], workspacePackage?: string, installInputs?: readonly string[]): string;
 export declare function needsInstall(workspaceDir: string, layerPaths: string[], force: boolean): boolean;
 export declare function saveDepsHash(workspaceDir: string, layerPaths: string[]): void;
 export declare function installDeps(workspaceDir: string): void;

package/dist/workspace-setup.js

@@ -16,10 +16,25 @@ const manifest_1 = require("./manifest");
 const materialize_1 = require("./materialize");
 const workspace_1 = require("./workspace");
 const config_1 = require("./config");
-function computeDepsHash(layerPaths, workspacePackage) {
+const WORKSPACE_PNPM_CONFIG = "pnpm-workspace.yaml";
+const WORKSPACE_PATCHES_DIR = "patches";
+function workspaceInstallInputs(workspaceDir) {
+    const patchesDir = (0, node_path_1.join)(workspaceDir, WORKSPACE_PATCHES_DIR);
+    const patches = (0, node_fs_1.existsSync)(patchesDir)
+        ? (0, node_fs_1.readdirSync)(patchesDir)
+            .sort()
+            .map((name) => (0, node_path_1.join)(patchesDir, name))
+        : [];
+    return [(0, node_path_1.join)(workspaceDir, WORKSPACE_PNPM_CONFIG), ...patches];
+}
+function computeDepsHash(layerPaths, workspacePackage, installInputs = []) {
     const hash = (0, node_crypto_1.createHash)("sha256");
     if (workspacePackage && (0, node_fs_1.existsSync)(workspacePackage))
         hash.update((0, node_fs_1.readFileSync)(workspacePackage));
+    for (const input of installInputs) {
+        if ((0, node_fs_1.existsSync)(input))
+            hash.update((0, node_fs_1.readFileSync)(input));
+    }
     for (const layerPath of [...layerPaths].sort()) {
         const pkgPath = (0, node_path_1.join)(layerPath, "package.json");
         if ((0, node_fs_1.existsSync)(pkgPath)) {
@@ -36,12 +51,12 @@ function needsInstall(workspaceDir, layerPaths, force) {
         return true;
     if (!(0, node_fs_1.existsSync)((0, node_path_1.join)(workspaceDir, "node_modules")))
         return true;
-    const currentHash = computeDepsHash(layerPaths, (0, node_path_1.join)(workspaceDir, "package.json"));
+    const currentHash = computeDepsHash(layerPaths, (0, node_path_1.join)(workspaceDir, "package.json"), workspaceInstallInputs(workspaceDir));
     const savedHash = (0, node_fs_1.readFileSync)(hashFile, "utf-8").trim();
     return currentHash !== savedHash;
 }
 function saveDepsHash(workspaceDir, layerPaths) {
-    const hash = computeDepsHash(layerPaths, (0, node_path_1.join)(workspaceDir, "package.json"));
+    const hash = computeDepsHash(layerPaths, (0, node_path_1.join)(workspaceDir, "package.json"), workspaceInstallInputs(workspaceDir));
     (0, node_fs_1.writeFileSync)((0, node_path_1.join)(workspaceDir, config_1.DEPS_HASH_FILE), hash);
 }
 function installDeps(workspaceDir) {

package/package.json

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

package/templates/vue/app-runtime.ts

@@ -31,8 +31,10 @@ import {
   installDmsPlugins,
   preloadDmsPage,
   provideDmsFrontendRuntime,
+  resolveDmsAsyncComponents,
   resolveDmsComponent,
   serializeDmsAsyncData,
+  trackDmsAsyncComponents,
   useDmsAppConfig,
   useDmsState,
   useError,
@@ -72,6 +74,7 @@ export type DmsServerFetch = (
 ) => Promise<unknown>;
 
 const SSR_ASYNC_DATA_ID = "dms-ssr-async-data";
+export const SSR_ASYNC_COMPONENTS_ID = "dms-ssr-async-components";
 const DEFAULT_LOCALE = "en";
 
 function pageLocale(props: DmsPageProps): string {
@@ -90,6 +93,15 @@ function readDmsAsyncData(): Record<string, unknown> {
   return data;
 }
 
+function readDmsAsyncComponents(): string[] {
+  if (typeof document === "undefined") return [];
+  const element = document.getElementById(SSR_ASYNC_COMPONENTS_ID);
+  if (!element?.textContent) return [];
+  const names = JSON.parse(element.textContent) as string[];
+  element.remove();
+  return names;
+}
+
 const DmsInertiaPage = defineComponent({
   name: "DmsInertiaPage",
   inheritAttrs: false,
@@ -227,6 +239,13 @@ export async function configureDmsApp(
   options.app.runWithContext(() =>
     hydrateDmsPageProps(options.initialPageProps, options.initialPageUrl),
   );
+  // Resolve, before the app mounts, every async component the server
+  // 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([
+    preloadDmsPage(options.initialPageProps),
+    resolveDmsAsyncComponents(readDmsAsyncComponents()),
+  ]);
   const mounted = await installDmsPlugins(
     options.app,
     i18n.global,
@@ -237,4 +256,4 @@ export async function configureDmsApp(
   return { mounted, runtime };
 }
 
-export { serializeDmsAsyncData };
+export { serializeDmsAsyncData, trackDmsAsyncComponents };

package/templates/vue/frontend-module.ts

@@ -13,6 +13,7 @@ import { type FetchOptions, ofetch } from "ofetch";
 import {
   type App,
   type Component,
+  type ComponentPublicInstance,
   type ComputedRef,
   computed,
   defineComponent,
@@ -192,15 +193,8 @@ export interface DmsCookieOptions<T> {
   sameSite?: "strict" | "lax" | "none";
   secure?: boolean;
 }
-export type DmsColorModePreference = "system" | "light" | "dark";
 type DmsLinkPrefetchMode = "mount" | "hover" | "click";
 type DmsLinkPrefetch = boolean | DmsLinkPrefetchMode | DmsLinkPrefetchMode[];
-export interface DmsColorMode {
-  preference: DmsColorModePreference;
-  value: "light" | "dark";
-  unknown: boolean;
-  forced: boolean;
-}
 export interface DmsAppContext {
   provide<T>(key: string, value: T): void;
   vueApp: App;
@@ -313,6 +307,8 @@ export interface DmsFrontendRuntime {
   pendingNavigation?: Promise<void>;
   hasNavigationListener: boolean;
   pageVersion: number;
+  /** The `Cookie` header of the request a server runtime renders. */
+  requestCookies?: string;
 }
 
 const components = new Map<string, DmsComponentRegistration>();
@@ -329,15 +325,6 @@ const runtimeConfig = ref<DmsRuntimeConfig>({
   public: {},
 } as DmsRuntimeConfig);
 const appConfig = ref<Record<string, unknown>>({});
-const COLOR_MODE_STORAGE_KEY = "dms-color-mode";
-const COLOR_MODE_CLASSES = ["light", "dark"];
-const colorMode = reactive<DmsColorMode>({
-  preference: "system",
-  value: "light",
-  unknown: false,
-  forced: false,
-});
-let isColorModeInitialized = false;
 const DMS_RUNTIME_KEY: InjectionKey<DmsFrontendRuntime> = Symbol("dms-runtime");
 type DmsRuntimeContext = DmsAppContext["runWithContext"];
 const runtimeContexts = new WeakMap<DmsFrontendRuntime, DmsRuntimeContext>();
@@ -349,8 +336,10 @@ export function createDmsFrontendRuntime(
   serverFetch?: typeof ofetch,
   hydratedAsyncData: Record<string, unknown> = {},
   isServer = false,
+  requestCookies?: string,
 ): DmsFrontendRuntime {
   return {
+    requestCookies,
     sharedState: new Map(),
     asyncData: new Map(),
     asyncDataPromises: new Map(),
@@ -519,16 +508,24 @@ async function visit(
   options: DmsNavigationOptions = {},
 ): Promise<void> {
   const url = locationToUrl(runtime, to);
-  const result = await runMiddleware(runtime, parseRoute(runtime, url));
+  const target = parseRoute(runtime, url);
+  const result = await runMiddleware(runtime, target);
   if (result === false) return;
   if (result !== undefined) return visit(runtime, result, options);
   if (runtime.isServer) {
     runtime.serverRedirect = url;
     return;
   }
+  // Like Vue Router, a navigation that only changes the query or hash keeps
+  // the page mounted: without preserveState, Inertia remounts the page
+  // component on every visit and its local state (open tabs, selection,
+  // inputs) is lost.
+  const samePath = target.path === runtime.route.path;
   await new Promise<void>((resolve) =>
     inertiaRouter.visit(url, {
       ...options,
+      preserveState: options.preserveState ?? samePath,
+      preserveScroll: options.preserveScroll ?? samePath,
       onFinish: (completedVisit) => {
         options.onFinish?.(completedVisit);
         resolve();
@@ -1004,82 +1001,92 @@ export function useDmsApp(): DmsAppContext {
   return contextual ?? (useDmsRuntime().appContext as DmsAppContext);
 }
 
-export function useDmsCookie<T = string | null>(
+const COOKIE_STATE_PREFIX = "dms-cookie:";
+// A browser tab runs one application, so its cookie refs are shared by every
+// caller; a server shares them within the request it renders instead.
+const browserCookieRefs = new Map<string, Ref<unknown>>();
+
+function readCookie(
+  source: string | undefined,
   name: string,
-  options: DmsCookieOptions<T> = {},
-): Ref<T> {
-  if (typeof document === "undefined")
-    return ref(options.default?.() ?? null) as Ref<T>;
-  const match = document.cookie
-    .split("; ")
+): string | undefined {
+  const match = source
+    ?.split(/;\s*/)
     .find((entry) => entry.startsWith(`${name}=`));
-  const stored = match
-    ? decodeURIComponent(match.slice(name.length + 1))
-    : undefined;
-  let parsed: T;
+  return match ? decodeURIComponent(match.slice(name.length + 1)) : undefined;
+}
+
+function parseCookieValue<T>(
+  stored: string | undefined,
+  options: DmsCookieOptions<T>,
+): T {
+  if (stored === undefined) return (options.default?.() ?? null) as T;
   try {
-    parsed =
-      stored === undefined
-        ? ((options.default?.() ?? null) as T)
-        : JSON.parse(stored);
+    return JSON.parse(stored) as T;
   } catch {
-    parsed = stored as T;
+    return stored as T;
   }
-  const value = ref(parsed) as Ref<T>;
+}
+
+function writeCookie<T>(name: string, next: T, options: DmsCookieOptions<T>) {
+  const attributes = [
+    `path=${options.path ?? "/"}`,
+    options.maxAge === undefined ? "" : `max-age=${options.maxAge}`,
+    options.sameSite ? `samesite=${options.sameSite}` : "",
+    options.secure ? "secure" : "",
+  ].filter(Boolean);
+  // biome-ignore lint/suspicious/noDocumentCookie: reactive cookie refs require synchronous writes.
+  document.cookie = `${name}=${encodeURIComponent(JSON.stringify(next ?? null))}; ${attributes.join("; ")}`;
+}
+
+function createCookieRef<T>(
+  name: string,
+  source: string | undefined,
+  options: DmsCookieOptions<T>,
+  isServer: boolean,
+): Ref<T> {
+  const value = ref(
+    parseCookieValue(readCookie(source, name), options),
+  ) as Ref<T>;
   return computed({
     get: () => value.value,
     set: (next) => {
       value.value = next;
-      const attributes = [
-        `path=${options.path ?? "/"}`,
-        options.maxAge === undefined ? "" : `max-age=${options.maxAge}`,
-        options.sameSite ? `samesite=${options.sameSite}` : "",
-        options.secure ? "secure" : "",
-      ].filter(Boolean);
-      // biome-ignore lint/suspicious/noDocumentCookie: reactive cookie refs require synchronous writes.
-      document.cookie = `${name}=${encodeURIComponent(JSON.stringify(next ?? null))}; ${attributes.join("; ")}`;
+      if (!isServer) writeCookie(name, next, options);
     },
   });
 }
 
-function preferredColorMode(): "light" | "dark" {
-  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light";
-}
-
-function applyColorMode(preference: DmsColorModePreference): void {
-  colorMode.value = preference === "system" ? preferredColorMode() : preference;
-  document.documentElement.classList.remove(...COLOR_MODE_CLASSES);
-  document.documentElement.classList.add(colorMode.value);
-}
-
-function initializeColorMode(): void {
-  if (isColorModeInitialized) return;
-  isColorModeInitialized = true;
-  if (typeof window === "undefined") return;
-  const stored = window.localStorage.getItem(COLOR_MODE_STORAGE_KEY);
-  if (COLOR_MODE_CLASSES.includes(stored ?? "") || stored === "system") {
-    colorMode.preference = stored as DmsColorModePreference;
+/**
+ * A cookie as a ref, shared by every caller of the same name — so a plugin and
+ * a page reading one preference see each other's writes — and read on the
+ * server from the request being rendered, so the server HTML matches the client.
+ */
+export function useDmsCookie<T = string | null>(
+  name: string,
+  options: DmsCookieOptions<T> = {},
+): Ref<T> {
+  if (typeof document !== "undefined") {
+    if (!browserCookieRefs.has(name))
+      browserCookieRefs.set(
+        name,
+        createCookieRef(name, document.cookie, options, false) as Ref<unknown>,
+      );
+    return browserCookieRefs.get(name) as Ref<T>;
   }
-  watch(
-    () => colorMode.preference,
-    (preference) => {
-      applyColorMode(preference);
-      window.localStorage.setItem(COLOR_MODE_STORAGE_KEY, preference);
-    },
-    { immediate: true },
-  );
-  window
-    .matchMedia?.("(prefers-color-scheme: dark)")
-    .addEventListener("change", () => {
-      if (colorMode.preference === "system") applyColorMode("system");
-    });
-}
-
-export function useColorMode(): DmsColorMode {
-  initializeColorMode();
-  return colorMode;
+  const runtime = useDmsRuntime();
+  const key = `${COOKIE_STATE_PREFIX}${name}`;
+  if (!runtime.sharedState.has(key))
+    runtime.sharedState.set(
+      key,
+      createCookieRef(
+        name,
+        runtime.requestCookies,
+        options,
+        true,
+      ) as Ref<unknown>,
+    );
+  return runtime.sharedState.get(key) as Ref<T>;
 }
 
 export function createError(
@@ -1141,6 +1148,41 @@ export function resolveDmsComponent(name: string): Component | undefined {
   return components.get(normalizeDmsName(name))?.component;
 }
 export const getDmsComponent = resolveDmsComponent;
+
+/**
+ * Records, by registered name, every registered async component a server
+ * render reaches, so the client can resolve the same ones before hydrating.
+ * Inertia re-renders the tree once on boot; an async component still loading
+ * at that moment makes Vue drop its server-rendered markup ("Skipping lazy
+ * hydration") and leave it empty until its chunk arrives.
+ */
+export function trackDmsAsyncComponents(app: App): Set<string> {
+  const names = new Map<Component, string>();
+  components.forEach(({ component, name }) => {
+    if ((component as DmsAsyncComponent).__asyncLoader)
+      names.set(component, name);
+  });
+  const rendered = new Set<string>();
+  app.mixin({
+    beforeCreate(this: ComponentPublicInstance) {
+      const name = names.get(this.$.type as Component);
+      if (name) rendered.add(name);
+    },
+  });
+  return rendered;
+}
+
+export async function resolveDmsAsyncComponents(
+  names: readonly string[],
+): Promise<void> {
+  await Promise.all(
+    names.map((name) =>
+      (
+        resolveDmsComponent(name) as DmsAsyncComponent | undefined
+      )?.__asyncLoader?.(),
+    ),
+  );
+}
 export async function preloadComponents(names: string[]): Promise<void> {
   const registry = useDmsRuntime().appContext?.vueApp._context.components ?? {};
   await Promise.all(
@@ -1281,8 +1323,15 @@ export async function preloadDmsPage(props: DmsPageProps): Promise<void> {
     ? layouts.get(normalizeDmsName(layoutName))
     : undefined;
   const entries = props.error ? [errorPage] : [page, layout];
+  // `preload` only warms the module; the async wrapper stays unresolved until
+  // its own loader runs. Hydrating an unresolved wrapper defers it, and the
+  // first parent render (Inertia's initial swap) then makes Vue drop the
+  // server-rendered markup and render the subtree from scratch.
   await Promise.all(
-    entries.flatMap((entry) => (entry?.preload ? [entry.preload()] : [])),
+    entries.flatMap((entry) => [
+      entry?.preload?.(),
+      (entry?.component as DmsAsyncComponent | undefined)?.__asyncLoader?.(),
+    ]),
   );
   if (!props.error) await preloadDmsLayoutComponents(props.page.layout);
 }

package/templates/vue/index.html

@@ -4,16 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="data:," />
-    <script>
-      const preference = localStorage.getItem("dms-color-mode") || "system";
-      const mode =
-        preference === "system"
-          ? matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light"
-          : preference;
-      document.documentElement.classList.add(mode);
-    </script>
     <title>Antelope DMS</title>
   </head>
   <body>

package/templates/vue/package.json

@@ -15,7 +15,7 @@
     "@unhead/vue": "^2.0.14",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/server-renderer": "^3.5.0",
-    "@vueuse/core": "^13.0.0",
+    "@vueuse/core": "^14.3.0",
     "defu": "^6.1.4",
     "ofetch": "^1.4.1",
     "reka-ui": "^2.6.0",

package/templates/vue/patches/@nuxt__ui@4.10.0.patch

@@ -0,0 +1,44 @@
+diff --git a/dist/runtime/vue/overrides/inertia/Link.vue b/dist/runtime/vue/overrides/inertia/Link.vue
+index 5af1e3e..6cf09e1 100644
+--- a/dist/runtime/vue/overrides/inertia/Link.vue
++++ b/dist/runtime/vue/overrides/inertia/Link.vue
+@@ -106,20 +106,32 @@ const rel = computed(() => {
+   }
+   return null;
+ });
++// Patched by @antelopejs/dms-frontend until nuxt/ui#6809 is released: match on
++// path segments, so `/test` is not active on `/test-a` (nuxt/ui#6803). A `to`
++// that is not a string (a route object) has no path to match, as before.
++function normalizePath(url) {
++  if (typeof url !== "string") {
++    return void 0;
++  }
++  const path = url.split("#")[0].split("?")[0];
++  if (!path) {
++    return void 0;
++  }
++  return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
++}
++const currentPath = computed(() => normalizePath(page.url) ?? "/");
++const targetPath = computed(() => href.value ? normalizePath(href.value) : void 0);
+ const isLinkActive = computed(() => {
+   if (props.active !== void 0) {
+     return props.active;
+   }
+-  if (!href.value) {
++  if (!targetPath.value) {
+     return false;
+   }
+-  if (props.exact && page.url === href.value) {
+-    return true;
+-  }
+-  if (!props.exact && page.url.startsWith(href.value)) {
+-    return true;
++  if (props.exact) {
++    return page.url === href.value;
+   }
+-  return false;
++  return currentPath.value === targetPath.value || currentPath.value.startsWith(targetPath.value === "/" ? "/" : `${targetPath.value}/`);
+ });
+ const linkClass = computed(() => {
+   const active = isLinkActive.value;

package/templates/vue/pnpm-workspace.yaml

@@ -2,3 +2,10 @@ packages:
   - .
   - frontend-modules/*
 ignore-workspace-root-check: true
+# Fixes carried until they are released upstream. Each patch names the upstream
+# issue and pull request it stands in for; drop it with the upgrade that ships
+# them, since pnpm refuses a patch whose version is no longer installed.
+patchedDependencies:
+  # Menu and breadcrumb links active on a sibling route (`/test` on `/test-a`):
+  # nuxt/ui#6803, fixed by nuxt/ui#6809.
+  "@nuxt/ui@4.10.0": patches/@nuxt__ui@4.10.0.patch

package/templates/vue/server/html-tag.mjs

@@ -0,0 +1,15 @@
+const HTML_ATTRIBUTE = /([^\s=]+)(?:="[^"]*")?/g;
+
+/**
+ * The document's `<html>` tag: the template's attributes, overridden by those
+ * the render produced (`lang`, `data-scale`…), so none appears twice.
+ */
+export function htmlTag(templateAttributes, renderedAttributes) {
+  const rendered = new Set(
+    [...renderedAttributes.matchAll(HTML_ATTRIBUTE)].map((match) => match[1]),
+  );
+  const kept = [...templateAttributes.matchAll(HTML_ATTRIBUTE)]
+    .filter((match) => !rendered.has(match[1]))
+    .map((match) => match[0]);
+  return `<html ${[...kept, renderedAttributes.trim()].filter(Boolean).join(" ")}>`;
+}

package/templates/vue/server.mjs

@@ -22,6 +22,7 @@ import { productionHtmlTemplate } from "./server/client-manifest.mjs";
 import { documentStyleTags } from "./server/dev-styles.mjs";
 import { handleEmailRender } from "./server/email.mjs";
 import { HOMEPAGE } from "./server/homepage.mjs";
+import { htmlTag } from "./server/html-tag.mjs";
 import { handleTester } from "./server/tester.mjs";
 import {
   createInertiaPage,
@@ -319,7 +320,12 @@ async function ssrRenderer(devServer) {
   return productionSsrRenderer;
 }
 
-export async function renderHtml(page, requestUrl, serverFetch) {
+export async function renderHtml(
+  page,
+  requestUrl,
+  serverFetch,
+  requestCookies,
+) {
   const devServer = await developmentServer();
   const rawTemplate = devServer
     ? readFileSync(SOURCE_TEMPLATE_PATH, "utf8")
@@ -330,7 +336,7 @@ export async function renderHtml(page, requestUrl, serverFetch) {
   let rendered;
   try {
     const renderer = await ssrRenderer(devServer);
-    rendered = await renderer.renderDmsPage(page, serverFetch);
+    rendered = await renderer.renderDmsPage(page, serverFetch, requestCookies);
   } catch (error) {
     console.error(
       "DMS SSR render failed; falling back to client rendering",
@@ -348,7 +354,9 @@ export async function renderHtml(page, requestUrl, serverFetch) {
   const preloads = await documentStyleTags(devServer, page, template);
   const html = template
     .replace("<title>Antelope DMS</title>", rendered.head.headTags)
-    .replace("<html", `<html ${rendered.head.htmlAttrs}`)
+    .replace(/<html([^>]*)>/, (_, attributes) =>
+      htmlTag(attributes, rendered.head.htmlAttrs),
+    )
     .replace("<body", `<body ${rendered.head.bodyAttrs}`)
     .replace("</head>", `${preloads}</head>`)
     .replace(
@@ -359,6 +367,11 @@ export async function renderHtml(page, requestUrl, serverFetch) {
   return { html, status: rendered.error?.statusCode ?? 200 };
 }
 
+function renderRequestHtml(page, request) {
+  const fetch = serverComponentFetch(request);
+  return renderHtml(page, request.url, fetch, request.headers.cookie);
+}
+
 async function writeBackendError(error, request, response) {
   const status = Number.isInteger(error?.status) ? error.status : 502;
   const pathname = new URL(request.url, "http://frontend.local").pathname;
@@ -392,11 +405,7 @@ async function writeBackendError(error, request, response) {
         JSON.stringify(page),
       );
     }
-    const { html } = await renderHtml(
-      page,
-      request.url,
-      serverComponentFetch(request),
-    );
+    const { html } = await renderRequestHtml(page, request);
     return writeContent(request, response, status, htmlHeaders(), html);
   }
   const payload =
@@ -449,11 +458,7 @@ export async function handleRequest(request, response) {
       JSON.stringify(page),
     );
   }
-  const rendered = await renderHtml(
-    page,
-    request.url,
-    serverComponentFetch(request),
-  );
+  const rendered = await renderRequestHtml(page, request);
   if (rendered.redirect) {
     redirectFrontendVisit(request, response, rendered.redirect);
     return;

package/templates/vue/ssr-renderer.ts

@@ -5,9 +5,11 @@ import { renderToString } from "@vue/server-renderer";
 import { createSSRApp, h } from "vue";
 import {
   type DmsServerFetch,
+  SSR_ASYNC_COMPONENTS_ID,
   configureDmsApp,
   resolveDmsInertiaPage,
   serializeDmsAsyncData,
+  trackDmsAsyncComponents,
 } from "./app-runtime";
 import {
   type DmsErrorData,
@@ -60,6 +62,11 @@ function asyncDataScript(runtime: DmsFrontendRuntime): string {
   return `<script id="${SSR_ASYNC_DATA_ID}" type="application/json">${value}</script>`;
 }
 
+function asyncComponentsScript(names: Set<string>): string {
+  const value = JSON.stringify([...names]).replaceAll("<", "\\u003c");
+  return `<script id="${SSR_ASYNC_COMPONENTS_ID}" type="application/json">${value}</script>`;
+}
+
 await setupFrontendModules(frontendModules);
 
 export function isDmsFrontendPage(path: string): boolean {
@@ -69,11 +76,13 @@ export function isDmsFrontendPage(path: string): boolean {
 export async function renderDmsPage(
   page: DmsSsrPage,
   serverFetch?: DmsServerFetch,
+  requestCookies?: string,
 ): Promise<DmsSsrResult> {
   const runtime = createDmsFrontendRuntime(
     serverFetch as typeof import("ofetch").ofetch,
     {},
     true,
+    requestCookies,
   );
   return runtimeStorage.run(runtime, () =>
     renderDmsPageWithRuntime(page, runtime, serverFetch),
@@ -88,12 +97,14 @@ async function renderDmsPageWithRuntime(
   await preloadDmsPage(page.props);
   const head = createHead();
   const ssrContext: DmsSsrContext = {};
+  let asyncComponents = new Set<string>();
   const inertiaResult = await createInertiaApp({
     page,
     render: (app) => renderToString(app, ssrContext),
     resolve: resolveDmsInertiaPage,
     async setup({ App, props, plugin }) {
       const app = createSSRApp({ render: () => h(App, props) });
+      asyncComponents = trackDmsAsyncComponents(app);
       const configured = await configureDmsApp({
         app,
         head,
@@ -130,12 +141,13 @@ async function renderDmsPageWithRuntime(
     return renderDmsPage(
       { ...page, props: { ...page.props, error } },
       serverFetch,
+      runtime.requestCookies,
     );
   }
   const renderedHead = await renderSSRHead(head);
   return {
     error: page.props.error,
-    body: `${inertiaResult.body}${asyncDataScript(runtime)}`,
+    body: `${inertiaResult.body}${asyncDataScript(runtime)}${asyncComponentsScript(asyncComponents)}`,
     head: {
       bodyAttrs: renderedHead.bodyAttrs,
       headTags: `${inertiaResult.head.join("")}${renderedHead.headTags}`,

package/templates/vue/vite.config.ts

@@ -158,7 +158,6 @@ export default defineConfig({
               "showError",
               "useDmsAsyncData",
               "useDmsCookie",
-              "useColorMode",
               "useDmsFetch",
               "useHead",
               "useI18n",
@@ -184,7 +183,7 @@ export default defineConfig({
     paintBeforeHydrate(),
   ],
   resolve: {
-    dedupe: ["vue", "reka-ui", "@nuxt/ui"],
+    dedupe: ["vue", "reka-ui", "@nuxt/ui", "@vueuse/core"],
     alias: {
       "#dms/frontend-module": resolve(__dirname, "frontend-module.ts"),
       "#build/nuxt-icon-client-bundle": "virtual:nuxt-ui-icons",