@designsystemsinternational/email 0.0.2 → 0.0.3

package/bin/commands/index.js

@@ -0,0 +1,5 @@
+export { default as zip } from './zip.js';
+export { default as mailchimp } from './mailchimp.js';
+export { default as scaffold } from './scaffold.js';
+export { default as send } from './send.js';
+export { default as s3 } from './s3.js';

package/bin/commands/mailchimp.js

@@ -0,0 +1,57 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { prepareHtml, packageToMailchimp } from '../../src/index.js';
+import ora from 'ora';
+
+const mailchimpCommand = (config) => async (src, opts) => {
+  const inFile = path.join(process.cwd(), src);
+
+  const { mailchimpAPIKey, mailchimpServerPrefix } = config;
+
+  if (!opts.id) {
+    console.error('No campaign ID provided');
+    process.exit(1);
+  }
+
+  if (!mailchimpAPIKey) {
+    console.error('No Mailchimp API key found in config');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(inFile)) {
+    console.error(`File ${inFile} does not exist`);
+    process.exit(1);
+  }
+
+  const campaignId = opts.id;
+
+  const input = fs.readFileSync(inFile, 'utf-8');
+  let prepared;
+
+  if (!opts['skip-preparation']) {
+    const prepareSpinner = ora('Preparing HTML').start();
+    prepared = await prepareHtml(input, config.template);
+    prepareSpinner.succeed();
+  } else {
+    prepared = input;
+  }
+
+  const publishSpinner = ora(`Publishing to mailchimp`).start();
+
+  try {
+    const mailchimpReturn = await packageToMailchimp(prepared, {
+      mailchimpId: campaignId,
+      mailchimpAPIKey,
+      mailchimpServerPrefix,
+    });
+
+    publishSpinner.succeed(`Published to campaign ${mailchimpReturn}`);
+  } catch (e) {
+    publishSpinner.fail();
+    console.error(e);
+    process.exit(1);
+  }
+};
+
+export default mailchimpCommand;

package/bin/commands/s3.js

@@ -0,0 +1,57 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { prepareHtml, packageToS3 } from '../../src/index.js';
+import ora from 'ora';
+
+const panic = (msg) => {
+  console.error(msg);
+  process.exit(1);
+};
+
+const s3Command = (config) => async (src, dest, opts) => {
+  const inFile = path.join(process.cwd(), src);
+  const outFile = path.join(process.cwd(), dest);
+
+  if (!config.awsAccessKeyId) panic('Missing AWS Access Key ID');
+  if (!config.awsSecretAccessKey) panic('Missing AWS Secret Access Key');
+  if (!config.awsBucket) panic('Missing AWS Bucket');
+  if (!config.awsRegion) panic('Missing AWS Region');
+
+  if (!fs.existsSync(inFile)) {
+    console.error(`File ${inFile} does not exist`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(outFile) && !opts.force) {
+    console.error(`File ${outFile} already exists. Pass --force to overwrite.`);
+    process.exit(1);
+  }
+
+  const input = fs.readFileSync(inFile, 'utf-8');
+  let prepared;
+
+  if (!opts['skip-preparation']) {
+    const prepareSpinner = ora('Preparing HTML').start();
+    prepared = await prepareHtml(input, config.template);
+    prepareSpinner.succeed();
+  } else {
+    prepared = input;
+  }
+
+  const url = `https://${config.awsBucket}.s3.${config.awsRegion}.amazonaws.com/`;
+  const s3Spinner = ora(`Pushing to S3`).start();
+
+  const result = await packageToS3(prepared, {
+    awsAccessKeyId: config.awsAccessKeyId,
+    awsSecretAccessKey: config.awsSecretAccessKey,
+    awsBucket: config.awsBucket,
+    url,
+    prefix: opts.folder ?? '',
+  });
+
+  fs.writeFileSync(outFile, result);
+  s3Spinner.succeed(`Pushed to ${url}`);
+};
+
+export default s3Command;

package/bin/commands/scaffold.js

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { defaultConfigTemplate } from '../defaultConfig.js';
+
+const scaffoldCommand = () => {
+  const resolveFileExtension = (rootPath) => {
+    if (!fs.existsSync(path.join(rootPath, 'package.json'))) return 'js';
+
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(rootPath, 'package.json')),
+    );
+    return pkg.type === 'module' ? 'cjs' : 'js';
+  };
+
+  const outName = `email-cli.config.${resolveFileExtension(process.cwd())}`;
+  const outputPath = path.join(process.cwd(), outName);
+  fs.writeFileSync(outputPath, defaultConfigTemplate, 'utf-8');
+  console.log(`Created config at ${outName}`);
+};
+
+export default scaffoldCommand;

package/bin/commands/send.js

