react-email 3.0.7 → 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/canary/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/canary/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "3.0.7",
+  "version": "4.0.0-alpha.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -19,8 +19,8 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@babel/core": "7.24.5",
     "@babel/parser": "7.24.5",
+    "@babel/traverse": "7.25.6",
     "chalk": "4.1.2",
     "chokidar": "4.0.3",
     "commander": "11.1.0",
@@ -39,10 +39,12 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@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",
     "@types/babel__core": "7.20.5",
+    "@types/babel__traverse": "*",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
     "@types/node": "22.10.2",
@@ -54,7 +56,11 @@
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
+    "@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",

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

@@ -0,0 +1,91 @@
+'use server';
+
+import { parse } from 'node-html-parser';
+import { quickFetch } from './quick-fetch';
+
+type Check = { passed: boolean } & (
+  | {
+      type: 'fetch_attempt';
+      metadata: {
+        fetchStatusCode: number | undefined;
+      };
+    }
+  | {
+      type: 'syntax';
+    }
+  | {
+      type: 'security';
+    }
+);
+
+export interface LinkCheckingResult {
+  status: 'success' | 'warning' | 'error';
+  link: string;
+  checks: Check[];
+}
+
+export const checkLinks = async (code: string) => {
+  const ast = parse(code);
+
+  const linkCheckingResults: LinkCheckingResult[] = [];
+
+  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 = {
+      link,
+      status: 'success',
+      checks: [],
+    };
+
+    try {
+      const url = new URL(link);
+      result.checks.push({
+        passed: true,
+        type: 'syntax',
+      });
+
+      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';
+    }
+
+    linkCheckingResults.push(result);
+  }
+
+  return linkCheckingResults;
+};

package/src/actions/email-validation/get-line-and-column-from-index.spec.ts

@@ -0,0 +1,22 @@
+import { getLineAndColumnFromIndex } from './get-line-and-column-from-index';
+
+test('getLineAndColumnFromIndex()', () => {
+  const code = `import { SomethingElse } from 'somewhere';
+
+const myConstant = 'what';
+
+const MyComponent = () => {
+  return <SomethingElse>
+    <div>
+      <a>Hello World!</a>{' '}
+      {myConstant}
+    </div>
+  </SomethingElse>;
+}`;
+  const [line, column] = getLineAndColumnFromIndex(
+    code,
+    code.indexOf('Hello World!'),
+  );
+  expect(line).toBe(8);
+  expect(column).toBe(10);
+});

package/src/actions/email-validation/get-line-and-column-from-index.ts

@@ -0,0 +1,43 @@
+const splitByLines = (text: string) => {
+  const properSplit: string[] = [];
+  const unevenSplit = text.split(/(?<eol>\n|\r|\r\n)/);
+
+  for (const [i, segment] of unevenSplit.entries()) {
+    if (i % 2 === 0) {
+      let segmentToInsert = segment;
+      if (i + 1 < unevenSplit.length) {
+        segmentToInsert += unevenSplit[i + 1];
+      }
+      properSplit.push(segmentToInsert);
+    }
+  }
+
+  return properSplit;
+};
+
+export const getLineAndColumnFromIndex = (
+  code: string,
+  index: number,
+): [line: number, column: number] => {
+  const lines = splitByLines(code);
+
+  let lineNumber = 1;
+  const line = () => {
+    const l = lines[lineNumber - 1];
+    if (l === undefined)
+      throw new Error(
+        'Could not find the line for a specific index in the code',
+        { cause: { lines, lineNumber, index } },
+      );
+    return l;
+  };
+  let charactersUpToLineStart = 0;
+  while (charactersUpToLineStart + line().length < index) {
+    charactersUpToLineStart += line().length;
+    lineNumber++;
+  }
+
+  const columnNumber = index - charactersUpToLineStart + 1;
+
+  return [lineNumber, columnNumber];
+};

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

@@ -0,0 +1,12 @@
+import type { IncomingMessage } from 'node:http';
+import http from 'node:http';
+import https from 'node:https';
+
+export const quickFetch = (url: URL) => {
+  return new Promise<IncomingMessage>((resolve) => {
+    const caller = url.protocol === 'https:' ? https : http;
+    caller.get(url, (res) => {
+      resolve(res);
+    });
+  });
+};