@antelopejs/dms-frontend 0.0.1

package/templates/vue/DmsDynamicPage.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { type Component, computed } from "vue";
+import { resolveDmsComponent, useDmsRoute } from "./frontend-module";
+
+interface ComponentChild {
+  id: string;
+  component: ComponentDefinition;
+  slot?: string;
+  colSpan?: number;
+}
+
+interface ComponentDefinition {
+  componentName?: string;
+  options?: Record<string, unknown>;
+  children?: ComponentChild[];
+}
+
+interface ResolvedComponentDefinition {
+  id: string;
+  component: Component | string;
+  componentName?: string;
+  options?: Record<string, unknown>;
+  children: ResolvedComponentDefinition[];
+  slot?: string;
+  colSpan?: number;
+}
+
+interface PageLayout {
+  components?: Record<string, ComponentDefinition>;
+}
+
+interface PageRoute {
+  fullId?: string;
+  fullSlug?: string;
+}
+
+interface PagePayload {
+  layout?: PageLayout;
+  route?: PageRoute;
+}
+
+interface DynamicPageProps {
+  page: PagePayload;
+}
+
+const props = defineProps<DynamicPageProps>();
+// biome-ignore lint/correctness/noUnusedVariables: Referenced by the Vue template.
+const route = useDmsRoute(props.page.route?.fullSlug);
+
+function resolveDefinition(
+  id: string,
+  definition: ComponentDefinition,
+  placement: Omit<ComponentChild, "id" | "component"> = {},
+): ResolvedComponentDefinition {
+  return {
+    id,
+    component: definition.componentName
+      ? resolveDmsComponent(definition.componentName) || "div"
+      : "div",
+    componentName: definition.componentName,
+    options: definition.options,
+    children: (definition.children ?? []).map((child) => {
+      const { id: childId, component, ...childPlacement } = child;
+      return resolveDefinition(childId, component, childPlacement);
+    }),
+    ...placement,
+  };
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: Referenced by the Vue template.
+const components = computed(() =>
+  Object.entries(props.page.layout?.components ?? {}).map(([id, definition]) =>
+    resolveDefinition(id, definition),
+  ),
+);
+</script>
+
+<template>
+  <div class="dms-page-stack space-y-6">
+    <div v-for="component in components" :key="component.id">
+      <DmsRecursiveComponent
+        :component="component"
+        :page-id="page.route?.fullId ?? ''"
+        :component-id="component.id"
+        :route-params="route.params"
+      />
+    </div>
+  </div>
+</template>

package/templates/vue/app-config-stub.mjs

@@ -0,0 +1 @@
+export default {};

package/templates/vue/app-runtime.ts

@@ -0,0 +1,240 @@
+import UApp from "@nuxt/ui/components/App.vue";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { useAppConfig } from "@nuxt/ui/runtime/vue/composables/useAppConfig";
+import ui from "@nuxt/ui/vue-plugin";
+import { useHead } from "@unhead/vue";
+import type { VueHeadClient } from "@unhead/vue/types";
+import { defu } from "defu";
+import type { FetchOptions } from "ofetch";
+import {
+  type App,
+  type Component,
+  computed,
+  defineComponent,
+  h,
+  type Plugin,
+  Suspense,
+  type VNode,
+  watch,
+} from "vue";
+import { createI18n, useI18n } from "vue-i18n";
+import DmsDynamicPage from "./DmsDynamicPage.vue";
+import {
+  type DmsLocaleLoader,
+  type DmsPageProps,
+  createDmsFrontendRuntime,
+  getDmsErrorPage,
+  getDmsLayout,
+  getDmsLayoutProps,
+  getDmsPage,
+  hydrateDmsPageProps,
+  installDmsPlugins,
+  preloadDmsPage,
+  provideDmsFrontendRuntime,
+  resolveDmsComponent,
+  serializeDmsAsyncData,
+  useDmsAppConfig,
+  useDmsState,
+  useError,
+} from "./frontend-module";
+import {
+  loadLocaleMessages,
+  localeMessages,
+  supportedLocales,
+} from "./locales.generated";
+
+export interface DmsInertiaSetupProps {
+  initialPage: unknown;
+  initialComponent: Component;
+  resolveComponent: (name: string) => Promise<Component>;
+  titleCallback?: (title: string) => string;
+  onHeadUpdate?: (elements: string[]) => void;
+}
+
+export interface DmsAppOptions {
+  app: App;
+  head: VueHeadClient;
+  initialPageProps: DmsPageProps;
+  initialPageUrl: string;
+  inertiaPlugin: Plugin;
+  runtime?: DmsFrontendRuntime;
+  serverFetch?: DmsServerFetch;
+}
+
+export interface DmsConfiguredApp {
+  mounted: () => Promise<void>;
+  runtime: ReturnType<typeof createDmsFrontendRuntime>;
+}
+
+export type DmsServerFetch = (
+  request: string,
+  options?: FetchOptions,
+) => Promise<unknown>;
+
+const SSR_ASYNC_DATA_ID = "dms-ssr-async-data";
+const DEFAULT_LOCALE = "en";
+
+function pageLocale(props: DmsPageProps): string {
+  const language = props.user?.language;
+  if (typeof language !== "string") return DEFAULT_LOCALE;
+  const locale = language.slice(0, 2);
+  return supportedLocales.includes(locale) ? locale : DEFAULT_LOCALE;
+}
+
+function readDmsAsyncData(): Record<string, unknown> {
+  if (typeof document === "undefined") return {};
+  const element = document.getElementById(SSR_ASYNC_DATA_ID);
+  if (!element?.textContent) return {};
+  const data = JSON.parse(element.textContent) as Record<string, unknown>;
+  element.remove();
+  return data;
+}
+
+const DmsInertiaPage = defineComponent({
+  name: "DmsInertiaPage",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const props = computed(() => attrs as unknown as DmsPageProps);
+    watch(
+      () => [attrs.path, attrs.page, attrs.error],
+      () => {
+        void preloadDmsPage(props.value);
+      },
+      { immediate: true },
+    );
+    const { t } = useI18n();
+    useHead({
+      title: computed(() => {
+        const title = props.value.page.route?.displayName;
+        return title?.startsWith("$") ? t(title.slice(1)) : title;
+      }),
+    });
+    return () => renderDmsPage(props.value);
+  },
+});
+
+const DmsPersistentLayout = defineComponent({
+  name: "DmsPersistentLayout",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    const props = computed(() => attrs as unknown as DmsPageProps);
+    const i18n = useI18n();
+    let localeVersion = 0;
+    useHead({
+      htmlAttrs: { lang: computed(() => i18n.locale.value) },
+    });
+    watch(
+      () => [attrs.path, attrs.page, attrs.user, attrs.session, attrs.error],
+      async () => {
+        const version = ++localeVersion;
+        hydrateDmsPageProps(props.value);
+        const locale = pageLocale(props.value);
+        if (i18n.locale.value === locale) return;
+        const messages = await loadLocaleMessages(locale);
+        if (version !== localeVersion) return;
+        i18n.setLocaleMessage(locale, messages);
+        i18n.locale.value = locale;
+      },
+      { immediate: true, flush: "sync" },
+    );
+    const currentError = useError();
+    const overlays = useDmsState<string[]>("dms-app-overlays", () => []);
+    return () => {
+      const error = currentError.value ?? props.value.error;
+      const content = error
+        ? [renderDmsPage(props.value, error)]
+        : slots.default?.();
+      return renderDmsPersistentLayout(
+        props.value,
+        error,
+        content,
+        overlays.value,
+      );
+    };
+  },
+});
+
+const DmsPersistentInertiaPage = Object.assign(DmsInertiaPage, {
+  layout: DmsPersistentLayout,
+});
+
+export function resolveDmsInertiaPage(): Component {
+  return DmsPersistentInertiaPage;
+}
+
+function renderDmsPage(
+  props: DmsPageProps,
+  capturedError: DmsPageProps["error"] = useError().value,
+) {
+  const error = capturedError ?? props.error;
+  const page = error
+    ? (getDmsErrorPage() ?? DmsDynamicPage)
+    : (getDmsPage(props) ?? DmsDynamicPage);
+  const pageContent = h(page as Component, {
+    ...props,
+    error,
+    key: props.path,
+  });
+  return h(Suspense, null, { default: () => pageContent });
+}
+
+function renderDmsPersistentLayout(
+  props: DmsPageProps,
+  error: DmsPageProps["error"],
+  children: VNode[] | undefined,
+  overlays: string[],
+) {
+  const layout = error ? undefined : getDmsLayout(props);
+  const content = layout
+    ? h(layout, getDmsLayoutProps(props), { default: () => children })
+    : children;
+  return h(
+    UApp,
+    { portal: "#dms-overlays" },
+    {
+      default: () => [
+        ...overlays.map((name) =>
+          h(resolveDmsComponent(name) ?? name, { key: name }),
+        ),
+        content,
+      ],
+    },
+  );
+}
+
+export async function configureDmsApp(
+  options: DmsAppOptions,
+): Promise<DmsConfiguredApp> {
+  const uiAppConfig = useAppConfig();
+  Object.assign(uiAppConfig, defu(useDmsAppConfig(), uiAppConfig));
+  const runtime =
+    options.runtime ??
+    createDmsFrontendRuntime(
+      options.serverFetch as typeof import("ofetch").ofetch,
+      readDmsAsyncData(),
+    );
+  const locale = pageLocale(options.initialPageProps);
+  const messages = await loadLocaleMessages(locale);
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    fallbackLocale: DEFAULT_LOCALE,
+    messages: { ...localeMessages, [locale]: messages },
+  });
+  provideDmsFrontendRuntime(options.app, runtime);
+  options.app.component("Icon", UIcon);
+  options.app.use(options.inertiaPlugin).use(options.head).use(ui).use(i18n);
+  options.app.runWithContext(() =>
+    hydrateDmsPageProps(options.initialPageProps, options.initialPageUrl),
+  );
+  const mounted = await installDmsPlugins(
+    options.app,
+    i18n.global,
+    runtime,
+    loadLocaleMessages as DmsLocaleLoader,
+    supportedLocales,
+  );
+  return { mounted, runtime };
+}
+
+export { serializeDmsAsyncData };

