react-email 1.9.0 → 1.9.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-email",
-    "version": "1.9.0",
+    "version": "1.9.2",
     "description": "A live preview of your emails right in your browser.",
     "bin": {
         "email": "./dist/source/index.js"
@@ -50,6 +50,7 @@
         "@types/normalize-path": "3.0.0",
         "@types/shelljs": "0.8.11",
         "prettier": "2.7.1",
-        "ts-node": "10.9.1"
+        "ts-node": "10.9.1",
+        "typescript": "5.0.4"
     }
 }

package/dist/source/commands/export.js

@@ -38,14 +38,15 @@ const normalize_path_1 = __importDefault(require("normalize-path"));
 const path_1 = __importDefault(require("path"));
 const shelljs_1 = __importDefault(require("shelljs"));
 const fs_2 = __importDefault(require("fs"));
+const close_ora_on_sigint_1 = require("../utils/close-ora-on-sigint");
 /*
   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.
  */
 const exportTemplates = async (outDir, srcDir, options) => {
-    var _a;
     const spinner = (0, ora_1.default)('Preparing files...\n').start();
+    (0, close_ora_on_sigint_1.closeOraOnSIGNIT)(spinner);
     const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(path_1.default.join(srcDir, '*.{tsx,jsx}')));
     esbuild_1.default.buildSync({
         bundle: true,
@@ -58,7 +59,7 @@ const exportTemplates = async (outDir, srcDir, options) => {
         absolute: true,
     });
     for (const template of allBuiltTemplates) {
-        const component = await (_a = template, Promise.resolve().then(() => __importStar(require(_a))));
+        const component = await Promise.resolve(`${template}`).then(s => __importStar(require(s)));
         const rendered = (0, render_1.render)(component.default({}), options);
         const htmlPath = template.replace('.js', options.plainText ? '.txt' : '.html');
         (0, fs_1.writeFileSync)(htmlPath, rendered);

package/dist/source/utils/close-ora-on-sigint.d.ts

@@ -0,0 +1,2 @@
+import { Ora } from 'ora';
+export declare const closeOraOnSIGNIT: (spinner: Ora) => void;

package/dist/source/utils/close-ora-on-sigint.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeOraOnSIGNIT = void 0;
+const closeOraOnSIGNIT = (spinner) => {
+    process.on('SIGINT', function () {
+        spinner.stop();
+    });
+};
+exports.closeOraOnSIGNIT = closeOraOnSIGNIT;

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.13',
     });
     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/generate-email-preview.d.ts

@@ -1 +1 @@
-export declare const generateEmailsPreview: (emailDir: string) => Promise<void>;
+export declare const generateEmailsPreview: (emailDir: string, type?: 'all' | 'static' | 'templates') => Promise<void>;

package/dist/source/utils/generate-email-preview.js

