react-email 4.1.0-canary.6 → 4.1.0-canary.8

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

@@ -1,113 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,32 +0,0 @@
-'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

@@ -1,19 +0,0 @@
-'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

@@ -1,121 +0,0 @@
-'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,
-      ),
-    };
-  }
-};