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

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.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -25,22 +25,19 @@
     "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",
     "@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",
@@ -60,11 +57,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",
@@ -77,8 +76,9 @@
     "tsup": "7.2.0",
     "tsx": "4.9.0",
     "typescript": "5.1.6",
+    "use-debounce": "10.0.4",
     "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,89 @@
+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',
+    ),
+  ).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,141 @@
+'use server';
+
+import type { IncomingMessage } from 'node:http';
+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,91 @@
+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>,
+      ),
+    ),
+  ).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/app/preview/[...slug]/preview.tsx

@@ -1,12 +1,19 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import React from 'react';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
+import { useDebouncedCallback } from 'use-debounce';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
+import {
+  ResizableWarpper,
+  makeIframeDocumentBubbleEvents,
+} from '../../../components/resizable-wrapper';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
+import { useClampedState } from '../../../hooks/use-clamped-state';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { useHotreload } from '../../../hooks/use-hot-reload';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
@@ -29,7 +36,7 @@ const Preview = ({
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const activeView = searchParams.get('view') ?? 'desktop';
+  const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
   const renderingResult = useEmailRenderingResult(
@@ -75,36 +82,115 @@ const Preview = ({
 
   const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
 
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 350;
+  const minHeight = 600;
+  const storedWidth = searchParams.get('width');
+  const storedHeight = searchParams.get('height');
+  const [width, setWidth] = useClampedState(
+    storedWidth ? Number.parseInt(storedWidth) : 600,
+    350,
+    maxWidth,
+  );
+  const [height, setHeight] = useClampedState(
+    storedHeight ? Number.parseInt(storedHeight) : 1024,
+    600,
+    maxHeight,
+  );
+
+  const handleSaveViewSize = useDebouncedCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set('width', width.toString());
+    params.set('height', height.toString());
+    router.push(`${pathname}?${params.toString()}`);
+  }, 300);
+
   return (
     <Shell
-      activeView={hasNoErrors ? activeView : undefined}
+      activeView={activeView}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
       pathSeparator={pathSeparator}
-      setActiveView={hasNoErrors ? handleViewChange : undefined}
+      setActiveView={handleViewChange}
+      setViewHeight={(height) => {
+        setHeight(height);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
+      setViewWidth={(width) => {
+        setWidth(width);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
+      viewHeight={height}
+      viewWidth={width}
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div className="relative h-full">
+      <div
+        className="relative flex h-full pb-8 bg-gray-200"
+        ref={(element) => {
+          const observer = new ResizeObserver((entry) => {
+            const [elementEntry] = entry;
+            if (elementEntry) {
+              setMaxWidth(elementEntry.contentRect.width - 80);
+              setMaxHeight(elementEntry.contentRect.height - 80);
+            }
+          });
+
+          if (element) {
+            observer.observe(element);
+          }
+
+          return () => {
+            observer.disconnect();
+          };
+        }}
+      >
         {'error' in renderingResult ? (
           <RenderingError error={renderingResult.error} />
         ) : null}
 
         {hasNoErrors ? (
           <>
-            {activeView === 'desktop' && (
-              <iframe
-                className="h-full w-full bg-white"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
-            )}
-
-            {activeView === 'mobile' && (
-              <iframe
-                className="mx-auto h-full w-[360px] bg-white"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
+            {activeView === 'preview' && (
+              <ResizableWarpper
+                minHeight={minHeight}
+                minWidth={minWidth}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
+                height={height}
+                onResizeEnd={() => {
+                  handleSaveViewSize();
+                }}
+                onResize={(value, direction) => {
+                  const isHorizontal =
+                    direction === 'east' || direction === 'west';
+                  if (isHorizontal) {
+                    setWidth(value);
+                  } else {
+                    setHeight(value);
+                  }
+                }}
+                width={width}
+              >
+                <iframe
+                  className="solid max-h-full rounded-lg bg-white"
+                  ref={(iframe) => {
+                    if (iframe) {
+                      return makeIframeDocumentBubbleEvents(iframe);
+                    }
+                  }}
+                  srcDoc={renderedEmailMetadata.markup}
+                  style={{
+                    width: `${width}px`,
+                    height: `${height}px`,
+                  }}
+                  title={slug}
+                />
+              </ResizableWarpper>
             )}
 
             {activeView === 'source' && (