react-email 4.0.0-alpha.5 → 4.0.0-alpha.6

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

@@ -0,0 +1,322 @@
+'use server';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import {
+  type SourceLocation,
+  convertLocationIntoObject,
+  getObjectVariables,
+} from '../../utils/caniemail/ast/get-object-variables';
+import type { StylePropertyUsage } from '../../utils/caniemail/ast/get-used-style-properties';
+import {
+  doesPropertyHaveLocation,
+  getUsedStyleProperties,
+} from '../../utils/caniemail/ast/get-used-style-properties';
+import type {
+  CompatibilityStats,
+  SupportStatus,
+} from '../../utils/caniemail/get-compatibility-stats-for-entry';
+import { getCompatibilityStatsForEntry } from '../../utils/caniemail/get-compatibility-stats-for-entry';
+import { getCssFunctions } from '../../utils/caniemail/get-css-functions';
+import { getCssPropertyNames } from '../../utils/caniemail/get-css-property-names';
+import { getCssPropertyWithValue } from '../../utils/caniemail/get-css-property-with-value';
+import { getCssUnit } from '../../utils/caniemail/get-css-unit';
+import { getElementAttributes } from '../../utils/caniemail/get-element-attributes';
+import { getElementNames } from '../../utils/caniemail/get-element-names';
+import { supportEntries } from './caniemail-data';
+
+export interface CompatibilityCheckingResult {
+  location: SourceLocation;
+  source: string;
+  entry: SupportEntry;
+  status: SupportStatus;
+  statsPerEmailClient: CompatibilityStats['perEmailClient'];
+}
+
+export type EmailClient =
+  | 'gmail'
+  | 'outlook'
+  | 'yahoo'
+  | 'apple-mail'
+  | 'aol'
+  | 'thunderbird'
+  | 'microsoft'
+  | 'samsung-email'
+  | 'sfr'
+  | 'orange'
+  | 'protonmail'
+  | 'hey'
+  | 'mail-ru'
+  | 'fastmail'
+  | 'laposte'
+  | 't-online-de'
+  | 'free-fr'
+  | 'gmx'
+  | 'web-de'
+  | 'ionos-1and1'
+  | 'rainloop'
+  | 'wp-pl';
+
+export type Platform =
+  | 'desktop-app'
+  | 'desktop-webmail'
+  | 'mobile-webmail'
+  | 'webmail'
+  | 'ios'
+  | 'android'
+  | 'windows'
+  | 'macos'
+  | 'windows-mail'
+  | 'outlook-com';
+
+export type SupportEntryCategroy = 'html' | 'css' | 'image' | 'others';
+
+export interface SupportEntry {
+  slug: string;
+  title: string;
+  description: string | null;
+  url: string;
+  category: SupportEntryCategroy;
+  tags: string[];
+  keywords: string | null;
+  last_test_date: string;
+  test_url: string;
+  test_results_url: string | null;
+  stats: Partial<
+    Record<
+      EmailClient,
+      Partial<
+        Record<
+          Platform,
+          /*
+            This last Record<string, string> has only one key, as the
+            ordered version of caniemail's data is meant to be something like:
+           
+            [
+              { "1.0": "u" },
+              { "2.0": "y" },
+              { "3.0": "p #1" },
+            ]
+           
+            So only one key for each object inside of this array, TypeScript can't really
+            describe this though AFAIK.
+          */
+          Record</* version */ string, string>[]
+        >
+      >
+    >
+  >;
+  notes: string | null;
+  notes_by_num: Record<number, string> | null;
+}
+
+const relevantEmailClients: EmailClient[] = [
+  'gmail',
+  'apple-mail',
+  'hey',
+  'outlook',
+  'yahoo',
+];
+
+export const checkCompatibility = async (
+  reactCode: string,
+  emailPath: string,
+) => {
+  const ast = parse(reactCode, {
+    strictMode: false,
+    errorRecovery: true,
+    sourceType: 'unambiguous',
+    plugins: ['jsx', 'typescript', 'decorators'],
+  });
+
+  const getSourceCodeAt = (location: SourceLocation) => {
+    const codeLines = reactCode.split(/\n|\r|\r\n/);
+    const source = codeLines
+      .slice(
+        Math.max(location.start.line - 2, 0),
+        Math.min(location.end.line + 2, codeLines.length),
+      )
+      .join('\n');
+    return source;
+  };
+
+  const objectVariables = getObjectVariables(ast);
+  const usedStyleProperties = await getUsedStyleProperties(
+    ast,
+    reactCode,
+    emailPath,
+    objectVariables,
+  );
+  const readableStream = new ReadableStream<CompatibilityCheckingResult>({
+    async start(controller) {
+      for (const entry of supportEntries) {
+        const compatibilityStats = getCompatibilityStatsForEntry(
+          entry,
+          relevantEmailClients,
+        );
+        if (Object.keys(compatibilityStats.perEmailClient).length === 0)
+          continue;
+        if (compatibilityStats.status === 'success') continue;
+
+        if (entry.category === 'html') {
+          const entryElements = getElementNames(entry.title, entry.keywords);
+          const entryAttributes = getElementAttributes(entry.title);
+          const htmlEntryType = (() => {
+            if (entryElements.length > 0) {
+              return 'element';
+            }
+
+            if (entryAttributes.length > 0) {
+              return 'attribute';
+            }
+          })();
+
+          if (!htmlEntryType) continue;
+
+          let addedInsight = false;
+          if (htmlEntryType === 'element') {
+            traverse(ast, {
+              JSXOpeningElement(path) {
+                if (path.node.name.type === 'JSXIdentifier' && !addedInsight) {
+                  const elementName = path.node.name.name;
+                  if (
+                    entryElements.includes(elementName) &&
+                    path.node.name.loc
+                  ) {
+                    addedInsight = true;
+                    controller.enqueue({
+                      entry,
+                      source: getSourceCodeAt(path.node.name.loc),
+                      location: convertLocationIntoObject(path.node.name.loc),
+                      statsPerEmailClient: compatibilityStats.perEmailClient,
+                      status: compatibilityStats.status,
+                    });
+                  }
+                }
+              },
+            });
+          } else {
+            traverse(ast, {
+              JSXAttribute(path) {
+                if (path.node.name.type === 'JSXIdentifier' && !addedInsight) {
+                  const attributeName = path.node.name.name;
+                  if (
+                    entryAttributes.includes(attributeName) &&
+                    path.node.name.loc
+                  ) {
+                    addedInsight = true;
+                    controller.enqueue({
+                      entry,
+                      source: getSourceCodeAt(path.node.name.loc),
+                      location: convertLocationIntoObject(path.node.name.loc),
+                      statsPerEmailClient: compatibilityStats.perEmailClient,
+                      status: compatibilityStats.status,
+                    });
+                  }
+                }
+              },
+            });
+          }
+        }
+
+        if (entry.category === 'css') {
+          const entryFullProperty = getCssPropertyWithValue(entry.title);
+          const entryProperties = getCssPropertyNames(
+            entry.title,
+            entry.keywords,
+          );
+          const entryUnit = getCssUnit(entry.title);
+          const entryFunctions = getCssFunctions(entry.title);
+
+          const cssEntryType = (() => {
+            if (entryFullProperty?.name && entryFullProperty.value) {
+              return 'full property';
+            }
+
+            if (entryFunctions.length > 0) {
+              return 'function';
+            }
+
+            if (entryUnit) {
+              return 'unit';
+            }
+
+            if (entryProperties.length > 0) {
+              return 'property name';
+            }
+          })();
+
+          if (!cssEntryType) continue;
+          const addToInsights = (
+            property: StylePropertyUsage & { location: SourceLocation },
+          ) => {
+            controller.enqueue({
+              entry,
+              location: convertLocationIntoObject(property.location),
+              source: getSourceCodeAt(property.location),
+              statsPerEmailClient: compatibilityStats.perEmailClient,
+              status: compatibilityStats.status,
+            });
+          };
+
+          for (const property of usedStyleProperties) {
+            if (!doesPropertyHaveLocation(property)) {
+              throw new Error(
+                "One of the properties' node did not contain the proper location for it on the source code. This must be an issue because we always need access to the source.",
+                {
+                  cause: {
+                    property,
+                    entry,
+                    reactCode,
+                    ast,
+                  },
+                },
+              );
+            }
+
+            if (cssEntryType === 'full property') {
+              if (
+                property.name === entryFullProperty?.name &&
+                property.value === entryFullProperty.value
+              ) {
+                addToInsights(property);
+                break;
+              }
+            } else if (cssEntryType === 'function') {
+              const functionRegex =
+                /(?<functionName>[a-zA-Z_][a-zA-Z0-9_-]*)\s*\(/g;
+              const functionName = functionRegex.exec(property.value)?.groups
+                ?.functionName;
+              if (functionName !== undefined) {
+                if (entryFunctions.includes(functionName)) {
+                  addToInsights(property);
+                  break;
+                }
+              }
+            } else if (cssEntryType === 'unit') {
+              const match = property.value.match(/[0-9](?<unit>[a-zA-Z%]+)$/g);
+              if (match) {
+                const unit = match.groups?.unit;
+                if (entryUnit && unit && entryUnit === unit) {
+                  addToInsights(property);
+                  break;
+                }
+              }
+            } else if (
+              entryProperties.some(
+                (propertyName) => property.name === propertyName,
+              )
+            ) {
+              addToInsights(property);
+              break;
+            }
+          }
+        }
+      }
+      controller.close();
+    },
+  });
+
+  return readableStream;
+};
+
+export type AST = ReturnType<typeof parse>;

package/src/actions/email-validation/check-images.spec.tsx

@@ -25,7 +25,7 @@ test('checkImages()', async () => {
   }
   expect(results).toEqual([
     {
-      intendedFor: 'https://resend.com/static/brand/resend-icon-white.png',
+      source: 'https://resend.com/static/brand/resend-icon-white.png',
       checks: [
         {
           passed: false,
@@ -91,7 +91,7 @@ test('checkImages()', async () => {
           type: 'image_size',
         },
       ],
-      intendedFor: '/static/codepen-challengers.png',
+      source: '/static/codepen-challengers.png',
       status: 'success',
     },
   ] satisfies ImageCheckingResult[]);

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

@@ -33,7 +33,7 @@ export type ImageCheck = { passed: boolean } & (
 
 export interface ImageCheckingResult {
   status: 'success' | 'warning' | 'error';
-  intendedFor: string;
+  source: string;
   checks: ImageCheck[];
 }
 
@@ -60,7 +60,7 @@ export const checkImages = async (code: string, base: string) => {
           : rawSource;
 
         const result: ImageCheckingResult = {
-          intendedFor: rawSource,
+          source: rawSource,
           status: 'success',
           checks: [],
         };

package/src/actions/email-validation/check-links.spec.tsx

@@ -32,7 +32,7 @@ test('checkLinks()', async () => {
           passed: false,
         },
       ],
-      intendedFor: '/',
+      link: '/',
     },
     {
       status: 'success',
@@ -53,7 +53,7 @@ test('checkLinks()', async () => {
           },
         },
       ],
-      intendedFor: 'https://resend.com',
+      link: 'https://resend.com',
     },
     {
       status: 'warning',
@@ -74,7 +74,7 @@ test('checkLinks()', async () => {
           passed: false,
         },
       ],
-      intendedFor: 'https://notion.so',
+      link: 'https://notion.so',
     },
     {
       status: 'warning',
@@ -95,7 +95,7 @@ test('checkLinks()', async () => {
           passed: false,
         },
       ],
-      intendedFor: 'http://react.email',
+      link: 'http://react.email',
     },
   ] satisfies LinkCheckingResult[]);
 });

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

