react-email 4.0.8 → 4.0.9

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-email",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
-    "email": "./dist/cli/index.js"
+    "email": "./dist/cli/index.mjs"
   },
   "license": "MIT",
   "repository": {
@@ -19,70 +19,68 @@
     "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.27.0",
+    "@babel/traverse": "^7.27.0",
+    "chalk": "^5.0.0",
+    "chokidar": "^4.0.3",
+    "commander": "^13.0.0",
+    "debounce": "^2.0.0",
+    "esbuild": "^0.25.0",
+    "glob": "^11.0.0",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    "next": "^15.2.4",
+    "normalize-path": "^3.0.0",
+    "ora": "^8.0.0",
+    "socket.io": "^4.8.1"
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
-    "@lottiefiles/dotlottie-react": "0.12.3",
-    "@radix-ui/colors": "1.0.1",
-    "@radix-ui/react-collapsible": "1.1.0",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.2",
-    "@swc/core": "1.4.15",
+    "@lottiefiles/dotlottie-react": "0.13.3",
+    "@radix-ui/colors": "3.0.0",
+    "@radix-ui/react-collapsible": "1.1.7",
+    "@radix-ui/react-dropdown-menu": "2.1.10",
+    "@radix-ui/react-popover": "1.1.10",
+    "@radix-ui/react-slot": "1.2.0",
+    "@radix-ui/react-tabs": "1.1.7",
+    "@radix-ui/react-toggle-group": "1.1.6",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "@swc/core": "1.11.21",
     "@types/babel__core": "7.20.5",
-    "@types/babel__traverse": "*",
+    "@types/babel__traverse": "7.20.7",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "22.10.2",
+    "@types/node": "22.14.1",
     "@types/normalize-path": "3.0.2",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@types/webpack": "5.28.5",
-    "@vercel/style-guide": "5.1.0",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
-    "framer-motion": "12.0.0-alpha.2",
+    "framer-motion": "12.7.5",
     "jiti": "2.4.2",
     "json5": "2.2.3",
     "module-punycode": "npm:punycode@2.3.1",
-    "node-html-parser": "6.1.13",
-    "postcss": "8.4.40",
-    "prettier-plugin-tailwindcss": "0.6.6",
+    "node-html-parser": "7.0.1",
+    "postcss": "8.5.3",
     "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.1.0",
+    "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "sharp": "0.33.3",
-    "socket.io-client": "4.8.0",
-    "sonner": "1.7.1",
-    "source-map-js": "1.0.2",
+    "sharp": "0.34.1",
+    "socket.io-client": "4.8.1",
+    "sonner": "2.0.3",
+    "source-map-js": "1.2.1",
     "spamc": "0.0.5",
-    "stacktrace-parser": "0.1.10",
-    "tailwind-merge": "2.2.0",
+    "stacktrace-parser": "0.1.11",
+    "tailwind-merge": "3.2.0",
     "tailwindcss": "3.4.0",
-    "tsup": "7.2.0",
-    "tsx": "4.9.0",
-    "typescript": "5.8.2",
+    "tsup": "8.4.0",
+    "tsx": "4.19.3",
+    "typescript": "5.8.3",
     "use-debounce": "10.0.4",
-    "zod": "3.24.2",
-    "@react-email/components": "0.0.36"
+    "zod": "3.24.3",
+    "@react-email/components": "0.0.37"
   },
   "scripts": {
     "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",

package/src/actions/email-validation/check-compatibility.ts

@@ -2,9 +2,9 @@
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import {
-  type SourceLocation,
   convertLocationIntoObject,
   getObjectVariables,
+  type SourceLocation,
 } from '../../utils/caniemail/ast/get-object-variables';
 import type { StylePropertyUsage } from '../../utils/caniemail/ast/get-used-style-properties';
 import {

package/src/actions/email-validation/check-images.spec.tsx

@@ -1,4 +1,4 @@
-import { type ImageCheckingResult, checkImages } from './check-images';
+import { checkImages, type ImageCheckingResult } from './check-images';
 
 test('checkImages()', async () => {
   const results: ImageCheckingResult[] = [];

package/src/actions/email-validation/check-links.spec.tsx

@@ -1,4 +1,4 @@
-import { type LinkCheckingResult, checkLinks } from './check-links';
+import { checkLinks, type LinkCheckingResult } from './check-links';
 
 test('checkLinks()', async () => {
   const results: LinkCheckingResult[] = [];

package/src/actions/email-validation/quick-fetch.ts

@@ -1,5 +1,5 @@
-import type { IncomingMessage } from 'node:http';
 import http from 'node:http';
+import type { IncomingMessage } from 'node:http';
 import https from 'node:https';
 
 export const quickFetch = (url: URL) => {

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

@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
-import ora from 'ora';
+import ora, { type Ora } from 'ora';
 import { isBuilding, isPreviewDevelopment } from '../app/env';
 import { getEmailComponent } from '../utils/get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
@@ -35,7 +35,7 @@ export const renderEmailByPath = async (
   const timeBeforeEmailRendered = performance.now();
 
   const emailFilename = path.basename(emailPath);
-  let spinner: ora.Ora | undefined;
+  let spinner: Ora | undefined;
   if (!isBuilding && !isPreviewDevelopment) {
     spinner = ora({
       text: `Rendering email template ${emailFilename}\n`,
@@ -76,11 +76,11 @@ export const renderEmailByPath = async (
 
     const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
 
-    const milisecondsToRendered = performance.now() - timeBeforeEmailRendered;
-    let timeForConsole = `${milisecondsToRendered.toFixed(0)}ms`;
-    if (milisecondsToRendered <= 450) {
+    const millisecondsToRendered = performance.now() - timeBeforeEmailRendered;
+    let timeForConsole = `${millisecondsToRendered.toFixed(0)}ms`;
+    if (millisecondsToRendered <= 450) {
       timeForConsole = chalk.green(timeForConsole);
-    } else if (milisecondsToRendered <= 1000) {
+    } else if (millisecondsToRendered <= 1000) {
       timeForConsole = chalk.yellow(timeForConsole);
     } else {
       timeForConsole = chalk.red(timeForConsole);

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

@@ -8,8 +8,8 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
-  ResizableWrapper,
   makeIframeDocumentBubbleEvents,
+  ResizableWrapper,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';

package/src/components/toolbar.tsx

@@ -104,6 +104,7 @@ const ToolbarInner = ({
   });
 
   if (!isBuilding) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
     useEffect(() => {
       (async () => {
         const lintingRows = await loadLinting();

package/src/contexts/emails.tsx

@@ -32,9 +32,7 @@ export const EmailsProvider = (props: {
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
   if (!isBuilding) {
-    // this will not change on runtime so it doesn't violate
-    // the rules of hooks
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
     useHotreload(async () => {
       const metadata = await getEmailsDirectoryMetadataAction(
         props.initialEmailsDirectoryMetadata.absolutePath,

package/src/contexts/fragment-identifier.tsx

@@ -18,7 +18,9 @@ export const useFragmentIdentifier = () => {
 
 export const FragmentIdentifierProvider = ({
   children,
-}: { children: React.ReactNode }) => {
+}: {
+  children: React.ReactNode;
+}) => {
   const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
   const pathname = usePathname();
   const searchParams = useSearchParams();

package/src/contexts/preview.tsx

@@ -50,9 +50,7 @@ export const PreviewProvider = ({
   );
 
   if (!isBuilding) {
-    // this will not change on runtime so it doesn't violate
-    // the rules of hooks
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
     useHotreload((changes) => {
       const changeForThisEmail = changes.find((change) =>
         change.filename.includes(emailSlug),

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,20 +17,31 @@ export const useEmailRenderingResult = (
     serverEmailRenderedResult,
   );
 
+  const { emailsDirectoryMetadata } = useEmails();
+
   if (!isBuilding) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
     useHotreload(async (changes) => {
       for await (const change of changes) {
-        const slugForChangedEmail =
+        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;
 
-        const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedEmail);
+        if (
+          !containsEmailTemplate(
+            relativePathForChangedFile,
+            emailsDirectoryMetadata,
+          )
+        ) {
+          continue;
+        }
+
+        const pathForChangedEmail = await getEmailPathFromSlug(
+          relativePathForChangedFile,
+        );
 
-        // We always render the email template here so that we can allow
         const newRenderingResult = await renderEmailByPath(
           pathForChangedEmail,
           true,

package/src/hooks/use-hot-reload.ts

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useRef } from 'react';
-import { type Socket, io } from 'socket.io-client';
+import { io, type Socket } from 'socket.io-client';
 import type { HotReloadChange } from '../utils/types/hot-reload-change';
 
 /**

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-top:16px;margin-bottom:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom: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-top:16px;margin-bottom: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-top:16px;margin-bottom: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/caniemail/ast/get-object-variables.ts

@@ -1,5 +1,5 @@
-import type { Node } from '@babel/traverse';
 import traverse from '@babel/traverse';
+import type { Node } from '@babel/traverse';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
 
 export interface Position {

package/src/utils/caniemail/tailwind/generate-tailwind-rules.ts

@@ -1,5 +1,5 @@
-import type { Root, Rule } from 'postcss';
 import postcss from 'postcss';
+import type { Root, Rule } from 'postcss';
 import evaluateTailwindFunctions from 'tailwindcss/lib/lib/evaluateTailwindFunctions';
 import { generateRules as rawGenerateRules } from 'tailwindcss/lib/lib/generateRules';
 import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';

package/src/utils/caniemail/tailwind/get-tailwind-config.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import type { Node } from '@babel/traverse';
 import traverse from '@babel/traverse';
+import type { Node } from '@babel/traverse';
 import * as esbuild from 'esbuild';
 import type { Config as TailwindOriginalConfig } from 'tailwindcss';
 import type { AST } from '../../../actions/email-validation/check-compatibility';

package/src/utils/caniemail/tailwind/get-tailwind-metadata.ts

@@ -1,7 +1,7 @@
 import traverse from '@babel/traverse';
 import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
-import { type TailwindConfig, getTailwindConfig } from './get-tailwind-config';
+import { getTailwindConfig, type TailwindConfig } from './get-tailwind-config';
 import { setupTailwindContext } from './setup-tailwind-context';
 
 export const getTailwindMetadata = async (

package/src/utils/contains-email-template.spec.ts

@@ -0,0 +1,107 @@
+import path from 'node:path';
+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(
+    __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,33 @@
+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,
+) => {
+  const remainingSegments = relativeEmailPath
+    .replace(directory.relativePath, '')
+    .split('/')
+    .filter(Boolean);
+  if (remainingSegments.length === 1) {
+    const emailFilename = removeFilenameExtension(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/get-email-component.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import type { render } from '@react-email/components';
-import { type BuildFailure, type OutputFile, build } from 'esbuild';
+import { type BuildFailure, build, type OutputFile } from 'esbuild';
 import type React from 'react';
 import type { RawSourceMap } from 'source-map-js';
 import { z } from 'zod';
@@ -106,6 +106,21 @@ 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 {

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

@@ -2,25 +2,33 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
-const isFileAnEmail = (fullPath: string): boolean => {
-  const stat = fs.statSync(fullPath);
+const isFileAnEmail = async (fullPath: string): Promise<boolean> => {
+  let fileHandle: fs.promises.FileHandle;
+  try {
+    fileHandle = await fs.promises.open(fullPath, 'r');
+  } catch (exception) {
+    console.warn(exception);
+    return false;
+  }
+  const stat = await fileHandle.stat();
 
-  if (stat.isDirectory()) return false;
+  if (stat.isDirectory()) {
+    await fileHandle.close();
+    return false;
+  }
 
   const { ext } = path.parse(fullPath);
 
-  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
-  // would be very hard to debug and find out the why of it happening.
-  if (!fs.existsSync(fullPath)) {
+  if (!['.js', '.tsx', '.jsx'].includes(ext)) {
+    await fileHandle.close();
     return false;
   }
 
   // check with a heuristic to see if the file has at least
   // a default export (ES6) or module.exports (CommonJS) or named exports (MDX)
-  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const fileContents = await fileHandle.readFile('utf8');
+
+  await fileHandle.close();
 
   // Check for ES6 export default syntax
   const hasES6DefaultExport = /\bexport\s+default\b/gm.test(fileContents);
@@ -80,10 +88,13 @@ export const getEmailsDirectoryMetadata = async (
     withFileTypes: true,
   });
 
-  const emailFilenames = dirents
-    .filter((dirent) =>
+  const isEmailPredicates = await Promise.all(
+    dirents.map((dirent) =>
       isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
-    )
+    ),
+  );
+  const emailFilenames = dirents
+    .filter((_, i) => isEmailPredicates[i])
     .map((dirent) =>
       keepFileExtensions
         ? dirent.name

package/src/utils/index.ts

@@ -1,6 +1,6 @@
-export * from './types/as';
 export * from './cn';
 export * from './copy-text-to-clipboard';
 export * from './language-map';
-export * from './unreachable';
 export * from './sanitize';
+export * from './types/as';
+export * from './unreachable';