react-email 3.0.4 → 3.0.6

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.git/tertiary/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.git/tertiary/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.6",
   "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-action.ts

@@ -0,0 +1,19 @@
+'use server';
+
+import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
+import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
+
+export const getEmailsDirectoryMetadataAction = async (
+  absolutePathToEmailsDirectory: string,
+  keepFileExtensions = false,
+  isSubDirectory = false,
+
+  baseDirectoryPath = absolutePathToEmailsDirectory,
+): Promise<EmailsDirectory | undefined> => {
+  return getEmailsDirectoryMetadata(
+    absolutePathToEmailsDirectory,
+    keepFileExtensions,
+    isSubDirectory,
+    baseDirectoryPath,
+  );
+};

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/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import { getEmailsDirectoryMetadata } from '../actions/get-emails-directory-metadata';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { EmailsProvider } from '../contexts/emails';
+import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
 import { inter } from './inter';
 
 export const metadata: Metadata = {

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

@@ -2,10 +2,10 @@ import path from 'node:path';
 import { Suspense } from 'react';
 import { redirect } from 'next/navigation';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
-import { getEmailsDirectoryMetadata } from '../../../actions/get-emails-directory-metadata';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
 import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
 import Home from '../../page';
+import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
 import Preview from './preview';
 
 export const dynamicParams = true;
@@ -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/components/sidebar/sidebar-directory-children.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import type { EmailsDirectory } from '../../actions/get-emails-directory-metadata';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import { cn } from '../../utils';
 import { IconFile } from '../icons/icon-file';

package/src/components/sidebar/sidebar-directory.tsx

@@ -2,7 +2,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import * as React from 'react';
 import { cn } from '../../utils';
-import { type EmailsDirectory } from '../../actions/get-emails-directory-metadata';
+import { type EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { Heading } from '../heading';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';

package/src/contexts/emails.tsx

@@ -1,26 +1,12 @@
 'use client';
-import { createContext, useContext, useEffect, useState } from 'react';
-import {
-  getEmailsDirectoryMetadata,
-  type EmailsDirectory,
-} from '../actions/get-emails-directory-metadata';
+import { createContext, useContext, useState } from 'react';
+import { getEmailsDirectoryMetadataAction } from '../actions/get-emails-directory-metadata-action';
 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';
+import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
 
 const EmailsContext = createContext<
   | {
       emailsDirectoryMetadata: EmailsDirectory;
-      /**
-       * Uses the hot reloaded bundled build and rendering email result
-       */
-      useEmailRenderingResult: (
-        emailPath: string,
-        serverEmailRenderedResult: EmailRenderingResult,
-      ) => EmailRenderingResult;
     }
   | undefined
 >(undefined);
@@ -44,15 +30,12 @@ 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) => {
-      const metadata = await getEmailsDirectoryMetadata(
+    useHotreload(async () => {
+      const metadata = await getEmailsDirectoryMetadataAction(
         props.initialEmailsDirectoryMetadata.absolutePath,
       );
       if (metadata) {
@@ -62,28 +45,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 +52,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/{actions → utils}/get-emails-directory-metadata.spec.ts

@@ -4,7 +4,7 @@ import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
 test('getEmailsDirectoryMetadata on demo emails', async () => {
   const emailsDirectoryPath = path.resolve(
     __dirname,
-    '../../../../apps/demo/emails/',
+    '../../../../apps/demo/emails',
   );
   expect(await getEmailsDirectoryMetadata(emailsDirectoryPath)).toEqual({
     absolutePath: emailsDirectoryPath,
@@ -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 → utils}/get-emails-directory-metadata.ts

@@ -1,4 +1,3 @@
-'use server';
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import fs from 'node:fs';
 import path from 'node:path';

package/src/utils/types/hot-reload-event.ts

@@ -1,6 +1,3 @@
-export type HotReloadEvent =
-  | 'add'
-  | 'addDir'
-  | 'change'
-  | 'unlink'
-  | 'unlinkDir';
+import type { EventName } from 'chokidar/handler';
+
+export type HotReloadEvent = EventName;