@designsystemsinternational/email 0.0.2 → 0.0.3

package/dist/index.js

@@ -0,0 +1,361 @@
+import posthtml from 'posthtml';
+import removeTags from 'posthtml-remove-tags';
+import removeAttributes from 'posthtml-remove-attributes';
+import matchHelper from 'posthtml-match-helper';
+import colorConvert from 'color-convert';
+import unescape from 'lodash.unescape';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+
+/**
+ * Generates a deterministic random string based on the input string.
+ *
+ * @param {string} str Input string
+ * @return {string} hash of str
+ */
+const hashFromString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash.toString();
+};
+
+/**
+ * Formats a string to a filename by turning it into kebab case
+ *
+ * @param {string} text
+ * @return {string} formatted filename
+ */
+const formatFilename = (text) => {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, ' ')
+    .trim()
+    .replace(/\s+/g, '-');
+};
+
+/**
+ * Converts all rgb defined colors with their hex equivalent
+ * as some email clients only support hex color format.
+ */
+const convertRgbToHex = () => {
+  return (tree) => {
+    tree.match(matchHelper('[style]'), (node) => {
+      let styleBlock = node.attrs.style;
+      styleBlock = styleBlock.replace(
+        /rgb\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3}\)/g,
+        (match) => {
+          const values = match
+            .replace(/[rgb() ]/g, '')
+            .split(',')
+            .map((n) => parseInt(n));
+          return '#' + colorConvert.rgb.hex(values);
+        },
+      );
+      node.attrs.style = styleBlock;
+      return node;
+    });
+
+    return tree;
+  };
+};
+
+/**
+ * Prepares HTML by only returning the body tag, to make sure
+ */
+const onlyReturnBody = () => {
+  return (tree) => {
+    tree.match({ tag: 'body' }, (node) => {
+      return node.content;
+    });
+
+    return tree;
+  };
+};
+
+/**
+ * Rewrites the markup by turning all conditional comments returned from the
+ * <ConditionalComment> component into true conditional comments that can be
+ * picked up by Outlook.
+ */
+const injectConditionalComments = () => {
+  return (tree) => {
+    tree.match(matchHelper('[data-conditional-comment]'), (node) => {
+      const comment = node.attrs['data-conditional-comment'];
+
+      // Remove HTML comment delimiters
+      const cleanedComment = unescape(comment).replace(/<!--|-->/g, '');
+
+      // Remove Line breaks from comment
+      const cleanedCommentLines = cleanedComment.split('\n').join('');
+
+      node = `<!--${cleanedCommentLines}-->`;
+      return node;
+    });
+    return tree;
+  };
+};
+
+/**
+ * Rewrites the markup by adding all styles defined in the data-mso-style
+ * attribute to the <style> tag. This is needed because the mso styles are
+ * non-standard CSS, so they cannot be added to React's style tag.
+ */
+const injectMsoStyles = () => {
+  return (tree) => {
+    tree.match(matchHelper('[data-mso-style]'), (node) => {
+      if (node.attrs?.style == null) node.attrs.style = '';
+      node.attrs.style += node.attrs['data-mso-style'];
+      node.attrs['data-mso-style'] = null;
+      return node;
+    });
+    return tree;
+  };
+};
+
+/**
+ * Collects all inline styles defined in the components, de-dedupes them and
+ * moves them to a single unified style tag in the head of the document.
+ */
+const moveInlineStylesToHead = () => {
+  let styles = {};
+
+  return (tree) => {
+    tree.match({ tag: 'style' }, (node) => {
+      if (!node.content) return '';
+      const styleBlock = node.content[0].trim();
+      const hash = hashFromString(styleBlock);
+
+      if (styleBlock) {
+        styles[hash] = styleBlock;
+      }
+
+      // Remove the inline style node
+      return '';
+    });
+
+    tree.match({ tag: 'head' }, (node) => {
+      node.content.push({
+        tag: 'style',
+        content: Object.values(styles).join(''),
+      });
+
+      return node;
+    });
+
+    return tree;
+  };
+};
+
+const prepareHtmlFactory = (plugins) => {
+  const htmlProcessor = posthtml();
+
+  plugins.forEach((plugin) => {
+    htmlProcessor.use(plugin);
+  });
+
+  return async (body, template = (str) => str) => {
+    const content = template(body);
+
+    const processed = await htmlProcessor.process(content);
+
+    return processed.html;
+  };
+};
+
+/**
+ * This default pipeline removes all script and link tags from the HTML,
+ * moves all inline styles to the head and wraps everything in the email template.
+ *
+ * @param {string} body - the html body
+ * @param {function} template - the template function, defaults to no template
+ */
+const defaultPipeline = prepareHtmlFactory([
+  onlyReturnBody(),
+  removeTags({ tags: ['script', 'link'] }),
+  convertRgbToHex(),
+  moveInlineStylesToHead(),
+  injectMsoStyles(),
+  injectConditionalComments(),
+  removeAttributes(['data-reactid', 'data-reactroot']),
+]);
+
+const BASE64_REGEX = /data:image\/([a-zA-Z]*);base64,(.*)/;
+
+// Browser packacking factory
+
+/**
+ * Turns base64 inlined images into image buffers and updates their src
+ * attribute accordingly. Returns an object containing the updated html and
+ * an array of image buffers. Different adapters can then hook into this to
+ * process the email into a ZIP archive or pushing it to an API.
+ *
+ * @param {string} body - the prepared html body
+ * @return {object} the processed html and base64 strings for all images
+ */
+const preparePackageFactory =
+  ({ urlPrefix = '', handlePackage }) =>
+  async (body, opts = {}) => {
+    let counter = 0;
+    const images = [];
+
+    const processed = await posthtml()
+      .use((tree) => {
+        tree.match({ tag: 'img' }, (node) => {
+          const { src, alt } = node.attrs;
+
+          if (BASE64_REGEX.test(src)) {
+            const [_, ext, data] = src.match(
+              /data:image\/([a-zA-Z]*);base64,(.*)/,
+            );
+
+            const hash = Math.random().toString(36).substring(2, 7);
+
+            const filename = alt
+              ? `${formatFilename(alt)}-text-${hash}.${ext}`
+              : `image-${counter}.${ext}`;
+
+            node.attrs.src = `${urlPrefix}${filename}`;
+
+            images.push({
+              filename,
+              buffer: data,
+            });
+
+            counter++;
+          }
+          return node;
+        });
+
+        return tree;
+      })
+      .process(body);
+
+    return await handlePackage(
+      {
+        html: processed.html,
+        images,
+      },
+      opts,
+    );
+  };
+
+const makeDefaultTemplate =
+  ({ lang = 'en-US', dir = 'ltr' } = {}) =>
+  (body) =>
+    `<!doctype html>
+<html
+  lang="${lang}"
+  xml:lang="${lang}"
+  dir="${dir}"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Chief</title>
+    <!--[if mso]>
+      <style type="text/css">
+        table {
+          border-collapse: collapse;
+          border: 0;
+          border-spacing: 0;
+          margin: 0;
+          mso-table-lspace: 0pt !important;
+          mso-table-rspace: 0pt !important;
+        }
+
+        img {
+          display: block !important;
+        }
+
+        div, td {padding:0;}
+
+        div {margin:0 !important;}
+
+        .notMso {
+          display: none;
+          mso-hide: all;
+        }
+      </style>
+      <noscript>
+        <xml>
+          <o:OfficeDocumentSettings>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+        </xml>
+      </noscript>
+    <![endif]-->
+    <meta name="x-apple-disable-message-reformatting" />
+    <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="color-scheme" content="light" />
+    <meta name="supported-color-schemes" content="light" />
+
+    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="date=no">
+    <meta name="format-detection" content="address=no">
+    <meta name="format-detection" content="email=no">
+
+    <style>
+      a[x-apple-data-detectors] {
+        color: inherit !important;
+
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: inherit !important;
+      }
+      
+      #MessageViewBody a:not([style]) {
+        color: inherit !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: inherit !important;
+      }
+    </style>
+  </head>
+  <body class="body" style="padding:0;">
+    ${body}
+  </body>
+</html>`;
+
+const defaultTemplate = makeDefaultTemplate();
+
+const defaultConfig = {
+  name: 'email',
+};
+
+/**
+ * @param {string} body - the prepared html body
+ * @return {function} A function that can be called to download the email as a ZIP archive
+ */
+const packageToZip = preparePackageFactory({
+  urlPrefix: '',
+  handlePackage: ({ html, images }, opts) => {
+    const config = { ...defaultConfig, ...opts };
+
+    const zip = new JSZip();
+    const files = zip.folder(config.name);
+
+    files.file('index.html', html);
+    images.forEach(({ filename, buffer }) => {
+      files.file(filename, buffer, { base64: true });
+    });
+
+    return async () => {
+      files.generateAsync({ type: 'blob' }).then((content) => {
+        saveAs(content, `${formatFilename(config.name)}.zip`);
+      });
+    };
+  },
+});
+
+export { defaultTemplate, makeDefaultTemplate, packageToZip, defaultPipeline as prepareHtml, prepareHtmlFactory, preparePackageFactory };

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@designsystemsinternational/email",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Make working with email more enjoyable (if possible)",
   "main": "src/index.js",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./browser": {
+      "import": "./dist/esm/browser.js",
+      "require": "./dist/cjs/browser.cjs"
+    }
+  },
   "files": [
-    "src/**"
+    "src/**",
+    "dist/**",
+    "bin/**"
   ],
   "repository": {
     "type": "git",
@@ -15,20 +27,26 @@
     "email-cli": "bin/cli.js"
   },
   "scripts": {
+    "build": "rollup -c",
     "cli": "node bin/cli.js",
-    "test": "vitest run",
     "lint": "eslint .",
-    "test:watch": "vitest",
-    "prettier:fix": "prettier --write ."
+    "prepublish": "npm run build && npm run lint",
+    "prepare": "npm run build",
+    "prettier:fix": "prettier --write .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "author": "Design Systems International <i@designsystems.international>",
   "license": "ISC",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^23.0.5",
+    "@rollup/plugin-json": "^5.0.2",
     "@vitest/coverage-c8": "^0.22.0",
     "@vitest/ui": "^0.22.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "prettier": "2.7.1",
+    "rollup": "^3.7.4",
     "vite": "^4.0.0",
     "vitest": "^0.22.0"
   },