react-email 3.0.4 → 3.0.5

package/dist/preview/.next/types/app/layout.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/primary/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/resend/react-email/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/dist/preview/.next/types/app/preview/[...slug]/page.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/primary/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/resend/react-email/packages/react-email/src/app/preview/[...slug]/page.tsx
 import * as entry from '../../../../../src/app/preview/[...slug]/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/dist/preview/.next/types/cache-life.d.ts

@@ -5,6 +5,8 @@ declare module 'next/cache' {
   export {
     revalidateTag,
     revalidatePath,
+    unstable_expireTag,
+    unstable_expirePath,
   } from 'next/dist/server/web/spec-extension/revalidate'
   export { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'
 

package/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -22,14 +22,14 @@
     "@babel/core": "7.24.5",
     "@babel/parser": "7.24.5",
     "chalk": "4.1.2",
-    "chokidar": "^4.0.1",
+    "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
     "esbuild": "0.19.11",
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "15.0.4",
+    "next": "15.1.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "socket.io": "4.8.0"
@@ -45,13 +45,13 @@
     "@types/babel__core": "7.20.5",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "18.0.0",
+    "@types/node": "22.10.2",
     "@types/normalize-path": "3.0.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/webpack": "5.28.5",
     "@vercel/style-guide": "5.1.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "eslint": "8.50.0",
     "eslint-config-prettier": "9.0.0",
@@ -72,7 +72,7 @@
     "tsx": "4.9.0",
     "typescript": "5.1.6",
     "vitest": "1.1.3",
-    "@react-email/render": "1.0.3"
+    "@react-email/render": "1.0.4"
   },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",

package/src/actions/get-email-path-from-slug.ts

@@ -1,10 +1,11 @@
 'use server';
 import path from 'node:path';
 import fs from 'node:fs';
+import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 
 // eslint-disable-next-line @typescript-eslint/require-await
-export const getEmailPathFromSlug = async (slug: string) => {
+export const getEmailPathFromSlug = cache(async (slug: string) => {
   if (['.tsx', '.jsx', '.ts', '.js'].includes(path.extname(slug)))
     return path.join(emailsDirectoryAbsolutePath, slug);
 
@@ -25,4 +26,4 @@ export const getEmailPathFromSlug = async (slug: string) => {
 
     This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
   );
-};
+});

package/src/actions/get-emails-directory-metadata.spec.ts

@@ -44,6 +44,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         relativePath: 'notifications',
         emailFilenames: [
           'github-access-token',
+          'papermark-year-in-review',
           'vercel-invite-user',
           'yelp-recent-login',
         ],

package/src/actions/get-emails-directory-metadata.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';
+import { cache } from 'react';
 
 const isFileAnEmail = (fullPath: string): boolean => {
   const stat = fs.statSync(fullPath);
@@ -57,64 +58,66 @@ const mergeDirectoriesWithSubDirectories = (
   return currentResultingMergedDirectory;
 };
 
-export const getEmailsDirectoryMetadata = async (
-  absolutePathToEmailsDirectory: string,
-  keepFileExtensions = false,
-  isSubDirectory = false,
-
-  baseDirectoryPath = absolutePathToEmailsDirectory,
-): Promise<EmailsDirectory | undefined> => {
-  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
-
-  const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
-    withFileTypes: true,
-  });
-
-  const emailFilenames = dirents
-    .filter((dirent) =>
-      isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
-    )
-    .map((dirent) =>
-      keepFileExtensions
-        ? dirent.name
-        : dirent.name.replace(path.extname(dirent.name), ''),
-    );
+export const getEmailsDirectoryMetadata = cache(
+  async (
+    absolutePathToEmailsDirectory: string,
+    keepFileExtensions = false,
+    isSubDirectory = false,
+
+    baseDirectoryPath = absolutePathToEmailsDirectory,
+  ): Promise<EmailsDirectory | undefined> => {
+    if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
 
-  const subDirectories = await Promise.all(
-    dirents
-      .filter(
-        (dirent) =>
-          dirent.isDirectory() &&
-          !dirent.name.startsWith('_') &&
-          dirent.name !== 'static',
+    const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
+      withFileTypes: true,
+    });
+
+    const emailFilenames = dirents
+      .filter((dirent) =>
+        isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
       )
-      .map((dirent) => {
-        const direntAbsolutePath = path.join(
-          absolutePathToEmailsDirectory,
-          dirent.name,
-        );
-
-        return getEmailsDirectoryMetadata(
-          direntAbsolutePath,
-          keepFileExtensions,
-          true,
-          baseDirectoryPath,
-        ) as Promise<EmailsDirectory>;
-      }),
-  );
-
-  const emailsMetadata = {
-    absolutePath: absolutePathToEmailsDirectory,
-    relativePath: path.relative(
-      baseDirectoryPath,
-      absolutePathToEmailsDirectory,
-    ),
-    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
-    emailFilenames,
-    subDirectories,
-  } satisfies EmailsDirectory;
-
-  return isSubDirectory
-    ? mergeDirectoriesWithSubDirectories(emailsMetadata)
-    : emailsMetadata;
-};
+      .map((dirent) =>
+        keepFileExtensions
+          ? dirent.name
+          : dirent.name.replace(path.extname(dirent.name), ''),
+      );
+
+    const subDirectories = await Promise.all(
+      dirents
+        .filter(
+          (dirent) =>
+            dirent.isDirectory() &&
+            !dirent.name.startsWith('_') &&
+            dirent.name !== 'static',
+        )
+        .map((dirent) => {
+          const direntAbsolutePath = path.join(
+            absolutePathToEmailsDirectory,
+            dirent.name,
+          );
+
+          return getEmailsDirectoryMetadata(
+            direntAbsolutePath,
+            keepFileExtensions,
+            true,
+            baseDirectoryPath,
+          ) as Promise<EmailsDirectory>;
+        }),
+    );
+
+    const emailsMetadata = {
+      absolutePath: absolutePathToEmailsDirectory,
+      relativePath: path.relative(
+        baseDirectoryPath,
+        absolutePathToEmailsDirectory,
+      ),
+      directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
+      emailFilenames,
+      subDirectories,
+    } satisfies EmailsDirectory;
+
+    return isSubDirectory
+      ? mergeDirectoriesWithSubDirectories(emailsMetadata)
+      : emailsMetadata;
+  },
+);

