Organizing an Advanced Structure for HTML Email Template

I was rebuilding a part of our markdown-to-email repository. I was not happy with how we handle templates in our generator.

While there are not many things that changed behind how it works, I still want to showcase them in my article. All developers work with strings, generating chunks of HTML code. I spend days thinking about how to improve it for our benefit.

While this version of the template will be obsolete when we upgrade our generator, there is still room to forget some knowledge and learn how to keep things simple and not be seduced by ideas to complete it quickly.

So we have been working on rendering HTML for a while right now. Our HTML template contains an old HTML4 style markup that is very sensitive and requires careful work and attention to small details. I have been asking for help from different developers, but everybody struggles with it from the beginning.

So we are combining that HTML page from small parts, and for the last nine months, I moved those parts away into a small js module.

With the help of RollupJS, it's easy to work.

I was able to extend it and even clone it. I decided to build a react-dom tree at some point instead of HTML.

So I copy-pasted everything and replaced my literals with react tags. It looks like “custom XML”, which can be just another way of presenting the information.

After that, this module didn't evolve a lot. Everything was working ok, but not ideally. I tried to expand it and polish our functionality, but things didn't move fast.

This module was located in folder "packages" with other modules that I have.

At this point, I decided that there was a lot of coding, and I was sick of it. So I created a new repository and moved it there. While it was just a copy-paste - it helped me to think differently. I was able to focus only on those 25 files.

From the beginning, we think about our template in 2 only forms: "content only" and "full template". Most bugs were in the "content" part, while the main template was pretty stable. But it was hard to go from "content only" into "full template" sometimes - we don't have an easy way to preview it or debug.

So I separated our 25 files into two parts: literals related to "not content" was named "outer template."

And I decided to replace my literals with functions.

Functions look similar to simple react components.

It gives me the ability to debug my strings how I want it.

I even created a folder with basic tests inside.

Hope you like it!

UPD. I forget to add a link to a repository with a source code.

Current code is here, but I probably rename this repository later.

Also published here