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!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 60663b3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[gabrielmfern]

Closing in favor of #1835