nuxt-generation-emails 1.0.4 → 1.0.5

package/dist/module.json

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

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { join, relative } from 'pathe';
 import { consola } from 'consola';
 import { parse, compileScript } from 'vue/compiler-sfc';
 
-function generateWrapperComponent(emailsLayoutPath, emailComponentPath) {
+function generateWrapperComponent(emailsLayoutPath, emailComponentPath, extractedPropTypes = {}) {
   const scriptClose = "<\/script>";
   const templateOpen = "<template>";
   const templateClose = "</template>";
@@ -37,6 +37,12 @@ function inferType(ctor: unknown): 'string' | 'number' | 'boolean' | 'object' |
   if (ctor === Number) return 'number'
   if (ctor === Boolean) return 'boolean'
   if (ctor === Object || ctor === Array) return 'object'
+  if (Array.isArray(ctor)) {
+    if (ctor.includes(String)) return 'string'
+    if (ctor.includes(Number)) return 'number'
+    if (ctor.includes(Boolean)) return 'boolean'
+    if (ctor.includes(Object) || ctor.includes(Array)) return 'object'
+  }
   return 'unknown'
 }
 
@@ -45,6 +51,8 @@ interface PropDefinition {
   type: 'string' | 'number' | 'boolean' | 'object' | 'unknown'
 }
 
+const extractedTypes = ${JSON.stringify(extractedPropTypes, null, 2)} as Record<string, PropDefinition['type']>
+
 const introspected = computed(() => {
   const comp = emailComponent.value as any
   const raw = comp?.props
@@ -55,12 +63,13 @@ const introspected = computed(() => {
 
   if (Array.isArray(raw)) {
     for (const name of raw) {
-      defs.push({ name, type: 'unknown' })
+      defs.push({ name, type: extractedTypes[name] ?? '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) })
+      const runtimeType = inferType(ctor)
+      defs.push({ name, type: runtimeType !== 'unknown' ? runtimeType : (extractedTypes[name] ?? 'unknown') })
 
       if (spec?.default !== undefined) {
         defaults[name] = typeof spec.default === 'function' ? spec.default() : spec.default
@@ -135,6 +144,298 @@ ${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 = extractDefaults(compiled.scriptSetupAst, 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 asAstNode(value) {
+  if (!value || typeof value !== "object") return null;
+  const node = value;
+  if (typeof node.type !== "string") return null;
+  return node;
+}
+function extractDefaults(scriptSetupAst, scriptContent) {
+  const astDefaults = extractDefaultsFromAst(scriptSetupAst);
+  if (astDefaults) return astDefaults;
+  return extractDefaultsFromSource(scriptContent);
+}
+function extractDefaultsFromAst(scriptSetupAst) {
+  if (!Array.isArray(scriptSetupAst)) return null;
+  for (const root of scriptSetupAst) {
+    const rootNode = asAstNode(root);
+    if (!rootNode) continue;
+    const found = findWithDefaultsSecondArg(rootNode);
+    if (!found) continue;
+    try {
+      const evaluated = evaluateAstExpression(found);
+      if (evaluated && typeof evaluated === "object" && !Array.isArray(evaluated)) {
+        return evaluated;
+      }
+    } catch (error) {
+      debugLog("Failed AST-based withDefaults extraction; falling back to source parser", error);
+    }
+  }
+  return null;
+}
+function findWithDefaultsSecondArg(node) {
+  if (node.type === "CallExpression") {
+    const callee = asAstNode(node.callee);
+    if (callee?.type === "Identifier" && callee.name === "withDefaults") {
+      const args = Array.isArray(node.arguments) ? node.arguments : [];
+      const secondArg = asAstNode(args[1]);
+      if (secondArg) return secondArg;
+    }
+  }
+  for (const value of Object.values(node)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        const child2 = asAstNode(item);
+        if (!child2) continue;
+        const found2 = findWithDefaultsSecondArg(child2);
+        if (found2) return found2;
+      }
+      continue;
+    }
+    const child = asAstNode(value);
+    if (!child) continue;
+    const found = findWithDefaultsSecondArg(child);
+    if (found) return found;
+  }
+  return null;
+}
+function evaluateAstExpression(node) {
+  switch (node.type) {
+    case "ObjectExpression": {
+      const result = {};
+      const properties = Array.isArray(node.properties) ? node.properties : [];
+      for (const propLike of properties) {
+        const prop = asAstNode(propLike);
+        if (!prop) continue;
+        if (prop.type !== "ObjectProperty") continue;
+        const keyNode = asAstNode(prop.key);
+        const key = keyNode?.type === "Identifier" ? String(keyNode.name) : keyNode?.type === "StringLiteral" ? String(keyNode.value) : null;
+        if (!key) continue;
+        const valueNode = asAstNode(prop.value);
+        if (!valueNode) continue;
+        result[key] = evaluateAstExpression(valueNode);
+      }
+      return result;
+    }
+    case "ArrayExpression": {
+      const elements = Array.isArray(node.elements) ? node.elements : [];
+      return elements.map((element) => asAstNode(element)).filter((element) => !!element).map((element) => evaluateAstExpression(element));
+    }
+    case "StringLiteral":
+      return node.value;
+    case "NumericLiteral":
+      return node.value;
+    case "BooleanLiteral":
+      return node.value;
+    case "NullLiteral":
+      return null;
+    case "TemplateLiteral": {
+      const expressions = Array.isArray(node.expressions) ? node.expressions : [];
+      if (expressions.length > 0) {
+        throw new Error("Unsupported TemplateLiteral with expressions in defaults");
+      }
+      const quasis = Array.isArray(node.quasis) ? node.quasis : [];
+      return quasis.map((quasi) => {
+        const quasiNode = asAstNode(quasi);
+        const cooked = quasiNode?.value && typeof quasiNode.value === "object" ? quasiNode.value.cooked : void 0;
+        return typeof cooked === "string" ? cooked : "";
+      }).join("");
+    }
+    case "ArrowFunctionExpression": {
+      const body = asAstNode(node.body);
+      if (!body) return void 0;
+      if (body.type === "BlockStatement") {
+        const statements = Array.isArray(body.body) ? body.body : [];
+        const returnStmt = statements.map((stmt) => asAstNode(stmt)).find((stmt) => stmt?.type === "ReturnStatement");
+        const arg = returnStmt ? asAstNode(returnStmt.argument) : null;
+        return arg ? evaluateAstExpression(arg) : void 0;
+      }
+      return evaluateAstExpression(body);
+    }
+    case "ParenthesizedExpression": {
+      const expr = asAstNode(node.expression);
+      return expr ? evaluateAstExpression(expr) : void 0;
+    }
+    case "TSAsExpression": {
+      const expr = asAstNode(node.expression);
+      return expr ? evaluateAstExpression(expr) : void 0;
+    }
+    case "Identifier": {
+      if (node.name === "undefined") return void 0;
+      throw new Error(`Unsupported identifier in defaults: ${String(node.name)}`);
+    }
+    default:
+      throw new Error(`Unsupported AST node in defaults: ${node.type}`);
+  }
+}
+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 defaultsText = extractDefaultsObjectText(scriptContent);
+  if (!defaultsText) return {};
+  try {
+    const fn = new Function(`
+      const _defaults = (${defaultsText});
+      const _result = {};
+      for (const [k, v] of Object.entries(_defaults)) {
+        _result[k] = typeof v === 'function' ? v() : v;
+      }
+      return _result;
+    `);
+    return fn();
+  } catch {
+    return extractPrimitivesFromObjectLiteral(defaultsText);
+  }
+}
+function extractDefaultsObjectText(scriptContent) {
+  const wdIdx = scriptContent.indexOf("withDefaults(");
+  if (wdIdx === -1) return null;
+  const start = scriptContent.indexOf("(", wdIdx + "withDefaults".length);
+  if (start === -1) return null;
+  let depth = 1;
+  let i = start + 1;
+  let separatorComma = -1;
+  while (i < scriptContent.length && depth > 0) {
+    const ch = scriptContent[i];
+    if (ch === "'" || ch === '"') {
+      const quote = ch;
+      i++;
+      while (i < scriptContent.length) {
+        if (scriptContent[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (scriptContent[i] === quote) break;
+        i++;
+      }
+      i++;
+      continue;
+    }
+    if (ch === "`") {
+      i++;
+      while (i < scriptContent.length) {
+        if (scriptContent[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (scriptContent[i] === "`") break;
+        if (scriptContent[i] === "$" && scriptContent[i + 1] === "{") {
+          i += 2;
+          let tdepth = 1;
+          while (i < scriptContent.length && tdepth > 0) {
+            if (scriptContent[i] === "{") tdepth++;
+            else if (scriptContent[i] === "}") tdepth--;
+            if (tdepth > 0) i++;
+          }
+        }
+        i++;
+      }
+      i++;
+      continue;
+    }
+    if (ch === "/" && scriptContent[i + 1] === "/") {
+      i = scriptContent.indexOf("\n", i);
+      if (i === -1) break;
+      i++;
+      continue;
+    }
+    if (ch === "/" && scriptContent[i + 1] === "*") {
+      i = scriptContent.indexOf("*/", i) + 2;
+      if (i < 2) break;
+      continue;
+    }
+    if (ch === "(" || ch === "{" || ch === "[") {
+      depth++;
+    } else if (ch === ")" || ch === "}" || ch === "]") {
+      depth--;
+      if (depth === 0) break;
+    } else if (ch === "," && depth === 1 && separatorComma === -1) {
+      separatorComma = i;
+    }
+    i++;
+  }
+  if (separatorComma === -1) return null;
+  const secondArg = scriptContent.slice(separatorComma + 1, i).trim();
+  return secondArg || null;
+}
+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) {
@@ -155,7 +456,11 @@ function addEmailPages(dirPath, pages, options, routePrefix = "") {
       }
       const wrapperContent = generateWrapperComponent(
         options.emailTemplateComponentPath,
-        fullPath
+        fullPath,
+        extractPropsFromSFC(fullPath).props.reduce((acc, prop) => {
+          acc[prop.name] = prop.type;
+          return acc;
+        }, {})
       );
       fs.writeFileSync(wrapperPath, wrapperContent, "utf-8");
       const pageName = `email${routePrefix.replace(/\//g, "-")}-${name}`.replace(/^-+/, "");
@@ -175,7 +480,7 @@ function generateApiRoute(emailName, emailPath, examplePayload = "{}") {
 import { defineEventHandler, readBody, createError } from 'h3'
 import { useNitroApp, useRuntimeConfig } from '#imports'
 import { readFileSync, existsSync, readdirSync } from 'node:fs'
-import { join, basename } from 'node:path'
+import { join, relative } from 'node:path'
 import mjml2html from 'mjml'
 import Handlebars from 'handlebars'
 
@@ -187,16 +492,31 @@ function registerMjmlPartials(emailsDir: string): void {
   const componentsDir = join(emailsDir, 'components')
   if (!existsSync(componentsDir)) return
 
-  {
-    const files = readdirSync(componentsDir)
+  const walk = (dir: string) => {
+    const entries = readdirSync(dir, { withFileTypes: true })
 
-    for (const file of files) {
-      if (!file.endsWith('.mjml')) continue
-      const partialName = basename(file, '.mjml')
-      const partialSource = readFileSync(join(componentsDir, file), 'utf-8')
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name)
+
+      if (entry.isDirectory()) {
+        walk(fullPath)
+        continue
+      }
+
+      if (!entry.name.endsWith('.mjml')) continue
+
+      const relativeName = relative(componentsDir, fullPath).replace(/\\\\/g, '/')
+      const partialName = relativeName.endsWith('.mjml') ? relativeName.slice(0, -5) : relativeName
+      const basename = entry.name.endsWith('.mjml') ? entry.name.slice(0, -5) : entry.name
+
+      const partialSource = readFileSync(fullPath, 'utf-8')
       Handlebars.registerPartial(partialName, partialSource)
+      // Backward compatibility: allow {{> Header}} for nested components.
+      Handlebars.registerPartial(basename, partialSource)
     }
   }
+
+  walk(componentsDir)
 }
 
 type SendData<TAdditional extends Record<string, unknown> = Record<string, unknown>> = {
@@ -211,6 +531,7 @@ type NuxtGenEmailsApiBody<
 > = {
   templateData: TTemplateData
   sendData: TSendData
+  stopSend?: boolean
 }
 
 defineRouteMeta({
@@ -242,6 +563,11 @@ defineRouteMeta({
                   subject: { type: 'string', example: 'Sending with Twilio SendGrid is Fun' },
                 },
               },
+              stopSend: {
+                type: 'boolean',
+                description: 'When true, render the template but skip the send hook.',
+                example: true,
+              },
             },
             required: ['templateData', 'sendData'],
           },
@@ -289,6 +615,7 @@ export default defineEventHandler(async (event) => {
 
   const templateData = body?.templateData ?? {}
   const sendData = body?.sendData ?? {}
+  const stopSend = body?.stopSend === true
 
   try {
     const { emailsDir } = useRuntimeConfig().nuxtGenEmails as { emailsDir: string }
@@ -302,9 +629,11 @@ export default defineEventHandler(async (event) => {
       throw new Error('MJML compilation errors: ' + errors.map(e => e.formattedMessage).join('; '))
     }
 
-    const nitro = useNitroApp()
-    // @ts-ignore - custom hook
-    await nitro.hooks.callHook('nuxt-generation-emails:send', { html, data: sendData })
+    if (!stopSend) {
+      const nitro = useNitroApp()
+      // @ts-ignore - custom hook
+      await nitro.hooks.callHook('nuxt-generation-emails:send', { html, data: sendData })
+    }
 
     return { success: true, message: 'Email rendered successfully', html }
   }
@@ -316,174 +645,22 @@ 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: {} };
+function sanitizeForOpenApi(value) {
+  if (typeof value === "string") {
+    return value.replace(/"/g, "\\u0022").replace(/\\'/g, "'");
   }
-  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: {} };
+  if (Array.isArray(value)) {
+    return value.map(sanitizeForOpenApi);
   }
-}
-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;
+  if (value !== null && typeof value === "object") {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      out[k] = sanitizeForOpenApi(v);
     }
+    return out;
   }
-  return result;
+  return value;
 }
-function extractDefaultsFromSource(scriptContent) {
-  const defaultsText = extractDefaultsObjectText(scriptContent);
-  if (!defaultsText) return {};
-  try {
-    const fn = new Function(`
-      const _defaults = (${defaultsText});
-      const _result = {};
-      for (const [k, v] of Object.entries(_defaults)) {
-        _result[k] = typeof v === 'function' ? v() : v;
-      }
-      return _result;
-    `);
-    return fn();
-  } catch {
-    return extractPrimitivesFromObjectLiteral(defaultsText);
-  }
-}
-function extractDefaultsObjectText(scriptContent) {
-  const wdIdx = scriptContent.indexOf("withDefaults(");
-  if (wdIdx === -1) return null;
-  const start = scriptContent.indexOf("(", wdIdx + "withDefaults".length);
-  if (start === -1) return null;
-  let depth = 1;
-  let i = start + 1;
-  let separatorComma = -1;
-  while (i < scriptContent.length && depth > 0) {
-    const ch = scriptContent[i];
-    if (ch === "'" || ch === '"') {
-      const quote = ch;
-      i++;
-      while (i < scriptContent.length) {
-        if (scriptContent[i] === "\\") {
-          i += 2;
-          continue;
-        }
-        if (scriptContent[i] === quote) break;
-        i++;
-      }
-      i++;
-      continue;
-    }
-    if (ch === "`") {
-      i++;
-      while (i < scriptContent.length) {
-        if (scriptContent[i] === "\\") {
-          i += 2;
-          continue;
-        }
-        if (scriptContent[i] === "`") break;
-        if (scriptContent[i] === "$" && scriptContent[i + 1] === "{") {
-          i += 2;
-          let tdepth = 1;
-          while (i < scriptContent.length && tdepth > 0) {
-            if (scriptContent[i] === "{") tdepth++;
-            else if (scriptContent[i] === "}") tdepth--;
-            if (tdepth > 0) i++;
-          }
-        }
-        i++;
-      }
-      i++;
-      continue;
-    }
-    if (ch === "/" && scriptContent[i + 1] === "/") {
-      i = scriptContent.indexOf("\n", i);
-      if (i === -1) break;
-      i++;
-      continue;
-    }
-    if (ch === "/" && scriptContent[i + 1] === "*") {
-      i = scriptContent.indexOf("*/", i) + 2;
-      if (i < 2) break;
-      continue;
-    }
-    if (ch === "(" || ch === "{" || ch === "[") {
-      depth++;
-    } else if (ch === ")" || ch === "}" || ch === "]") {
-      depth--;
-      if (depth === 0) break;
-    } else if (ch === "," && depth === 1 && separatorComma === -1) {
-      separatorComma = i;
-    }
-    i++;
-  }
-  if (separatorComma === -1) return null;
-  const secondArg = scriptContent.slice(separatorComma + 1, i).trim();
-  return secondArg || null;
-}
-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");
@@ -514,7 +691,8 @@ function generateServerRoutes(emailsDir, buildDir) {
           fs.mkdirSync(handlerDir, { recursive: true });
         }
         const { defaults } = extractPropsFromSFC(fullPath);
-        const examplePayload = Object.keys(defaults).length > 0 ? JSON.stringify(defaults, null, 2) : "{}";
+        const sanitized = sanitizeForOpenApi(defaults);
+        const examplePayload = Object.keys(sanitized).length > 0 ? JSON.stringify(sanitized, null, 2) : "{}";
         const handlerFileName = `${emailName}.ts`;
         const handlerFilePath = join(handlerDir, handlerFileName);
         const handlerContent = generateApiRoute(emailName, emailPath, examplePayload);
@@ -583,7 +761,7 @@ declare module 'nitropack/types' {
     }, { nuxt: true, nitro: true });
     const configuredEmailDir = options.emailDir ?? "emails";
     const emailsDir = join(nuxt.options.srcDir, configuredEmailDir);
-    const globPath = `~/${configuredEmailDir}/components/*.mjml`;
+    const globPath = `~/${configuredEmailDir}/components/**/*.mjml`;
     addTemplate({
       filename: "nge/register-components.ts",
       write: true,
@@ -593,8 +771,16 @@ const componentFiles: Record<string, unknown> = import.meta.glob('${globPath}',
 
 export function registerMjmlComponents(): void {
   for (const [path, source] of Object.entries(componentFiles)) {
-    const name = path.split('/').pop()!.replace('.mjml', '')
-    Handlebars.registerPartial(name, source as string)
+    const normalizedPath = path.split('?')[0] || path
+    const parts = normalizedPath.split('/')
+    const componentsIdx = parts.lastIndexOf('components')
+    const relativeParts = componentsIdx >= 0 ? parts.slice(componentsIdx + 1) : [parts[parts.length - 1]]
+    const relativeName = relativeParts.join('/').replace('.mjml', '')
+    const basename = relativeParts[relativeParts.length - 1]!.replace('.mjml', '')
+
+    Handlebars.registerPartial(relativeName, source as string)
+    // Backward compatibility: allow {{> Header}} for nested components.
+    Handlebars.registerPartial(basename, source as string)
   }
 }
 `

package/dist/runtime/components/ApiTester.vue

@@ -37,7 +37,8 @@ async function testApi() {
       method: "POST",
       body: {
         templateData: props.dataObject,
-        sendData: {}
+        sendData: {},
+        stopSend: true
       }
     });
     responseData.value = result;
@@ -62,7 +63,8 @@ async function sendTestEmail() {
     sendData: {
       to: lastUsedEmail.value,
       subject: `Test email ${Date.now()}`
-    }
+    },
+    stopSend: false
   };
   isLoading.value = true;
   sendStatus.value = "sending";

package/package.json

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