"Componentizar" mensagens de email

[silvaezequias]

Eu adicionei suporte para criar mensagens de email usando JSX apenas usando a biblioteca do React. Com isso dá pra organizar melhor as mensagens de email e customizar elas separadamente.

Como o HTML enviado vai ser por email, não é possível usar bibliotecas pra estilizar o HTML, somente o css padrão usado em componentes React. Exemplo:

const style = {
  text: {
    color: 'red',
    fontWeight: 'bold',
  } 
}

export function MeuComponente({ username }) {
  return (
    <p style={style.text}>
      Olá, {username}! <br />
    </p>
  );
}

Tutorial

Criar um novo componente

Para criar um componente de mensagem é exatamente igual um componente React.

// mail/components/MeuComponente/index.js

export function MeuComponente({ username }) {
  return (
    <p>
      Olá, {username}! <br />
    </p>
  );
}

Agora adicionar esse componente no Renderizador:

// mail/index.js

import ReactDOM from 'react-dom/server';
import { MeuComponente } from './components/MeuComponente/';

function Render(Component, props) {
  return ReactDOM.renderToString(
    <Component {...props} />
  );
};

export default {
  MeuComponente: function(props){
    return Render(MeuComponente, props);
  }
}

Pronto! Agora está pronto para ser usado em qualquer canto da aplicação

// message.test.js

import email from 'infra/email.js';
import Mail from 'mail';

email.send({
  from: 'Filipe Deschamps <[email protected]>',
  to: '[email protected]',
  subject: 'Essa é uma mensagem de teste.',
  html: Mail.MeuComponente({
    username: 'Guga Deschamps',
  }),
});

[vercel]

@ezequiaslopesdasilva is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

[Rafatcb]

Ezequias, obrigado pela contribuição 🤝

Apesar dessa modificação não trazer algo novo para o e-mail (continua sem estilização), ela pode abrir caminho para que o TabNews envie e-mails mais com a cara do TabNews.

Percebi alguns detalhes que podem ser melhorados no PR:

1. O texto todo não precisa estar em um único <p> com vários <br />. Creio que seria melhor separar em diferentes tags de parágrafo.
2. Mesmo enviando um HTML básico, acho importante continuar enviando o texto puro. É algo simples de ser feito e pode ser útil, como citado nessas respostas do Stack Overflow.
3. Já que está "componentizando", que tal componentizar o footer do e-mail, que é igual em todos os casos?
4. Não sei se usar React realmente traz um benefício aqui ou se traria possíveis complicações e uma string HTML já serviria. Gostaria de ouvir outras opiniões.

Não cheguei a testar o código, todas observações que vi foram apenas analisando o PR pelo GitHub.

[Rafatcb]

Acho que não precisa do $ aqui, certo?

[Rafatcb]

Bom, como o PR está há mais de um ano parado, está com alguns conflitos, e meu comentário ficou sem respostas, estou fechando o PR para organizar o repositório. Caso alguém queira dar continuidade, sugiro criar uma nova branch a partir da main, para evitar conflitos, já implementando o que sugeri como melhoria na revisão do código.

Obrigado pelo PR @silvaezequias!