fix(client): Support external file imports inside of email components

[EyMaddis]

This PR implements a fix for #613.
React Email should now be able to preview files that container imports like import Theme from '../src/theme' (sibling directory of /emails).

In order to do this, email files are no longer copied over to the .react-email/emails/ folder but instead files are created which only re-export their default export, like so:

.react-email/emails/my-template.tsx:

import Mail from '../../my-template.tsx'
export default Mail`

Also resolves that static files where not copied over correctly and throwing an error every time.

[EyMaddis]

General feedback:
Firstly: thanks for your great work! I really appreciate this! 👏
Secondly, I found the contributing experience quite cumbersome as the contribution guide or readme do not explain how to develop in this repository. Through a lot of trial and error, I made it work like so:

cd demo
../packages/react-email/node_modules/.bin/ts-node ../packages/react-email/source/index.ts dev

which was quick awkward.
(for which I also had to install typescript in the react-email folder).

I assume that you have some monorepo setup somewhere that solves this nicely, but I could not find it.

Maybe you can provide a guide on how to do it properly (or point me to an existing one)

[EyMaddis]

I just noticed that this might be a breaking change if people have reusable components inside /emails/, like /emails/components/Layout.tsx as it. Such that it will throw a warning:

Attempted import error: '../../../emails/components/Layout.tsx' does not contain a default export (imported as 'Mail').

Import trace for requested module:
./emails/components/Layout.tsx
./emails/ lazy ^\.\/.*$ namespace object
./src/app/preview/[slug]/page.tsx

I could limit the import to not go over the emails folder recursively. Are folders within the emails directory officially supported?

Edit: I would appreciate if somebody could help me look into why changing any file can break with Can't resolve without actually changing something. My project setup is a extreme, maybe it is just me. Fixed in the latest commit. File watcher was still copying files

[bukinoshita]

Yeah, this should allow importing components or other files from emails or outside emails.

[EyMaddis]

I was working on this branch successfully the last couple of days :)
@bukinoshita should I change this to only load the files directly under /emails/*?

I could limit the import to not go over the emails folder recursively. Are folders within the emails directory officially supported?

[bukinoshita]

Yeah, I think so for now. Because we're only copying the emails/static folders.

[EyMaddis]

@bukinoshita I limited it to only use the files from the emails directory directly 🙂
If you could merge it, I would resolve the conflicts with my other PRs.

[EyMaddis]

Oh I also noticed something different: I think this also solves automatic reload when changing files. At least I had a lot of problems before working on this branch and now it just works. :)

[bukinoshita]

Nice, thanks!

[bukinoshita]

@EyMaddis Sorry for the delay, can you check the conflicts?

[EyMaddis]

@bukinoshita Done :)

[kduprey]

Hey, thanks for your work on this PR. When will this get packaged and released to NPM?

Says last release was 14 days ago. Just looking to use components with react-email in my project and this has been a roadblock.