react-email 4.0.7 → 4.1.0-canary.2

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

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/layout.tsx
+// File: /home/runner/actions-runner/_work/react-email/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/page.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/page.tsx
+// File: /home/runner/actions-runner/_work/react-email/react-email/packages/react-email/src/app/page.tsx
 import * as entry from '../../../src/app/page.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/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/runner/actions-runner/_work/react-email/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.7",
+  "version": "4.1.0-canary.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -19,20 +19,20 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@babel/parser": "7.24.5",
-    "@babel/traverse": "7.25.6",
-    "chalk": "4.1.2",
-    "chokidar": "4.0.3",
-    "commander": "11.1.0",
-    "debounce": "2.0.0",
-    "esbuild": "0.25.0",
-    "glob": "10.3.4",
-    "log-symbols": "4.1.0",
-    "mime-types": "2.1.35",
-    "next": "15.2.4",
-    "normalize-path": "3.0.0",
-    "ora": "5.4.1",
-    "socket.io": "4.8.1"
+    "@babel/parser": "^7.24.5",
+    "@babel/traverse": "^7.25.6",
+    "chalk": "^4.1.2",
+    "chokidar": "^4.0.3",
+    "commander": "^11.1.0",
+    "debounce": "^2.0.0",
+    "esbuild": "^0.25.0",
+    "glob": "^10.3.4",
+    "log-symbols": "^4.1.0",
+    "mime-types": "^2.1.35",
+    "next": "^15.2.4",
+    "normalize-path": "^3.0.0",
+    "ora": "^5.4.1",
+    "socket.io": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
@@ -82,7 +82,7 @@
     "typescript": "5.8.2",
     "use-debounce": "10.0.4",
     "zod": "3.24.2",
-    "@react-email/components": "0.0.36"
+    "@react-email/components": "0.0.37-canary.2"
   },
   "scripts": {
     "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",

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

@@ -58,15 +58,16 @@ export const renderEmailByPath = async (
     emailComponent: Email,
     createElement,
     render,
+    pretty,
     sourceMapToOriginalFile,
   } = componentResult;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
   try {
-    const markup = await render(createElement(EmailComponent, previewProps), {
-      pretty: true,
-    });
+    const markup = await pretty(
+      await render(createElement(EmailComponent, previewProps)),
+    );
     const plainText = await render(
       createElement(EmailComponent, previewProps),
       {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useState } from 'react';
+import { use, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,9 +15,11 @@ import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { ThemeToggleGroup } from '../../../components/topbar/theme-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
 
@@ -32,9 +34,17 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const activeTheme: 'dark' | 'light' =
+    searchParams.get('theme') === 'dark' ? 'dark' : 'light';
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
+  const handleThemeChange = (theme: 'dark' | 'light') => {
+    const params = new URLSearchParams(searchParams);
+    params.set('theme', theme);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -51,6 +61,9 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
     );
   };
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useIframeColorScheme(iframeRef, activeTheme);
+
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
@@ -99,6 +112,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
           viewHeight={height}
           viewWidth={width}
         />
+        <ThemeToggleGroup
+          active={activeTheme}
+          onChange={(theme) => handleThemeChange(theme)}
+        />
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -164,6 +181,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 <iframe
                   className="solid max-h-full rounded-lg bg-white"
                   ref={(iframe) => {
+                    iframeRef.current = iframe;
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);
                     }

package/src/components/icons/icon-moon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMoon = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+      />
+    </IconBase>
+  ),
+);
+
+IconMoon.displayName = 'IconMoon';

package/src/components/icons/icon-sun.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSun = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fill="currentColor"
+        d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+      />
+    </IconBase>
+  ),
+);
+
+IconSun.displayName = 'IconSun';

package/src/components/topbar/theme-toggle-group.tsx

