MJML - интерполяция шаблонов, динамические данные, контекст

Question

После многих поисков у меня возникают трудности с поиском того, как:

1. MJML обрабатывает динамические данные и шаблонные интерполяции

Я ожидал что-то вроде:

import { mjml2html } from 'mjml';

let context = {
  message: 'Hello World'
};

let view = mjml2html(template, context);

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{message}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Answer 1

MJML не обрабатывает никаких шаблонов. Если вам нужны шаблоны, используйте механизм шаблонов, такой как рули, для рендеринга в MJML.

import { compile } from 'handlebars';
import { mjml2html } from 'mjml';

const template = compile(`
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{{message}}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>
`);
const context = {
    message: 'Hello World'
};
const mjml = template(context);
const html = mjml2html(mjml);

Answer 2

Пройдя тот же процесс, пытаясь найти лучший способ добавления динамического содержимого в мои файлы MJML, сохраняя при этом возможность предварительного просмотра шаблонов с использованием существующих инструментов, сначала я просто использовал рули, но после добавления более сложных структур содержимого он начал получать неряшливый.

Оказывается, MJML — это всего лишь простой XML, который довольно хорошо сопоставляется с JSON. Рендеринг из JSON уже поддерживается MJML, но только рендеринг всего документа (а не его частей).

Я придумал технику, позволяющую рендерить части.mjmlфайл программно, манипулируя структурой XML (JSON) программно (поэтому нет необходимости в ручном экранировании или беспокойстве о XSS/инъекциях), и я создал модульmjml-dynamicДля решения этой проблемы.

      npm i --save mjml-dynamic mjml

Пример:

      <mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button mj-replace-id="myId">
          Some text
        </mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

      import mjml2html from 'mjml-dynamic';
import readFile from 'fs/promises';

const replacers = {
  myId: {
    content: 'new text content',
    attributes: { color: 'red' },
  },
};

const mjml = await readFile('template.mjml');

const { html } = mjml2html(mjml, { replacers });

Это выведет эквивалент следующего документа MJML:

      <mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button color="red">
          new text content
        </mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Вы даже можете использовать его в сочетании сmjml-reactдля рендеринга частей вашего шаблона с помощью React.

Смотрите больше примеров здесь