react-email 4.0.0-alpha.0 → 4.0.0-alpha.1

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

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/tertiary/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/chore-1/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/dist/preview/.next/types/app/preview/[...slug]/page.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/tertiary/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/chore-1/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/module-punycode.d.ts

@@ -0,0 +1,3 @@
+declare module 'module-punycode' {
+  export * from 'node:punycode';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -25,18 +25,14 @@
     "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
-    "esbuild": "0.19.11",
+    "esbuild": "0.23.0",
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
     "next": "15.1.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
-    "socket.io": "4.8.0"
-  },
-  "overrides": {
-    "react": "^19",
-    "react-dom": "^19"
+    "socket.io": "4.8.1"
   },
   "devDependencies": {
     "@radix-ui/colors": "1.0.1",
@@ -60,11 +56,13 @@
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
-    "lottie-react": "^2.4.0",
+    "@lottiefiles/dotlottie-react": "0.12.3",
     "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
     "prettier-plugin-tailwindcss": "0.6.6",
+    "pretty-bytes": "6.1.1",
     "prism-react-renderer": "2.1.0",
+    "module-punycode": "npm:punycode@2.3.1",
     "react": "^19",
     "react-dom": "^19",
     "sharp": "0.33.3",
@@ -78,7 +76,7 @@
     "tsx": "4.9.0",
     "typescript": "5.1.6",
     "vitest": "1.1.3",
-    "@react-email/render": "1.0.4"
+    "@react-email/render": "1.0.5"
   },
   "scripts": {
     "build": "tsup-node && node build-preview-server.mjs",

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

@@ -0,0 +1,90 @@
+import { render } from '@react-email/render';
+import * as React from 'react';
+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',
+    ),
+  ).toEqual([
+    {
+      source: 'https://resend.com/static/brand/resend-icon-white.png',
+      checks: [
+        {
+          passed: false,
+          type: 'accessibility',
+          metadata: {
+            alt: undefined,
+          },
+        },
+        {
+          passed: true,
+          type: 'syntax',
+        },
+        {
+          passed: true,
+          type: 'security',
+        },
+        {
+          passed: true,
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 200,
+          },
+        },
+        {
+          passed: true,
+          type: 'image_size',
+          metadata: {
+            byteCount: 23_138,
+          },
+        },
+      ],
+      status: 'warning',
+    },
+    {
+      checks: [
+        {
+          metadata: {
+            alt: 'codepen challenges',
+          },
+          passed: true,
+          type: 'accessibility',
+        },
+        {
+          passed: true,
+          type: 'syntax',
+        },
+        {
+          passed: true,
+          type: 'security',
+        },
+        {
+          metadata: {
+            fetchStatusCode: 200,
+          },
+          passed: true,
+          type: 'fetch_attempt',
+        },
+        {
+          metadata: {
+            byteCount: 111_922,
+          },
+          passed: true,
+          type: 'image_size',
+        },
+      ],
+      source: '/static/codepen-challengers.png',
+      status: 'success',
+    },
+  ] satisfies ImageCheckingResult[]);
+});

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

@@ -0,0 +1,142 @@
+'use server';
+
+import type { IncomingMessage } from 'node:http';
+import { headers } from 'next/headers';
+import { parse } from 'node-html-parser';
+import { quickFetch } from './quick-fetch';
+
+type Check = { passed: boolean } & (
+  | {
+      type: 'accessibility';
+      metadata: {
+        alt: string | undefined;
+      };
+    }
+  | {
+      type: 'fetch_attempt';
+      metadata: {
+        fetchStatusCode: number | undefined;
+      };
+    }
+  | {
+      type: 'image_size';
+      metadata: {
+        byteCount: number | undefined;
+      };
+    }
+  | {
+      type: 'syntax';
+    }
+  | {
+      type: 'security';
+    }
+);
+
+export interface ImageCheckingResult {
+  status: 'success' | 'warning' | 'error';
+  source: string;
+  checks: Check[];
+}
+
+const getResponseSizeInBytes = async (res: IncomingMessage) => {
+  let totalBytes = 0;
+  for await (const chunk of res) {
+    totalBytes += chunk.byteLength;
+  }
+  return totalBytes;
+};
+
+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';
+    }
+
+    try {
+      const url = new URL(source);
+      result.checks.push({
+        passed: true,
+        type: 'syntax',
+      });
+
+      if (source.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';
+      }
+
+      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';
+    }
+
+    imageCheckingResults.push(result);
+  }
+
+  return imageCheckingResults;
+};

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

