feat (packages): VS Code extension for previewing emails just like markdown

[gabrielmfern]

VS Code extension for previewing emails

Here is a GIF of how the usage of the VS Code extension feels and looks like

Had to keep the GIF low quality and with a low framerate to not get to the 10MB limit for gh.

What does this PR change?

This PR should add a new package that comprises the basis of a new VS Code extension
for previewing the current focused email made with react-email.

This is the implementation of the idea coming from the discussion #574.

What is the extension's details?

It's an extension that has just one command, that can be called with a keybinding (currently CTRL+SHIFT+E or CMD+SHIFT+E for mac)
that opens a split panel beside the current file focused. Once you focus a file that has a email on it, it automatically
generates the preview and renders it there. Currently it only updates once you saved the email, but I think after
some work it can be done to update as the user changes the email component.

Some of the features included in this are:

• A specific HTML that shows when there is a error that happens when rendering the email
• A welcome screen, similar to the current react-email dev prewview client
• It is able to resolve local static files and render them on the email preview
• The panel does not duplicate if you call the command more than once (although you could argue the opposite could be a feature as well)

What are some technical aspects of the extension?

I think a good way to describe the technical aspects of this is to describe the workflows the extension
goes through when trying to render a focused email.

So, the steps taken for the rendering of the email are, once a save or a focus of file change occurs:

1. Use VS Code's APIs to figure out where the user's emails folder is, where the email is and then bundle the email using esbuild into a temporary .vscpreview folder
2. Hash the name of the bundled file so that the import doesn't cache the module of the email and that it is hopefully unique each render
3. Does some validations to not try to render something that is not a email
4. Use @react-email/render to render the email into HTML (and plain text for the possible future)
   • If the email could not be rendered an HTML file inside of /assets will be rendered in the panel instead, with the error message printed on it
5. Deletes the temporary esbuild compiled file and then updates the VS Code preview panel with the new HTML
6. Runs a regex to find all occurrences of src="/static/..." and makes sure that these URIs are compliant with how VS Code expects them to be so the static files are rendered properly
   • This is because VS Code has strict rules about how extensions can access user's files

Ok, sounds great, how can I run and check it out?

Here is a step-by-step to run it using VS Code and see how everything feels with the current changes:

1. Run gh pr checkout 996 which will automatically checkout into the PR
2. Open VS Code inside of the ./packages/vs-code-extension folder relative to the root of the repository
3. Install dependencies using pnpm install and then run npm run compile somewhere so that the typescript files are compiled to be ran
4. Press F5 to run the extension in debug mode
   • This will open up a new debug instance of VS Code for you that sets up the extension for you checkout and test out without needing to install or publish anything
5. You can try either pressing CTRL + SHIFT + E (or CMD + SHIFT + E for Mac) or going into the command pallete and searching for "Start live preview of email open"
6. Open up any email made with react-email that has their dependencies installed (like in the ./demo directory relative to the root of the repo)
7. Make any changes to the email and save. It should update the preview and should be amazing and really fast!

What are the next steps after merging?

After merging we will need to publish the extension into VS Code but I think most of the work is done, we can also work together
to publish this if any problems occur and need fixing.

Thanks for reading, thinking about the PR and for the awesome project!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-email-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 27, 2024 8:05am

[vercel]

@gabrielmfern is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

[amiranvarov]

@gabrielmfern mate that's terrific job! @zenorocha or other code owners, could you please do the rebase and merge it?

[gabrielmfern]

Thanks @amiranvarov! We might merge this one soon enough, but you can already tinker with it from the VS Code marketplace.

https://marketplace.visualstudio.com/items?itemName=resend.react-email-preview

Would love to know what you think about it :D

[amiranvarov]

@gabrielmfern whoa! just checked, works great so far! I would even say faster than the usual preview app!

It would be nice hoverer to add toolbar in the top like in the regular app, ones that would let you select view (mobile and desktop).

I'm surprised it worked quite well on my NX monorepo. I'm not sure if it's because my NX monorepo was preconfigured, or on its own.

Offtopic recommendation - it would be nice to support NX monorepos;s out of the box. Right now, I'm using https://www.npmjs.com/package/@nx-extend/react-email in order to make react-email work with NX. And this gentleman is a legend for updating his package whenever there is react-email new release, but he may not be here always. It would be better if react-email supported it out of the box or there would be someone alywas maintaining it. If @nx-extend/react-email's maintained gets into accident, that package will be obsolete.

That's my feedback so far, will keep sharing with you when I will have a new ones.