@@ -0,0 +1,87 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { tabTransition } from '../../utils/constants';
+import { IconMoon } from '../icons/icon-moon';
+import { IconSun } from '../icons/icon-sun';
+import { Tooltip } from '../tooltip';
+
+interface ThemeToggleGroupProps {
+  active: 'light' | 'dark';
+  onChange: (theme: 'light' | 'dark') => unknown;
+}
+
+export const ThemeToggleGroup = ({
+  active,
+  onChange,
+}: ThemeToggleGroupProps) => {
+  return (
+    <ToggleGroup.Root
+      aria-label="Color Scheme"
+      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      id="theme-toggle"
+      onValueChange={(value) => {
+        if (value) onChange(value as 'light' | 'dark');
+      }}
+      type="single"
+      value={active}
+    >
+      <ToggleGroup.Item value="light">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'light',
+                  'text-slate-12': active === 'light',
+                },
+              )}
+            >
+              {active === 'light' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconSun />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Light</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="dark">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
+                {
+                  'text-slate-11': active !== 'dark',
+                  'text-slate-12': active === 'dark',
+                },
+              )}
+            >
+              {active === 'dark' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-theme-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconMoon />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Dark</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+};

package/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,

package/src/hooks/use-iframe-color-scheme.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export function useIframeColorScheme(
+  iframeRef: React.RefObject<HTMLIFrameElement | null>,
+  theme: string,
+) {
+  React.useEffect(() => {
+    const iframe = iframeRef.current;
+
+    if (!iframe) return;
+
+    // Set on iframe element itself
+    iframe.style.colorScheme = theme;
+
+    // Set on iframe's document if available
+    if (iframe.contentDocument) {
+      iframe.contentDocument.documentElement.style.colorScheme = theme;
+      iframe.contentDocument.body.style.colorScheme = theme;
+    }
+
+    // Ensure styles are applied after it loads
+    const handleLoad = () => {
+      if (iframe.contentDocument) {
+        iframe.contentDocument.documentElement.style.colorScheme = theme;
+        iframe.contentDocument.body.style.colorScheme = theme;
+      }
+    };
+
+    iframe.addEventListener('load', handleLoad);
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+    };
+  }, [theme, iframeRef]);
+}

package/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel Logo" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img alt="alanturing&#x27;s profile picture" height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="Arrow indicating invitation" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img alt="Enigma team logo" height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;
+exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel Logo" height="37" src="/static/vercel-logo.png" style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img alt="alanturing&#x27;s profile picture" height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="Arrow indicating invitation" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img alt="Enigma team logo" height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px;margin-bottom:32px;text-align:center"><tbody><tr><td><a href="https://vercel.com" style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-bottom:16px;margin-top:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com</a></p><hr style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;

package/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,
+  );
+});

package/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);
+};

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -28,7 +28,7 @@ export const renderingUtilitiesExporter = (emailTemplates: string[]) => ({
       async ({ path: pathToFile }) => {
         return {
           contents: `${await fs.readFile(pathToFile, 'utf8')};
-          export { render } from 'react-email-module-that-will-export-render'
+          export { render, pretty } from 'react-email-module-that-will-export-render'
           export { createElement as reactEmailCreateReactElement } from 'react';
         `,
           loader: path.extname(pathToFile).slice(1) as Loader,

package/src/utils/get-email-component.ts

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import type { render } from '@react-email/components';
+import type { pretty, render } from '@react-email/components';
 import { type BuildFailure, type OutputFile, build } from 'esbuild';
 import type React from 'react';
 import type { RawSourceMap } from 'source-map-js';
@@ -14,6 +14,7 @@ import type { ErrorObject } from './types/error-object';
 const EmailComponentModule = z.object({
   default: z.any(),
   render: z.function(),
+  pretty: z.function(),
   reactEmailCreateReactElement: z.function(),
 });
 
@@ -27,6 +28,8 @@ export const getEmailComponent = async (
 
       render: typeof render;
 
+      pretty: typeof pretty;
+
       sourceMapToOriginalFile: RawSourceMap;
     }
   | { error: ErrorObject }
@@ -106,11 +109,27 @@ export const getEmailComponent = async (
     };
   }
 
+  if (typeof parseResult.data.default !== 'function') {
+    return {
+      error: improveErrorWithSourceMap(
+        new Error(
+          `The email component at ${emailPath} does not contain a default exported function`,
+          {
+            cause: parseResult.error,
+          },
+        ),
+        emailPath,
+        sourceMapToEmail,
+      ),
+    };
+  }
+
   const { data: componentModule } = parseResult;
 
   return {
     emailComponent: componentModule.default as EmailComponent,
     render: componentModule.render as typeof render,
+    pretty: componentModule.pretty as typeof pretty,
     createElement:
       componentModule.reactEmailCreateReactElement as typeof React.createElement,
 

package/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;