fix(email-renderer): export builder rows as valid MJML columns
Quality / quality (ubuntu-latest) (push) Failing after 1s
Quality / quality (windows-latest) (push) Canceled after 0s

This commit is contained in:
Clintchiz committed 2026-09-05 13:19:45 +05:30
1 parent b915a2206f
commit 8e51b28583
3 files changed
+22 -3

No files matched your search

+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@wrnexus/email-renderer", "name": "@wrnexus/email-renderer",
"version": "0.1.16", "version": "0.1.17",
"type": "module", "type": "module",
"description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.", "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
"exports": { "exports": {
+7 -2
View File
@@ -158,8 +158,13 @@ export const sectionBlock = defineBlock({
`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="section"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`, `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="section"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
node, node,
), ),
mjml: ({ node, slots }) => mjml: ({ node, slots }) => {
`<mj-section background-color="${html(attrs(node).background)}" padding="${html(attrs(node).padding)}"><mj-column>${slots.content}</mj-column></mj-section>`, const children = node.slots.content ?? [];
const body = children.length === 1 && children[0]?.type === "layout.columns"
? slots.content
: `<mj-column>${slots.content}</mj-column>`;
return `<mj-section background-color="${html(attrs(node).background)}" padding="${html(attrs(node).padding)}">${body}</mj-section>`;
},
}, },
textRenderer: ({ slots }) => `${slots.content}\n`, textRenderer: ({ slots }) => `${slots.content}\n`,
} satisfies BlockDefinition); } satisfies BlockDefinition);
@@ -57,6 +57,20 @@ const document: BlockDocument = {
}; };
describe("email renderer", () => { describe("email renderer", () => {
test("builder column rows export without nesting mj-column inside mj-column", async () => {
for (const count of [1,2,3,4]) {
const draft=structuredClone(document);
const content=draft.root.slots.content[0]!.slots.content;
draft.root.slots.content[0]!.slots.content=[{id:"columns",type:"layout.columns",version:1,props:{},styles:{},slots:{columns:Array.from({length:count},(_,index)=>({id:`column-${index}`,type:"layout.column",version:1,props:{width:`${100/count}%`},styles:{},slots:{content:index===0?content:[]}}))}}];
const result=await renderEmail(draft,{mjml:true});
expect(result.ok).toBe(true);
if(!result.ok)continue;
const mjml=result.value.exports!.mjml!;
expect(mjml.match(/<mj-column\b/g)).toHaveLength(count);
expect(await validateMjml(mjml)).toEqual([]);
expect(mjml).toContain("Hello &lt;world&gt;");
}
});
test("global brand logo survives HTML, AMP, and strict MJML export", async () => { test("global brand logo survives HTML, AMP, and strict MJML export", async () => {
const draft = structuredClone(document); const draft = structuredClone(document);
draft.root.props.logoUrl = "https://example.com/logo.png"; draft.root.props.logoUrl = "https://example.com/logo.png";