nuxt-generation-emails 0.2.3 → 0.2.5

package/README.md

@@ -56,42 +56,7 @@ export default defineNuxtConfig({
 
 ---
 
-## 📁 2. Folder Structure
-
-Templates live inside your app's source directory under the configured `emailDir` (default: `emails/`). You can nest them in subdirectories to organize by version, category, or however you like.
-
-```
-app/
-  emails/
-    v1/
-      order-confirmation.vue
-      welcome.vue
-    v2/
-      order-confirmation.vue
-    marketing/
-      promo.vue
-```
-
-The directory structure maps directly to routes:
-
-| Template file                          | Preview URL                               | API endpoint                             |
-|----------------------------------------|-------------------------------------------|------------------------------------------|
-| `emails/v1/order-confirmation.vue`     | `/__emails/v1/order-confirmation`         | `POST /api/emails/v1/order-confirmation` |
-| `emails/v1/welcome.vue`               | `/__emails/v1/welcome`                    | `POST /api/emails/v1/welcome`            |
-| `emails/v2/order-confirmation.vue`     | `/__emails/v2/order-confirmation`         | `POST /api/emails/v2/order-confirmation` |
-| `emails/marketing/promo.vue`          | `/__emails/marketing/promo`               | `POST /api/emails/marketing/promo`       |
-
-### Generated routes overview
-
-![Overview of all auto-generated API routes](images/example-overview.png)
-
-### Example route detail
-
-![Detail view of a specific email API route](images/api-post-example.png)
-
----
-
-## 🛠️ 3. Adding Templates with the CLI
+## 🛠️ 2. Adding Templates with the CLI
 
 The fastest way to create a new email template:
 
@@ -172,6 +137,41 @@ If the dev server is running, it will automatically detect the new file and rest
 
 ---
 
+## 📁 3. Folder Structure
+
+Templates live inside your app's source directory under the configured `emailDir` (default: `emails/`). You can nest them in subdirectories to organize by version, category, or however you like.
+
+```
+app/
+  emails/
+    v1/
+      order-confirmation.vue
+      welcome.vue
+    v2/
+      order-confirmation.vue
+    marketing/
+      promo.vue
+```
+
+The directory structure maps directly to routes:
+
+| Template file                          | Preview URL                               | API endpoint                             |
+|----------------------------------------|-------------------------------------------|------------------------------------------|
+| `emails/v1/order-confirmation.vue`     | `/__emails/v1/order-confirmation`         | `POST /api/emails/v1/order-confirmation` |
+| `emails/v1/welcome.vue`               | `/__emails/v1/welcome`                    | `POST /api/emails/v1/welcome`            |
+| `emails/v2/order-confirmation.vue`     | `/__emails/v2/order-confirmation`         | `POST /api/emails/v2/order-confirmation` |
+| `emails/marketing/promo.vue`          | `/__emails/marketing/promo`               | `POST /api/emails/marketing/promo`       |
+
+### Generated routes overview
+
+![Overview of all auto-generated API routes](images/example-overview.png)
+
+### Example route detail
+
+![Detail view of a specific email API route](images/api-post-example.png)
+
+---
+
 ## ✍️ 4. Writing Email Templates
 
 Templates are standard Vue SFCs using [`@vue-email/components`](https://vuemail.net/). Define your template's dynamic data using `defineProps` with `withDefaults`:

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.2.3",
+  "version": "0.2.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -5,30 +5,101 @@ import { join, relative } from 'pathe';
 import { consola } from 'consola';
 import { parse, compileScript } from 'vue/compiler-sfc';
 
-function generateWrapperComponent(emailsLayoutPath, emailComponentPath, extractedProps) {
-  const hasProps = extractedProps.props.length > 0;
-  const defaultsLiteral = JSON.stringify(extractedProps.defaults, null, 2);
-  const propDefsLiteral = JSON.stringify(
-    extractedProps.props.map((p) => ({ name: p.name, type: p.type })),
-    null,
-    2
-  );
+function generateWrapperComponent(emailsLayoutPath, emailComponentPath) {
   const scriptClose = "<\/script>";
   const templateOpen = "<template>";
   const templateClose = "</template>";
   return `<script setup lang="ts">
-import { reactive, definePageMeta, onMounted } from '#imports'
+import { reactive, computed, watch, shallowRef, triggerRef, definePageMeta, onMounted } from '#imports'
 import EmailsLayout from '${emailsLayoutPath}'
-import EmailComponent from '${emailComponentPath}'
+import EmailComponentRaw from '${emailComponentPath}'
 
 definePageMeta({ layout: false })
-${hasProps ? `
-const propDefaults = ${defaultsLiteral}
-const propDefinitions = ${propDefsLiteral}
 
-// Reactive state derived from the template's withDefaults \u2014 drives both
-// the live preview and the sidebar controls.
-const emailProps = reactive<Record<string, unknown>>({ ...propDefaults })
+// ---- Runtime component introspection ----
+// We read prop definitions from the compiled component's .props object at
+// runtime.  Vue's HMR runtime mutates .props in-place (same object ref) via
+// Object.assign, so a shallowRef change won't fire.  We use triggerRef() on
+// every HMR update to force the computed to re-evaluate.
+
+const emailComponent = shallowRef(EmailComponentRaw)
+
+if (import.meta.hot) {
+  // vite:afterUpdate fires client-side after ANY HMR update is applied.
+  // triggerRef is cheap \u2014 the computed just re-reads .props from the
+  // already-mutated component object.
+  import.meta.hot.on('vite:afterUpdate', () => {
+    triggerRef(emailComponent)
+  })
+}
+
+function inferType(ctor: unknown): 'string' | 'number' | 'boolean' | 'object' | 'unknown' {
+  if (ctor === String) return 'string'
+  if (ctor === Number) return 'number'
+  if (ctor === Boolean) return 'boolean'
+  if (ctor === Object || ctor === Array) return 'object'
+  return 'unknown'
+}
+
+interface PropDefinition {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'object' | 'unknown'
+}
+
+const introspected = computed(() => {
+  const comp = emailComponent.value as any
+  const raw = comp?.props
+  const defs: PropDefinition[] = []
+  const defaults: Record<string, unknown> = {}
+
+  if (!raw) return { defs, defaults }
+
+  if (Array.isArray(raw)) {
+    for (const name of raw) {
+      defs.push({ name, type: 'unknown' })
+    }
+  } else {
+    for (const [name, spec] of Object.entries(raw as Record<string, any>)) {
+      const ctor = spec?.type ?? spec
+      defs.push({ name, type: inferType(ctor) })
+
+      if (spec?.default !== undefined) {
+        defaults[name] = typeof spec.default === 'function' ? spec.default() : spec.default
+      }
+    }
+  }
+
+  return { defs, defaults }
+})
+
+const propDefinitions = computed(() => introspected.value.defs)
+
+// Reactive state that drives both the live preview and the sidebar controls.
+const emailProps = reactive<Record<string, unknown>>({})
+
+// Whenever the component's props change (HMR), reconcile the reactive state:
+// add new props with their defaults, remove props that no longer exist.
+watch(
+  () => introspected.value,
+  ({ defs, defaults }) => {
+    const validNames = new Set(defs.map(d => d.name))
+
+    // Add new props
+    for (const name of validNames) {
+      if (!(name in emailProps)) {
+        emailProps[name] = defaults[name] ?? undefined
+      }
+    }
+
+    // Remove stale props
+    for (const key of Object.keys(emailProps)) {
+      if (!validNames.has(key)) {
+        delete emailProps[key]
+      }
+    }
+  },
+  { immediate: true },
+)
 
 // Hydrate from URL params on mount so shared links restore state.
 onMounted(() => {
@@ -49,111 +120,16 @@ onMounted(() => {
     })
   }
 })
-` : ""}
 ${scriptClose}
 
 ${templateOpen}
-  <EmailsLayout${hasProps ? ' :email-props="emailProps" :prop-definitions="propDefinitions"' : ""}>
-    <EmailComponent${hasProps ? ' v-bind="emailProps"' : ""} />
+  <EmailsLayout :email-props="emailProps" :prop-definitions="propDefinitions">
+    <component :is="emailComponent" v-bind="emailProps" />
   </EmailsLayout>
 ${templateClose}
 `;
 }
 
-function extractPropsFromSFC(filePath) {
-  const source = fs.readFileSync(filePath, "utf-8");
-  const { descriptor } = parse(source, { filename: filePath });
-  if (!descriptor.scriptSetup) {
-    return { props: [], defaults: {} };
-  }
-  try {
-    const compiled = compileScript(descriptor, {
-      id: filePath,
-      isProd: false
-    });
-    const props = [];
-    const defaults = {};
-    const propNames = [];
-    if (compiled.bindings) {
-      for (const [name, binding] of Object.entries(compiled.bindings)) {
-        if (binding === "props") {
-          propNames.push(name);
-        }
-      }
-    }
-    const propTypes = extractPropTypesFromSource(descriptor.scriptSetup.content);
-    for (const name of propNames) {
-      const type = propTypes[name] ?? "unknown";
-      props.push({ name, type });
-    }
-    const defaultValues = extractDefaultsFromSource(descriptor.scriptSetup.content);
-    for (const [name, value] of Object.entries(defaultValues)) {
-      defaults[name] = value;
-      const existing = props.find((p) => p.name === name);
-      if (existing) {
-        existing.default = value;
-      }
-    }
-    return { props, defaults };
-  } catch {
-    return { props: [], defaults: {} };
-  }
-}
-function extractPropTypesFromSource(scriptContent) {
-  const result = {};
-  const match = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}\s*>\s*\(/);
-  if (!match) return result;
-  const typeBody = match[1];
-  const propPattern = /(\w+)\s*(?:\?\s*)?:\s*(\w+)/g;
-  let propMatch;
-  while ((propMatch = propPattern.exec(typeBody)) !== null) {
-    const name = propMatch[1];
-    const tsType = propMatch[2];
-    switch (tsType.toLowerCase()) {
-      case "string":
-        result[name] = "string";
-        break;
-      case "number":
-        result[name] = "number";
-        break;
-      case "boolean":
-        result[name] = "boolean";
-        break;
-      default:
-        result[name] = "object";
-        break;
-    }
-  }
-  return result;
-}
-function extractDefaultsFromSource(scriptContent) {
-  const withDefaultsMatch = scriptContent.match(
-    /withDefaults\s*\(\s*defineProps\s*<[^>]*>\s*\(\s*\)\s*,\s*(\{[\s\S]*?\})\s*\)/
-  );
-  if (!withDefaultsMatch) return {};
-  const defaultsText = withDefaultsMatch[1];
-  if (!defaultsText) return {};
-  try {
-    const jsonish = defaultsText.replace(/'/g, '"').replace(/(\w+)\s*:/g, '"$1":').replace(/,\s*([\]}])/g, "$1");
-    return JSON.parse(jsonish);
-  } catch {
-    return extractPrimitivesFromObjectLiteral(defaultsText);
-  }
-}
-function extractPrimitivesFromObjectLiteral(text) {
-  const result = {};
-  const linePattern = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+(?:\.\d+)?)|(true|false))\s*[,}]?/g;
-  let match;
-  while ((match = linePattern.exec(text)) !== null) {
-    const key = match[1];
-    if (match[2] != null) result[key] = match[2];
-    else if (match[3] != null) result[key] = match[3];
-    else if (match[4] != null) result[key] = Number(match[4]);
-    else if (match[5] != null) result[key] = match[5] === "true";
-  }
-  return result;
-}
-
 function addEmailPages(dirPath, pages, options, routePrefix = "") {
   const entries = fs.readdirSync(dirPath);
   for (const entry of entries) {
@@ -169,11 +145,9 @@ function addEmailPages(dirPath, pages, options, routePrefix = "") {
       if (!fs.existsSync(wrapperDir)) {
         fs.mkdirSync(wrapperDir, { recursive: true });
       }
-      const extractedProps = extractPropsFromSFC(fullPath);
       const wrapperContent = generateWrapperComponent(
         options.emailTemplateComponentPath,
-        fullPath,
-        extractedProps
+        fullPath
       );
       fs.writeFileSync(wrapperPath, wrapperContent, "utf-8");
       const pageName = `email${routePrefix.replace(/\//g, "-")}-${name}`.replace(/^-+/, "");
@@ -303,6 +277,100 @@ export default defineEventHandler(async (event) => {
 `;
 }
 
+function extractPropsFromSFC(filePath) {
+  const source = fs.readFileSync(filePath, "utf-8");
+  const { descriptor } = parse(source, { filename: filePath });
+  if (!descriptor.scriptSetup) {
+    return { props: [], defaults: {} };
+  }
+  try {
+    const compiled = compileScript(descriptor, {
+      id: filePath,
+      isProd: false
+    });
+    const props = [];
+    const defaults = {};
+    const propNames = [];
+    if (compiled.bindings) {
+      for (const [name, binding] of Object.entries(compiled.bindings)) {
+        if (binding === "props") {
+          propNames.push(name);
+        }
+      }
+    }
+    const propTypes = extractPropTypesFromSource(descriptor.scriptSetup.content);
+    for (const name of propNames) {
+      const type = propTypes[name] ?? "unknown";
+      props.push({ name, type });
+    }
+    const defaultValues = extractDefaultsFromSource(descriptor.scriptSetup.content);
+    for (const [name, value] of Object.entries(defaultValues)) {
+      defaults[name] = value;
+      const existing = props.find((p) => p.name === name);
+      if (existing) {
+        existing.default = value;
+      }
+    }
+    return { props, defaults };
+  } catch {
+    return { props: [], defaults: {} };
+  }
+}
+function extractPropTypesFromSource(scriptContent) {
+  const result = {};
+  const match = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}\s*>\s*\(/);
+  if (!match) return result;
+  const typeBody = match[1];
+  const propPattern = /(\w+)\s*(?:\?\s*)?:\s*(\w+)/g;
+  let propMatch;
+  while ((propMatch = propPattern.exec(typeBody)) !== null) {
+    const name = propMatch[1];
+    const tsType = propMatch[2];
+    switch (tsType.toLowerCase()) {
+      case "string":
+        result[name] = "string";
+        break;
+      case "number":
+        result[name] = "number";
+        break;
+      case "boolean":
+        result[name] = "boolean";
+        break;
+      default:
+        result[name] = "object";
+        break;
+    }
+  }
+  return result;
+}
+function extractDefaultsFromSource(scriptContent) {
+  const withDefaultsMatch = scriptContent.match(
+    /withDefaults\s*\(\s*defineProps\s*<[^>]*>\s*\(\s*\)\s*,\s*(\{[\s\S]*?\})\s*\)/
+  );
+  if (!withDefaultsMatch) return {};
+  const defaultsText = withDefaultsMatch[1];
+  if (!defaultsText) return {};
+  try {
+    const jsonish = defaultsText.replace(/'/g, '"').replace(/(\w+)\s*:/g, '"$1":').replace(/,\s*([\]}])/g, "$1");
+    return JSON.parse(jsonish);
+  } catch {
+    return extractPrimitivesFromObjectLiteral(defaultsText);
+  }
+}
+function extractPrimitivesFromObjectLiteral(text) {
+  const result = {};
+  const linePattern = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+(?:\.\d+)?)|(true|false))\s*[,}]?/g;
+  let match;
+  while ((match = linePattern.exec(text)) !== null) {
+    const key = match[1];
+    if (match[2] != null) result[key] = match[2];
+    else if (match[3] != null) result[key] = match[3];
+    else if (match[4] != null) result[key] = Number(match[4]);
+    else if (match[5] != null) result[key] = match[5] === "true";
+  }
+  return result;
+}
+
 function generateServerRoutes(emailsDir, buildDir) {
   if (!fs.existsSync(emailsDir)) return [];
   const handlersDir = join(buildDir, "email-handlers");
@@ -432,7 +500,7 @@ declare module 'nitropack/types' {
     const rollupConfig = nuxt.options.nitro?.rollupConfig ?? {};
     const existingPlugins = rollupConfig.plugins ?? [];
     const plugins = Array.isArray(existingPlugins) ? existingPlugins : [existingPlugins];
-    rollupConfig.plugins = [...plugins, vue()];
+    rollupConfig.plugins = [vue(), ...plugins];
     nuxt.options.nitro = { ...nuxt.options.nitro, rollupConfig };
     if (nuxt.options.dev && fs.existsSync(emailsDir)) {
       const relDir = relative(nuxt.options.rootDir, emailsDir);

package/dist/runtime/pages/__emails.d.vue.ts

@@ -5,7 +5,7 @@ interface PropDefinition {
 type __VLS_Props = {
     /** Reactive object containing current prop values (managed by the wrapper) */
     emailProps?: Record<string, unknown>;
-    /** Flat list of prop definitions extracted from the SFC at build time */
+    /** Flat list of prop definitions derived from the component at runtime */
     propDefinitions?: PropDefinition[];
 };
 declare var __VLS_1: {}, __VLS_19: {};

package/dist/runtime/pages/__emails.vue.d.ts

@@ -5,7 +5,7 @@ interface PropDefinition {
 type __VLS_Props = {
     /** Reactive object containing current prop values (managed by the wrapper) */
     emailProps?: Record<string, unknown>;
-    /** Flat list of prop definitions extracted from the SFC at build time */
+    /** Flat list of prop definitions derived from the component at runtime */
     propDefinitions?: PropDefinition[];
 };
 declare var __VLS_1: {}, __VLS_19: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-generation-emails",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A Nuxt module for authoring, previewing, and sending transactional email templates with Vue Email.",
   "author": "nullcarry@icloud.com",
   "repository": {