Création d’un composant pour MJML

mjml

Dans l’article précédent nous avions abordé l’intérêt d’utiliser MJML pour l’intégration d’emails responsives, dans ce nouvel article nous allons découvrir comment créer un composant pour le framework.

A titre d’exemple, nous créerons un composant que l’on nommera « Titre ».

Générer le fichier de template

Via le terminal allez dans le répertoire de votre projet, et tapez cette ligne de commande pour créer le template :

$> mjml --init-component title
Cela créera un fichier JS (ici Title.js) qui sera placé dans le répertoire de votre projet.

Import de modules

Il faut ensuite importer des modules qui serviront à créer votre composant :

import React, { Component } from 'react'import {  MJMLElement,  elements,  registerElement,} from 'mjml'
Voici un bref descriptif de ces imports :

  • React: Utilisé par le moteur de MJML pour générer le composant en HTML
  • Elements: Contient tous les composants standards de MJML
  • RegisterElement: C’est une fonction qui permet d’enregistrer votre composant dans le moteur de MJML

Ensuite dans le fichier JS il faut déclarer les éléments qui seront dépendants de votre composant :

/* * Wrap your dependencies here. */const {  text: MjText,  // ...} = elements;

Définir une classe

Tous les composants MJML incluent des fichiers statiques qui peuvent être utilisés pour modifier le comportement d’un composant.

Title.tagName = 'title'Title.defaultMJMLDefinition = {  attributes: {    'color': '#424242',    'font-family': 'Helvetica',    'margin-top': '10px'  }}Title.endingTag = trueTitle.columnElement = trueTitle.baseStyles = {  div: {    color: "blue"  }}Title.postRender = ($) => {  $('.title').removeAttr('data-title-color');  return $}

tagName = Modifie le nom du composant

endingTag = Doit être défini à « false » si l’on souhaite rajouter des composants de MJML au notre

columnElement = Si votre composant est inclut dans un « lj-colum » alors il faudra définir la valeur à « true ». Cela encapsulera l’ensemble de votre composant dans un td qui supporte les paddings.

Définir des attributs par défaut

const defaultMJMLDefinition = {  attributes: {    'color': '#424242',    'font-family': 'Helvetica',    'margin-top': '10px'  }}

Générer le fichier de template

Dans ce cas-ci, vous pouvez définir si les attributs d’un élément de votre composant sont modifiables ou pas. Il faut s’assurer que les valeurs rentrées soient compatibles pour tous les webmails existants.

Post render

Vous pouvez modifier le rendu de votre composant avant que celui soit généré via ce code :

Title.postRender = $ => {  $('.title').prepend(`<!--[if mso | IE]>    <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600}px;"><tr><td>    <![endif]-->`)  $('.title').append(`<!--[if mso | IE]>    </td></tr></table>    <![endif]-->`)   return $}

Définir des attributs publics

La method getStyles vous permet d’exposer des attributs publics à l’utilisateur final (avec mjAttribute). Si aucune valeur n’est renseignée alors ce seront celles par défaut qui seront prise en compte.

/*   * Build your styling here   */  getStyles() {    const { mjAttribute, color } = this.props     return _.merge({}, baseStyles, {      text: {      /*       * Get the color attribute       * Example: <mj-title color="blue">content</mj-title>       */        color: mjAttribute('color')      }    })  }

Générer votre composant

Pour générer votre composant, vous aurez besoin de charger les styles CSS :

render() {     const css = this.getStyles(),          content = 'Hello World!'     return (      <MjText style={ css }>        { content }      </MjText>    )  }}
Et enfin utiliser la syntaxe JSX pour définir votre composant. (en savoir plus)

Importer votre composant

Via un fichier .mjmlconfig :

Vous pouvez tout simplement créer un fichier .mjmlconfig avec le chemin vers votre fichier class. Ce fichier doit se trouver à la racine de votre projet pour pouvoir être exécuté.

{  "packages": [    "./Title.js",    "mjml-github-component"  ]}

Via un fichier Javascript :

import { mjml2html, registerMJElement } from 'mjml'import Title from './Title' registerMJElement(Title) console.log(mjml2html(`  <mjml>    <mj-body>      <mj-title>Hello world!</mj-title>    </mj-body>  </mjml>

Il faudra ensuite exécuter le fichier via node js et les détails s’afficheront dans la console.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.