fix(preview-server): hot reloading with collapsed directories (#2284)

Author: gabrielmfern

.changeset/petite-boxes-find.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+fix hot reloading with collapsed directories

packages/preview-server/src/utils/contains-email-template.spec.ts

@@ -51,6 +51,13 @@ describe('containsEmailTemplate()', () => {
           },
         ],
       },
+      {
+        absolutePath: '/fake/path/emails/first/second',
+        directoryName: 'first/second',
+        relativePath: 'first/second',
+        emailFilenames: ['email'],
+        subDirectories: [],
+      },
       {
         absolutePath: '/fake/path/emails/newsletters',
         directoryName: 'newsletters',
@@ -104,6 +111,11 @@ describe('containsEmailTemplate()', () => {
       },
     ],
   };
+
+  it('should work with collapsed email directory', () => {
+    expect(containsEmailTemplate('first/second/email', directory)).toBe(true);
+  });
+
   it('should work with email inside a single sub directory', () => {
     expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
       true,

packages/preview-server/src/utils/contains-email-template.ts

@@ -14,20 +14,37 @@ export const containsEmailTemplate = (
   relativeEmailPath: string,
   directory: EmailsDirectory,
 ) => {
-  const remainingSegments = relativeEmailPath
+  const emailPathSegments = relativeEmailPath
     .replace(directory.relativePath, '')
     .split('/')
     .filter(Boolean);
-  if (remainingSegments.length === 1) {
-    const emailFilename = removeFilenameExtension(remainingSegments[0]!);
+
+  return containsEmailPathSegments(emailPathSegments, directory);
+};
+
+const containsEmailPathSegments = (
+  relativeEmailSegments: string[],
+  directory: EmailsDirectory,
+) => {
+  if (relativeEmailSegments.length === 1) {
+    const emailFilename = removeFilenameExtension(relativeEmailSegments[0]!);
     return directory.emailFilenames.includes(emailFilename);
   }
-  const subDirectory = directory.subDirectories.find(
-    (sub) => sub.directoryName === remainingSegments[0],
-  );
-  if (subDirectory === undefined) {
-    return false;
+
+  const remainingPath = relativeEmailSegments.join('/');
+
+  for (const subDirectory of directory.subDirectories) {
+    if (remainingPath.startsWith(subDirectory.directoryName)) {
+      const matchedSegments = subDirectory.directoryName
+        .split('/')
+        .filter(Boolean).length;
+
+      return containsEmailPathSegments(
+        relativeEmailSegments.slice(matchedSegments),
+        subDirectory,
+      );
+    }
   }
 
-  return containsEmailTemplate(relativeEmailPath, subDirectory);
+  return false;
 };