GSoC 2022 | Score Lab | Week 9 | React Email project updates
Hi, welcome to the GSoC’22 Blogs Index 8 - the ninth 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 8 Blog
Today I’m going to share the work which I have done this week and the overall project updates from 8th August to 14th August (week 9, Sprint I).
Add Storybook for the Example app.
Last week I already opened a Pull Request to add Storybook and stories for our example application. But for some reason, it was throwing errors and not working properly. I started this week by trying to fix the issues. But after trying each and every probable solution, it was still not working. I didn’t spend too much time on this issue and quickly switched to another branch to resolve other tickets.
Related Issue: #71
Draft Pull Request: #81
Add JSDoc comments to the components, interfaces, and functions, and generate Docs
This was a long-awaited ticket, and finally, I was able to complete it this week. I added proper JSDoc comments for all of our components, interfaces, and utility methods based on JSDoc with TypeScript. I also added TypeDoc with a build:typedoc command to generate a static documentation site out of the comments for our Components, Interfaces, and functions.
Related Issue: #61
Merged Pull Request: #83
Finally, here is a glimpse of our final documentation site generated by TypeDoc, which has all the details for all of our components, interfaces, and utility methods.
Migrate from textversionjs to html-to-text
Previously, we were using textversionjs to generate the plaintext version of the email from the HTML. But as I mentioned in Pull Request #65 and the week 6 blog, we had a few limitations. That’s why we decided to migrate to another library html-to-text which I also pointed out previously in the PR and the blog. I added custom formatters for different elements like preheader, heading, caption, quote, etc. using the selectors option. And finally, we were able to cover all the edge cases for the text email generation.
Related Issue: #85
Merged Pull Request: #86
Trigger release for README changes
Whenever we were changing the README.md file with the latest info, we also needed to trigger a release (a patch release would be the best option) to update it in the npm. For this, I changed releaseRules for @semantic-release/commit-analyzer and trigger patch release for docs changes with README scope.
Related Issue: #77
Merged Pull Request: #84
Create a separate tsconfig-build.json for build config
We were using the base tsconfig.json for our build configuration. Pull Request #80 removed the tests and stories files from our final build by including them inside the exclude array. But now, VS Code and TypeScript weren’t able to pick up those files and apply the project-specific configs, ts-checks, and hints. To solve this problem, I removed them from the exclude array of our tsconfig.json and introduced a new tsconfig-build.json file that extends the base tsconfig.json , and there I included the tests and stories’ files inside the exclude array. Now while building the package, we switched to using our new tsconfig-build.json build configurations. Everything worked fine, and the tests and stories weren't included in the final build as expected.
Merged Pull Request: #87
Tasks for the upcoming week:
- Implement styled-components: Button, Link, Divider, Quote
- Implement Docusourus Docs
- Generate JSDoc/TSDoc/TypeDoc
- Host Docusourus Doc, TypeDoc & Storybook in Netlify
- Use Storybook Test Runner - Experimental test hook API instead of Storyshots for Snapshot Testing
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! ⭐
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.
