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

Published in

SCoRe Lab

5 min readJul 24, 2022

Welcome to the GSoC’22 Blogs Index 5 - the sixth 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 5 Blog

Today I’m going to share the work which I have done this week and the overall project updates from 18th July to 24th July (week 6, Sprint F).

Implement text email generation

We had to implement a text email generation utility method, based on email templates, which would be able to generate the plaintext version of the email template from the HTML or React layouts. I have already opened a Pull Request last week regarding this feature.

But we noticed that the code had some bugs. It was also generating the text from the Preheader component, which shouldn’t be the case. I’ve proposed a few solutions to solve this issue, my mentor also suggested one and after a brief discussion, we went with the solution which includes the implementation of React Higher Order Components (HOC).

Few proposed solutions:

We tried using some HOC and complex logic strategy with some props (mode = "text") to handle the functionality of not rendering the text from the Preheader, but it was throwing issues for some cases and moreover, it was only increasing the complexity in case of implementation.
We can remove the Preheader manually from our DOM and then generate the text version, and this won’t add the preheader text to the final generated text.

import { DOMParser, XMLSerializer } from "xmldom";const domparser = new DOMParser();
const xmlSerializer = new XMLSerializer();const res = domparser.parseFromString(html, "text/html");
const pre = res.getElementById("preheader");
res.removeChild(pre);
const finalHTML = xmlSerializer.serializeToString(res);

I’ve found another library html-to-text that can help us to achieve this goal. We can use the selectors option to pass our custom selector for the Preheader component and then exclude it from the final generated text.

const text = convert(html, {
  selectors: [{ selector: '.preheader', format: 'skip' }],
});

But the only problem with this library is that we also need to define our custom selectors and formatters for all h tags to hashify them in the generated text output.

But after debugging and trying to fix issues a lot with the help of my mentor, it didn’t seem to be working. That’s why we refrained to implement any of the tricks and kept it simple for now. But the methods also have one limitation: Preheader text will also get included in the text version, which shouldn’t be the case.

Finally, the merged Pull Request contains the tasks:

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
Proper tests for these methods

Related Issue: #60
Merged Pull Request: #65

Change configurations for the package

Problem:
We were converting our TypeScript code to JavaScript code into ES Modules (ESM). We needed to add support for both ESM and CJS modules while compilation in order to make our package a hybrid package that can run both on React (browser) and Node.js environments.

If we tried to import some method from our package inside our Node.js environment, we were getting some issues like:

export * from "./Components"export isn't defined and can't be used here

The PR covered:

Change tsc build config to generate both CJS and ESM versions
Add package.json exports config to target ESM and CJS
The last step of the build is a simple fixup script that creates per-distribution package.json files. These package.json files define the default package type for the .dist/* sub-directories
Our package.json does not have a type property. Rather, we push that down to the package.json files under the .dist/* sub-directories. We define an exports map which defines the entry points for the package: one for ESM and one for CJS

Related Issue: #66
Merged Pull Request: #67

Research into the usage of Docusaurus

Add docs and sample docs site using Docusaurus
Learn about Docusaurus and how it works
Pros and cons for using it in our project to generate docs
Detailed breakdown

Here is the sample site that I’ve created using Docusaurus:

Add new categories and docs
Add different versions for the docs

Related Issue: #62
Opened Pull Request: #68

Tasks for the upcoming week:

Create example application
Add JSDoc comments to the util functions and generate Docs

The Midterm Evaluation is also going on and the deadline for the same is July 29, 2022, at 11:30 PM. I’m eagerly waiting for the results and hoping for a positive response.