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

Hi, welcome to the GSoC’22 Blogs Index 7 - the eighth 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 7 Blog

Today I’m going to share the work which I have done this week and the overall project updates from 1st August to 7th August (week 8, Sprint H).

Also, I’ve completed my 2 months journey working with the SCoRe Lab organization under Google Summer of Code 2022.

Add an Example app

I already created Pull Request the previous week to show the example of how to use our package. I started this week by doing some modifications to the directory and overall structure for the example folder suggested by the mentor and finally, the PR got merged.

Related issue: #59
Merged Pull Request: #69

Support for ESM

The next task was to fix some bugs in our package. Our package wasn’t compatible with the ECMAScript modules standard for the Node.js environment. That means we couldn't use the import/export syntax for Node.js. I fixed this issue by modifying the exports map inside our package.json. Now, our package is fully compatible with ESM standard, and users can use import syntax while using the package with JavaScript inside Node.js.

Related Issue: #70
Merged Pull Request: #78

Add an example for ESM

We already had one example folder where we showed a detailed example of how to use our package. But the example for ESM with Node.js was missing as our package wasn’t compatible with ESM before. But since we added the support for ESM, we also needed the example for the same. I created one example script showing the usage inside the example directory.

Related Issue: #72
Merged Pull Request: #79

Optimize the package

Our package also contained a few tests and storybook stories for the components and methods after the build process. We thought to remove those files from the final production package as those were just for testing and of no use, and these were only increasing the size of the package. We achieved this by modifying the exclude array inside the tsconfig.json.

Finally, we were able to optimize the package from 93.9 kB and 181 files to 62.7 kB and 137 files from v1.7.1 to v1.8.0. We have reduced the package size by 33.23% 🚀

Optimization stats from v1.7.1 to v1.8.0

Related Issue: #75
Merged Pull Request: #80

Add Quote component

This issue needed a new component named Quote which would help us to render text quotes inside the email.

Related Issue: #76
Merged Pull Request: #82

Investigate hosting for Storybook, JSDoc, and Docusaurus docs

We have three sites that we need to host: Storybook, JSDoc, and Docusaurus docs. This issue needed to investigate how we could host multiple items ( Storybook, JSDocs, and Docusourus docs ) in GitHub Pages/Netlify/Vercel.

I researched deeply with the help of my mentor and found these points which can help us to achieve our target.

• Docusourus docs will be the root directory for the hosting
• Storybook and JSDocs sites will be inside the Docusourus docs build folder
• We can copy the build folders for each site into our desired folder
• We also need to do some storybook configurations to correctly link the files and work it properly. Inside the .storybook/main.js file, we need to add

module.exports = {
managerHead: (head, { configType }) => {
  if (configType === 'PRODUCTION') {
    return (`
      ${head}
      <base href="/storybook-build/">
      `);
    }
  },
}

I have added a comment with all of my findings and points on the issue.

Related Issue: #74

Add Storybook for the Example app

We also needed to add Storybook and stories for the email layouts inside the example app for visualization. This ticket needed to init and configure Storybook and add stories for the Example app. I have opened a draft Pull Request for this, but there are some issues with the configuration, that’s why it’s not finalized yet.

Related Issue: #71
Draft Pull Request: #81

Tasks for the upcoming week:

• Add JSDoc comments to the components and util functions, and generate Docs
• Update Docs and trigger release for README changes
• Migrate from textversionjs to html-to-text for text email generation functionality.
• Start working on the styled-components

Burndown chart for Sprint H

Average Burndown Graph

That’s it for this week’s updates. Thanks for being there till now, hope you’re enjoying the blogs. I’ll try to improve my blogs and add more and more information in very simple ways in the future, so please stay tuned and follow me on Medium.

Also, don’t forget to drop a star on the project GitHub repo! ⭐

GitHub — leopardslab/react-email: react-email

You can connect with me on LinkedIn, also don’t forget to give this blog a clap if you have liked it.

Additionally, you can follow me on GitHub and Twitter, it will be appreciated.