@depup/react-email 5.2.10-depup.0

package/src/commands/resend/setup.ts

@@ -0,0 +1,29 @@
+import logSymbols from 'log-symbols';
+import prompts from 'prompts';
+import { conf } from '../../utils/conf.js';
+import { styleText } from '../../utils/style-text.js';
+
+export async function resendSetup() {
+  const previousValue = conf.get('resendApiKey');
+  if (typeof previousValue === 'string' && previousValue.length > 0) {
+    console.info(
+      `You already have a Resend API Key configured (${styleText('grey', previousValue.slice(0, 11))}...), continuing will replace it.`,
+    );
+  }
+
+  const { apiKey } = await prompts({
+    type: 'password',
+    name: 'apiKey',
+    message: 'Enter your API Key (make sure it has "Full Access")',
+  });
+
+  if (apiKey?.trim().length > 0) {
+    conf.set('resendApiKey', apiKey);
+    console.info(
+      `${logSymbols.success} Resend integration successfully set up`,
+    );
+    console.info(
+      `You can always remove it with ${styleText('green', 'npx react-email@latest resend reset')}`,
+    );
+  }
+}

package/src/commands/start.ts

@@ -0,0 +1,38 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getPreviewServerLocation } from '../utils/get-preview-server-location.js';
+
+export const start = async () => {
+  try {
+    const previewServerLocation = await getPreviewServerLocation();
+
+    const usersProjectLocation = process.cwd();
+    const builtPreviewPath = path.resolve(
+      usersProjectLocation,
+      './.react-email',
+    );
+    if (!fs.existsSync(builtPreviewPath)) {
+      console.error(
+        "Could not find .react-email, maybe you haven't ran email build?",
+      );
+      process.exit(1);
+    }
+
+    const nextStart = spawn('npx', ['next', 'start', builtPreviewPath], {
+      cwd: previewServerLocation,
+      stdio: 'inherit',
+    });
+
+    process.on('SIGINT', () => {
+      nextStart.kill('SIGINT');
+    });
+
+    nextStart.on('exit', (code) => {
+      process.exit(code ?? 0);
+    });
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};

package/src/index.ts

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { program } from 'commander';
+import { build } from './commands/build.js';
+import { dev } from './commands/dev.js';
+import { exportTemplates } from './commands/export.js';
+import { resendReset } from './commands/resend/reset.js';
+import { resendSetup } from './commands/resend/setup.js';
+import { start } from './commands/start.js';
+import { packageJson } from './utils/packageJson.js';
+
+const requiredFlags = [
+  '--experimental-vm-modules',
+  '--disable-warning=ExperimentalWarning',
+];
+
+const hasRequiredFlags = requiredFlags.every((flag) =>
+  process.execArgv.includes(flag),
+);
+
+if (!hasRequiredFlags) {
+  const child = spawn(
+    process.execPath,
+    [
+      ...requiredFlags,
+      ...process.execArgv,
+      process.argv[1] ?? '',
+      ...process.argv.slice(2),
+    ],
+    { stdio: 'inherit' },
+  );
+
+  child.on('exit', (code) => {
+    process.exit(code ?? 0);
+  });
+} else {
+  const PACKAGE_NAME = 'react-email';
+
+  program
+    .name(PACKAGE_NAME)
+    .description('A live preview of your emails right in your browser')
+    .version(packageJson.version);
+
+  program
+    .command('dev')
+    .description('Starts the preview email development app')
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option('-p --port <port>', 'Port to run dev server on', '3000')
+    .action(dev);
+
+  program
+    .command('build')
+    .description('Copies the preview app for onto .react-email and builds it')
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option(
+      '-p --packageManager <name>',
+      'Package name to use on installation on `.react-email`',
+      'npm',
+    )
+    .action(build);
+
+  program
+    .command('start')
+    .description('Runs the built preview app that is inside of ".react-email"')
+    .action(start);
+
+  program
+    .command('export')
+    .description('Build the templates to the `out` directory')
+    .option('--outDir <path>', 'Output directory', 'out')
+    .option('-p, --pretty', 'Pretty print the output', false)
+    .option('-t, --plainText', 'Set output format as plain text', false)
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option(
+      '-s, --silent',
+      'To, or not to show a spinner with process information',
+      false,
+    )
+    .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
+      exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
+    );
+
+  const resend = program.command('resend');
+
+  resend
+    .command('setup')
+    .description(
+      'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
+    )
+    .action(resendSetup);
+
+  resend
+    .command('reset')
+    .description('Deletes your API Key from the React Email configuration')
+    .action(resendReset);
+
+  program.parse();
+}

