react-email 4.0.0-alpha.4 → 4.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -29,7 +29,7 @@
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "15.1.2",
+    "next": "15.1.7",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "socket.io": "4.8.1"
@@ -83,9 +83,10 @@
   },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",
+    "clean": "rm -rf dist",
     "dev": "tsup-node --watch",
+    "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist"
+    "test:watch": "vitest"
   }
 }

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

@@ -2,21 +2,30 @@ import { render } from '@react-email/render';
 import { type ImageCheckingResult, checkImages } from './check-images';
 
 test('checkImages()', async () => {
-  expect(
-    await checkImages(
-      await render(
-        <div>
-          {/* biome-ignore lint/a11y/useAltText: This is intentional to test the checking for accessibility */}
-          <img src="https://resend.com/static/brand/resend-icon-white.png" />,
-          <img src="/static/codepen-challengers.png" alt="codepen challenges" />
-          ,
-        </div>,
-      ),
-      'https://demo.react.email',
+  const results: ImageCheckingResult[] = [];
+  const stream = await checkImages(
+    await render(
+      <div>
+        {/* biome-ignore lint/a11y/useAltText: This is intentional to test the checking for accessibility */}
+        <img src="https://resend.com/static/brand/resend-icon-white.png" />,
+        <img src="/static/codepen-challengers.png" alt="codepen challenges" />,
+      </div>,
     ),
-  ).toEqual([
+    'https://demo.react.email',
+  );
+  const reader = stream.getReader();
+  while (true) {
+    const { done, value } = await reader.read();
+    if (value) {
+      results.push(value);
+    }
+    if (done) {
+      break;
+    }
+  }
+  expect(results).toEqual([
     {
-      source: 'https://resend.com/static/brand/resend-icon-white.png',
+      intendedFor: 'https://resend.com/static/brand/resend-icon-white.png',
       checks: [
         {
           passed: false,
@@ -82,7 +91,7 @@ test('checkImages()', async () => {
           type: 'image_size',
         },
       ],
-      source: '/static/codepen-challengers.png',
+      intendedFor: '/static/codepen-challengers.png',
       status: 'success',
     },
   ] satisfies ImageCheckingResult[]);

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

@@ -4,7 +4,7 @@ import type { IncomingMessage } from 'node:http';
 import { parse } from 'node-html-parser';
 import { quickFetch } from './quick-fetch';
 
-type Check = { passed: boolean } & (
+export type ImageCheck = { passed: boolean } & (
   | {
       type: 'accessibility';
       metadata: {
@@ -33,8 +33,8 @@ type Check = { passed: boolean } & (
 
 export interface ImageCheckingResult {
   status: 'success' | 'warning' | 'error';
-  source: string;
-  checks: Check[];
+  intendedFor: string;
+  checks: ImageCheck[];
 }
 
 const getResponseSizeInBytes = async (res: IncomingMessage) => {
@@ -48,94 +48,96 @@ const getResponseSizeInBytes = async (res: IncomingMessage) => {
 export const checkImages = async (code: string, base: string) => {
   const ast = parse(code);
 
-  const imageCheckingResults: ImageCheckingResult[] = [];
-
-  const images = ast.querySelectorAll('img');
-  for await (const image of images) {
-    const rawSource = image.attributes.src;
-    if (!rawSource) continue;
-    if (imageCheckingResults.some((result) => result.source === rawSource))
-      continue;
-
-    const source = rawSource?.startsWith('/')
-      ? `${base}${rawSource}`
-      : rawSource;
-
-    const result: ImageCheckingResult = {
-      source: rawSource,
-      status: 'success',
-      checks: [],
-    };
-
-    const alt = image.attributes.alt;
-    result.checks.push({
-      passed: alt !== undefined,
-      type: 'accessibility',
-      metadata: {
-        alt,
-      },
-    });
-    if (alt === undefined) {
-      result.status = 'warning';
-    }
+  const readableStream = new ReadableStream<ImageCheckingResult>({
+    async start(controller) {
+      const images = ast.querySelectorAll('img');
+      for await (const image of images) {
+        const rawSource = image.attributes.src;
+        if (!rawSource) continue;
 
-    try {
-      const url = new URL(source);
-      result.checks.push({
-        passed: true,
-        type: 'syntax',
-      });
+        const source = rawSource?.startsWith('/')
+          ? `${base}${rawSource}`
+          : rawSource;
 
-      if (source.startsWith('https://')) {
-        result.checks.push({
-          passed: true,
-          type: 'security',
-        });
-      } else {
+        const result: ImageCheckingResult = {
+          intendedFor: rawSource,
+          status: 'success',
+          checks: [],
+        };
+
+        const alt = image.attributes.alt;
         result.checks.push({
-          passed: false,
-          type: 'security',
+          passed: alt !== undefined,
+          type: 'accessibility',
+          metadata: {
+            alt,
+          },
         });
-        result.status = 'warning';
-      }
-
-      const res = await quickFetch(url);
-      const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false;
-
-      result.checks.push({
-        type: 'fetch_attempt',
-        passed: hasSucceeded,
-        metadata: {
-          fetchStatusCode: res.statusCode,
-        },
-      });
-      if (!hasSucceeded) {
-        result.status = res.statusCode?.toString().startsWith('3')
-          ? 'warning'
-          : 'error';
-      }
-
-      const responseSizeBytes = await getResponseSizeInBytes(res);
-      result.checks.push({
-        type: 'image_size',
-        passed: responseSizeBytes < 1_048_576, // 1024 x 1024 bytes
-        metadata: {
-          byteCount: responseSizeBytes,
-        },
-      });
-      if (responseSizeBytes > 1_048_576) {
-        result.status = 'warning';
+        if (alt === undefined) {
+          result.status = 'warning';
+        }
+
+        try {
+          const url = new URL(source);
+          result.checks.push({
+            passed: true,
+            type: 'syntax',
+          });
+
+          if (rawSource.startsWith('http://')) {
+            result.checks.push({
+              passed: false,
+              type: 'security',
+            });
+            result.status = 'warning';
+          } else {
+            result.checks.push({
+              passed: true,
+              type: 'security',
+            });
+          }
+
+          const res = await quickFetch(url);
+          const hasSucceeded =
+            res.statusCode?.toString().startsWith('2') ?? false;
+
+          result.checks.push({
+            type: 'fetch_attempt',
+            passed: hasSucceeded,
+            metadata: {
+              fetchStatusCode: res.statusCode,
+            },
+          });
+          if (!hasSucceeded) {
+            result.status = res.statusCode?.toString().startsWith('3')
+              ? 'warning'
+              : 'error';
+          }
+
+          const responseSizeBytes = await getResponseSizeInBytes(res);
+          result.checks.push({
+            type: 'image_size',
+            passed: responseSizeBytes < 1_048_576, // 1024 x 1024 bytes
+            metadata: {
+              byteCount: responseSizeBytes,
+            },
+          });
+          if (responseSizeBytes > 1_048_576) {
+            result.status = 'warning';
+          }
+        } catch (exception) {
+          result.checks.push({
+            passed: false,
+            type: 'syntax',
+          });
+          result.status = 'error';
+        }
+
+        controller.enqueue(result);
       }
-    } catch (exception) {
-      result.checks.push({
-        passed: false,
-        type: 'syntax',
-      });
-      result.status = 'error';
-    }
-
-    imageCheckingResults.push(result);
-  }
+      controller.close();
+    },
+  });
 
-  return imageCheckingResults;
+  return readableStream;
 };

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

@@ -2,18 +2,28 @@ import { render } from '@react-email/render';
 import { type LinkCheckingResult, checkLinks } from './check-links';
 
 test('checkLinks()', async () => {
-  expect(
-    await checkLinks(
-      await render(
-        <div>
-          <a href="/">Root</a>
-          <a href="https://resend.com">Resend</a>
-          <a href="https://notion.so">Notion</a>
-          <a href="http://example.com">Example unsafe</a>
-        </div>,
-      ),
+  const results: LinkCheckingResult[] = [];
+  const stream = await checkLinks(
+    await render(
+      <div>
+        <a href="/">Root</a>
+        <a href="https://resend.com">Resend</a>
+        <a href="https://notion.so">Notion</a>
+        <a href="http://react.email">React Email unsafe</a>
+      </div>,
     ),
-  ).toEqual([
+  );
+  const reader = stream.getReader();
+  while (true) {
+    const { done, value } = await reader.read();
+    if (value) {
+      results.push(value);
+    }
+    if (done) {
+      break;
+    }
+  }
+  expect(results).toEqual([
     {
       status: 'error',
       checks: [
@@ -22,7 +32,7 @@ test('checkLinks()', async () => {
           passed: false,
         },
       ],
-      link: '/',
+      intendedFor: '/',
     },
     {
       status: 'success',
@@ -43,7 +53,7 @@ test('checkLinks()', async () => {
           },
         },
       ],
-      link: 'https://resend.com',
+      intendedFor: 'https://resend.com',
     },
     {
       status: 'warning',
@@ -64,7 +74,7 @@ test('checkLinks()', async () => {
           passed: false,
         },
       ],
-      link: 'https://notion.so',
+      intendedFor: 'https://notion.so',
     },
     {
       status: 'warning',
@@ -80,12 +90,12 @@ test('checkLinks()', async () => {
         {
           type: 'fetch_attempt',
           metadata: {
-            fetchStatusCode: 200,
+            fetchStatusCode: 308,
           },
-          passed: true,
+          passed: false,
         },
       ],
-      link: 'http://example.com',
+      intendedFor: 'http://react.email',
     },
   ] satisfies LinkCheckingResult[]);
 });

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

@@ -3,7 +3,7 @@
 import { parse } from 'node-html-parser';
 import { quickFetch } from './quick-fetch';
 
-type Check = { passed: boolean } & (
+export type LinkCheck = { passed: boolean } & (
   | {
       type: 'fetch_attempt';
       metadata: {
@@ -20,72 +20,75 @@ type Check = { passed: boolean } & (
 
 export interface LinkCheckingResult {
   status: 'success' | 'warning' | 'error';
-  link: string;
-  checks: Check[];
+  intendedFor: string;
+  checks: LinkCheck[];
 }
 
 export const checkLinks = async (code: string) => {
   const ast = parse(code);
 
-  const linkCheckingResults: LinkCheckingResult[] = [];
+  const readableStream = new ReadableStream<LinkCheckingResult>({
+    async start(controller) {
+      const anchors = ast.querySelectorAll('a');
+      for await (const anchor of anchors) {
+        const link = anchor.attributes.href;
+        if (!link) continue;
+        if (link.startsWith('mailto:')) continue;
 
-  const anchors = ast.querySelectorAll('a');
-  for await (const anchor of anchors) {
-    const link = anchor.attributes.href;
-    if (!link) continue;
-    if (linkCheckingResults.some((result) => result.link === link)) continue;
-    if (link.startsWith('mailto:')) continue;
+        const result: LinkCheckingResult = {
+          intendedFor: link,
+          status: 'success',
+          checks: [],
+        };
 
-    const result: LinkCheckingResult = {
-      link,
-      status: 'success',
-      checks: [],
-    };
+        try {
+          const url = new URL(link);
+          result.checks.push({
+            passed: true,
+            type: 'syntax',
+          });
 
-    try {
-      const url = new URL(link);
-      result.checks.push({
-        passed: true,
-        type: 'syntax',
-      });
+          if (link.startsWith('http://')) {
+            result.checks.push({
+              passed: false,
+              type: 'security',
+            });
+            result.status = 'warning';
+          } else {
+            result.checks.push({
+              passed: true,
+              type: 'security',
+            });
+          }
 
-      if (link.startsWith('https://')) {
-        result.checks.push({
-          passed: true,
-          type: 'security',
-        });
-      } else {
-        result.checks.push({
-          passed: false,
-          type: 'security',
-        });
-        result.status = 'warning';
-      }
+          const res = await quickFetch(url);
+          const hasSucceeded =
+            res.statusCode?.toString().startsWith('2') ?? false;
+          result.checks.push({
+            type: 'fetch_attempt',
+            passed: hasSucceeded,
+            metadata: {
+              fetchStatusCode: res.statusCode,
+            },
+          });
+          if (!hasSucceeded) {
+            result.status = res.statusCode?.toString().startsWith('3')
+              ? 'warning'
+              : 'error';
+          }
+        } catch (exception) {
+          result.checks.push({
+            passed: false,
+            type: 'syntax',
+          });
+          result.status = 'error';
+        }
 
-      const res = await quickFetch(url);
-      const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false;
-      result.checks.push({
-        type: 'fetch_attempt',
-        passed: hasSucceeded,
-        metadata: {
-          fetchStatusCode: res.statusCode,
-        },
-      });
-      if (!hasSucceeded) {
-        result.status = res.statusCode?.toString().startsWith('3')
-          ? 'warning'
-          : 'error';
+        controller.enqueue(result);
       }
-    } catch (exception) {
-      result.checks.push({
-        passed: false,
-        type: 'syntax',
-      });
-      result.status = 'error';
-    }
-
-    linkCheckingResults.push(result);
-  }
+      controller.close();
+    },
+  });
 
-  return linkCheckingResults;
+  return readableStream;
 };

package/src/app/fonts.ts

@@ -0,0 +1,39 @@
+import { Inter } from 'next/font/google';
+import Local from 'next/font/local';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
+export const sfMono = Local({
+  src: [
+    {
+      path: './fonts/SFMono/SFMonoLight.otf',
+      weight: '300',
+    },
+    {
+      path: './fonts/SFMono/SFMonoRegular.otf',
+      weight: '400',
+    },
+    {
+      path: './fonts/SFMono/SFMonoMedium.otf',
+      weight: '500',
+    },
+    {
+      path: './fonts/SFMono/SFMonoSemibold.otf',
+      weight: '600',
+    },
+    {
+      path: './fonts/SFMono/SFMonoBold.otf',
+      weight: '700',
+    },
+    {
+      path: './fonts/SFMono/SFMonoHeavy.otf',
+      weight: '800',
+    },
+  ],
+  variable: '--font-sf-mono',
+  display: 'swap',
+});

package/src/app/layout.tsx

@@ -3,7 +3,7 @@ import './globals.css';
 import { EmailsProvider } from '../contexts/emails';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
-import { inter } from './inter';
+import { inter, sfMono } from './fonts';
 
 export const metadata: Metadata = {
   title: 'React Email',
@@ -23,7 +23,10 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   }
 
   return (
-    <html className={inter.className} lang="en">
+    <html
+      className={`${inter.variable} ${sfMono.variable} font-sans`}
+      lang="en"
+    >
       <body className="relative flex h-screen flex-col overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
         <EmailsProvider
           initialEmailsDirectoryMetadata={emailsDirectoryMetadata}

package/src/app/page.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell } from '../components/shell';
+import { Shell, ShellContent } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import logo from './logo.png';
 
@@ -12,7 +12,7 @@ const Home = () => {
 
   return (
     <Shell>
-      <div className="relative mx-auto flex h-[inherit] max-w-lg items-center justify-center p-8">
+      <ShellContent className="mx-auto flex max-w-lg items-center justify-center p-8">
         <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
@@ -38,7 +38,7 @@ const Home = () => {
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>
-      </div>
+      </ShellContent>
     </Shell>
   );
 };