mjml-react with NestJS

[IanEdington]

A submitted block of code for using mjml-react with Nestjs. Credit @oshri

import { WinstonLogger } from '@cakexel/nest-logger';
import { Injectable } from '@nestjs/common';
import { render } from '@faire/mjml-react/utils/render';
import { convert as htmlToText } from 'html-to-text';
import { createElement, ReactElement } from 'react';
import { RenderForText } from '../utils';


@Injectable()
export class MjmTemplateService {
  logger = new WinstonLogger().setContext('MjmTemplateService');
  renderReact<P extends object>(templateEl: (props: P) => ReactElement, props: P): { html: string, text: string } {
    const docEl = createElement(templateEl, props);
    const html = this.renderHtml(docEl);
    const text = this.renderText(docEl);
    return {
      html,
      text
    }
  }
  private renderHtml(templateEl: ReactElement): string {
    const { html } = render(templateEl, {
      minify: false
    });
    return html;
  }
  private renderText(templateEl: ReactElement): string {
    const { html: htmlForText } = render(
      createElement(RenderForText, null, templateEl),
      {
        minify: false,
      },
    );
    const text = htmlToText(htmlForText, {
      selectors: [
        { selector: 'table', format: 'block' },
        { selector: 'table#invoice', format: 'dataTable' },
        { selector: 'table.address', format: 'dataTable' },
        { selector: 'img', format: 'skip' },
        { selector: 'a', options: { hideLinkHrefIfSameAsText: true } },
      ]
    });
    return text;
  }
}