How to use mjml-core - 10 common examples

import path from 'path'

import mjml2html from 'mjml';
import {registerComponent, components } from 'mjml-core';
import ChartComponent from '../src';

// First require mjml-chart:
// import mjmlchart from 'mjml-chart'
// ^^^ this import should be used in your project instead
import mjmlchart from '../'

// Then register mjml-chart
registerComponent(mjmlchart);


/*
  Compile an mjml string
*/
const {errors, html} = mjml2html(require('fs').readFileSync(path.resolve(__dirname, 'simple-chart.mjml'), 'utf8'))

if(errors.length > 0){
  console.error(errors);
  process.exit(1);
}
/*
  Print the responsive HTML generated
*/
console.log(html); // eslint-disable-line no-console

calculateAWidth(width) {
    if (!width) return null

    const { parsedWidth, unit } = widthParser(width)

    // impossible to handle percents because it depends on padding and text width
    if (unit !== 'px') return null

    const { borders } = this.getBoxWidths()

    const innerPaddings =
      this.getShorthandAttrValue('inner-padding', 'left') +
      this.getShorthandAttrValue('inner-padding', 'right')


    return `${parsedWidth - innerPaddings - borders}px`
  }

inputs.forEach(i => {
    try {
      let compiled
      switch (inputOpt) {
        case 'm': // eslint-disable-line no-case-declarations
          compiled = { html: migrate(i.mjml, { beautify: true }) }
          break
        case 'v': // eslint-disable-line no-case-declarations
          const mjmlJson = MJMLParser(i.mjml, { components })
          compiled = {
            errors: validate(mjmlJson, { components, initializeType }),
          }
          break
        default:
          compiled = mjml2html(i.mjml, { ...config, filePath: filePath || i.file })
      }

      convertedStream.push({ ...i, compiled })
    } catch (e) {
      EXIT_CODE = 2
      failedStream.push({ file: i.file, error: e })
    }
  })

src: buildURL(getAttribute),
        width: width + 'px'
      });

      return this.renderMJML('');
    }

    // Tells the validator which attributes are allowed for mj-chart


    // Tells the validator which attributes are allowed for mj-chart

  }]);

  return MjChart;
}(_mjmlCore.BodyComponent), _class.endingTag = true, _class.allowedAttributes = {
  "cht": "string",
  "chd": "string",
  "chds": "string",
  "chxr": "string",
  "chof": "string",
  "chs": "string",
  "chdl": "string",
  "chdls": "string",
  "chg": "string",
  "chco": "string",
  "chtt": "string",
  "chts": "string",
  "chxt": "string",
  "chxl": "string",
  "chm": "string",
  "chls": "string",

before(() => {
    registerComponent(ChartComponent);
  });

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    return helpers.merge({}, baseStyles, {
      table: {
        width: mjAttribute('width')
      },
      td: {
        border: mjAttribute('border'),
        borderBottom: mjAttribute('border-bottom'),
        borderLeft: mjAttribute('border-left'),
        borderRadius: defaultUnit(mjAttribute('border-radius'), "px"),
        borderRight: mjAttribute('border-right'),
        borderTop: mjAttribute('border-top'),
        color: mjAttribute('color'),
        cursor: 'auto',
        fontStyle: mjAttribute('font-style'),
        height: mjAttribute('height'),
        padding: defaultUnit(mjAttribute('inner-padding'), "px")
      },

getStyles () {
    const { mjAttribute, defaultUnit, getPadding } = this.props

    return helpers.merge({}, baseStyles, {
      div: {
        textAlign: mjAttribute('align')
      },
      label: {
        textAlign: mjAttribute('ico-align'),
        color: mjAttribute('ico-color'),
        fontSize: defaultUnit(mjAttribute('ico-font-size'), 'px'),
        fontFamily: mjAttribute('ico-font-family'),
        textTransform: mjAttribute('ico-text-transform'),
        textDecoration: mjAttribute('ico-text-decoration'),
        lineHeight: defaultUnit(mjAttribute('ico-line-height'), 'px'),
        paddingTop: getPadding('top', 'ico-'),
        paddingLeft: getPadding('left', 'ico-'),
        paddingRight: getPadding('right', 'ico-'),
        paddingBottom: getPadding('bottom', 'ico-')
      }

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      td: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size')),
        padding: defaultUnit(mjAttribute('padding')),
        textAlign: mjAttribute('text-align')
      }
    })

    styles.name = helpers.merge({}, styles.td, styles.name)
    styles.quantity = helpers.merge({}, styles.td, styles.quantity)

    return styles
  }

getStyles () {
    const { mjAttribute, getPadding, defaultUnit, parentWidth } = this.props
    const backgroundRatio = this.getBackgroundRatio()
    const backgroundStyle = this.getBackgroundStyle()
    let width = parentWidth

    if (mjAttribute('width')) {
      width = mjAttribute('width')
    }

    return helpers.merge({}, baseStyles, {
      div: {
        maxWidth: defaultUnit(width, 'px')
      },
      edge: {
        paddingBottom: `${backgroundRatio}%`
      },
      hero: {
        background: backgroundStyle,
        paddingTop: getPadding('top'),
        paddingLeft: getPadding('left'),
        paddingRight: getPadding('right'),
        paddingBottom: getPadding('bottom'),
        backgroundPosition: mjAttribute('background-position'),
        verticalAlign: mjAttribute('vertical-align')
      }
    })

getStyles () {
    const { mjAttribute, defaultUnit } = this.props

    const styles = helpers.merge({}, baseStyles, {
      td: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: defaultUnit(mjAttribute('font-size')),
        padding: defaultUnit(mjAttribute('padding')),
        textAlign: mjAttribute('text-align')
      }
    })

    styles.name = helpers.merge({}, styles.td, styles.name)
    styles.quantity = helpers.merge({}, styles.td, styles.quantity)

    return styles
  }