feat(react-email): Link checker for preview server on a toolbar (#1799)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Bu Kinoshita <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Lucas de França <[email protected]>

Author: 4 people

.changeset/empty-rivers-laugh.md

@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Added toolbar with a link checker

packages/react-email/package.json

@@ -23,8 +23,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",
@@ -38,16 +38,22 @@
     "ora": "5.4.1",
     "socket.io": "4.8.1"
   },
+  "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",
     "@react-email/render": "workspace:*",
     "@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",
@@ -59,7 +65,10 @@
     "autoprefixer": "10.4.20",
     "clsx": "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",
     "module-punycode": "npm:[email protected]",
     "react": "^19",

packages/react-email/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;
+};

packages/react-email/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);
+});

packages/react-email/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];
+};

packages/react-email/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);
+    });
+  });
+};