@@ -11,11 +11,18 @@ const ora_1 = __importDefault(require("ora"));
 const shelljs_1 = __importDefault(require("shelljs"));
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
-const generateEmailsPreview = async (emailDir) => {
+const glob_1 = __importDefault(require("glob"));
+const close_ora_on_sigint_1 = require("./close-ora-on-sigint");
+const generateEmailsPreview = async (emailDir, type = 'all') => {
     try {
         const spinner = (0, ora_1.default)('Generating emails preview').start();
-        await createEmailPreviews(emailDir);
-        await createStaticFiles(emailDir);
+        (0, close_ora_on_sigint_1.closeOraOnSIGNIT)(spinner);
+        if (type === 'all' || type === 'templates') {
+            await createEmailPreviews(emailDir);
+        }
+        if (type === 'all' || type === 'static') {
+            await createStaticFiles(emailDir);
+        }
         spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
             text: 'Emails preview generated',
@@ -31,9 +38,32 @@ const createEmailPreviews = async (emailDir) => {
     if (hasEmailsDirectory) {
         await fs_1.default.promises.rm(constants_1.PACKAGE_EMAILS_PATH, { recursive: true });
     }
-    const result = shelljs_1.default.cp('-r', emailDir, constants_1.PACKAGE_EMAILS_PATH);
-    if (result.code > 0) {
-        throw new Error(`Something went wrong while copying the file to ${constants_1.PACKAGE_EMAILS_PATH}, ${result.cat()}`);
+    const list = glob_1.default.sync(path_1.default.join(emailDir, '/*.{jsx,tsx}'), {
+        absolute: true,
+    });
+    /**
+     * instead of copying all files, which would break and js/ts imports,
+     * we create placeholder files which just contain the following code:
+     *
+     * import Mail from '../../path/to/emails/my-template.tsx`
+     * export default Mail
+     */
+    for (const absoluteSrcFilePath of list) {
+        const fileName = absoluteSrcFilePath.split('/').pop();
+        const targetFile = path_1.default.join(constants_1.PACKAGE_EMAILS_PATH, absoluteSrcFilePath.replace(emailDir, ''));
+        const importPath = path_1.default.relative(path_1.default.dirname(targetFile), path_1.default.dirname(absoluteSrcFilePath));
+        const importFile = path_1.default.join(importPath, fileName);
+        // if this import is changed, you also need to update `client/src/app/preview/[slug]/page.tsx`
+        const sourceCode = `import Mail from '${importFile}';export default Mail;`.replace(';', ';\n');
+        await fs_extra_1.default.ensureDir(path_1.default.dirname(targetFile));
+        if (fs_extra_1.default.existsSync(targetFile)) {
+            if (fs_extra_1.default.readFileSync(targetFile, 'utf8') === sourceCode) {
+                // file already exists, no need to trigger a rebuild.
+                // can otherwise trigger the next.js rebuild multiple times
+                continue;
+            }
+        }
+        await fs_extra_1.default.writeFile(targetFile, sourceCode);
     }
 };
 const createStaticFiles = async (emailDir) => {
@@ -42,7 +72,7 @@ const createStaticFiles = async (emailDir) => {
         await fs_1.default.promises.rm(constants_1.PACKAGE_PUBLIC_PATH, { recursive: true });
     }
     await fs_extra_1.default.ensureDir(path_1.default.join(constants_1.PACKAGE_PUBLIC_PATH, 'static'));
-    const result = shelljs_1.default.cp('-r', path_1.default.join('static'), path_1.default.join(constants_1.PACKAGE_PUBLIC_PATH));
+    const result = shelljs_1.default.cp('-r', path_1.default.join(emailDir, 'static'), path_1.default.join(constants_1.PACKAGE_PUBLIC_PATH));
     if (result.code > 0) {
         throw new Error(`Something went wrong while copying the file to ${path_1.default.join(emailDir, 'static')}, ${result.cat()}`);
     }

package/dist/source/utils/install-dependencies.js

@@ -9,8 +9,10 @@ const path_1 = __importDefault(require("path"));
 const constants_1 = require("./constants");
 const ora_1 = __importDefault(require("ora"));
 const log_symbols_1 = __importDefault(require("log-symbols"));
+const close_ora_on_sigint_1 = require("./close-ora-on-sigint");
 const installDependencies = async (packageManager) => {
     const spinner = (0, ora_1.default)('Installing dependencies...\n').start();
+    (0, close_ora_on_sigint_1.closeOraOnSIGNIT)(spinner);
     shelljs_1.default.cd(path_1.default.join(constants_1.REACT_EMAIL_ROOT));
     shelljs_1.default.exec(`${packageManager} install`);
     spinner.stopAndPersist({

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/dist/source/utils/watcher.js

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watcher = exports.createWatcherInstance = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
-const constants_1 = require("./constants");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const shelljs_1 = __importDefault(require("shelljs"));
+const constants_1 = require("./constants");
+const generate_email_preview_1 = require("./generate-email-preview");
 const createWatcherInstance = (watchDir) => chokidar_1.default.watch(watchDir, {
     ignoreInitial: true,
     cwd: watchDir.split(path_1.default.sep).slice(0, -1).join(path_1.default.sep),
@@ -37,9 +38,13 @@ const watcher = (watcherInstance, watchDir) => {
             }
             return;
         }
-        const result = shelljs_1.default.cp('-r', path_1.default.join(watchDir, ...file.slice(1)), path_1.default.join(constants_1.PACKAGE_EMAILS_PATH, ...file.slice(1, -1)));
-        if (result.code > 0) {
-            throw new Error(`Something went wrong while copying the file to ${constants_1.PACKAGE_EMAILS_PATH}, ${result.cat()}`);
+        try {
+            await (0, generate_email_preview_1.generateEmailsPreview)(watchDir, 'templates');
+        }
+        catch (e) {
+            throw new Error(`Something went wrong while copying the file to ${constants_1.PACKAGE_EMAILS_PATH}, ${
+            // @ts-expect-error
+            e?.message}`);
         }
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/source/index.js"
@@ -50,6 +50,7 @@
     "@types/normalize-path": "3.0.0",
     "@types/shelljs": "0.8.11",
     "prettier": "2.7.1",
-    "ts-node": "10.9.1"
+    "ts-node": "10.9.1",
+    "typescript": "5.0.4"
   }
 }

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,76 @@
+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';
+import { closeOraOnSIGNIT } from '../utils/close-ora-on-sigint';
+/*
+  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();
+  closeOraOnSIGNIT(spinner)
+
+  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/close-ora-on-sigint.ts

@@ -0,0 +1,7 @@
+import { Ora } from 'ora'
+
+export const closeOraOnSIGNIT = (spinner: Ora) => {
+  process.on('SIGINT', function () {
+    spinner.stop()
+  });
+}

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.13',
+  });
+  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,106 @@
+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';
+import glob from 'glob';
+import { closeOraOnSIGNIT } from './close-ora-on-sigint';
+
+export const generateEmailsPreview = async (
+  emailDir: string,
+  type: 'all' | 'static' | 'templates' = 'all',
+) => {
+  try {
+    const spinner = ora('Generating emails preview').start();
+    closeOraOnSIGNIT(spinner)
+
+    if (type === 'all' || type === 'templates') {
+      await createEmailPreviews(emailDir);
+    }
+    if (type === 'all' || type === 'static') {
+      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 list = glob.sync(path.join(emailDir, '/*.{jsx,tsx}'), {
+    absolute: true,
+  });
+
+  /**
+   * instead of copying all files, which would break and js/ts imports,
+   * we create placeholder files which just contain the following code:
+   *
+   * import Mail from '../../path/to/emails/my-template.tsx`
+   * export default Mail
+   */
+  for (const absoluteSrcFilePath of list) {
+    const fileName = absoluteSrcFilePath.split('/').pop()!;
+    const targetFile = path.join(
+      PACKAGE_EMAILS_PATH,
+      absoluteSrcFilePath.replace(emailDir, ''),
+    );
+    const importPath = path.relative(
+      path.dirname(targetFile),
+      path.dirname(absoluteSrcFilePath),
+    );
+
+    const importFile = path.join(importPath, fileName);
+
+    // if this import is changed, you also need to update `client/src/app/preview/[slug]/page.tsx`
+    const sourceCode =
+      `import Mail from '${importFile}';export default Mail;`.replace(
+        ';',
+        ';\n',
+      );
+    await fse.ensureDir(path.dirname(targetFile));
+    if (fse.existsSync(targetFile)) {
+      if (fse.readFileSync(targetFile, 'utf8') === sourceCode) {
+        // file already exists, no need to trigger a rebuild.
+        // can otherwise trigger the next.js rebuild multiple times
+        continue;
+      }
+    }
+    await fse.writeFile(targetFile, sourceCode);
+  }
+};
+
+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(emailDir, '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,20 @@
+import shell from 'shelljs';
+import path from 'path';
+import { REACT_EMAIL_ROOT } from './constants';
+import ora from 'ora';
+import logSymbols from 'log-symbols';
+import { closeOraOnSIGNIT } from './close-ora-on-sigint';
+
+export type PackageManager = 'yarn' | 'npm' | 'pnpm';
+
+export const installDependencies = async (packageManager: PackageManager) => {
+  const spinner = ora('Installing dependencies...\n').start();
+  closeOraOnSIGNIT(spinner)
+
+  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,64 @@
+import chokidar, { FSWatcher } from 'chokidar';
+import fs from 'fs';
+import path from 'path';
+import shell from 'shelljs';
+import {
+  EVENT_FILE_DELETED,
+  PACKAGE_EMAILS_PATH,
+  REACT_EMAIL_ROOT,
+} from './constants';
+import { generateEmailsPreview } from './generate-email-preview';
+
+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;
+    }
+
+    try {
+      await generateEmailsPreview(watchDir, 'templates');
+    } catch (e) {
+      throw new Error(
+        `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${
+          // @ts-expect-error
+          e?.message
+        }`,
+      );
+    }
+  });
+};