GSoC 2022 | Score Lab | Week 5 | React Email project updates

Published in

SCoRe Lab

3 min readJul 17, 2022

Hi, welcome to the GSoC’22 Blogs Index 4 - the fifth blog of the series where I am documenting my complete journey as a contributor (Student Developer) from Day zero to the end date for Google Summer of Code 2022. Hope you will like the series, so let’s get started.

By the way, if you haven’t checked out the previous blog, then you can go through it here: Week 4 Blog

Today I’m going to share the work which I have done this week and the overall project updates from 11th July to 17th July (week 5, Sprint E).

Add component: Image

Finally, after doing some more modifications suggested by the mentor, the Pull Request for the Image component has been merged this week.

Linked Issue: #42
Merged Pull Request: #50

Add component: Preheader

Email Preheader text is a small line of text that appears after the subject line in an email inbox. Email preheaders give a short summary of the contents of an email, and may appear differently on mobile and web email clients.

Adding Preheader:

Add text as the first text within the body tag of your email
Put the text in a div style
Use the div style to hide the text from the actual email

To email clients, the preheader text will show up as the first text in the email. When someone opens the email, that text will be hidden (because of the hidden div style).

Reference article: https://www.activecampaign.com/blog/email-preheader

Linked Issue: #63
Merged Pull Request: #64

Implement text email generation

We also need to implement a text email generation utility based on Email templates, which means we need to generate the plaintext version of the email template from the HTML or React.

For this functionality, we have taken the help of this package: textversionjs

I’ve created two utility methods:

generateTextEmailFromHTML function which will take the HTML string and convert it to a plaintext version
generateTextEmail function which will accept the JSX Layout and convert that into plaintext format using generateEmail and generateTextEmailFromHTML functions

Also, I’ve added proper tests for the methods.

Related Issue: #60
Open Pull Request: #65

Create example application

We also need to create an example application to show how to use our package. For this, firstly I went with creating a React application and then using our components to build the Email Layout in typescript. But, my mentor suggested using Storybook instead of React application to visualize multiple Email Layouts. Also, the typescript component needs to be compiled to JavaScript and then import inside our node.js environment.

Now, here comes the issues and blockers. We’re facing some issues related to esm and cjs formats for JavaScript. Currently, our library may have some issues with the proper environment support for both React and Node.js with esm and cjs formats. I’m continuously debugging it for the last 2 days, but none of the tricks and trials seemed to be working. Maybe, it will take a little more time.