@react-email/preview-server 1.0.0-canary.0

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

@@ -0,0 +1,113 @@
+'use server';
+
+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 LinkCheck = { passed: boolean } & (
+  | {
+      type: 'fetch_attempt';
+      metadata: {
+        fetchStatusCode: number | undefined;
+      };
+    }
+  | {
+      type: 'syntax';
+    }
+  | {
+      type: 'security';
+    }
+);
+
+export interface LinkCheckingResult {
+  status: 'success' | 'warning' | 'error';
+  link: string;
+  codeLocation: CodeLocation;
+  checks: LinkCheck[];
+}
+
+export const checkLinks = async (code: string) => {
+  const ast = parse(code);
+
+  const readableStream = new ReadableStream<LinkCheckingResult>({
+    async start(controller) {
+      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,
+          codeLocation: getCodeLocationFromAstElement(anchor, code),
+          status: 'success',
+          checks: [],
+        };
+
+        try {
+          const url = new URL(link);
+          result.checks.push({
+            passed: true,
+            type: 'syntax',
+          });
+
+          if (link.startsWith('http://')) {
+            result.checks.push({
+              passed: false,
+              type: 'security',
+            });
+            result.status = 'warning';
+          } else {
+            result.checks.push({
+              passed: true,
+              type: 'security',
+            });
+          }
+
+          let res: IncomingMessage | undefined = undefined;
+          try {
+            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({
+              type: 'fetch_attempt',
+              passed: false,
+              metadata: {
+                fetchStatusCode: undefined,
+              },
+            });
+            result.status = 'error';
+          }
+        } catch (exception) {
+          result.checks.push({
+            passed: false,
+            type: 'syntax',
+          });
+          result.status = 'error';
+        }
+
+        controller.enqueue(result);
+      }
+      controller.close();
+    },
+  });
+
+  return readableStream;
+};

package/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,
+  };
+};

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

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

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

@@ -0,0 +1,32 @@
+'use server';
+import fs from 'node:fs';
+import path from 'node:path';
+import { cache } from 'react';
+import { emailsDirectoryAbsolutePath } from '../app/env';
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const getEmailPathFromSlug = cache(async (slug: string) => {
+  if (['.tsx', '.jsx', '.ts', '.js'].includes(path.extname(slug)))
+    return path.join(emailsDirectoryAbsolutePath, slug);
+
+  const pathWithoutExtension = path.join(emailsDirectoryAbsolutePath, slug);
+
+  if (fs.existsSync(`${pathWithoutExtension}.tsx`)) {
+    return `${pathWithoutExtension}.tsx`;
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
+    return `${pathWithoutExtension}.jsx`;
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.ts`)) {
+    return `${pathWithoutExtension}.ts`;
+  }
+  if (fs.existsSync(`${pathWithoutExtension}.js`)) {
+    return `${pathWithoutExtension}.js`;
+  }
+
+  throw new Error(
+    `Could not find your email file based on the slug (${slug}) by guessing the file extension. Tried .tsx, .jsx, .ts and .js.
+
+    This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
+  );
+});

package/src/actions/get-emails-directory-metadata-action.ts

@@ -0,0 +1,19 @@
+'use server';
+
+import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
+import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
+
+export const getEmailsDirectoryMetadataAction = async (
+  absolutePathToEmailsDirectory: string,
+  keepFileExtensions = false,
+  isSubDirectory = false,
+
+  baseDirectoryPath = absolutePathToEmailsDirectory,
+): Promise<EmailsDirectory | undefined> => {
+  return getEmailsDirectoryMetadata(
+    absolutePathToEmailsDirectory,
+    keepFileExtensions,
+    isSubDirectory,
+    baseDirectoryPath,
+  );
+};

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

@@ -0,0 +1,121 @@
+'use server';
+import fs from 'node:fs';
+import path from 'node:path';
+import chalk from 'chalk';
+import logSymbols from 'log-symbols';
+import ora, { type Ora } from 'ora';
+import { isBuilding, isPreviewDevelopment } 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';
+import type { ErrorObject } from '../utils/types/error-object';
+
+export interface RenderedEmailMetadata {
+  markup: string;
+  plainText: string;
+  reactMarkup: string;
+}
+
+export type EmailRenderingResult =
+  | RenderedEmailMetadata
+  | {
+      error: ErrorObject;
+    };
+
+const cache = new Map<string, EmailRenderingResult>();
+
+export const renderEmailByPath = async (
+  emailPath: string,
+  invalidatingCache = false,
+): Promise<EmailRenderingResult> => {
+  if (invalidatingCache) cache.delete(emailPath);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (cache.has(emailPath)) return cache.get(emailPath)!;
+
+  const timeBeforeEmailRendered = performance.now();
+
+  const emailFilename = path.basename(emailPath);
+  let spinner: Ora | undefined;
+  if (!isBuilding && !isPreviewDevelopment) {
+    spinner = ora({
+      text: `Rendering email template ${emailFilename}\n`,
+      prefixText: ' ',
+    }).start();
+    registerSpinnerAutostopping(spinner);
+  }
+
+  const componentResult = await getEmailComponent(emailPath);
+
+  if ('error' in componentResult) {
+    spinner?.stopAndPersist({
+      symbol: logSymbols.error,
+      text: `Failed while rendering ${emailFilename}`,
+    });
+    return { error: componentResult.error };
+  }
+
+  const {
+    emailComponent: Email,
+    createElement,
+    render,
+    sourceMapToOriginalFile,
+  } = componentResult;
+
+  const previewProps = Email.PreviewProps || {};
+  const EmailComponent = Email as React.FC;
+  try {
+    const markup = await render(createElement(EmailComponent, previewProps), {
+      pretty: true,
+    });
+    const plainText = await render(
+      createElement(EmailComponent, previewProps),
+      {
+        plainText: true,
+      },
+    );
+
+    const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
+
+    const millisecondsToRendered = performance.now() - timeBeforeEmailRendered;
+    let timeForConsole = `${millisecondsToRendered.toFixed(0)}ms`;
+    if (millisecondsToRendered <= 450) {
+      timeForConsole = chalk.green(timeForConsole);
+    } else if (millisecondsToRendered <= 1000) {
+      timeForConsole = chalk.yellow(timeForConsole);
+    } else {
+      timeForConsole = chalk.red(timeForConsole);
+    }
+    spinner?.stopAndPersist({
+      symbol: logSymbols.success,
+      text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
+    });
+
+    const renderingResult = {
+      // This ensures that no null byte character ends up in the rendered
+      // markup making users suspect of any issues. These null byte characters
+      // only seem to happen with React 18, as it has no similar incident with React 19.
+      markup: markup.replaceAll('\0', ''),
+      plainText,
+      reactMarkup,
+    };
+
+    cache.set(emailPath, renderingResult);
+
+    return renderingResult;
+  } catch (exception) {
+    const error = exception as Error;
+
+    spinner?.stopAndPersist({
+      symbol: logSymbols.error,
+      text: `Failed while rendering ${emailFilename}`,
+    });
+
+    return {
+      error: improveErrorWithSourceMap(
+        error,
+        emailPath,
+        sourceMapToOriginalFile,
+      ),
+    };
+  }
+};