feat: add mjml component to process mjml markup

package.json

@@ -17,6 +17,7 @@
     "./types": "./build/src/types.js",
     "./commands": "./build/commands/main.js",
     "./services/main": "./build/services/main.js",
+    "./plugins/edge": "./build/src/plugins/edge.js",
     "./mail_provider": "./build/providers/mail_provider.js",
     "./transports/ses": "./build/src/transports/ses.js",
     "./transports/json": "./build/src/transports/json.js",
@@ -62,6 +63,7 @@
     "@swc/core": "^1.3.102",
     "@types/async-retry": "^1.4.8",
     "@types/luxon": "^3.4.0",
+    "@types/mjml": "^4.7.4",
     "@types/node": "^20.10.7",
     "@types/sinon": "^17.0.2",
     "async-retry": "^1.3.3",
@@ -75,6 +77,7 @@
     "github-label-sync": "^2.3.1",
     "husky": "^8.0.3",
     "luxon": "^3.4.3",
+    "mjml": "^4.14.1",
     "np": "^9.2.0",
     "prettier": "^3.1.1",
     "sinon": "^17.0.1",
@@ -151,6 +154,7 @@
     "entry": [
       "index.ts",
       "src/types.ts",
+      "src/plugins/edge.ts",
       "services/main.ts",
       "commands/make_mail.ts",
       "providers/mail_provider.ts",

providers/mail_provider.ts

@@ -42,6 +42,8 @@ export default class MailProvider {
           return edge.default.share(helpers).render(templatePath, data)
         },
       }
+      const { mailPluginEdge } = await import('../src/plugins/edge.js')
+      edge.default.use(mailPluginEdge)
     }
   }
 

src/plugins/edge.ts

@@ -0,0 +1,30 @@
+/*
+ * @adonisjs/mail
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import type { PluginFn } from 'edge.js/types'
+import debug from '../debug.js'
+
+/**
+ * Registers mjml component to convert email markup
+ * to HTML
+ */
+export const mailPluginEdge: PluginFn<undefined> = (edge) => {
+  debug('detected edge. registering mjml component')
+
+  edge.global('mail', {
+    async processMjml(markup: string, options: any) {
+      const mjml = await import('mjml')
+      return mjml.default(markup, options).html
+    },
+  })
+
+  edge.registerTemplate('mjml', {
+    template: `{{{ await mail.processMjml(await $slots.main(), $props.all()) }}}`,
+  })
+}

tests/integration/plugins/edge.spec.ts

@@ -0,0 +1,36 @@
+/*
+ * @adonisjs/mail
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import mjml2html from 'mjml'
+import { Edge } from 'edge.js'
+import { test } from '@japa/runner'
+import { mailPluginEdge } from '../../../src/plugins/edge.js'
+
+test.group('Edge plugin', () => {
+  test('render mjml markup to HTML', async ({ assert, fs }) => {
+    const edge = new Edge()
+    edge.mount(fs.baseUrl)
+    edge.use(mailPluginEdge)
+
+    const markup = `<mjml>
+<mj-body>
+  <mj-section>
+    <mj-column>
+      <mj-text>
+        Hello World!
+      </mj-text>
+    </mj-column>
+  </mj-section>
+</mj-body>
+</mjml>`
+
+    const html = await edge.renderRaw(`@mjml() \n ${markup} \n @end`)
+    assert.equal(html, mjml2html(markup).html)
+  })
+})