package/src/actions/render-email-by-path.tsx

@@ -21,9 +21,16 @@ export type EmailRenderingResult =
       error: ErrorObject;
     };
 
+const cache = new Map<string, EmailRenderingResult>();
+
 export const renderEmailByPath = async (
   emailPath: string,
+  invalidatingCache = false,
 ): Promise<EmailRenderingResult> => {
+  if (invalidatingCache) cache.delete(emailPath);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (cache.has(emailPath)) return cache.get(emailPath)!;
+
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
@@ -36,14 +43,14 @@ export const renderEmailByPath = async (
     registerSpinnerAutostopping(spinner);
   }
 
-  const result = await getEmailComponent(emailPath);
+  const componentResult = await getEmailComponent(emailPath);
 
-  if ('error' in result) {
+  if ('error' in componentResult) {
     spinner?.stopAndPersist({
       symbol: logSymbols.error,
       text: `Failed while rendering ${emailFilename}`,
     });
-    return { error: result.error };
+    return { error: componentResult.error };
   }
 
   const {
@@ -51,7 +58,7 @@ export const renderEmailByPath = async (
     createElement,
     render,
     sourceMapToOriginalFile,
-  } = result;
+  } = componentResult;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
@@ -82,7 +89,7 @@ export const renderEmailByPath = async (
       text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
     });
 
-    return {
+    const renderingResult = {
       // This ensures that no null byte character ends up in the rendered
       // markup making users suspect of any issues. These null byte characters
       // only seem to happen with React 18, as it has no similar incident with React 19.
@@ -90,6 +97,10 @@ export const renderEmailByPath = async (
       plainText,
       reactMarkup,
     };
+
+    cache.set(emailPath, renderingResult);
+
+    return renderingResult;
   } catch (exception) {
     const error = exception as Error;
 

package/src/app/preview/[...slug]/page.tsx

@@ -16,7 +16,12 @@ export interface PreviewParams {
   slug: string[];
 }
 
-const Page = async ({ params }: { params: PreviewParams }) => {
+const Page = async ({
+  params: paramsPromise,
+}: {
+  params: Promise<PreviewParams>;
+}) => {
+  const params = await paramsPromise;
   // will come in here as segments of a relative path to the email
   // ex: ['authentication', 'verify-password.tsx']
   const slug = decodeURIComponent(params.slug.join('/'));
@@ -43,14 +48,14 @@ This is most likely not an issue with the preview server. Maybe there was a typo
     throw exception;
   }
 
-  const emailRenderingResult = await renderEmailByPath(emailPath);
+  const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
   if (
-    'error' in emailRenderingResult &&
-    process.env.NEXT_PUBLIC_IS_BUILDING === 'true'
+    process.env.NEXT_PUBLIC_IS_BUILDING === 'true' &&
+    'error' in serverEmailRenderingResult
   ) {
-    throw new Error(emailRenderingResult.error.message, {
-      cause: emailRenderingResult.error,
+    throw new Error(serverEmailRenderingResult.error.message, {
+      cause: serverEmailRenderingResult.error,
     });
   }
 
@@ -62,15 +67,20 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       <Preview
         emailPath={emailPath}
         pathSeparator={path.sep}
-        renderingResult={emailRenderingResult}
+        serverRenderingResult={serverEmailRenderingResult}
         slug={slug}
       />
     </Suspense>
   );
 };
 
-export function generateMetadata({ params }: { params: PreviewParams }) {
-  return { title: `${path.basename(params.slug.join('/'))} — React Email` };
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<PreviewParams>;
+}) {
+  const { slug } = await params;
+  return { title: `${path.basename(slug.join('/'))} — React Email` };
 }
 
 export default Page;

package/src/app/preview/[...slug]/preview.tsx

@@ -8,22 +8,22 @@ import type { EmailRenderingResult } from '../../../actions/render-email-by-path
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
-import { useEmails } from '../../../contexts/emails';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
+import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {
   slug: string;
   emailPath: string;
   pathSeparator: string;
-  renderingResult: EmailRenderingResult;
+  serverRenderingResult: EmailRenderingResult;
 }
 
 const Preview = ({
   slug,
   emailPath,
   pathSeparator,
-  renderingResult: initialRenderingResult,
+  serverRenderingResult,
 }: PreviewProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -31,17 +31,16 @@ const Preview = ({
 
   const activeView = searchParams.get('view') ?? 'desktop';
   const activeLang = searchParams.get('lang') ?? 'jsx';
-  const { useEmailRenderingResult } = useEmails();
 
   const renderingResult = useEmailRenderingResult(
     emailPath,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   const renderedEmailMetadata = useRenderingMetadata(
     emailPath,
     renderingResult,
-    initialRenderingResult,
+    serverRenderingResult,
   );
 
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
@@ -90,7 +89,6 @@ const Preview = ({
           <RenderingError error={renderingResult.error} />
         ) : null}
 
-        {/* If this is undefined means that the initial server render of the email had errors */}
         {hasNoErrors ? (
           <>
             {activeView === 'desktop' && (
@@ -135,6 +133,7 @@ const Preview = ({
             )}
           </>
         ) : null}
+
         <Toaster />
       </div>
     </Shell>

package/src/contexts/emails.tsx

@@ -1,26 +1,14 @@
 'use client';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 import {
   getEmailsDirectoryMetadata,
   type EmailsDirectory,
 } from '../actions/get-emails-directory-metadata';
 import { useHotreload } from '../hooks/use-hot-reload';
-import {
-  renderEmailByPath,
-  type EmailRenderingResult,
-} from '../actions/render-email-by-path';
-import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 
 const EmailsContext = createContext<
   | {
       emailsDirectoryMetadata: EmailsDirectory;
-      /**
-       * Uses the hot reloaded bundled build and rendering email result
-       */
-      useEmailRenderingResult: (
-        emailPath: string,
-        serverEmailRenderedResult: EmailRenderingResult,
-      ) => EmailRenderingResult;
     }
   | undefined
 >(undefined);
@@ -44,14 +32,11 @@ export const EmailsProvider = (props: {
   const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
-  const [renderingResultPerEmailPath, setRenderingResultPerEmailPath] =
-    useState<Record<string, EmailRenderingResult>>({});
-
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHotreload(async (changes) => {
+    useHotreload(async () => {
       const metadata = await getEmailsDirectoryMetadata(
         props.initialEmailsDirectoryMetadata.absolutePath,
       );
@@ -62,28 +47,6 @@ export const EmailsProvider = (props: {
           'Hot reloading: unable to find the emails directory to update the sidebar',
         );
       }
-
-      for await (const change of changes) {
-        const slugForChangedEmail =
-          // 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;
-
-        const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedEmail);
-
-        const lastResult = renderingResultPerEmailPath[pathForChangedEmail];
-
-        if (typeof lastResult !== 'undefined') {
-          const renderingResult = await renderEmailByPath(pathForChangedEmail);
-
-          setRenderingResultPerEmailPath((map) => ({
-            ...map,
-            [pathForChangedEmail]: renderingResult,
-          }));
-        }
-      }
     });
   }
 
@@ -91,23 +54,6 @@ export const EmailsProvider = (props: {
     <EmailsContext.Provider
       value={{
         emailsDirectoryMetadata,
-        useEmailRenderingResult: (emailPath, serverEmailRenderedResult) => {
-          useEffect(() => {
-            if (typeof renderingResultPerEmailPath[emailPath] === 'undefined') {
-              setRenderingResultPerEmailPath((map) => ({
-                ...map,
-                [emailPath]: serverEmailRenderedResult,
-              }));
-            }
-          }, [serverEmailRenderedResult, emailPath]);
-
-          if (typeof renderingResultPerEmailPath[emailPath] !== 'undefined') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return renderingResultPerEmailPath[emailPath]!;
-          }
-
-          return serverEmailRenderedResult;
-        },
       }}
     >
       {props.children}

package/src/hooks/use-email-rendering-result.ts

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import {
+  renderEmailByPath,
+  type EmailRenderingResult,
+} from '../actions/render-email-by-path';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
+import { useHotreload } from './use-hot-reload';
+
+export const useEmailRenderingResult = (
+  emailPath: string,
+  serverEmailRenderedResult: EmailRenderingResult,
+) => {
+  const [renderingResult, setRenderingResult] = useState(
+    serverEmailRenderedResult,
+  );
+
+  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHotreload(async (changes) => {
+      for await (const change of changes) {
+        const slugForChangedEmail =
+          // 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;
+
+        const pathForChangedEmail =
+          await getEmailPathFromSlug(slugForChangedEmail);
+
+        // We always render the email template here so that we can allow
+        const newRenderingResult = await renderEmailByPath(
+          pathForChangedEmail,
+          true,
+        );
+
+        if (pathForChangedEmail === emailPath) {
+          setRenderingResult(newRenderingResult);
+        }
+      }
+    });
+  }
+
+  return renderingResult;
+};

package/src/hooks/use-rendering-metadata.ts

@@ -16,19 +16,19 @@ const lastRenderingMetadataPerEmailPath = {} as Record<
 export const useRenderingMetadata = (
   emailPath: string,
   renderingResult: EmailRenderingResult,
-  initialRenderingMetadata?: EmailRenderingResult,
+  serverRenderingMetadata: EmailRenderingResult,
 ): RenderedEmailMetadata | undefined => {
   useEffect(() => {
     if ('markup' in renderingResult) {
       lastRenderingMetadataPerEmailPath[emailPath] = renderingResult;
     } else if (
-      typeof initialRenderingMetadata !== 'undefined' &&
-      'markup' in initialRenderingMetadata &&
+      typeof serverRenderingMetadata !== 'undefined' &&
+      'markup' in serverRenderingMetadata &&
       typeof lastRenderingMetadataPerEmailPath[emailPath] === 'undefined'
     ) {
-      lastRenderingMetadataPerEmailPath[emailPath] = initialRenderingMetadata;
+      lastRenderingMetadataPerEmailPath[emailPath] = serverRenderingMetadata;
     }
-  }, [renderingResult, emailPath, initialRenderingMetadata]);
+  }, [renderingResult, emailPath, serverRenderingMetadata]);
 
   return 'error' in renderingResult
     ? lastRenderingMetadataPerEmailPath[emailPath]

package/src/package/body/dist/index.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React.ForwardRefExoticComponent<Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>> & React.RefAttributes<HTMLBodyElement>>;
+
+export { Body, type BodyProps };

package/src/package/body/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React.ForwardRefExoticComponent<Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>> & React.RefAttributes<HTMLBodyElement>>;
+
+export { Body, type BodyProps };