package/src/utils/conf.ts

@@ -0,0 +1,9 @@
+import Conf from 'conf';
+
+// Just simple encryption. This isn't completely safe
+// because anyone can find this key here
+const encryptionKey = 'h2#x658}1#qY(@!:7,BD1J)q12$[tM25';
+
+export const conf = new Conf<{
+  resendApiKey?: string;
+}>({ projectName: 'react-email', encryptionKey });

package/src/utils/esbuild/escape-string-for-regex.ts

@@ -0,0 +1,3 @@
+export function escapeStringForRegex(string: string) {
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -0,0 +1,63 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
+import { escapeStringForRegex } from './escape-string-for-regex.js';
+
+/**
+ * Made to export the `render` function out of the user's email template
+ * so that issues like https://github.com/resend/react-email/issues/649 don't
+ * happen.
+ *
+ * This also exports the `createElement` from the user's React version as well
+ * to avoid mismatches.
+ *
+ * This avoids multiple versions of React being involved, i.e., the version
+ * in the CLI vs. the version the user has on their emails.
+ */
+export const renderingUtilitiesExporter = (emailTemplates: string[]) => ({
+  name: 'rendering-utilities-exporter',
+  setup: (b: PluginBuild) => {
+    b.onLoad(
+      {
+        filter: new RegExp(
+          emailTemplates
+            .map((emailPath) => escapeStringForRegex(emailPath))
+            .join('|'),
+        ),
+      },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs.readFile(pathToFile, 'utf8')};
+          export { render } from 'react-email-module-that-will-export-render'
+          export { createElement as reactEmailCreateReactElement } from 'react';
+        `,
+          loader: path.extname(pathToFile).slice(1) as Loader,
+        };
+      },
+    );
+
+    b.onResolve(
+      { filter: /^react-email-module-that-will-export-render$/ },
+      async (args) => {
+        const options: ResolveOptions = {
+          kind: 'import-statement',
+          importer: args.importer,
+          resolveDir: args.resolveDir,
+          namespace: args.namespace,
+        };
+        let result = await b.resolve('@react-email/render', options);
+        if (result.errors.length === 0) {
+          return result;
+        }
+
+        // If @react-email/render does not exist, resolve to @react-email/components
+        result = await b.resolve('@react-email/components', options);
+        if (result.errors.length > 0 && result.errors[0]) {
+          result.errors[0].text =
+            "Failed trying to import `render` from either `@react-email/render` or `@react-email/components` to be able to render your email template.\n Maybe you don't have either of them installed?";
+        }
+        return result;
+      },
+    );
+  },
+});

package/src/utils/get-emails-directory-metadata.spec.ts

@@ -0,0 +1,82 @@
+import path from 'node:path';
+import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
+
+test('getEmailsDirectoryMetadata on demo emails', async () => {
+  const emailsDirectoryPath = path.resolve(
+    __dirname,
+    '../../../../apps/demo/emails',
+  );
+  expect(await getEmailsDirectoryMetadata(emailsDirectoryPath)).toEqual({
+    absolutePath: emailsDirectoryPath,
+    directoryName: 'emails',
+    relativePath: '',
+    emailFilenames: [],
+    subDirectories: [
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'magic-links'),
+        directoryName: 'magic-links',
+        relativePath: 'magic-links',
+        emailFilenames: [
+          'aws-verify-email',
+          'linear-login-code',
+          'notion-magic-link',
+          'plaid-verify-identity',
+          'raycast-magic-link',
+          'slack-confirm',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'newsletters'),
+        directoryName: 'newsletters',
+        relativePath: 'newsletters',
+        emailFilenames: [
+          'codepen-challengers',
+          'google-play-policy-update',
+          'stack-overflow-tips',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'notifications'),
+        directoryName: 'notifications',
+        relativePath: 'notifications',
+        emailFilenames: [
+          'github-access-token',
+          'papermark-year-in-review',
+          'vercel-invite-user',
+          'yelp-recent-login',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'receipts'),
+        directoryName: 'receipts',
+        relativePath: 'receipts',
+        emailFilenames: ['apple-receipt', 'nike-receipt'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'reset-password'),
+        directoryName: 'reset-password',
+        relativePath: 'reset-password',
+        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'reviews'),
+        directoryName: 'reviews',
+        relativePath: 'reviews',
+        emailFilenames: ['airbnb-review', 'amazon-review'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: path.join(emailsDirectoryPath, 'welcome'),
+        directoryName: 'welcome',
+        relativePath: 'welcome',
+        emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
+        subDirectories: [],
+      },
+    ],
+  });
+});

package/src/utils/get-emails-directory-metadata.ts

@@ -0,0 +1,140 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const isFileAnEmail = async (fullPath: string): Promise<boolean> => {
+  let fileHandle: fs.promises.FileHandle;
+  try {
+    fileHandle = await fs.promises.open(fullPath, 'r');
+  } catch (exception) {
+    console.warn(exception);
+    return false;
+  }
+  const stat = await fileHandle.stat();
+
+  if (stat.isDirectory()) {
+    await fileHandle.close();
+    return false;
+  }
+
+  const { ext } = path.parse(fullPath);
+
+  if (!['.js', '.tsx', '.jsx'].includes(ext)) {
+    await fileHandle.close();
+    return false;
+  }
+
+  // check with a heuristic to see if the file has at least
+  // a default export (ES6) or module.exports (CommonJS) or named exports (MDX)
+  const fileContents = await fileHandle.readFile('utf8');
+
+  await fileHandle.close();
+
+  // Check for ES6 export default syntax
+  const hasES6DefaultExport = /\bexport\s+default\b/gm.test(fileContents);
+
+  // Check for CommonJS module.exports syntax
+  const hasCommonJSExport = /\bmodule\.exports\s*=/gm.test(fileContents);
+
+  // Check for named exports (used in MDX files) and ensure at least one is marked as default
+  const hasNamedExport = /\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(
+    fileContents,
+  );
+
+  return hasES6DefaultExport || hasCommonJSExport || hasNamedExport;
+};
+
+export interface EmailsDirectory {
+  absolutePath: string;
+  relativePath: string;
+  directoryName: string;
+  emailFilenames: string[];
+  subDirectories: EmailsDirectory[];
+}
+
+const mergeDirectoriesWithSubDirectories = (
+  emailsDirectoryMetadata: EmailsDirectory,
+): EmailsDirectory => {
+  let currentResultingMergedDirectory: EmailsDirectory =
+    emailsDirectoryMetadata;
+
+  while (
+    currentResultingMergedDirectory.emailFilenames.length === 0 &&
+    currentResultingMergedDirectory.subDirectories.length === 1
+  ) {
+    const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0]!;
+    currentResultingMergedDirectory = {
+      ...onlySubDirectory,
+      directoryName: path.join(
+        currentResultingMergedDirectory.directoryName,
+        onlySubDirectory.directoryName,
+      ),
+    };
+  }
+
+  return currentResultingMergedDirectory;
+};
+
+export const getEmailsDirectoryMetadata = async (
+  absolutePathToEmailsDirectory: string,
+  keepFileExtensions = false,
+  isSubDirectory = false,
+
+  baseDirectoryPath = absolutePathToEmailsDirectory,
+): Promise<EmailsDirectory | undefined> => {
+  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
+
+  const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
+    withFileTypes: true,
+  });
+
+  const isEmailPredicates = await Promise.all(
+    dirents.map((dirent) =>
+      isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
+    ),
+  );
+  const emailFilenames = dirents
+    .filter((_, i) => isEmailPredicates[i])
+    .map((dirent) =>
+      keepFileExtensions
+        ? dirent.name
+        : dirent.name.replace(path.extname(dirent.name), ''),
+    );
+
+  const subDirectories = await Promise.all(
+    dirents
+      .filter(
+        (dirent) =>
+          dirent.isDirectory() &&
+          !dirent.name.startsWith('_') &&
+          dirent.name !== 'static',
+      )
+      .map((dirent) => {
+        const direntAbsolutePath = path.join(
+          absolutePathToEmailsDirectory,
+          dirent.name,
+        );
+
+        return getEmailsDirectoryMetadata(
+          direntAbsolutePath,
+          keepFileExtensions,
+          true,
+          baseDirectoryPath,
+        ) as Promise<EmailsDirectory>;
+      }),
+  );
+
+  const emailsMetadata = {
+    absolutePath: absolutePathToEmailsDirectory,
+    relativePath: path.relative(
+      baseDirectoryPath,
+      absolutePathToEmailsDirectory,
+    ),
+    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
+    emailFilenames,
+    subDirectories,
+  } satisfies EmailsDirectory;
+
+  return isSubDirectory
+    ? mergeDirectoriesWithSubDirectories(emailsMetadata)
+    : emailsMetadata;
+};

package/src/utils/get-preview-server-location.ts

@@ -0,0 +1,50 @@
+import path from 'node:path';
+import url from 'node:url';
+import { createJiti } from 'jiti';
+import { addDevDependency } from 'nypm';
+import prompts from 'prompts';
+import { packageJson } from './packageJson.js';
+
+const ensurePreviewServerInstalled = async (
+  message: string,
+): Promise<never> => {
+  const response = await prompts({
+    type: 'confirm',
+    name: 'installPreviewServer',
+    message,
+    initial: true,
+  });
+  if (response.installPreviewServer) {
+    console.log('Installing "@react-email/preview-server"');
+    await addDevDependency(
+      `@react-email/preview-server@${packageJson.version}`,
+    );
+    process.exit(0);
+  } else {
+    process.exit(0);
+  }
+};
+
+export const getPreviewServerLocation = async () => {
+  const usersProject = createJiti(process.cwd());
+  let previewServerLocation!: string;
+  try {
+    previewServerLocation = path.dirname(
+      url.fileURLToPath(usersProject.esmResolve('@react-email/preview-server')),
+    );
+  } catch (_exception) {
+    await ensurePreviewServerInstalled(
+      'To run the preview server, the package "@react-email/preview-server" must be installed. Would you like to install it?',
+    );
+  }
+  const { version } = await usersProject.import<{
+    version: string;
+  }>('@react-email/preview-server');
+  if (version !== packageJson.version) {
+    await ensurePreviewServerInstalled(
+      `To run the preview server, the version of "@react-email/preview-server" must match the version of "react-email" (${packageJson.version}). Would you like to install it?`,
+    );
+  }
+
+  return previewServerLocation;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './preview/index.js';
+export * from './tree.js';

package/src/utils/packageJson.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error Typescript doesn't want to allow this, but it's fine since we're using tsup
+import packageJson from '../../package.json';
+
+export { packageJson };

package/src/utils/preview/get-env-variables-for-preview-app.ts

@@ -0,0 +1,20 @@
+import path from 'node:path';
+
+export const getEnvVariablesForPreviewApp = (
+  relativePathToEmailsDirectory: string,
+  previewServerLocation: string,
+  cwd: string,
+  resendApiKey?: string,
+) => {
+  return {
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH:
+      relativePathToEmailsDirectory,
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(
+      cwd,
+      relativePathToEmailsDirectory,
+    ),
+    REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
+    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: cwd,
+    REACT_EMAIL_INTERNAL_RESEND_API_KEY: resendApiKey,
+  } as const;
+};