@@ -0,0 +1,92 @@
+import { render } from '@react-email/render';
+import * as React from 'react';
+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>,
+      ),
+    ),
+  ).toEqual([
+    {
+      status: 'error',
+      checks: [
+        {
+          type: 'syntax',
+          passed: false,
+        },
+      ],
+      link: '/',
+    },
+    {
+      status: 'success',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: true,
+        },
+        {
+          type: 'fetch_attempt',
+          passed: true,
+          metadata: {
+            fetchStatusCode: 200,
+          },
+        },
+      ],
+      link: 'https://resend.com',
+    },
+    {
+      status: 'warning',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: true,
+        },
+        {
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 301,
+          },
+          passed: false,
+        },
+      ],
+      link: 'https://notion.so',
+    },
+    {
+      status: 'warning',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: false,
+        },
+        {
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 200,
+          },
+          passed: true,
+        },
+      ],
+      link: 'http://example.com',
+    },
+  ] satisfies LinkCheckingResult[]);
+});

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

@@ -33,6 +33,7 @@ export const checkLinks = async (code: string) => {
   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 = {
@@ -43,23 +44,10 @@ export const checkLinks = async (code: string) => {
 
     try {
       const url = new URL(link);
-
-      const res = await quickFetch(url);
-      const hasntSucceeded =
-        res.statusCode === undefined ||
-        !res.statusCode.toString().startsWith('2');
       result.checks.push({
-        type: 'fetch_attempt',
-        passed: hasntSucceeded,
-        metadata: {
-          fetchStatusCode: res.statusCode,
-        },
+        passed: true,
+        type: 'syntax',
       });
-      if (hasntSucceeded) {
-        result.status = res.statusCode?.toString().startsWith('3')
-          ? 'warning'
-          : 'error';
-      }
 
       if (link.startsWith('https://')) {
         result.checks.push({
@@ -73,6 +61,21 @@ export const checkLinks = async (code: string) => {
         });
         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,

package/src/components/button.tsx

@@ -1,10 +1,12 @@
+'use client';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
+import type * as React from 'react';
+import animatedLoadIcon from '../animated-icons-data/load.json';
 import { cn } from '../utils/cn';
 import { unreachable } from '../utils/unreachable';
 
-type ButtonElement = React.ComponentRef<'button'>;
-type RootProps = React.ComponentPropsWithoutRef<'button'>;
+type RootProps = React.ComponentProps<'button'>;
 
 type Appearance = 'white' | 'gradient';
 type Size = '1' | '2' | '3' | '4';
@@ -13,43 +15,51 @@ interface ButtonProps extends RootProps {
   asChild?: boolean;
   appearance?: Appearance;
   size?: Size;
+  loading?: boolean;
 }
 
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const classNames = cn(
-      getSize(size),
-      getAppearance(appearance),
-      'inline-flex items-center justify-center border font-medium',
-      className,
-    );
+export const Button = ({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  loading,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const Root = asChild ? SlotPrimitive.Slot : 'button';
 
-    return asChild ? (
-      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
-        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      </SlotPrimitive.Slot>
-    ) : (
-      <button
-        className={classNames}
-        ref={forwardedRef}
-        type="button"
-        {...props}
+  return (
+    <Root
+      ref={ref}
+      type="button"
+      {...props}
+      className={cn(
+        getSize(size),
+        getAppearance(appearance),
+        'inline-flex items-center justify-center gap-2 border font-medium',
+        className,
+      )}
+      aria-disabled={loading}
+    >
+      <span
+        className={cn(
+          '-ml-7 opacity-0 transition-opacity duration-200',
+          loading && 'opacity-100',
+        )}
       >
-        {children}
-      </button>
-    );
-  },
-);
+        <DotLottieReact
+          data={animatedLoadIcon}
+          autoplay={false}
+          className="h-5 w-5"
+          loop={true}
+        />
+      </span>
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+    </Root>
+  );
+};
 
 Button.displayName = 'Button';
 
@@ -61,6 +71,7 @@ const getAppearance = (appearance: Appearance | undefined) => {
         'border-white bg-white text-black transition-colors duration-200 ease-in-out',
         'hover:bg-white/90',
         'focus:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20',
+        'mt-2 mb-4 aria-disabled:border-transparent aria-disabled:bg-slate-11',
       ];
     case 'gradient':
       return [

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconImage = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </g>
+  </IconBase>
+));