nuxt-generation-emails 1.0.7 → 1.1.1

package/dist/cli/index.mjs

@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<{
 
 /**
  * useNgeTemplate auto-loads the sibling .mjml file, compiles it with
- * Handlebars, and returns a reactive ComputedRef<string> of rendered HTML.
+ * Handlebars, and sets the render function \u2014 no <template> block needed.
  * MJML components from components/ are registered automatically.
  */
 useNgeTemplate('${templatePath}', props)

package/dist/module.json

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

package/dist/module.mjs

@@ -623,7 +623,7 @@ export default defineEventHandler(async (event) => {
     const mjmlSource = readFileSync(join(emailsDir, '${emailPath}.mjml'), 'utf-8')
     const compiledTemplate = Handlebars.compile(mjmlSource)
     const mjmlString = compiledTemplate(templateData)
-    const { html, errors } = mjml2html(mjmlString)
+    const { html, errors } = await mjml2html(mjmlString)
 
     if (errors && errors.length > 0) {
       throw new Error('MJML compilation errors: ' + errors.map(e => e.formattedMessage).join('; '))
@@ -789,15 +789,18 @@ export function registerMjmlComponents(): void {
     addTemplate({
       filename: "nge/use-template.ts",
       write: true,
-      getContents: () => `import { computed, h, getCurrentInstance } from 'vue'
-import type { ComputedRef } from 'vue'
+      getContents: () => `import { h, ref, watch, toRef, getCurrentInstance } from 'vue'
+import type { Ref, VNode } from 'vue'
 import Handlebars from 'handlebars'
 import { registerMjmlComponents } from './register-components'
 
-// Lazy-load mjml-browser only on the client to avoid "window is not defined" during SSR
-let mjml2html: ((mjml: string) => { html: string; errors: unknown[] }) | null = null
+// Lazy-load mjml-browser only on the client to avoid "window is not defined" during SSR.
+// mjml-browser v5+ returns a Promise, so we store the convert function in a ref
+// and resolve the HTML asynchronously via watchEffect.
+type Mjml2Html = (mjml: string) => Promise<{ html: string; errors: unknown[] }>
+const mjml2html: Ref<Mjml2Html | null> = ref(null)
 if (import.meta.client) {
-  mjml2html = (await import('mjml-browser')).default
+  import('mjml-browser').then(m => { mjml2html.value = m.default })
 }
 
 const mjmlTemplates: Record<string, string> = import.meta.glob(
@@ -820,51 +823,56 @@ let _componentsRegistered = false
 /**
  * Load and render an MJML email template by name.
  * Registers MJML components (Handlebars partials) automatically on first call.
- * Sets the component's render function so no <template> block is needed.
+ * Sets the current component's render function \u2014 no <template> block needed.
  *
  * @param name - Template name relative to the emails directory (e.g. 'example', 'v1/test')
  * @param props - Reactive props object from defineProps
- * @returns ComputedRef<string> containing the rendered HTML
  */
-export function useNgeTemplate(name: string, props: Record<string, unknown>): ComputedRef<string> {
+export function useNgeTemplate(name: string, props: Record<string, unknown>): void {
   if (!_componentsRegistered) {
     registerMjmlComponents()
     _componentsRegistered = true
   }
 
+  const instance = getCurrentInstance()
+  const renderedHtml = ref('')
+
   const source = templateMap[name]
   if (!source) {
     const available = Object.keys(templateMap).join(', ')
     console.error(\`[nuxt-generation-emails] Template "\${name}" not found. Available: \${available}\`)
-    const fallback = computed(() => \`<pre style="color:red;">Template "\${name}" not found</pre>\`)
-    const instance = getCurrentInstance()
-    if (instance) instance.render = () => h('div', { innerHTML: fallback.value })
-    return fallback
-  }
-
-  const compiled = Handlebars.compile(source)
-
-  const renderedHtml = computed(() => {
-    // mjml-browser requires window \u2014 skip rendering during SSR
-    if (!mjml2html) return ''
-    try {
-      const mjmlString = compiled({ ...props })
-      const result = mjml2html(mjmlString)
-      return result.html
-    }
-    catch (e: unknown) {
-      console.error(\`[\${name}] Error rendering MJML:\`, e)
-      return \`<pre style="color:red;">\${e instanceof Error ? e.message : String(e)}\\n\${e instanceof Error ? e.stack : ''}</pre>\`
+    renderedHtml.value = \`<pre style="color:red;">Template "\${name}" not found</pre>\`
+    if (instance) {
+      instance.render = (): VNode => h('div', { innerHTML: renderedHtml.value })
     }
-  })
+    return
+  }
 
-  // Set render function on the component instance so no <template> block is needed
-  const instance = getCurrentInstance()
+  // Set the render function on the component instance so Vue renders the HTML directly.
   if (instance) {
-    instance.render = () => h('div', { innerHTML: renderedHtml.value })
+    instance.render = (): VNode => h('div', { innerHTML: renderedHtml.value })
   }
 
-  return renderedHtml
+  const compiled = Handlebars.compile(source)
+
+  // mjml-browser v5 returns a Promise \u2014 use watch to resolve async results reactively.
+  // Tracks both the mjml2html loader ref AND all accessed props (via the Handlebars compile spread).
+  watch(
+    [mjml2html, toRef(() => ({ ...props }))],
+    async ([convert]) => {
+      if (!convert) { renderedHtml.value = ''; return }
+      try {
+        const mjmlString = compiled({ ...props })
+        const result = await convert(mjmlString)
+        renderedHtml.value = result.html
+      }
+      catch (e: unknown) {
+        console.error(\`[\${name}] Error rendering MJML:\`, e)
+        renderedHtml.value = \`<pre style="color:red;">\${e instanceof Error ? e.message : String(e)}\\n\${e instanceof Error ? e.stack : ''}</pre>\`
+      }
+    },
+    { immediate: true, deep: true },
+  )
 }
 `
     });

package/dist/runtime/types/mjml.d.ts

@@ -21,7 +21,7 @@ declare module 'mjml-browser' {
     preprocessors?: Array<(xml: string) => string>
   }
 
-  function mjml2html(mjml: string, options?: MjmlOptions): MjmlResult
+  function mjml2html(mjml: string, options?: MjmlOptions): Promise<MjmlResult>
   export default mjml2html
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-generation-emails",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "A Nuxt module for authoring, previewing, and sending transactional email templates with MJML and Handlebars.",
   "author": "nullcarry@icloud.com",
   "repository": {
@@ -66,8 +66,8 @@
     "citty": "^0.2.1",
     "consola": "^3.4.2",
     "handlebars": "^4.7.8",
-    "mjml": "^4.18.0",
-    "mjml-browser": "^4.18.0",
+    "mjml": "^5.0.0-alpha.11",
+    "mjml-browser": "^5.0.0-alpha.11",
     "pathe": "^2.0.3"
   },
   "peerDependencies": {