fix(react-email): Hot reloading with directories two or more levels deep (#2247)

Author: gabrielmfern

.changeset/itchy-moles-give.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+fix hot reloading with directories at least two levels deep

packages/react-email/src/utils/contains-email-template.spec.ts

@@ -1,10 +1,10 @@
-import path from 'node:path';
 import {
   containsEmailTemplate,
   removeFilenameExtension,
 } from './contains-email-template';
+import type { EmailsDirectory } from './get-emails-directory-metadata';
 
-describe('removeFilenameExtension()', async () => {
+describe('removeFilenameExtension()', () => {
   it('should work with a single .', () => {
     expect(removeFilenameExtension('email-template.tsx')).toBe(
       'email-template',
@@ -22,19 +22,15 @@ describe('removeFilenameExtension()', async () => {
   });
 });
 
-test('containsEmailTemplate()', async () => {
-  const emailsDirectoryPath = path.resolve(
-    __dirname,
-    '../../../../apps/demo/emails',
-  );
-  const directory = {
-    absolutePath: emailsDirectoryPath,
+describe('containsEmailTemplate()', () => {
+  const directory: EmailsDirectory = {
+    absolutePath: '/fake/path/emails',
     directoryName: 'emails',
     relativePath: '',
     emailFilenames: [],
     subDirectories: [
       {
-        absolutePath: `${emailsDirectoryPath}/magic-links`,
+        absolutePath: '/fake/path/emails/magic-links',
         directoryName: 'magic-links',
         relativePath: 'magic-links',
         emailFilenames: [
@@ -45,10 +41,18 @@ test('containsEmailTemplate()', async () => {
           'raycast-magic-link',
           'slack-confirm',
         ],
-        subDirectories: [],
+        subDirectories: [
+          {
+            absolutePath: '/fake/path/emails/magic-links/resend',
+            directoryName: 'resend',
+            emailFilenames: ['verify-email'],
+            relativePath: 'magic-links/resend',
+            subDirectories: [],
+          },
+        ],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/newsletters`,
+        absolutePath: '/fake/path/emails/newsletters',
         directoryName: 'newsletters',
         relativePath: 'newsletters',
         emailFilenames: [
@@ -59,7 +63,7 @@ test('containsEmailTemplate()', async () => {
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/notifications`,
+        absolutePath: '/fake/path/emails/notifications',
         directoryName: 'notifications',
         relativePath: 'notifications',
         emailFilenames: [
@@ -71,37 +75,50 @@ test('containsEmailTemplate()', async () => {
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/receipts`,
+        absolutePath: '/fake/path/emails/receipts',
         directoryName: 'receipts',
         relativePath: 'receipts',
         emailFilenames: ['apple-receipt', 'nike-receipt'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/reset-password`,
+        absolutePath: '/fake/path/emails/reset-password',
         directoryName: 'reset-password',
         relativePath: 'reset-password',
         emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/reviews`,
+        absolutePath: '/fake/path/emails/reviews',
         directoryName: 'reviews',
         relativePath: 'reviews',
         emailFilenames: ['airbnb-review', 'amazon-review'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/welcome`,
+        absolutePath: '/fake/path/emails/welcome',
         directoryName: 'welcome',
         relativePath: 'welcome',
         emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
         subDirectories: [],
       },
     ],
   };
-  expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(true);
-  expect(containsEmailTemplate('welcome/missing-template', directory)).toBe(
-    false,
-  );
+  it('should work with email inside a single sub directory', () => {
+    expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
+      true,
+    );
+    expect(containsEmailTemplate('welcome/missing-template', directory)).toBe(
+      false,
+    );
+  });
+
+  it('should work with email inside a second sub directory', () => {
+    expect(
+      containsEmailTemplate('magic-links/resend/verify-email', directory),
+    ).toBe(true);
+    expect(
+      containsEmailTemplate('magic-links/resend/missing-template', directory),
+    ).toBe(false);
+  });
 });

packages/react-email/src/utils/contains-email-template.ts

@@ -23,7 +23,7 @@ export const containsEmailTemplate = (
     return directory.emailFilenames.includes(emailFilename);
   }
   const subDirectory = directory.subDirectories.find(
-    (sub) => sub.relativePath === remainingSegments[0],
+    (sub) => sub.directoryName === remainingSegments[0],
   );
   if (subDirectory === undefined) {
     return false;