fix(react-email): Absolute paths when trying to click emails on sub directories in the Sidebar

What is the issue?

When running the Next app we do a few path transformations by hand, as they run in the browser, and browsers doesn't provide us with something like a path module. This means that we do stuff like making a path relative to another by doing replacements.

Here's an example of making a path relative and of where the issue starts:

https://github.com/resend/react-email/blob/2e16a60805606b9c297114398f37881150249d14/packages/react-email/src/components/sidebar/sidebar-directory.tsx#L31-L35

This path replacement would fail because this absolute path is determined based on the user's project location:

https://github.com/resend/react-email/blob/2e16a60805606b9c297114398f37881150249d14/packages/react-email/src/utils/emails-directory-absolute-path.ts#L30-L34

And since this path is being passed in without modifications to the Next app, through environment variables, what happens is that the emailsDirectoryAbsolutePath becomes something like D:\email-server\src/emails which does not work when replacing as the paths, that come from the server action to get all the email templates metadata, will start with D:\email-server\src\emails.

This is the same as #1354.

How does this fix the issue?

Before passing in the environment variable for the relative path to the user's emails directory, we run a path.normalize on it which ensures that the forward slashes are converted to backward slashes meaning the issues goes away.

This changes both on the build command and on the dev command since them both can be affected by this:

https://github.com/resend/react-email/blob/2e16a60805606b9c297114398f37881150249d14/packages/react-email/src/cli/utils/preview/start-dev-server.ts#L116-L126

https://github.com/resend/react-email/blob/2e16a60805606b9c297114398f37881150249d14/packages/react-email/src/cli/commands/build.ts#L51-L59

How can I make sure this is fixed?

You can, on Windows, do the following:

Comment out the first line in the following file: https://github.com/resend/react-email/blob/2e16a60805606b9c297114398f37881150249d14/packages/render/src/index.ts#L1-L4
- This is necessary because of a bug we currently have with render on NextJS 14 which can only be avoided locally by doing this
Running turbo build inside ./packages/react-email to build all the dependencies it has
Move the directory ./apps/demo/emails to ./apps/demo/src/emails
Run npx tsx ../../packages/react-email/src/cli/index.ts dev -d ./src/emails
Open http://localhost:3000
Hover some email file on the sidebar, that is inside a sub directory, and ensure all the links are proper

I've also tested this on a Windows machine of mine and can confirm this works.

Name	Status	Preview	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	Mar 13, 2024 4:52pm
react-email-demo	✅ Ready (Inspect)	Visit Preview	Mar 13, 2024 4:52pm

resend / react-email