@emabuild/email-renderer 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.d.ts +5 -0
  2. package/dist/index.d.ts.map +1 -0
  3. package/dist/index.js +209 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/layout/document-shell.d.ts +3 -0
  6. package/dist/layout/document-shell.d.ts.map +1 -0
  7. package/dist/layout/fluid-hybrid.d.ts +5 -0
  8. package/dist/layout/fluid-hybrid.d.ts.map +1 -0
  9. package/dist/render.d.ts +5 -0
  10. package/dist/render.d.ts.map +1 -0
  11. package/dist/utils/responsive-css.d.ts +2 -0
  12. package/dist/utils/responsive-css.d.ts.map +1 -0
  13. package/package.json +37 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export { renderDesignToHtml } from './render.js';
2
+ export { wrapInDocumentShell } from './layout/document-shell.js';
3
+ export { renderRow } from './layout/fluid-hybrid.js';
4
+ export { getResponsiveCss } from './utils/responsive-css.js';
5
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,209 @@
1
+ function wrapInDocumentShell(bodyHtml, cssBlock, bodyValues) {
2
+ const bgColor = bodyValues.backgroundColor || "#e7e7e7";
3
+ const contentWidth = bodyValues.contentWidth || "600px";
4
+ const fontFamily = bodyValues.fontFamily?.value || "arial,helvetica,sans-serif";
5
+ const textColor = bodyValues.textColor || "#000000";
6
+ const preheaderText = bodyValues.preheaderText || "";
7
+ const preheader = preheaderText ? `<div style="display:none;font-size:1px;color:${bgColor};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">${preheaderText}${"&zwnj;&nbsp;".repeat(80)}</div>` : "";
8
+ return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
10
+ <head>
11
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
14
+ <meta name="x-apple-disable-message-reformatting">
15
+ <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
16
+ <meta name="color-scheme" content="light dark">
17
+ <meta name="supported-color-schemes" content="light dark">
18
+ <title></title>
19
+ <!--[if mso]>
20
+ <noscript><xml>
21
+ <o:OfficeDocumentSettings>
22
+ <o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch>
23
+ </o:OfficeDocumentSettings>
24
+ </xml></noscript>
25
+ <style type="text/css">
26
+ table, td, th { font-family: ${fontFamily} !important; }
27
+ </style>
28
+ <![endif]-->
29
+ <!--[if !mso]><!-->
30
+ <style type="text/css">
31
+ ${cssBlock}
32
+ </style>
33
+ <!--<![endif]-->
34
+ <style type="text/css">
35
+ body { margin: 0; padding: 0; }
36
+ table, tr, td { vertical-align: top; border-collapse: collapse; }
37
+ p { margin: 0; }
38
+ .ie-container table, .mso-container table { table-layout: fixed; }
39
+ * { line-height: inherit; }
40
+ a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
41
+ </style>
42
+ </head>
43
+ <body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${bgColor};color:${textColor};">
44
+ ${preheader}
45
+ <table id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;margin:0 auto;background-color:${bgColor};width:100%;" cellpadding="0" cellspacing="0" border="0">
46
+ <tbody>
47
+ <tr style="vertical-align:top;">
48
+ <td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top;">
49
+ <!--[if (mso)|(IE)]><table width="${parseInt(contentWidth)}" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
50
+ ${bodyHtml}
51
+ <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
52
+ </td>
53
+ </tr>
54
+ </tbody>
55
+ </table>
56
+ </body>
57
+ </html>`;
58
+ }
59
+ function renderRow(row, bodyValues, toolRenderers) {
60
+ const contentWidth = parseInt(bodyValues.contentWidth || "600");
61
+ const bgColor = row.values.backgroundColor || "";
62
+ const colsBgColor = row.values.columnsBackgroundColor || "";
63
+ const padding = row.values.padding || "0px";
64
+ const totalCells = row.cells.reduce((a, b) => a + b, 0);
65
+ const bgStyle = bgColor ? `background-color:${bgColor};` : "";
66
+ const bgImage = row.values.backgroundImage?.url ? `background-image:url('${row.values.backgroundImage.url}');background-repeat:${row.values.backgroundImage.repeat ? "repeat" : "no-repeat"};background-position:center top;background-size:${row.values.backgroundImage.cover ? "cover" : "auto"};` : "";
67
+ const columnsHtml = row.columns.map((col, i) => {
68
+ const colWidthPx = Math.round(row.cells[i] / totalCells * contentWidth);
69
+ return renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);
70
+ });
71
+ const needsGhostTable = row.columns.length > 1;
72
+ let innerHtml;
73
+ if (needsGhostTable) {
74
+ const ghostCols = row.columns.map((col, i) => {
75
+ const colWidthPx = Math.round(row.cells[i] / totalCells * contentWidth);
76
+ const colHtml = renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);
77
+ return `<!--[if (mso)|(IE)]><td align="center" width="${colWidthPx}" style="width:${colWidthPx}px;padding:0px;border:none;" valign="top"><![endif]-->
78
+ ${colHtml}
79
+ <!--[if (mso)|(IE)]></td><![endif]-->`;
80
+ });
81
+ innerHtml = `<!--[if (mso)|(IE)]><table role="presentation" width="${contentWidth}" cellpadding="0" cellspacing="0" border="0"><tr>${ghostCols.join("\n")}</tr></table><![endif]-->
82
+
83
+ <!--[if !mso]><!-->
84
+ <div style="max-width:${contentWidth}px;margin:0 auto;">
85
+ ${columnsHtml.join("\n")}
86
+ </div>
87
+ <!--<![endif]-->`;
88
+ } else {
89
+ innerHtml = columnsHtml.join("\n");
90
+ }
91
+ const hideDesktop = row.values.hideDesktop ? " u_hide_desktop" : "";
92
+ const hideMobile = row.values.hideMobile ? " u_hide_mobile" : "";
93
+ return `<div class="u_row${hideDesktop}${hideMobile}" style="padding:${padding};${bgStyle}${bgImage}">
94
+ <div style="margin:0 auto;min-width:320px;max-width:${contentWidth}px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;background-color:transparent;">
95
+ <div style="border-collapse:collapse;display:table;width:100%;height:100%;background-color:transparent;">
96
+ ${innerHtml}
97
+ </div>
98
+ </div>
99
+ </div>`;
100
+ }
101
+ function renderColumn(col, widthPx, colsBgColor, bodyValues, toolRenderers) {
102
+ const bgColor = col.values.backgroundColor || colsBgColor || "";
103
+ const padding = col.values.padding || "0px";
104
+ const borderRadius = col.values.borderRadius || "0px";
105
+ const bgStyle = bgColor ? `background-color:${bgColor};` : "";
106
+ const contentsHtml = col.contents.map((content) => {
107
+ const renderer = toolRenderers.get(content.type);
108
+ if (!renderer) return `<!-- unknown tool: ${content.type} -->`;
109
+ const ctx = {
110
+ columnWidth: widthPx,
111
+ displayMode: "email",
112
+ contentWidth: parseInt(bodyValues.contentWidth || "600"),
113
+ bodyValues
114
+ };
115
+ return renderer(content.values, ctx);
116
+ }).join("\n");
117
+ return `<div class="u_column" style="max-width:${widthPx}px;min-width:${Math.min(widthPx, 320)}px;display:table-cell;vertical-align:top;">
118
+ <div style="height:100%;width:100% !important;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};${bgStyle}">
119
+ <div style="box-sizing:border-box;height:100%;padding:${padding};border:none;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};">
120
+ ${contentsHtml || '<!--[if (!mso)&(!IE)]><!--><div style="height:0;min-height:1px;font-size:0;">&nbsp;</div><!--<![endif]-->'}
121
+ </div>
122
+ </div>
123
+ </div>`;
124
+ }
125
+ function getResponsiveCss(contentWidth) {
126
+ return `
127
+ @media only screen and (min-width: ${contentWidth + 20}px) {
128
+ .u_row .u_column { display: table-cell; }
129
+ }
130
+
131
+ @media only screen and (max-width: ${contentWidth + 20}px) {
132
+ .u_row .u_column {
133
+ display: block !important;
134
+ width: 100% !important;
135
+ min-width: 320px !important;
136
+ max-width: 100% !important;
137
+ }
138
+ .u_row {
139
+ width: 100% !important;
140
+ }
141
+ }
142
+
143
+ @media only screen and (max-width: 620px) {
144
+ .u_row-container {
145
+ max-width: 100% !important;
146
+ padding-left: 0 !important;
147
+ padding-right: 0 !important;
148
+ }
149
+ }
150
+
151
+ @media (prefers-color-scheme: dark) {
152
+ /* Dark mode overrides — add per-client rules as needed */
153
+ }
154
+
155
+ /* Outlook dark mode */
156
+ [data-ogsb] body,
157
+ [data-ogsb] table,
158
+ [data-ogsb] td {
159
+ /* Preserve original colors */
160
+ }
161
+
162
+ .u_hide_desktop { display: block !important; }
163
+ .u_hide_mobile { display: block !important; }
164
+
165
+ @media only screen and (max-width: ${contentWidth + 20}px) {
166
+ .u_hide_desktop { display: block !important; }
167
+ .u_hide_mobile { display: none !important; }
168
+ }
169
+
170
+ @media only screen and (min-width: ${contentWidth + 21}px) {
171
+ .u_hide_desktop { display: none !important; }
172
+ .u_hide_mobile { display: block !important; }
173
+ }`;
174
+ }
175
+ function renderDesignToHtml(design, toolRenderers, options) {
176
+ const bodyValues = design.body.values;
177
+ const contentWidth = parseInt(bodyValues.contentWidth || "600");
178
+ const rowsHtml = design.body.rows.map((row) => renderRow(row, bodyValues, toolRenderers)).join("\n");
179
+ const cssBlock = getResponsiveCss(contentWidth);
180
+ let fullHtml = wrapInDocumentShell(rowsHtml, cssBlock, bodyValues);
181
+ if (options?.mergeTags) {
182
+ for (const [tag, value] of Object.entries(options.mergeTags)) {
183
+ fullHtml = fullHtml.replaceAll(`{{${tag}}}`, value);
184
+ }
185
+ }
186
+ const bodyMatch = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
187
+ const cssMatch = fullHtml.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
188
+ const fontsUsed = [];
189
+ if (bodyValues.fontFamily?.url) {
190
+ fontsUsed.push(bodyValues.fontFamily.url);
191
+ }
192
+ return {
193
+ design: structuredClone(design),
194
+ html: fullHtml,
195
+ chunks: {
196
+ body: bodyMatch?.[1] ?? rowsHtml,
197
+ css: cssMatch?.map((s) => s.replace(/<\/?style[^>]*>/gi, "")).join("\n") ?? cssBlock,
198
+ fonts: fontsUsed,
199
+ js: ""
200
+ }
201
+ };
202
+ }
203
+ export {
204
+ getResponsiveCss,
205
+ renderDesignToHtml,
206
+ renderRow,
207
+ wrapInDocumentShell
208
+ };
209
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/layout/document-shell.ts","../src/layout/fluid-hybrid.ts","../src/utils/responsive-css.ts","../src/render.ts"],"sourcesContent":["import type { BodyValues } from '@emabuild/types';\n\nexport function wrapInDocumentShell(bodyHtml: string, cssBlock: string, bodyValues: BodyValues): string {\n const bgColor = bodyValues.backgroundColor || '#e7e7e7';\n const contentWidth = bodyValues.contentWidth || '600px';\n const fontFamily = bodyValues.fontFamily?.value || 'arial,helvetica,sans-serif';\n const textColor = bodyValues.textColor || '#000000';\n const preheaderText = bodyValues.preheaderText || '';\n\n const preheader = preheaderText\n ? `<div style=\"display:none;font-size:1px;color:${bgColor};line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;\">${preheaderText}${'&zwnj;&nbsp;'.repeat(80)}</div>`\n : '';\n\n return `<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"x-apple-disable-message-reformatting\">\n <meta name=\"format-detection\" content=\"telephone=no,address=no,email=no,date=no,url=no\">\n <meta name=\"color-scheme\" content=\"light dark\">\n <meta name=\"supported-color-schemes\" content=\"light dark\">\n <title></title>\n <!--[if mso]>\n <noscript><xml>\n <o:OfficeDocumentSettings>\n <o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml></noscript>\n <style type=\"text/css\">\n table, td, th { font-family: ${fontFamily} !important; }\n </style>\n <![endif]-->\n <!--[if !mso]><!-->\n <style type=\"text/css\">\n ${cssBlock}\n </style>\n <!--<![endif]-->\n <style type=\"text/css\">\n body { margin: 0; padding: 0; }\n table, tr, td { vertical-align: top; border-collapse: collapse; }\n p { margin: 0; }\n .ie-container table, .mso-container table { table-layout: fixed; }\n * { line-height: inherit; }\n a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }\n </style>\n</head>\n<body class=\"clean-body u_body\" style=\"margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:${bgColor};color:${textColor};\">\n ${preheader}\n <table id=\"u_body\" style=\"border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;margin:0 auto;background-color:${bgColor};width:100%;\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n <tbody>\n <tr style=\"vertical-align:top;\">\n <td style=\"word-break:break-word;border-collapse:collapse !important;vertical-align:top;\">\n <!--[if (mso)|(IE)]><table width=\"${parseInt(contentWidth)}\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td><![endif]-->\n ${bodyHtml}\n <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n </td>\n </tr>\n </tbody>\n </table>\n</body>\n</html>`;\n}\n","import type { DesignRow, DesignColumn, BodyValues } from '@emabuild/types';\n\ntype ContentRenderer = (values: Record<string, unknown>, ctx: any) => string;\n\nexport function renderRow(\n row: DesignRow,\n bodyValues: BodyValues,\n toolRenderers: Map<string, ContentRenderer>,\n): string {\n const contentWidth = parseInt(bodyValues.contentWidth || '600');\n const bgColor = row.values.backgroundColor || '';\n const colsBgColor = row.values.columnsBackgroundColor || '';\n const padding = row.values.padding || '0px';\n const totalCells = row.cells.reduce((a, b) => a + b, 0);\n\n const bgStyle = bgColor ? `background-color:${bgColor};` : '';\n const bgImage = row.values.backgroundImage?.url\n ? `background-image:url('${row.values.backgroundImage.url}');background-repeat:${row.values.backgroundImage.repeat ? 'repeat' : 'no-repeat'};background-position:center top;background-size:${row.values.backgroundImage.cover ? 'cover' : 'auto'};`\n : '';\n\n const columnsHtml = row.columns.map((col, i) => {\n const colWidthPx = Math.round((row.cells[i] / totalCells) * contentWidth);\n return renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);\n });\n\n // For multi-column layouts, use MSO ghost tables\n const needsGhostTable = row.columns.length > 1;\n\n let innerHtml: string;\n if (needsGhostTable) {\n const ghostCols = row.columns.map((col, i) => {\n const colWidthPx = Math.round((row.cells[i] / totalCells) * contentWidth);\n const colHtml = renderColumn(col, colWidthPx, colsBgColor, bodyValues, toolRenderers);\n return `<!--[if (mso)|(IE)]><td align=\"center\" width=\"${colWidthPx}\" style=\"width:${colWidthPx}px;padding:0px;border:none;\" valign=\"top\"><![endif]-->\n${colHtml}\n<!--[if (mso)|(IE)]></td><![endif]-->`;\n });\n\n innerHtml = `<!--[if (mso)|(IE)]><table role=\"presentation\" width=\"${contentWidth}\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr>${ghostCols.join('\\n')}</tr></table><![endif]-->\n\n<!--[if !mso]><!-->\n<div style=\"max-width:${contentWidth}px;margin:0 auto;\">\n${columnsHtml.join('\\n')}\n</div>\n<!--<![endif]-->`;\n } else {\n innerHtml = columnsHtml.join('\\n');\n }\n\n // Visibility classes\n const hideDesktop = row.values.hideDesktop ? ' u_hide_desktop' : '';\n const hideMobile = row.values.hideMobile ? ' u_hide_mobile' : '';\n\n return `<div class=\"u_row${hideDesktop}${hideMobile}\" style=\"padding:${padding};${bgStyle}${bgImage}\">\n <div style=\"margin:0 auto;min-width:320px;max-width:${contentWidth}px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;background-color:transparent;\">\n <div style=\"border-collapse:collapse;display:table;width:100%;height:100%;background-color:transparent;\">\n ${innerHtml}\n </div>\n </div>\n</div>`;\n}\n\nfunction renderColumn(\n col: DesignColumn,\n widthPx: number,\n colsBgColor: string,\n bodyValues: BodyValues,\n toolRenderers: Map<string, ContentRenderer>,\n): string {\n const bgColor = col.values.backgroundColor || colsBgColor || '';\n const padding = col.values.padding || '0px';\n const borderRadius = col.values.borderRadius || '0px';\n const bgStyle = bgColor ? `background-color:${bgColor};` : '';\n\n const contentsHtml = col.contents\n .map((content) => {\n const renderer = toolRenderers.get(content.type);\n if (!renderer) return `<!-- unknown tool: ${content.type} -->`;\n const ctx = {\n columnWidth: widthPx,\n displayMode: 'email',\n contentWidth: parseInt(bodyValues.contentWidth || '600'),\n bodyValues,\n };\n return renderer(content.values, ctx);\n })\n .join('\\n');\n\n return `<div class=\"u_column\" style=\"max-width:${widthPx}px;min-width:${Math.min(widthPx, 320)}px;display:table-cell;vertical-align:top;\">\n <div style=\"height:100%;width:100% !important;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};${bgStyle}\">\n <div style=\"box-sizing:border-box;height:100%;padding:${padding};border:none;border-radius:${borderRadius};-webkit-border-radius:${borderRadius};\">\n ${contentsHtml || '<!--[if (!mso)&(!IE)]><!--><div style=\"height:0;min-height:1px;font-size:0;\">&nbsp;</div><!--<![endif]-->'}\n </div>\n </div>\n</div>`;\n}\n","export function getResponsiveCss(contentWidth: number): string {\n return `\n@media only screen and (min-width: ${contentWidth + 20}px) {\n .u_row .u_column { display: table-cell; }\n}\n\n@media only screen and (max-width: ${contentWidth + 20}px) {\n .u_row .u_column {\n display: block !important;\n width: 100% !important;\n min-width: 320px !important;\n max-width: 100% !important;\n }\n .u_row {\n width: 100% !important;\n }\n}\n\n@media only screen and (max-width: 620px) {\n .u_row-container {\n max-width: 100% !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n /* Dark mode overrides — add per-client rules as needed */\n}\n\n/* Outlook dark mode */\n[data-ogsb] body,\n[data-ogsb] table,\n[data-ogsb] td {\n /* Preserve original colors */\n}\n\n.u_hide_desktop { display: block !important; }\n.u_hide_mobile { display: block !important; }\n\n@media only screen and (max-width: ${contentWidth + 20}px) {\n .u_hide_desktop { display: block !important; }\n .u_hide_mobile { display: none !important; }\n}\n\n@media only screen and (min-width: ${contentWidth + 21}px) {\n .u_hide_desktop { display: none !important; }\n .u_hide_mobile { display: block !important; }\n}`;\n}\n","import type { UnlayerDesign, ExportResult, ExportOptions, BodyValues } from '@emabuild/types';\nimport { wrapInDocumentShell } from './layout/document-shell.js';\nimport { renderRow } from './layout/fluid-hybrid.js';\nimport { getResponsiveCss } from './utils/responsive-css.js';\n\ntype ContentRenderer = (values: Record<string, unknown>, ctx: any) => string;\n\nexport function renderDesignToHtml(\n design: UnlayerDesign,\n toolRenderers: Map<string, ContentRenderer>,\n options?: ExportOptions,\n): ExportResult {\n const bodyValues = design.body.values;\n const contentWidth = parseInt(bodyValues.contentWidth || '600');\n\n // Render all rows\n const rowsHtml = design.body.rows\n .map((row) => renderRow(row, bodyValues, toolRenderers))\n .join('\\n');\n\n // Build responsive CSS\n const cssBlock = getResponsiveCss(contentWidth);\n\n // Build full document\n let fullHtml = wrapInDocumentShell(rowsHtml, cssBlock, bodyValues);\n\n // Process merge tags if provided\n if (options?.mergeTags) {\n for (const [tag, value] of Object.entries(options.mergeTags)) {\n fullHtml = fullHtml.replaceAll(`{{${tag}}}`, value);\n }\n }\n\n // Extract chunks\n const bodyMatch = fullHtml.match(/<body[^>]*>([\\s\\S]*)<\\/body>/i);\n const cssMatch = fullHtml.match(/<style[^>]*>([\\s\\S]*?)<\\/style>/gi);\n const fontsUsed: string[] = [];\n\n // Collect Google Fonts\n if (bodyValues.fontFamily?.url) {\n fontsUsed.push(bodyValues.fontFamily.url);\n }\n\n return {\n design: structuredClone(design),\n html: fullHtml,\n chunks: {\n body: bodyMatch?.[1] ?? rowsHtml,\n css: cssMatch?.map((s) => s.replace(/<\\/?style[^>]*>/gi, '')).join('\\n') ?? cssBlock,\n fonts: fontsUsed,\n js: '',\n },\n };\n}\n"],"names":[],"mappings":"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"}
package/dist/layout/document-shell.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { BodyValues } from '@emabuild/types';
2
+ export declare function wrapInDocumentShell(bodyHtml: string, cssBlock: string, bodyValues: BodyValues): string;
3
+ //# sourceMappingURL=document-shell.d.ts.map
package/dist/layout/document-shell.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"document-shell.d.ts","sourceRoot":"","sources":["../../src/layout/document-shell.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,GAAG,MAAM,CA6DtG"}
package/dist/layout/fluid-hybrid.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { DesignRow, BodyValues } from '@emabuild/types';
2
+ type ContentRenderer = (values: Record<string, unknown>, ctx: any) => string;
3
+ export declare function renderRow(row: DesignRow, bodyValues: BodyValues, toolRenderers: Map<string, ContentRenderer>): string;
4
+ export {};
5
+ //# sourceMappingURL=fluid-hybrid.d.ts.map
package/dist/layout/fluid-hybrid.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fluid-hybrid.d.ts","sourceRoot":"","sources":["../../src/layout/fluid-hybrid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE3E,KAAK,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC;AAE7E,wBAAgB,SAAS,CACvB,GAAG,EAAE,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,GAC1C,MAAM,CAoDR"}
package/dist/render.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { UnlayerDesign, ExportResult, ExportOptions } from '@emabuild/types';
2
+ type ContentRenderer = (values: Record<string, unknown>, ctx: any) => string;
3
+ export declare function renderDesignToHtml(design: UnlayerDesign, toolRenderers: Map<string, ContentRenderer>, options?: ExportOptions): ExportResult;
4
+ export {};
5
+ //# sourceMappingURL=render.d.ts.map
package/dist/render.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAc,MAAM,iBAAiB,CAAC;AAK9F,KAAK,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC;AAE7E,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC3C,OAAO,CAAC,EAAE,aAAa,GACtB,YAAY,CA0Cd"}
package/dist/utils/responsive-css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function getResponsiveCss(contentWidth: number): string;
2
+ //# sourceMappingURL=responsive-css.d.ts.map
package/dist/utils/responsive-css.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"responsive-css.d.ts","sourceRoot":"","sources":["../../src/utils/responsive-css.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAiD7D"}
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@emabuild/email-renderer",
3
+ "version": "0.0.1",
4
+ "description": "Email HTML renderer — converts Unlayer-compatible design JSON to cross-client email HTML",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "development": "./src/index.ts",
13
+ "import": "./dist/index.js"
14
+ }
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "README.md"
19
+ ],
20
+ "dependencies": {
21
+ "@emabuild/types": "0.0.1"
22
+ },
23
+ "devDependencies": {
24
+ "vite": "^6.2.0",
25
+ "vite-plugin-dts": "^4.5.0"
26
+ },
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "license": "MIT",
31
+ "sideEffects": false,
32
+ "scripts": {
33
+ "build": "vite build",
34
+ "dev": "vite build --watch",
35
+ "clean": "rm -rf dist"
36
+ }
37
+ }