@@ -20,7 +20,7 @@ export type LinkCheck = { passed: boolean } & (
 
 export interface LinkCheckingResult {
   status: 'success' | 'warning' | 'error';
-  intendedFor: string;
+  link: string;
   checks: LinkCheck[];
 }
 
@@ -36,7 +36,7 @@ export const checkLinks = async (code: string) => {
         if (link.startsWith('mailto:')) continue;
 
         const result: LinkCheckingResult = {
-          intendedFor: link,
+          link,
           status: 'success',
           checks: [],
         };

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

@@ -2,7 +2,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { cache } from 'react';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import { emailsDirectoryAbsolutePath } from '../app/env';
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export const getEmailPathFromSlug = cache(async (slug: string) => {

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

@@ -4,6 +4,7 @@ import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
+import { isBuilding } from '../app/env';
 import { getEmailComponent } from '../utils/get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
@@ -35,7 +36,7 @@ export const renderEmailByPath = async (
 
   const emailFilename = path.basename(emailPath);
   let spinner: ora.Ora | undefined;
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     spinner = ora({
       text: `Rendering email template ${emailFilename}\n`,
       prefixText: ' ',

package/src/{utils/emails-directory-absolute-path.ts → app/env.ts}

@@ -8,3 +8,5 @@ export const userProjectLocation = process.env.USER_PROJECT_LOCATION!;
 /** ONLY ACCESSIBLE ON THE SERVER */
 export const emailsDirectoryAbsolutePath =
   process.env.EMAILS_DIR_ABSOLUTE_PATH!;
+
+export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';

package/src/app/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import { EmailsProvider } from '../contexts/emails';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
+import { emailsDirectoryAbsolutePath } from './env';
 import { inter, sfMono } from './fonts';
 
 export const metadata: Metadata = {

package/src/app/page.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
 import { Shell, ShellContent } from '../components/shell';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
 
 const Home = () => {

package/src/app/preview/[...slug]/page.tsx

@@ -3,8 +3,14 @@ import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
-import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
+import { Shell } from '../../../components/shell';
+import { Toolbar } from '../../../components/toolbar';
+import type { LintingRow } from '../../../components/toolbar/linter';
+import type { SpamCheckingResult } from '../../../components/toolbar/spam-assassin';
+import { PreviewProvider } from '../../../contexts/preview';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
+import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
+import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
 import Home from '../../page';
 import Preview from './preview';
 
@@ -50,27 +56,78 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 
   const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
-  if (
-    process.env.NEXT_PUBLIC_IS_BUILDING === 'true' &&
-    'error' in serverEmailRenderingResult
-  ) {
+  if (isBuilding && 'error' in serverEmailRenderingResult) {
     throw new Error(serverEmailRenderingResult.error.message, {
       cause: serverEmailRenderingResult.error,
     });
   }
 
+  let spamCheckingResult: SpamCheckingResult | undefined = undefined;
+  let lintingRows: LintingRow[] | undefined = undefined;
+
+  if (isBuilding && !('error' in serverEmailRenderingResult)) {
+    const lintingSources = getLintingSources(
+      serverEmailRenderingResult.markup,
+      serverEmailRenderingResult.reactMarkup,
+      emailPath,
+      '',
+    );
+    lintingRows = [];
+    for await (const row of loadLintingRowsFrom(lintingSources)) {
+      lintingRows.push(row);
+    }
+    lintingRows.sort((a, b) => {
+      if (a.result.status === 'error' && b.result.status === 'warning') {
+        return -1;
+      }
+
+      if (a.result.status === 'warning' && b.result.status === 'error') {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    const response = await fetch('https://react.email/api/check-spam', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        html: serverEmailRenderingResult.markup,
+        plainText: serverEmailRenderingResult.plainText,
+      }),
+    });
+    const responseBody = (await response.json()) as
+      | { error: string }
+      | SpamCheckingResult;
+    if ('error' in responseBody) {
+      throw new Error(`Failed doing Spam Check. ${responseBody.error}`, {
+        cause: responseBody,
+      });
+    }
+
+    spamCheckingResult = responseBody;
+  }
+
   return (
-    // This suspense is so that this page doesn't throw warnings
-    // on the build of the preview server de-opting into
-    // client-side rendering on build
-    <Suspense fallback={<Home />}>
-      <Preview
-        emailPath={emailPath}
-        pathSeparator={path.sep}
-        serverRenderingResult={serverEmailRenderingResult}
-        slug={slug}
-      />
-    </Suspense>
+    <PreviewProvider
+      emailSlug={slug}
+      emailPath={emailPath}
+      serverRenderingResult={serverEmailRenderingResult}
+    >
+      <Shell currentEmailOpenSlug={slug}>
+        {/* This suspense is so that this page doesn't throw warnings */}
+        {/* on the build of the preview server de-opting into         */}
+        {/* client-side rendering on build                            */}
+        <Suspense fallback={<Home />}>
+          <Preview emailTitle={path.basename(emailPath)} />
+
+          <Toolbar
+            serverLintingRows={lintingRows}
+            serverSpamCheckingResult={spamCheckingResult}
+          />
+        </Suspense>
+      </Shell>
+    </PreviewProvider>
   );
 };