@antelopejs/dms-frontend 0.3.12 → 0.4.0

package/templates/vue/ssr-renderer.ts

@@ -24,6 +24,13 @@ import {
   trackDmsServerScopes,
 } from "./frontend-module";
 import { frontendModules } from "./frontend-modules.generated";
+import {
+  SSR_ICONS_ID,
+  serializeDmsIcons,
+  trackDmsIcons,
+} from "./icon-hydration";
+
+export { registerDmsIconCollections } from "./icon-hydration";
 
 export interface DmsSsrPage {
   component: string;
@@ -75,6 +82,14 @@ function asyncComponentsScript(names: Set<string>): string {
   return `<script id="${SSR_ASYNC_COMPONENTS_ID}" type="application/json">${value}</script>`;
 }
 
+function iconsScript(names: Set<string>): string {
+  const value = JSON.stringify(serializeDmsIcons(names)).replaceAll(
+    "<",
+    "\\u003c",
+  );
+  return `<script id="${SSR_ICONS_ID}" type="application/json">${value}</script>`;
+}
+
 await setupFrontendModules(frontendModules);
 
 export function isDmsFrontendPage(path: string): boolean {
@@ -117,6 +132,7 @@ async function renderDmsPageWithRuntime(
     const head = createHead();
     const ssrContext: DmsSsrContext = {};
     let asyncComponents = new Set<string>();
+    let icons = new Set<string>();
     const inertiaResult = await createInertiaApp({
       page,
       render: (app) => renderToString(app, ssrContext),
@@ -124,6 +140,7 @@ async function renderDmsPageWithRuntime(
       async setup({ App, props, plugin }) {
         const app = createSSRApp({ render: () => h(App, props) });
         asyncComponents = trackDmsAsyncComponents(app);
+        icons = trackDmsIcons(app);
         stopScopes = trackDmsServerScopes(app);
         const configured = await configureDmsApp({
           app,
@@ -173,7 +190,7 @@ async function renderDmsPageWithRuntime(
     const renderedHead = await renderSSRHead(head);
     return {
       error: page.props.error,
-      body: `${inertiaResult.body}${asyncDataScript(runtime)}${asyncComponentsScript(asyncComponents)}`,
+      body: `${inertiaResult.body}${asyncDataScript(runtime)}${asyncComponentsScript(asyncComponents)}${iconsScript(icons)}`,
       head: {
         bodyAttrs: renderedHead.bodyAttrs,
         headTags: `${inertiaResult.head.join("")}${renderedHead.headTags}`,

package/templates/vue/vite.config.ts

@@ -2,7 +2,15 @@ import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { basename, resolve } from "node:path";
 import ui from "@nuxt/ui/vite";
 import vue from "@vitejs/plugin-vue";
-import { defineConfig, type LogLevel, normalizePath, type Plugin } from "vite";
+import {
+  createLogger,
+  defineConfig,
+  type LogLevel,
+  normalizePath,
+  type Plugin,
+} from "vite";
+import { autoImportDirectories } from "./frontend-build-loader";
+import { frontendBuilds } from "./frontend-builds.generated";
 import { orderHeadForFirstPaint } from "./head-order.mjs";
 import { iconScanGlobs } from "./icon-scan.mjs";
 
@@ -40,21 +48,19 @@ const stableModuleAliases = Object.fromEntries(
   }),
 );
 /**
- * Globs are POSIX, always.
- *
- * `resolve` returns a native path, so on Windows every pattern below would
- * carry backslashes — which a glob matcher reads as escape characters, not as
- * separators, and which therefore match nothing at all. `normalizePath` is
- * Vite's own answer to this and is the identity function on POSIX.
+ * `ajs dms build` runs Vite at "warn" and reports the steps itself; a verbose
+ * run, `dev` and a hand-run build keep Vite's own output.
+ */
+const logLevel = (process.env.DMS_VITE_LOG_LEVEL ?? "info") as LogLevel;
+const logger = createLogger(logLevel);
+/**
+ * Only what each module declares in its `dms.frontend.build.ts`: a module
+ * without one has nothing auto-imported.
  */
-const importDirectories = frontendSourceRoots.flatMap((root) =>
-  [
-    "app/composables/**/*",
-    "app/types/**/*",
-    "app/utils/**/*",
-    "app/build/composables/**/*",
-    "app/build/types/**/*",
-  ].map((glob) => ({ glob: normalizePath(resolve(root, glob)), types: true })),
+const importDirectories = autoImportDirectories(
+  registry.modules,
+  frontendBuilds,
+  (message) => logger.warn(message),
 );
 const optimizedDependencies = [
   "vue",
@@ -90,8 +96,9 @@ const optimizedDependencies = [
  * startup, pays that cost a single time and in a place where it reads as
  * startup rather than as a crash.
  *
- * Normalized for the same reason as `importDirectories`: Vite hands these
- * patterns straight to its glob matcher without touching the separators.
+ * Globs are POSIX, always: `resolve` returns a native path, whose Windows
+ * backslashes a glob matcher reads as escape characters, not as separators.
+ * `normalizePath` is Vite's own answer to this, the identity on POSIX.
  */
 const optimizerEntries = [
   resolve(__dirname, "main.ts"),
@@ -117,12 +124,6 @@ const uiInertiaLinkImport = resolve(
   "node_modules/@nuxt/ui/dist/runtime/vue/overrides/inertia/Link.vue",
 );
 
-/**
- * `ajs dms build` runs Vite at "warn" and reports the steps itself; a verbose
- * run, `dev` and a hand-run build keep Vite's own output.
- */
-const logLevel = (process.env.DMS_VITE_LOG_LEVEL ?? "info") as LogLevel;
-
 export default defineConfig({
   logLevel,
   plugins: [
@@ -175,6 +176,7 @@ export default defineConfig({
               "useI18n",
               "useError",
               "useDmsLazyAsyncData",
+              "useDmsPageLoading",
               "useDmsApp",
               "useDmsRoute",
               "useDmsRouter",