feat(react-email): Add line/columns for image and link checkers (#1963)

Author: gabrielmfern

apps/demo/emails/magic-links/aws-verify-email.tsx

@@ -84,7 +84,7 @@ export default function AWSVerifyEmail({
 }
 
 AWSVerifyEmail.PreviewProps = {
-  verificationCode: '596853'
+  verificationCode: '596853',
 } satisfies AWSVerifyEmailProps;
 
 const main = {

packages/react-email/src/actions/email-validation/check-images.spec.tsx

@@ -1,18 +1,12 @@
-import { render } from '@react-email/render';
 import { type ImageCheckingResult, checkImages } from './check-images';
 
 test('checkImages()', async () => {
   const results: ImageCheckingResult[] = [];
-  const stream = 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',
-  );
+  const html = `<div>
+  <img src="https://resend.com/static/brand/resend-icon-white.png" />,
+  <img src="/static/codepen-challengers.png" alt="codepen challenges" />,
+</div>`;
+  const stream = await checkImages(html, 'https://demo.react.email');
   const reader = stream.getReader();
   while (true) {
     const { done, value } = await reader.read();
@@ -26,6 +20,10 @@ test('checkImages()', async () => {
   expect(results).toEqual([
     {
       source: 'https://resend.com/static/brand/resend-icon-white.png',
+      codeLocation: {
+        line: 2,
+        column: 3,
+      },
       checks: [
         {
           passed: false,
@@ -60,6 +58,10 @@ test('checkImages()', async () => {
       status: 'warning',
     },
     {
+      codeLocation: {
+        line: 3,
+        column: 3,
+      },
       checks: [
         {
           metadata: {

packages/react-email/src/actions/email-validation/check-images.ts

@@ -2,6 +2,10 @@
 
 import type { IncomingMessage } from 'node:http';
 import { parse } from 'node-html-parser';
+import {
+  type CodeLocation,
+  getCodeLocationFromAstElement,
+} from './get-code-location-from-ast-element';
 import { quickFetch } from './quick-fetch';
 
 export type ImageCheck = { passed: boolean } & (
@@ -34,6 +38,7 @@ export type ImageCheck = { passed: boolean } & (
 export interface ImageCheckingResult {
   status: 'success' | 'warning' | 'error';
   source: string;
+  codeLocation: CodeLocation;
   checks: ImageCheck[];
 }
 
@@ -61,6 +66,7 @@ export const checkImages = async (code: string, base: string) => {
 
         const result: ImageCheckingResult = {
           source: rawSource,
+          codeLocation: getCodeLocationFromAstElement(image, code),
           status: 'success',
           checks: [],
         };

packages/react-email/src/actions/email-validation/check-links.spec.tsx

@@ -1,18 +1,14 @@
-import { render } from '@react-email/render';
 import { type LinkCheckingResult, checkLinks } from './check-links';
 
 test('checkLinks()', async () => {
   const results: LinkCheckingResult[] = [];
-  const stream = 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://react.email">React Email unsafe</a>
-      </div>,
-    ),
-  );
+  const html = `<div>
+  <a href="/">Root</a>
+  <a href="https://resend.com">Resend</a>
+  <a href="https://notion.so">Notion</a>
+  <a href="http://react.email">React Email unsafe</a>
+</div>`;
+  const stream = await checkLinks(html);
   const reader = stream.getReader();
   while (true) {
     const { done, value } = await reader.read();
@@ -26,6 +22,10 @@ test('checkLinks()', async () => {
   expect(results).toEqual([
     {
       status: 'error',
+      codeLocation: {
+        line: 2,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -36,6 +36,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'success',
+      codeLocation: {
+        line: 3,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -57,6 +61,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'warning',
+      codeLocation: {
+        line: 4,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -78,6 +86,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'warning',
+      codeLocation: {
+        line: 5,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',

packages/react-email/src/actions/email-validation/check-links.ts

@@ -1,6 +1,10 @@
 'use server';
 
 import { parse } from 'node-html-parser';
+import {
+  type CodeLocation,
+  getCodeLocationFromAstElement,
+} from './get-code-location-from-ast-element';
 import { quickFetch } from './quick-fetch';
 
 export type LinkCheck = { passed: boolean } & (
@@ -21,6 +25,7 @@ export type LinkCheck = { passed: boolean } & (
 export interface LinkCheckingResult {
   status: 'success' | 'warning' | 'error';
   link: string;
+  codeLocation: CodeLocation;
   checks: LinkCheck[];
 }
 
@@ -37,6 +42,7 @@ export const checkLinks = async (code: string) => {
 
         const result: LinkCheckingResult = {
           link,
+          codeLocation: getCodeLocationFromAstElement(anchor, code),
           status: 'success',
           checks: [],
         };

packages/react-email/src/actions/email-validation/get-code-location-from-ast-element.ts

@@ -0,0 +1,18 @@
+import type { HTMLElement } from 'node-html-parser';
+import { getLineAndColumnFromOffset } from '../../utils/get-line-and-column-from-offset';
+
+export interface CodeLocation {
+  line: number;
+  column: number;
+}
+
+export const getCodeLocationFromAstElement = (
+  ast: HTMLElement,
+  html: string,
+): CodeLocation => {
+  const [line, column] = getLineAndColumnFromOffset(ast.range[0], html);
+  return {
+    line,
+    column,
+  };
+};

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

@@ -11,4 +11,5 @@ export const emailsDirectoryAbsolutePath =
 
 export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';
 
-export const isPreviewDevelopment = process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT === 'true';
+export const isPreviewDevelopment =
+  process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT === 'true';

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

@@ -9,6 +9,6 @@ export const getEnvVariablesForPreviewApp = (
     EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
     EMAILS_DIR_ABSOLUTE_PATH: path.resolve(cwd, relativePathToEmailsDirectory),
     USER_PROJECT_LOCATION: cwd,
-    NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? 'true': 'false',
+    NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? 'true' : 'false',
   } as const;
 };