fix(react-email): Non-emails files being rendered when hot reloading (#2095)

Author: gabrielmfern

.changeset/six-parts-jam.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fix non-email files being rendered during hot reloading

packages/react-email/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts

@@ -28,7 +28,15 @@ export const setupHotreloading = async (
   const reload = debounce(() => {
     // we detect these using the useHotreload hook on the Next app
     clients.forEach((client) => {
-      client.emit('reload', changes);
+      client.emit(
+        'reload',
+        changes.filter((change) =>
+          // Ensures only changes inside the emails directory are emitted
+          path
+            .resolve(absolutePathToEmailsDirectory, change.filename)
+            .startsWith(absolutePathToEmailsDirectory),
+        ),
+      );
     });
 
     changes = [];

packages/react-email/src/hooks/use-email-rendering-result.ts

@@ -23,20 +23,24 @@ export const useEmailRenderingResult = (
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useHotreload(async (changes) => {
       for await (const change of changes) {
-        const slugForChangedFile =
+        const relativePathForChangedFile =
           // ex: apple-receipt.tsx
           // it will be the path relative to the emails directory, so it is already
           // going to be equivalent to the slug
           change.filename;
 
         if (
-          containsEmailTemplate(slugForChangedFile, emailsDirectoryMetadata)
+          !containsEmailTemplate(
+            relativePathForChangedFile,
+            emailsDirectoryMetadata,
+          )
         ) {
           continue;
         }
 
-        const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedFile);
+        const pathForChangedEmail = await getEmailPathFromSlug(
+          relativePathForChangedFile,
+        );
 
         const newRenderingResult = await renderEmailByPath(
           pathForChangedEmail,

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

@@ -1,5 +1,26 @@
 import path from 'node:path';
-import { containsEmailTemplate } from './contains-email-template';
+import {
+  containsEmailTemplate,
+  removeFilenameExtension,
+} from './contains-email-template';
+
+describe('removeFilenameExtension()', async () => {
+  it('should work with a single .', () => {
+    expect(removeFilenameExtension('email-template.tsx')).toBe(
+      'email-template',
+    );
+  });
+
+  it('should work with an example test file', () => {
+    expect(removeFilenameExtension('email-template.spec.tsx')).toBe(
+      'email-template.spec',
+    );
+  });
+
+  it('should do nothing when there is no extension', () => {
+    expect(removeFilenameExtension('email-template')).toBe('email-template');
+  });
+});
 
 test('containsEmailTemplate()', async () => {
   const emailsDirectoryPath = path.resolve(

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

@@ -1,5 +1,15 @@
 import type { EmailsDirectory } from './get-emails-directory-metadata';
 
+export const removeFilenameExtension = (filename: string): string => {
+  const parts = filename.split('.');
+
+  if (parts.length > 1) {
+    return parts.slice(0, -1).join('.');
+  }
+
+  return filename;
+};
+
 export const containsEmailTemplate = (
   relativeEmailPath: string,
   directory: EmailsDirectory,
@@ -9,7 +19,7 @@ export const containsEmailTemplate = (
     .split('/')
     .filter(Boolean);
   if (remainingSegments.length === 1) {
-    const emailFilename = remainingSegments[0]!;
+    const emailFilename = removeFilenameExtension(remainingSegments[0]!);
     return directory.emailFilenames.includes(emailFilename);
   }
   const subDirectory = directory.subDirectories.find(