react-email 3.0.6 → 4.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "3.0.6",
+  "version": "4.0.0-alpha.0",
   "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",
@@ -34,15 +34,21 @@
     "ora": "5.4.1",
     "socket.io": "4.8.0"
   },
+  "overrides": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
   "devDependencies": {
     "@radix-ui/colors": "1.0.1",
     "@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",
@@ -53,11 +59,11 @@
     "@vercel/style-guide": "5.1.0",
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
-    "eslint": "8.50.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-config-turbo": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
+    "lottie-react": "^2.4.0",
+    "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
+    "prettier-plugin-tailwindcss": "0.6.6",
     "prism-react-renderer": "2.1.0",
     "react": "^19",
     "react-dom": "^19",
@@ -79,7 +85,6 @@
     "dev": "tsup-node --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "lint": "eslint . && tsc"
+    "clean": "rm -rf dist"
   }
 }

package/postcss.config.js

@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: { config: path.resolve(__dirname, 'tailwind.config.ts') },
     autoprefixer: {},
   },
-}
+};

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

@@ -0,0 +1,88 @@
+'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 (link.startsWith('mailto:')) continue;
+
+    const result: LinkCheckingResult = {
+      link,
+      status: 'success',
+      checks: [],
+    };
+
+    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,
+        },
+      });
+      if (hasntSucceeded) {
+        result.status = res.statusCode?.toString().startsWith('3')
+          ? 'warning'
+          : 'error';
+      }
+
+      if (link.startsWith('https://')) {
+        result.checks.push({
+          passed: true,
+          type: 'security',
+        });
+      } else {
+        result.checks.push({
+          passed: false,
+          type: 'security',
+        });
+        result.status = 'warning';
+      }
+    } 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);
+    });
+  });
+};

package/src/actions/get-email-path-from-slug.ts

@@ -1,6 +1,6 @@
 'use server';
-import path from 'node:path';
 import fs from 'node:fs';
+import path from 'node:path';
 import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 
@@ -13,11 +13,14 @@ export const getEmailPathFromSlug = cache(async (slug: string) => {
 
   if (fs.existsSync(`${pathWithoutExtension}.tsx`)) {
     return `${pathWithoutExtension}.tsx`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
     return `${pathWithoutExtension}.jsx`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.ts`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.ts`)) {
     return `${pathWithoutExtension}.ts`;
-  } else if (fs.existsSync(`${pathWithoutExtension}.js`)) {
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.js`)) {
     return `${pathWithoutExtension}.js`;
   }
 

package/src/actions/render-email-by-path.tsx

@@ -1,13 +1,13 @@
 'use server';
 import fs from 'node:fs';
 import path from 'node:path';
-import ora from 'ora';
-import logSymbols from 'log-symbols';
 import chalk from 'chalk';
+import logSymbols from 'log-symbols';
+import ora from 'ora';
 import { getEmailComponent } from '../utils/get-email-component';
-import type { ErrorObject } from '../utils/types/error-object';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
+import type { ErrorObject } from '../utils/types/error-object';
 
 export interface RenderedEmailMetadata {
   markup: string;