react-email 4.0.16 → 4.1.0-canary.10

package/src/commands/export.ts

@@ -0,0 +1,204 @@
+import fs, { unlinkSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import url from 'node:url';
+import type { Options } from '@react-email/components';
+import { type BuildFailure, build } from 'esbuild';
+import { glob } from 'glob';
+import logSymbols from 'log-symbols';
+import normalize from 'normalize-path';
+import ora, { type Ora } from 'ora';
+import type React from 'react';
+import { renderingUtilitiesExporter } from '../utils/esbuild/renderring-utilities-exporter.js';
+import {
+  type EmailsDirectory,
+  getEmailsDirectoryMetadata,
+} from '../utils/get-emails-directory-metadata.js';
+import { tree } from '../utils/index.js';
+import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping.js';
+
+const getEmailTemplatesFromDirectory = (emailDirectory: EmailsDirectory) => {
+  const templatePaths = [] as string[];
+  emailDirectory.emailFilenames.forEach((filename) =>
+    templatePaths.push(path.join(emailDirectory.absolutePath, filename)),
+  );
+  emailDirectory.subDirectories.forEach((directory) => {
+    templatePaths.push(...getEmailTemplatesFromDirectory(directory));
+  });
+
+  return templatePaths;
+};
+
+type ExportTemplatesOptions = Options & {
+  silent?: boolean;
+  pretty?: boolean;
+};
+
+const filename = url.fileURLToPath(import.meta.url);
+
+const require = createRequire(filename);
+
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+export const exportTemplates = async (
+  pathToWhereEmailMarkupShouldBeDumped: string,
+  emailsDirectoryPath: string,
+  options: ExportTemplatesOptions,
+) => {
+  /* Delete the out directory if it already exists */
+  if (fs.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
+    fs.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+  }
+
+  let spinner: Ora | undefined;
+  if (!options.silent) {
+    spinner = ora('Preparing files...\n').start();
+    registerSpinnerAutostopping(spinner);
+  }
+
+  const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
+    path.resolve(process.cwd(), emailsDirectoryPath),
+    true,
+  );
+
+  if (typeof emailsDirectoryMetadata === 'undefined') {
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols.error,
+        text: `Could not find the directory at ${emailsDirectoryPath}`,
+      });
+    }
+    return;
+  }
+
+  const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
+
+  try {
+    await build({
+      bundle: true,
+      entryPoints: allTemplates,
+      format: 'cjs',
+      jsx: 'transform',
+      loader: { '.js': 'jsx' },
+      logLevel: 'silent',
+      outExtension: { '.js': '.cjs' },
+      outdir: pathToWhereEmailMarkupShouldBeDumped,
+      platform: 'node',
+      plugins: [renderingUtilitiesExporter(allTemplates)],
+      write: true,
+    });
+  } catch (exception) {
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols.error,
+        text: 'Failed to build emails',
+      });
+    }
+
+    const buildFailure = exception as BuildFailure;
+    console.error(`\n${buildFailure.message}`);
+
+    process.exit(1);
+  }
+
+  if (spinner) {
+    spinner.succeed();
+  }
+
+  const allBuiltTemplates = glob.sync(
+    normalize(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`),
+    {
+      absolute: true,
+    },
+  );
+
+  for await (const template of allBuiltTemplates) {
+    try {
+      if (spinner) {
+        spinner.text = `rendering ${template.split('/').pop()}`;
+        spinner.render();
+      }
+      delete require.cache[template];
+      const emailModule = require(template) as {
+        default: React.FC;
+        render: (
+          element: React.ReactElement,
+          options: Record<string, unknown>,
+        ) => Promise<string>;
+        reactEmailCreateReactElement: typeof React.createElement;
+      };
+      const rendered = await emailModule.render(
+        emailModule.reactEmailCreateReactElement(emailModule.default, {}),
+        options,
+      );
+      const htmlPath = template.replace(
+        '.cjs',
+        options.plainText ? '.txt' : '.html',
+      );
+      writeFileSync(htmlPath, rendered);
+      unlinkSync(template);
+    } catch (exception) {
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+          text: `failed when rendering ${template.split('/').pop()}`,
+        });
+      }
+      console.error(exception);
+      process.exit(1);
+    }
+  }
+  if (spinner) {
+    spinner.succeed('Rendered all files');
+    spinner.text = 'Copying static files';
+    spinner.render();
+  }
+
+  // ex: emails/static
+  const staticDirectoryPath = path.join(emailsDirectoryPath, 'static');
+
+  if (fs.existsSync(staticDirectoryPath)) {
+    const pathToDumpStaticFilesInto = path.join(
+      pathToWhereEmailMarkupShouldBeDumped,
+      'static',
+    );
+    // cp('-r', ...) will copy *inside* of the static directory if it exists
+    // causing a duplication of static files, so we need to delete ir first
+    if (fs.existsSync(pathToDumpStaticFilesInto))
+      await fs.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
+
+    try {
+      await fs.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
+        recursive: true,
+      });
+    } catch (exception) {
+      console.error(exception);
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+          text: 'Failed to copy static files',
+        });
+      }
+      console.error(
+        `Something went wrong while copying the file to ${pathToWhereEmailMarkupShouldBeDumped}/static, ${exception}`,
+      );
+      process.exit(1);
+    }
+  }
+
+  if (spinner && !options.silent) {
+    spinner.succeed();
+
+    const fileTree = await tree(pathToWhereEmailMarkupShouldBeDumped, 4);
+
+    console.log(fileTree);
+
+    spinner.stopAndPersist({
+      symbol: logSymbols.success,
+      text: 'Successfully exported emails',
+    });
+  }
+};

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,55 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import { build } from './commands/build.js';
+import { dev } from './commands/dev.js';
+import { exportTemplates } from './commands/export.js';
+import { start } from './commands/start.js';
+import { packageJson } from './utils/packageJson.js';
+
+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 }),
+  );
+
+program.parse();

package/src/utils/__snapshots__/tree.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tree(__dirname, 2) 1`] = `
+"utils
+├── __snapshots__
+│   └── tree.spec.ts.snap
+├── esbuild
+│   ├── escape-string-for-regex.ts
+│   └── renderring-utilities-exporter.ts
+├── preview
+│   ├── hot-reloading
+│   ├── get-env-variables-for-preview-app.ts
+│   ├── index.ts
+│   ├── serve-static-file.ts
+│   └── start-dev-server.ts
+├── types
+│   ├── hot-reload-change.ts
+│   └── hot-reload-event.ts
+├── get-emails-directory-metadata.spec.ts
+├── get-emails-directory-metadata.ts
+├── get-preview-server-location.ts
+├── index.ts
+├── packageJson.ts
+├── register-spinner-autostopping.ts
+├── tree.spec.ts
+└── tree.ts"
+`;

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

@@ -1,7 +1,7 @@
 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';
+import { escapeStringForRegex } from './escape-string-for-regex.js';
 
 /**
  * Made to export the `render` function out of the user's email template

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

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
+import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata.js';
 
 test('getEmailsDirectoryMetadata on demo emails', async () => {
   const emailsDirectoryPath = path.resolve(

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

@@ -0,0 +1,51 @@
+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.parse(usersProject.esmResolve('@react-email/preview-server'), true)
+        .path!,
+    );
+  } 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

@@ -1,6 +1,2 @@
-export * from './cn';
-export * from './copy-text-to-clipboard';
-export * from './language-map';
-export * from './sanitize';
-export * from './types/as';
-export * from './unreachable';
+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,14 @@
+import path from 'node:path';
+import { isDev } from './start-dev-server.js';
+
+export const getEnvVariablesForPreviewApp = (
+  relativePathToEmailsDirectory: string,
+  cwd: string,
+) => {
+  return {
+    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',
+  } as const;
+};