@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { sendEmailSes, sendEmailSMTP } from '../../src/index.js';
+import ora from 'ora';
+
+const panic = (msg) => {
+  console.error(msg);
+  process.exit(1);
+};
+
+/* Takes in an HTML file and sends it as a sample email */
+const sendCommand = (config) => async (src, opts) => {
+  const inFile = path.join(process.cwd(), src);
+
+  if (!fs.existsSync(inFile)) {
+    console.error(`File ${inFile} does not exist`);
+    process.exit(1);
+  }
+
+  const input = fs.readFileSync(inFile, 'utf-8');
+
+  const message = {
+    toEmail: opts.to,
+    fromEmail: opts.from,
+    subject: opts.subject,
+    textBody: 'Text body',
+    htmlBody: input,
+  };
+
+  try {
+    switch (opts.method) {
+      case 'smtp': {
+        if (!config.smtpHost) panic('SMTP host not configured');
+        if (!config.smtpUser) panic('SMTP user not configured');
+        if (!config.smtpPass) panic('SMTP password not configured');
+
+        const sendSpinner = ora('Sending email').start();
+        await sendEmailSMTP(message, {
+          smtpHost: config.smtpHost,
+          smtpPort: config.smtpPort ?? 25,
+          smtpUser: config.smtpUser,
+          smtpPass: config.smtpPass,
+          useTLS: config.smtpUseTLS ?? false,
+        });
+        sendSpinner.succeed();
+        break;
+      }
+      case 'ses': {
+        if (!config.awsAccessKeyId) panic('Missing AWS Access Key ID');
+        if (!config.awsSecretAccessKey) panic('Missing AWS Secret Access Key');
+
+        const sendSpinner = ora('Sending email').start();
+        await sendEmailSes(message, {
+          awsAccessKeyId: config.awsAccessKeyId,
+          awsSecretAccessKey: config.awsSecretAccessKey,
+        });
+        sendSpinner.succeed();
+        break;
+      }
+      default:
+        panic(`Unknown method ${opts.method}`);
+    }
+  } catch (err) {
+    panic(err);
+  }
+};
+
+export default sendCommand;

package/bin/commands/zip.js

@@ -0,0 +1,39 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { prepareHtml, packageToZip } from '../../src/index.js';
+import ora from 'ora';
+
+const zipCommand = (config) => async (src, dest, opts) => {
+  const inFile = path.join(process.cwd(), src);
+  const outFile = path.join(process.cwd(), dest);
+
+  if (!fs.existsSync(inFile)) {
+    console.error(`File ${inFile} does not exist`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(outFile) && !opts.force) {
+    console.error(`File ${outFile} already exists. Pass --force to overwrite.`);
+    process.exit(1);
+  }
+
+  const input = fs.readFileSync(inFile, 'utf-8');
+  let prepared;
+
+  if (!opts['skip-preparation']) {
+    const prepareSpinner = ora('Preparing HTML').start();
+    prepared = await prepareHtml(input, config.template);
+    prepareSpinner.succeed();
+  } else {
+    prepared = input;
+  }
+
+  const zipSpinner = ora(`Zipping ${src} to ${dest}`).start();
+  const zipBuffer = await packageToZip(prepared);
+
+  fs.writeFileSync(outFile, zipBuffer);
+  zipSpinner.succeed();
+};
+
+export default zipCommand;

package/bin/defaultConfig.js

@@ -0,0 +1,39 @@
+import { defaultTemplate } from '../src/index.js';
+
+const defaultConfig = {
+  template: defaultTemplate,
+};
+
+export const mergeWithDefaultConfig = (config) => ({
+  ...defaultConfig,
+  ...config,
+});
+
+export const defaultConfigTemplate = `module.exports = {
+  /* You can optionally pass a template as a function.
+   * The body of your email will be wrapped into this. */
+  // template: (body) => \`<html><body>\${body}</body></html>\`,
+
+  /* If you want to use Mailchimp you need to add API credentials
+   * here. It is recommended to use environment variables. */
+  // mailchimpAPIKey: process.env.MAILCHIMP_API_KEY,
+  // mailchimpServerPrefix: process.env.MAILCHIMP_SERVER_PREFIX,
+
+  /* If you want to use AWS services (like sending through SES or
+   * storing on S3) you need to add credentials here. It is
+   * recommended to use environment variables. */
+  // awsAccessKeyId: process.env.AWS_ACCESS_KEY_ID,
+  // awsSecretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  // awsBucket: process.env.AWS_BUCKET,
+  // awsRegion: process.env.AWS_REGION,
+
+  /* If you want to use SMTP you need to add credentials here. It is
+   * recommended to use environment variables. */
+  // smtpHost: process.env.SMTP_HOST,
+  // smtpPort: process.env.SMTP_PORT,
+  // smtpUser: process.env.SMTP_USER,
+  // smtpPass: process.env.SMTP_PASS,
+  // smtpUseTLS: process.env.SMTP_USE_TLS,
+};`;
+
+export default defaultConfig;

package/dist/cjs/browser.cjs

@@ -0,0 +1,368 @@
+'use strict';
+
+var posthtml = require('posthtml');
+var removeTags = require('posthtml-remove-tags');
+var removeAttributes = require('posthtml-remove-attributes');
+var matchHelper = require('posthtml-match-helper');
+var colorConvert = require('color-convert');
+var unescape = require('lodash.unescape');
+var JSZip = require('jszip');
+var fileSaver = require('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) => {
+        fileSaver.saveAs(content, `${formatFilename(config.name)}.zip`);
+      });
+    };
+  },
+});
+
+exports.defaultTemplate = defaultTemplate;
+exports.makeDefaultTemplate = makeDefaultTemplate;
+exports.packageToZip = packageToZip;
+exports.prepareHtml = defaultPipeline;
+exports.prepareHtmlFactory = prepareHtmlFactory;
+exports.preparePackageFactory = preparePackageFactory;