react-email 4.1.0-canary.4 → 4.1.0-canary.6

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-email",
-  "version": "4.1.0-canary.4",
+  "version": "4.1.0-canary.6",
   "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,73 +19,73 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@babel/parser": "^7.24.5",
-    "@babel/traverse": "^7.25.6",
-    "chalk": "^4.1.2",
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    "chalk": "^5.0.0",
     "chokidar": "^4.0.3",
-    "commander": "^11.1.0",
+    "commander": "^13.0.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",
+    "glob": "^11.0.0",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    "next": "^15.3.1",
     "normalize-path": "^3.0.0",
-    "ora": "^5.4.1",
-    "socket.io": "^4.8.1"
+    "ora": "^8.0.0",
+    "socket.io": "^4.8.1",
+    "tsconfig-paths": "4.2.0"
   },
   "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.37-canary.3"
+    "zod": "3.24.3",
+    "@react-email/components": "0.1.0-canary.3"
   },
   "scripts": {
-    "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",
+    "build": "tsup-node && node ./scripts/build-preview-server.mjs",
+    "postbuild": "pnpm install --frozen-lockfile",
     "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
     "clean": "rm -rf dist",
     "dev": "tsup-node --watch",

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`,

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/sidebar/file-tree-directory-children.tsx

@@ -1,7 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
@@ -14,6 +14,7 @@ export const FileTreeDirectoryChildren = (props: {
   isRoot?: boolean;
 }) => {
   const searchParams = useSearchParams();
+  const router = useRouter();
 
   return (
     <AnimatePresence initial={false}>
@@ -71,7 +72,11 @@ export const FileTreeDirectoryChildren = (props: {
                           pathname: `/preview/${emailSlug}`,
                           search: searchParams.toString(),
                         }}
-                        prefetch
+                        onMouseOver={() => {
+                          router.prefetch(
+                            `/preview/${emailSlug}?${searchParams.toString()}`,
+                          );
+                        }}
                         key={emailSlug}
                       >
                         <motion.span

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

@@ -20,7 +20,7 @@ export const useEmailRenderingResult = (
   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 relativePathForChangedFile =

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="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>"`;
+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" data-skip-in-text="true">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:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;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" 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/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';

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 could 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';

package/src/utils/run-bundled-code.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import vm from 'node:vm';
-import { type Result, err, ok } from './result';
+import { err, ok, type Result } from './result';
 import { staticNodeModulesForVM } from './static-node-modules-for-vm';
 
 export const runBundledCode = (

package/tailwind.config.ts

@@ -1,5 +1,6 @@
+import * as colors from '@radix-ui/colors';
 import type { Config } from 'tailwindcss';
-import colors = require('@radix-ui/colors');
+
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import plugin from 'tailwindcss/plugin';
 

package/tsconfig.json

@@ -28,7 +28,7 @@
     "noEmit": true,
     "strict": false,
     "target": "ESNext",
-    "module": "CommonJS",
+    "module": "ESNext",
     "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
     "types": ["vitest/globals"],

package/dist/cli/index.d.mts

@@ -1 +0,0 @@
-#!/usr/bin/env node

package/dist/cli/index.d.ts

@@ -1 +0,0 @@
-#!/usr/bin/env node