react-email 1.9.0 → 1.9.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-email",
-    "version": "1.9.0",
+    "version": "1.9.1",
     "description": "A live preview of your emails right in your browser.",
     "bin": {
         "email": "./dist/source/index.js"

package/dist/source/utils/download-client.js

@@ -14,7 +14,7 @@ const downloadClient = async () => {
     const downloadRes = await octokit.repos.downloadTarballArchive({
         owner: 'resendlabs',
         repo: 'react-email',
-        ref: 'v0.0.11',
+        ref: 'v0.0.12',
     });
     fs_1.default.mkdirSync('.react-email-temp');
     const TAR_PATH = path_1.default.join('.react-email-temp', 'react-email.tar.gz');

package/dist/source/utils/start-server-command.js

@@ -5,19 +5,47 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildProdServer = exports.startProdServer = exports.startDevServer = void 0;
 const shelljs_1 = __importDefault(require("shelljs"));
+let processesToKill = [];
+function execAsync(command) {
+    const process = shelljs_1.default.exec(command, { async: true });
+    processesToKill.push(process);
+    process.on('close', () => {
+        processesToKill = processesToKill.filter((p) => p !== process);
+    });
+}
 const startDevServer = (packageManager, port) => {
-    shelljs_1.default.exec(`${packageManager} run dev -- -p ${port}`, { async: true });
+    execAsync(`${packageManager} run dev -- -p ${port}`);
 };
 exports.startDevServer = startDevServer;
 const startProdServer = (packageManager, port) => {
-    shelljs_1.default.exec(`${packageManager} run start -- -p ${port}`, { async: true });
+    execAsync(`${packageManager} run start -- -p ${port}`);
 };
 exports.startProdServer = startProdServer;
 const buildProdServer = (packageManager) => {
-    const process = shelljs_1.default.exec(`${packageManager} run build`, { async: true });
+    execAsync(`${packageManager} run build`);
     // if build fails for whatever reason, make sure the shell actually exits
     process.on('close', (code) => {
         shelljs_1.default.exit(code ?? undefined);
     });
 };
 exports.buildProdServer = buildProdServer;
+// based on https://stackoverflow.com/a/14032965
+function exitHandler() {
+    if (processesToKill.length > 0) {
+        console.log('shutting down %d subprocesses', processesToKill.length);
+    }
+    processesToKill.forEach((p) => {
+        if (p.connected) {
+            p.kill();
+        }
+    });
+}
+// do something when app is closing
+process.on('exit', exitHandler);
+// catches ctrl+c event
+process.on('SIGINT', exitHandler);
+//  catches "kill pid" (for example: nodemon restart)
+process.on('SIGUSR1', exitHandler);
+process.on('SIGUSR2', exitHandler);
+// catches uncaught exceptions
+process.on('uncaughtException', exitHandler);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/source/index.js"

package/source/commands/dev.ts

@@ -0,0 +1,29 @@
+import { downloadClient, REACT_EMAIL_ROOT } from '../utils';
+import fs from 'fs';
+import shell from 'shelljs';
+import { setupServer } from '../utils/run-server';
+
+interface Args {
+  dir: string;
+  port: string;
+}
+
+export const dev = async ({ dir, port }: Args) => {
+  try {
+    if (!fs.existsSync(dir)) {
+      throw new Error(`Missing ${dir} folder`);
+    }
+
+    if (fs.existsSync(REACT_EMAIL_ROOT)) {
+      await setupServer('dev', dir, port);
+      return;
+    }
+
+    await downloadClient();
+
+    await setupServer('dev', dir, port);
+  } catch (error) {
+    console.log(error);
+    shell.exit(1);
+  }
+};

package/source/commands/export.ts

@@ -0,0 +1,73 @@
+import { glob } from 'glob';
+import esbuild from 'esbuild';
+import tree from 'tree-node-cli';
+import ora from 'ora';
+import logSymbols from 'log-symbols';
+import { render, Options } from '@react-email/render';
+import { unlinkSync, writeFileSync } from 'fs';
+import normalize from 'normalize-path';
+import path from 'path';
+import shell from 'shelljs';
+import fs from 'fs';
+/*
+  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 (
+  outDir: string,
+  srcDir: string,
+  options: Options,
+) => {
+  const spinner = ora('Preparing files...\n').start();
+  const allTemplates = glob.sync(normalize(path.join(srcDir, '*.{tsx,jsx}')));
+
+  esbuild.buildSync({
+    bundle: true,
+    entryPoints: allTemplates,
+    platform: 'node',
+    write: true,
+    outdir: outDir,
+  });
+
+  const allBuiltTemplates = glob.sync(normalize(`${outDir}/*.js`), {
+    absolute: true,
+  });
+
+  for (const template of allBuiltTemplates) {
+    const component = await import(template);
+    const rendered = render(component.default({}), options);
+    const htmlPath = template.replace(
+      '.js',
+      options.plainText ? '.txt' : '.html',
+    );
+    writeFileSync(htmlPath, rendered);
+    unlinkSync(template);
+  }
+
+  const staticDir = path.join(srcDir, 'static');
+  const hasStaticDirectory = fs.existsSync(staticDir);
+
+  if (hasStaticDirectory) {
+    const result = shell.cp('-r', staticDir, path.join(outDir, 'static'));
+    if (result.code > 0) {
+      throw new Error(
+        `Something went wrong while copying the file to ${outDir}/static, ${result.cat()}`,
+      );
+    }
+  }
+
+  const fileTree = tree(outDir, {
+    allFiles: true,
+    maxDepth: 4,
+  });
+
+  console.log(fileTree);
+
+  spinner.stopAndPersist({
+    symbol: logSymbols.success,
+    text: 'Successfully exported emails',
+  });
+
+  process.exit();
+};

package/source/commands/preview.ts

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import shell from 'shelljs';
+import { downloadClient, REACT_EMAIL_ROOT } from '../utils';
+import { setupServer } from '../utils/run-server';
+
+interface BuildPreviewArgs {
+  dir: string;
+}
+
+export const buildPreview = async ({ dir }: BuildPreviewArgs) => {
+  try {
+    if (fs.existsSync(REACT_EMAIL_ROOT)) {
+      await setupServer('build', dir, '');
+      return;
+    }
+
+    await downloadClient();
+
+    await setupServer('build', dir, '');
+  } catch (error) {
+    console.log(error);
+    shell.exit(1);
+  }
+};
+
+interface StartPreviewArgs {
+  port: string;
+}
+
+export const startPreview = async ({ port }: StartPreviewArgs) => {
+  try {
+    if (fs.existsSync(REACT_EMAIL_ROOT)) {
+      await setupServer('start', '', port);
+      return;
+    }
+
+    await downloadClient();
+
+    await setupServer('start', '', port);
+  } catch (error) {
+    console.log(error);
+    shell.exit(1);
+  }
+};

package/source/index.ts

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+import { program } from '@commander-js/extra-typings';
+import { dev } from './commands/dev';
+import { buildPreview, startPreview } from './commands/preview';
+import { exportTemplates } from './commands/export';
+import { PACKAGE_NAME } from './utils/constants';
+import packageJson from '../package.json';
+
+program
+  .name(PACKAGE_NAME)
+  .description('A live preview of your emails right in your browser')
+  .version(packageJson.version);
+
+program
+  .command('dev')
+  .description('Starts the application in development mode')
+  .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('Builds a production preview app')
+  .option('-d, --dir <path>', 'Directory with your email templates', './emails')
+  .action(buildPreview);
+
+program
+  .command('start')
+  .description('Starts the production build of the preview app')
+  .option('-p --port <port>', 'Port to run production server on', '3000')
+  .action(startPreview);
+
+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')
+  .action(({ outDir, pretty, plainText, dir: srcDir }) =>
+    exportTemplates(outDir, srcDir, { pretty, plainText }),
+  );
+
+program.parse();

package/source/utils/constants.ts

@@ -0,0 +1,25 @@
+import path from 'path';
+
+// Package variables
+export const DEFAULT_EMAILS_DIRECTORY = 'emails';
+export const PACKAGE_NAME = 'react-email';
+
+// Default paths
+export const CURRENT_PATH = process.cwd();
+
+// User paths
+export const USER_PACKAGE_JSON = path.join(CURRENT_PATH, 'package.json');
+export const USER_STATIC_FILES = path.join(CURRENT_PATH, 'emails', 'static');
+
+// React Email paths
+export const REACT_EMAIL_ROOT = path.join(CURRENT_PATH, '.react-email');
+
+// Events
+export const EVENT_FILE_DELETED = 'unlink';
+
+export const PACKAGE_EMAILS_PATH = path.join(
+  REACT_EMAIL_ROOT,
+  DEFAULT_EMAILS_DIRECTORY,
+);
+
+export const PACKAGE_PUBLIC_PATH = path.join(REACT_EMAIL_ROOT, 'public');

package/source/utils/convert-to-absolute-path.ts

@@ -0,0 +1,4 @@
+import path from 'path';
+
+export const convertToAbsolutePath = (dir: string): string =>
+  path.isAbsolute(dir) ? dir : path.join(process.cwd(), dir);

package/source/utils/download-client.ts

@@ -0,0 +1,28 @@
+import { Octokit } from '@octokit/rest';
+import fse from 'fs-extra';
+import fs from 'fs';
+import shell from 'shelljs';
+import path from 'path';
+
+export const downloadClient = async () => {
+  const octokit = new Octokit();
+  const downloadRes = await octokit.repos.downloadTarballArchive({
+    owner: 'resendlabs',
+    repo: 'react-email',
+    ref: 'v0.0.12',
+  });
+  fs.mkdirSync('.react-email-temp');
+  const TAR_PATH = path.join('.react-email-temp', 'react-email.tar.gz');
+  fs.writeFileSync(TAR_PATH, Buffer.from(downloadRes.data as any));
+  shell.exec(
+    `tar -xzvf .react-email-temp/react-email.tar.gz -C .react-email-temp --strip-components 1`,
+    { silent: true },
+  );
+
+  fse.moveSync(
+    path.join('.react-email-temp', 'client'),
+    path.join('.react-email'),
+  );
+
+  fse.removeSync('.react-email-temp');
+};

package/source/utils/generate-email-preview.ts

@@ -0,0 +1,63 @@
+import logSymbols from 'log-symbols';
+import { PACKAGE_EMAILS_PATH, PACKAGE_PUBLIC_PATH } from './constants';
+import fs from 'fs';
+import ora from 'ora';
+import shell from 'shelljs';
+import path from 'path';
+import fse from 'fs-extra';
+
+export const generateEmailsPreview = async (emailDir: string) => {
+  try {
+    const spinner = ora('Generating emails preview').start();
+
+    await createEmailPreviews(emailDir);
+    await createStaticFiles(emailDir);
+
+    spinner.stopAndPersist({
+      symbol: logSymbols.success,
+      text: 'Emails preview generated',
+    });
+  } catch (error) {
+    console.log({ error });
+  }
+};
+
+const createEmailPreviews = async (emailDir: string) => {
+  const hasEmailsDirectory = fs.existsSync(PACKAGE_EMAILS_PATH);
+
+  if (hasEmailsDirectory) {
+    await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
+  }
+
+  const result = shell.cp('-r', emailDir, PACKAGE_EMAILS_PATH);
+
+  if (result.code > 0) {
+    throw new Error(
+      `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${result.cat()}`,
+    );
+  }
+};
+
+const createStaticFiles = async (emailDir: string) => {
+  const hasPublicDirectory = fs.existsSync(PACKAGE_PUBLIC_PATH);
+
+  if (hasPublicDirectory) {
+    await fs.promises.rm(PACKAGE_PUBLIC_PATH, { recursive: true });
+  }
+
+  await fse.ensureDir(path.join(PACKAGE_PUBLIC_PATH, 'static'));
+
+  const result = shell.cp(
+    '-r',
+    path.join('static'),
+    path.join(PACKAGE_PUBLIC_PATH),
+  );
+  if (result.code > 0) {
+    throw new Error(
+      `Something went wrong while copying the file to ${path.join(
+        emailDir,
+        'static',
+      )}, ${result.cat()}`,
+    );
+  }
+};

package/source/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './constants';
+export * from './convert-to-absolute-path';
+export * from './download-client';
+export * from './generate-email-preview';
+export * from './install-dependencies';
+export * from './start-server-command';
+export * from './sync-package';
+export * from './watcher';

package/source/utils/install-dependencies.ts

@@ -0,0 +1,18 @@
+import shell from 'shelljs';
+import path from 'path';
+import { REACT_EMAIL_ROOT } from './constants';
+import ora from 'ora';
+import logSymbols from 'log-symbols';
+
+export type PackageManager = 'yarn' | 'npm' | 'pnpm';
+
+export const installDependencies = async (packageManager: PackageManager) => {
+  const spinner = ora('Installing dependencies...\n').start();
+
+  shell.cd(path.join(REACT_EMAIL_ROOT));
+  shell.exec(`${packageManager} install`);
+  spinner.stopAndPersist({
+    symbol: logSymbols.success,
+    text: 'Dependencies installed',
+  });
+};

package/source/utils/run-server.ts

@@ -0,0 +1,58 @@
+import { createWatcherInstance, watcher } from './watcher';
+import { detect as detectPackageManager } from 'detect-package-manager';
+import { findRoot } from '@manypkg/find-root';
+import {
+  CURRENT_PATH,
+  convertToAbsolutePath,
+  startDevServer,
+  installDependencies,
+  PackageManager,
+  syncPkg,
+  generateEmailsPreview,
+  buildProdServer,
+  startProdServer,
+  REACT_EMAIL_ROOT,
+} from '.';
+import path from 'path';
+import shell from 'shelljs';
+
+/**
+ * Utility function to run init/sync for the server in dev, build or start mode.
+ *
+ * @param type dev | build | start
+ * @param dir Directory in which the emails are located, only for dev and build, unused for start.
+ * @param port The port on which the server will run, only for dev and start, unused for build.
+ */
+export const setupServer = async (
+  type: 'dev' | 'build' | 'start',
+  dir: string,
+  port: string,
+) => {
+  const cwd = await findRoot(CURRENT_PATH).catch(() => ({
+    rootDir: CURRENT_PATH,
+  }));
+  const emailDir = convertToAbsolutePath(dir);
+  const packageManager: PackageManager = await detectPackageManager({
+    cwd: cwd.rootDir,
+  }).catch(() => 'npm');
+
+  // when starting, we dont need to worry about these because it should've already happened during the build stage.
+  if (type !== 'start') {
+    await generateEmailsPreview(emailDir);
+    await syncPkg();
+    await installDependencies(packageManager);
+  }
+
+  if (type === 'dev') {
+    const watcherInstance = createWatcherInstance(emailDir);
+
+    startDevServer(packageManager, port);
+    watcher(watcherInstance, emailDir);
+  } else if (type === 'build') {
+    buildProdServer(packageManager);
+  } else {
+    shell.cd(path.join(REACT_EMAIL_ROOT));
+
+    startProdServer(packageManager, port);
+  }
+};

package/source/utils/start-server-command.ts

@@ -0,0 +1,54 @@
+import { ChildProcess } from 'child_process';
+import shell from 'shelljs';
+
+let processesToKill: ChildProcess[] = [];
+
+function execAsync(command: string) {
+  const process = shell.exec(command, { async: true });
+  processesToKill.push(process);
+  process.on('close', () => {
+    processesToKill = processesToKill.filter((p) => p !== process);
+  });
+}
+
+export const startDevServer = (packageManager: string, port: string) => {
+  execAsync(`${packageManager} run dev -- -p ${port}`);
+};
+
+export const startProdServer = (packageManager: string, port: string) => {
+  execAsync(`${packageManager} run start -- -p ${port}`);
+};
+
+export const buildProdServer = (packageManager: string) => {
+  execAsync(`${packageManager} run build`);
+
+  // if build fails for whatever reason, make sure the shell actually exits
+  process.on('close', (code) => {
+    shell.exit(code ?? undefined);
+  });
+};
+
+// based on https://stackoverflow.com/a/14032965
+function exitHandler() {
+  if (processesToKill.length > 0) {
+    console.log('shutting down %d subprocesses', processesToKill.length);
+  }
+  processesToKill.forEach((p) => {
+    if (p.connected) {
+      p.kill();
+    }
+  });
+}
+
+// do something when app is closing
+process.on('exit', exitHandler);
+
+// catches ctrl+c event
+process.on('SIGINT', exitHandler);
+
+//  catches "kill pid" (for example: nodemon restart)
+process.on('SIGUSR1', exitHandler);
+process.on('SIGUSR2', exitHandler);
+
+// catches uncaught exceptions
+process.on('uncaughtException', exitHandler);

package/source/utils/sync-package.ts

@@ -0,0 +1,20 @@
+import readPackage from 'read-pkg';
+import { REACT_EMAIL_ROOT } from './constants';
+import fs from 'fs';
+import path from 'path';
+
+export const syncPkg = async () => {
+  const clientPkg = await readPackage({ cwd: REACT_EMAIL_ROOT });
+  const userPkg = await readPackage();
+  const pkg = {
+    ...clientPkg,
+    dependencies: {
+      ...clientPkg.dependencies,
+      ...userPkg.dependencies,
+    },
+  };
+  await fs.promises.writeFile(
+    path.join(REACT_EMAIL_ROOT, 'package.json'),
+    JSON.stringify(pkg),
+  );
+};

package/source/utils/watcher.ts

@@ -0,0 +1,63 @@
+import chokidar, { FSWatcher } from 'chokidar';
+import {
+  EVENT_FILE_DELETED,
+  PACKAGE_EMAILS_PATH,
+  REACT_EMAIL_ROOT,
+} from './constants';
+import fs from 'fs';
+import path from 'path';
+import shell from 'shelljs';
+
+export const createWatcherInstance = (watchDir: string) =>
+  chokidar.watch(watchDir, {
+    ignoreInitial: true,
+    cwd: watchDir.split(path.sep).slice(0, -1).join(path.sep),
+    ignored: /(^|[\/\\])\../,
+  });
+
+export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
+  watcherInstance.on('all', async (event, filename) => {
+    const file = filename.split(path.sep);
+    if (file[1] === undefined) {
+      return;
+    }
+
+    if (event === EVENT_FILE_DELETED) {
+      if (file[1] === 'static' && file[2]) {
+        await fs.promises.rm(
+          path.join(REACT_EMAIL_ROOT, 'public', 'static', file[2]),
+        );
+        return;
+      }
+
+      await fs.promises.rm(path.join(REACT_EMAIL_ROOT, filename));
+      return;
+    }
+
+    if (file[1] === 'static' && file[2]) {
+      const srcPath = path.join(watchDir, 'static', file[2]);
+      const result = shell.cp(
+        '-r',
+        srcPath,
+        path.join(REACT_EMAIL_ROOT, 'public', 'static'),
+      );
+      if (result.code > 0) {
+        throw new Error(
+          `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${result.cat()}`,
+        );
+      }
+      return;
+    }
+
+    const result = shell.cp(
+      '-r',
+      path.join(watchDir, ...file.slice(1)),
+      path.join(PACKAGE_EMAILS_PATH, ...file.slice(1, -1)),
+    );
+    if (result.code > 0) {
+      throw new Error(
+        `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${result.cat()}`,
+      );
+    }
+  });
+};