package/templates/vue/compress-assets.mjs

@@ -0,0 +1,48 @@
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import { extname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
+import { brotliCompress, constants, gzip } from "node:zlib";
+
+const ASSET_ROOT = fileURLToPath(new URL("./dist/client/", import.meta.url));
+const COMPRESSIBLE_EXTENSIONS = new Set([
+  ".css",
+  ".html",
+  ".js",
+  ".json",
+  ".svg",
+]);
+const MINIMUM_SIZE_BYTES = 1_024;
+const compressBrotli = promisify(brotliCompress);
+const compressGzip = promisify(gzip);
+
+async function assetFiles(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files = await Promise.all(
+    entries.map((entry) => {
+      const path = join(directory, entry.name);
+      return entry.isDirectory() ? assetFiles(path) : [path];
+    }),
+  );
+  return files.flat();
+}
+
+async function compressAsset(path) {
+  if (!COMPRESSIBLE_EXTENSIONS.has(extname(path))) return;
+  const content = await readFile(path);
+  if (content.length < MINIMUM_SIZE_BYTES) return;
+  const [brotli, compressedGzip] = await Promise.all([
+    compressBrotli(content, {
+      params: {
+        [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
+      },
+    }),
+    compressGzip(content, { level: constants.Z_BEST_COMPRESSION }),
+  ]);
+  await Promise.all([
+    writeFile(`${path}.br`, brotli),
+    writeFile(`${path}.gz`, compressedGzip),
+  ]);
+}
+
+for (const path of await assetFiles(ASSET_ROOT)) await compressAsset(path);

package/templates/vue/email-locales.ts

@@ -0,0 +1,32 @@
+import { readFile } from "node:fs/promises";
+import supportedLocales from "./email-locales.generated.json";
+
+type Messages = Record<string, unknown>;
+
+// Catalogs are immutable build data, shared across renders. Each Vue i18n
+// instance receives only its requested language and the English fallback.
+const catalogs = new Map<string, Promise<Messages>>();
+
+function readCatalog(locale: string): Promise<Messages> {
+  let catalog = catalogs.get(locale);
+  if (!catalog) {
+    catalog = readFile(
+      new URL(`./locales/${locale}.json`, import.meta.url),
+      "utf8",
+    ).then((content) => JSON.parse(content) as Messages);
+    catalogs.set(locale, catalog);
+  }
+  return catalog;
+}
+
+export async function loadEmailLocaleMessages(
+  locale: string,
+): Promise<Record<string, Messages>> {
+  const fallback = await readCatalog("en");
+  const normalized = locale.slice(0, 2);
+  const selected =
+    supportedLocales.includes(normalized) && normalized !== "en"
+      ? await readCatalog(normalized)
+      : fallback;
+  return { en: fallback, [locale]: selected };
+}

package/templates/vue/email-renderer.ts

@@ -0,0 +1,159 @@
+import { renderToString } from "@vue/server-renderer";
+import { defu } from "defu";
+import { type Component, createSSRApp, h } from "vue";
+import { createI18n } from "vue-i18n";
+import moduleRegistry from "./generated-frontend-modules.json";
+import { loadEmailLocaleMessages } from "./email-locales";
+
+interface EmailModule {
+  default: Component;
+}
+
+interface EmailRegistry {
+  serverEmailTemplates: Record<string, () => Promise<EmailModule>>;
+  appConfig?: Record<string, unknown>;
+}
+
+interface EmailRenderOptions {
+  locale?: string;
+}
+
+const registries = import.meta.glob<EmailRegistry>(
+  "/frontend-modules/*/dms.email.ts",
+  { eager: true },
+);
+
+const orderedRegistries = moduleRegistry.modules
+  .map((module) => registries[`/frontend-modules/${module.id}/dms.email.ts`])
+  .filter((registry): registry is EmailRegistry => Boolean(registry));
+
+function templateEntries(): Array<[string, () => Promise<EmailModule>]> {
+  return orderedRegistries.flatMap((registry) =>
+    Object.entries(registry.serverEmailTemplates),
+  );
+}
+
+const EMAIL_ELEMENTS: Record<string, string> = {
+  EBody: "body",
+  EButton: "a",
+  EHr: "hr",
+  EHtml: "html",
+  EImg: "img",
+  EText: "p",
+  ELink: "a",
+  EColumn: "td",
+};
+
+function registerEmailElements(app: ReturnType<typeof createSSRApp>): void {
+  Object.entries(EMAIL_ELEMENTS).forEach(([name, tag]) => {
+    app.component(name, (_props, context) =>
+      h(tag, context.attrs, context.slots.default?.()),
+    );
+  });
+  for (const name of ["EContainer", "ESection"]) {
+    app.component(name, (_props, { attrs, slots }) =>
+      h(
+        "table",
+        {
+          align: "center",
+          width: "100%",
+          role: "presentation",
+          cellSpacing: 0,
+          cellPadding: 0,
+          border: 0,
+          ...attrs,
+          style: [
+            name === "EContainer" ? { maxWidth: "37.5em" } : {},
+            attrs.style,
+          ],
+        },
+        [h("tbody", null, [h("tr", null, [h("td", null, slots.default?.())])])],
+      ),
+    );
+  }
+  app.component("EHead", (_props, { attrs, slots }) =>
+    h("head", attrs, [h("meta", { charset: "utf-8" }), slots.default?.()]),
+  );
+  app.component("EHeading", (_props, { attrs, slots }) => {
+    const { as, ...attributes } = attrs;
+    const tag = typeof as === "string" && /^h[1-6]$/.test(as) ? as : "h1";
+    return h(tag, attributes, slots.default?.());
+  });
+  app.component("ERow", (_props, { attrs, slots }) =>
+    h(
+      "table",
+      {
+        role: "presentation",
+        width: "100%",
+        cellPadding: 0,
+        cellSpacing: 0,
+        border: 0,
+        ...attrs,
+      },
+      [h("tbody", null, [h("tr", null, slots.default?.())])],
+    ),
+  );
+  app.component("EPreview", (_props, { attrs, slots }) =>
+    h(
+      "div",
+      {
+        ...attrs,
+        style: [
+          attrs.style,
+          {
+            display: "none",
+            overflow: "hidden",
+            lineHeight: "1px",
+            opacity: 0,
+            maxHeight: 0,
+            maxWidth: 0,
+            msoHide: "all",
+          },
+        ],
+      },
+      slots.default?.(),
+    ),
+  );
+}
+
+export async function renderEmail(
+  templateName: string,
+  props: Record<string, unknown>,
+  options: EmailRenderOptions = {},
+): Promise<string> {
+  const suffix = `/${templateName}.vue`;
+  const entry = templateEntries().find(([path]) => path.endsWith(suffix));
+  if (!entry) throw new Error(`Unknown email template: ${templateName}`);
+  const component = (await entry[1]()).default;
+  const app = createSSRApp(component, props);
+  const locale = options.locale ?? "en";
+  const messages = await loadEmailLocaleMessages(locale);
+  app.use(
+    createI18n({
+      legacy: false,
+      locale,
+      fallbackLocale: "en",
+      messages,
+    }),
+  );
+  app.provide("dmsEmailLocale", locale);
+  app.provide(
+    "dmsEmailAppConfig",
+    defu({}, ...orderedRegistries.map((registry) => registry.appConfig ?? {})),
+  );
+  const publicConfig = defu(
+    {},
+    ...moduleRegistry.modules.map((module) => module.options),
+  );
+  app.provide("dmsEmailRuntimeConfig", {
+    public: defu(
+      process.env.DMS_CLIENT_URL
+        ? { dms: { clientBaseUrl: process.env.DMS_CLIENT_URL } }
+        : {},
+      publicConfig,
+      { dms: { clientBaseUrl: "" } },
+    ),
+  });
+  registerEmailElements(app);
+  return `<!doctype html>${await renderToString(app)}`;
+}

package/templates/vue/email-runtime.ts

@@ -0,0 +1,23 @@
+import { inject } from "vue";
+
+export interface EmailRuntimeConfig {
+  public: Record<string, unknown> & {
+    dms: { clientBaseUrl: string };
+  };
+}
+
+export function useDmsAppConfig(): Record<string, unknown> {
+  return inject<Record<string, unknown>>("dmsEmailAppConfig", {});
+}
+
+export function useDmsRuntimeConfig(): EmailRuntimeConfig {
+  return inject<EmailRuntimeConfig>("dmsEmailRuntimeConfig", {
+    public: { dms: { clientBaseUrl: process.env.DMS_CLIENT_URL ?? "" } },
+  });
+}
+
+export function defineAppConfig<T extends Record<string, unknown>>(
+  config: T,
+): T {
+  return config;
+}