fix(react-email): Dependents of dependents of email templates not causing hot reloads (#2083)

Author: gabrielmfern

.changeset/eleven-wombats-make.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fix dependent of dependents not causing hot reloads

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

@@ -78,7 +78,7 @@ export const setupHotreloading = async (
 
     const newFilesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
     // updates the files outside of the user's emails directory by unwatching
-    // the inexistant ones and watching the new ones
+    // the inexistent ones and watching the new ones
     //
     // this is necessary to avoid the issue mentioned here https://github.com/resend/react-email/issues/1433#issuecomment-2177515290
     for (const p of filesOutsideEmailsDirectory) {

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

@@ -5,6 +5,8 @@ import {
   renderEmailByPath,
 } from '../actions/render-email-by-path';
 import { isBuilding } from '../app/env';
+import { useEmails } from '../contexts/emails';
+import { containsEmailTemplate } from '../utils/contains-email-template';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (
@@ -15,6 +17,8 @@ export const useEmailRenderingResult = (
     serverEmailRenderedResult,
   );
 
+  const { emailsDirectoryMetadata } = useEmails();
+
   if (!isBuilding) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useHotreload(async (changes) => {
@@ -25,10 +29,15 @@ export const useEmailRenderingResult = (
           // going to be equivalent to the slug
           change.filename;
 
+        if (
+          containsEmailTemplate(slugForChangedEmail, emailsDirectoryMetadata)
+        ) {
+          continue;
+        }
+
         const pathForChangedEmail =
           await getEmailPathFromSlug(slugForChangedEmail);
 
-        // We always render the email template here so that we can allow
         const newRenderingResult = await renderEmailByPath(
           pathForChangedEmail,
           true,

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

@@ -0,0 +1,86 @@
+import path from 'node:path';
+import { containsEmailTemplate } from './contains-email-template';
+
+test('containsEmailTemplate()', async () => {
+  const emailsDirectoryPath = path.resolve(
+    __dirname,
+    '../../../../apps/demo/emails',
+  );
+  const directory = {
+    absolutePath: emailsDirectoryPath,
+    directoryName: 'emails',
+    relativePath: '',
+    emailFilenames: [],
+    subDirectories: [
+      {
+        absolutePath: `${emailsDirectoryPath}/magic-links`,
+        directoryName: 'magic-links',
+        relativePath: 'magic-links',
+        emailFilenames: [
+          'aws-verify-email',
+          'linear-login-code',
+          'notion-magic-link',
+          'plaid-verify-identity',
+          'raycast-magic-link',
+          'slack-confirm',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/newsletters`,
+        directoryName: 'newsletters',
+        relativePath: 'newsletters',
+        emailFilenames: [
+          'codepen-challengers',
+          'google-play-policy-update',
+          'stack-overflow-tips',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/notifications`,
+        directoryName: 'notifications',
+        relativePath: 'notifications',
+        emailFilenames: [
+          'github-access-token',
+          'papermark-year-in-review',
+          'vercel-invite-user',
+          'yelp-recent-login',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/receipts`,
+        directoryName: 'receipts',
+        relativePath: 'receipts',
+        emailFilenames: ['apple-receipt', 'nike-receipt'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reset-password`,
+        directoryName: 'reset-password',
+        relativePath: 'reset-password',
+        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reviews`,
+        directoryName: 'reviews',
+        relativePath: 'reviews',
+        emailFilenames: ['airbnb-review', 'amazon-review'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/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,
+  );
+});

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

@@ -0,0 +1,23 @@
+import type { EmailsDirectory } from './get-emails-directory-metadata';
+
+export const containsEmailTemplate = (
+  relativeEmailPath: string,
+  directory: EmailsDirectory,
+) => {
+  const remainingSegments = relativeEmailPath
+    .replace(directory.relativePath, '')
+    .split('/')
+    .filter(Boolean);
+  if (remainingSegments.length === 1) {
+    const emailFilename = remainingSegments[0]!;
+    return directory.emailFilenames.includes(emailFilename);
+  }
+  const subDirectory = directory.subDirectories.find(
+    (sub) => sub.relativePath === remainingSegments[0],
+  );
+  if (subDirectory === undefined) {
+    return false;
+  }
+
+  return containsEmailTemplate(relativeEmailPath, subDirectory);
+};

packages/react-email/src/utils/get-emails-directory-metadata.ts

@@ -12,7 +12,7 @@ const isFileAnEmail = (fullPath: string): boolean => {
   if (!['.js', '.tsx', '.jsx'].includes(ext)) return false;
 
   // This is to avoid a possible race condition where the file doesn't exist anymore
-  // once we are checking if it is an actual email, this couuld cause issues that
+  // once we are checking if it is an actual email, this could cause issues that
   // would be very hard to debug and find out the why of it happening.
   if (!fs.existsSync(fullPath)) {
     return false;