feat(generateEmail): add generateEmail

- add generateEmail method to extract plain optimized HTML from the react based layout - optional template override options with a default optimized template for baseTemplate resolves #21 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
leopardslab · Jun 28, 2022 · 9fc2bda · 9fc2bda
1 parent 4a3b6a4
commit 9fc2bda
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "build-storybook": "build-storybook"
   },
   "lint-staged": {
-    "src/*.{ts,tsx}": [
+    "src/**/*": [
       "yarn pretty:fix",
       "yarn lint:fix",
       "yarn pretty",

diff --git a/src/index.ts b/src/index.ts
@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './server';
diff --git a/src/server/generateEmail/defaultHTML.ts b/src/server/generateEmail/defaultHTML.ts
@@ -0,0 +1 @@
+export const deafultHTML = `<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > <head> <title> </title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> #outlook a { padding: 0; } body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } p { display: block; margin: 13px 0; } </style> <style type="text/css"> @media only screen and (min-width: 480px) { .column-per-100 { width: 100% !important; max-width: 100%; } } </style> <style media="screen and (min-width:480px)"> .moz-text-html .column-per-100 { width: 100% !important; max-width: 100%; } </style> <style type="text/css"> @media only screen and (max-width: 480px) { table.full-width-mobile { width: 100% !important; } td.full-width-mobile { width: auto !important; } } </style> </head> <body></body> </html>`;
diff --git a/src/server/generateEmail/generateEmail.ts b/src/server/generateEmail/generateEmail.ts
@@ -0,0 +1,31 @@
+import ReactDOMServer from 'react-dom/server';
+import fs from 'fs';
+import { deafultHTML } from './defaultHTML';
+
+interface GenerateEmailOptions {
+  baseTemplate?: string;
+  baseStyles?: string;
+}
+
+export const generateEmail = (
+  jsxElement: React.ReactElement,
+  options?: GenerateEmailOptions,
+): string => {
+  let baseHTML = '';
+  options?.baseTemplate
+    ? (baseHTML = fs.readFileSync(options.baseTemplate, 'utf8')).toString()
+    : (baseHTML = deafultHTML);
+
+  let baseCSS = '';
+  options?.baseStyles && (baseCSS = fs.readFileSync(options.baseStyles, 'utf8')).toString();
+
+  const JSXtoHTML = ReactDOMServer.renderToStaticMarkup(jsxElement);
+
+  const styleEndPos = baseHTML.indexOf('</style>');
+  const styledHTML = baseHTML.slice(0, styleEndPos) + '\n' + baseCSS + baseHTML.slice(styleEndPos);
+
+  const bodyEndPos = styledHTML.indexOf('</body>');
+  const finalHTML = styledHTML.slice(0, bodyEndPos) + JSXtoHTML + styledHTML.slice(bodyEndPos);
+
+  return finalHTML;
+};
diff --git a/src/server/generateEmail/index.ts b/src/server/generateEmail/index.ts
@@ -0,0 +1 @@
+export { generateEmail } from './generateEmail';
diff --git a/src/server/index.ts b/src/server/index.ts
@@ -0,0 +1 @@
+export { generateEmail } from './generateEmail';