From 88f2e456ef869aac9c1f82cea73f0e963f4ca8e6 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Sat, 5 Sep 2026 15:59:56 +0530 Subject: [PATCH] fix(email): validate MJML before exposing exports --- packages/email-renderer/package.json | 2 +- packages/email-renderer/src/email.ts | 9 ++++++++- packages/email-renderer/test/root-mjml.test.ts | 11 +++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/email-renderer/package.json b/packages/email-renderer/package.json index 68f92596..6adc8f3e 100644 --- a/packages/email-renderer/package.json +++ b/packages/email-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/email-renderer", - "version": "0.1.26", + "version": "0.1.27", "type": "module", "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.", "exports": { diff --git a/packages/email-renderer/src/email.ts b/packages/email-renderer/src/email.ts index bea04d2f..7db50ca3 100644 --- a/packages/email-renderer/src/email.ts +++ b/packages/email-renderer/src/email.ts @@ -13,6 +13,7 @@ import { type Result, } from "@wrnexus/blocks"; import { emailCoreBlocks, ampLayoutCss } from "./blocks.ts"; +import { validateMjml } from "./mjml.ts"; interface AmpValidationError { severity: string; @@ -168,7 +169,13 @@ export async function renderEmail( warnings, assets: [], }; - if (mjmlResult?.ok) bundle.exports = { mjml: mjmlResult.value.content }; + if (mjmlResult?.ok) { + const diagnostics = await validateMjml(mjmlResult.value.content); + if (!diagnostics.length) bundle.exports = { mjml: mjmlResult.value.content }; + else warnings.push(...diagnostics.map(diagnostic => ({ ...diagnostic, severity: "warning" as const }))); + } else if (mjmlResult) { + warnings.push(...mjmlResult.errors.map(diagnostic => ({ ...diagnostic, severity: "warning" as const }))); + } if (options.amp) { const amp = await renderTree(source, emailKind, registry, { ...base, target: "ampEmail", data: options.variables }); if (amp.ok) { diff --git a/packages/email-renderer/test/root-mjml.test.ts b/packages/email-renderer/test/root-mjml.test.ts index 8baa8045..7249c5e4 100644 --- a/packages/email-renderer/test/root-mjml.test.ts +++ b/packages/email-renderer/test/root-mjml.test.ts @@ -5,6 +5,17 @@ import { renderEmail, validateMjml } from "../src/index.ts"; const text = (id: string): BlockNode => ({ id, type: "content.text", version: 1, props: { text: id }, styles: {}, slots: {} }); const columns = (id: string): BlockNode => ({ id, type: "layout.columns", version: 1, props: {}, styles: {}, slots: { columns: [0, 1].map(index => ({ id: `${id}-${index}`, type: "layout.column", version: 1, props: { width: "50%" }, styles: {}, slots: { content: [text(`${id}-text-${index}`)] } })) } }); +test("invalid nested MJML is diagnosed and omitted while HTML and text remain usable", async () => { + const document: BlockDocument = { schemaVersion: 1, kind: "email", meta: { subject: "Nested", lang: "en" }, theme: { tokens: {} }, root: { id: "root", type: "layout.email-document", version: 1, props: {}, styles: {}, slots: { content: [{ id: "outer", type: "layout.section", version: 1, props: {}, styles: {}, slots: { content: [{ id: "inner", type: "layout.section", version: 1, props: {}, styles: {}, slots: { content: [text("Retained nested content")] } }] } }] } } }; + const rendered = await renderEmail(document, { mjml: true }); + expect(rendered.ok).toBe(true); + if (!rendered.ok) return; + expect(rendered.value.exports?.mjml).toBeUndefined(); + expect(rendered.value.warnings.some(warning => warning.code === "mjml.validation")).toBe(true); + expect(rendered.value.parts.html.content).toContain("Retained nested content"); + expect(rendered.value.parts.text.content).toContain("Retained nested content"); +}); + test("root content and separate column rows produce valid ordered MJML without changing the document", async () => { const document: BlockDocument = { schemaVersion: 1, kind: "email", meta: { subject: "Root blocks", lang: "en" }, theme: { tokens: {} }, root: { id: "root", type: "layout.email-document", version: 1, props: {}, styles: {}, slots: { content: [text("intro"), columns("first"), columns("second"), { id: "cta", type: "content.button", version: 1, props: { label: "Act", href: "https://example.com" }, styles: {}, slots: {} }, text("end")] } } }; const before = structuredClone(document);