react-email 1.9.1 → 1.9.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-email",
-    "version": "1.9.1",
+    "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.12',
+        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/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.1",
+  "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/export.ts

@@ -9,6 +9,7 @@ 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
@@ -20,6 +21,8 @@ export const exportTemplates = async (
   options: Options,
 ) => {
   const spinner = ora('Preparing files...\n').start();
+  closeOraOnSIGNIT(spinner)
+
   const allTemplates = glob.sync(normalize(path.join(srcDir, '*.{tsx,jsx}')));
 
   esbuild.buildSync({

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/download-client.ts

@@ -9,7 +9,7 @@ export const downloadClient = async () => {
   const downloadRes = await octokit.repos.downloadTarballArchive({
     owner: 'resendlabs',
     repo: 'react-email',
-    ref: 'v0.0.12',
+    ref: 'v0.0.13',
   });
   fs.mkdirSync('.react-email-temp');
   const TAR_PATH = path.join('.react-email-temp', 'react-email.tar.gz');

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

@@ -5,13 +5,23 @@ 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) => {
+export const generateEmailsPreview = async (
+  emailDir: string,
+  type: 'all' | 'static' | 'templates' = 'all',
+) => {
   try {
     const spinner = ora('Generating emails preview').start();
+    closeOraOnSIGNIT(spinner)
 
-    await createEmailPreviews(emailDir);
-    await createStaticFiles(emailDir);
+    if (type === 'all' || type === 'templates') {
+      await createEmailPreviews(emailDir);
+    }
+    if (type === 'all' || type === 'static') {
+      await createStaticFiles(emailDir);
+    }
 
     spinner.stopAndPersist({
       symbol: logSymbols.success,
@@ -29,12 +39,45 @@ const createEmailPreviews = async (emailDir: string) => {
     await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
   }
 
-  const result = shell.cp('-r', emailDir, PACKAGE_EMAILS_PATH);
+  const list = glob.sync(path.join(emailDir, '/*.{jsx,tsx}'), {
+    absolute: true,
+  });
 
-  if (result.code > 0) {
-    throw new Error(
-      `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${result.cat()}`,
+  /**
+   * 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);
   }
 };
 
@@ -49,7 +92,7 @@ const createStaticFiles = async (emailDir: string) => {
 
   const result = shell.cp(
     '-r',
-    path.join('static'),
+    path.join(emailDir, 'static'),
     path.join(PACKAGE_PUBLIC_PATH),
   );
   if (result.code > 0) {

package/source/utils/install-dependencies.ts

@@ -3,11 +3,13 @@ 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`);

package/source/utils/watcher.ts

@@ -1,12 +1,13 @@
 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 fs from 'fs';
-import path from 'path';
-import shell from 'shelljs';
+import { generateEmailsPreview } from './generate-email-preview';
 
 export const createWatcherInstance = (watchDir: string) =>
   chokidar.watch(watchDir, {
@@ -49,14 +50,14 @@ export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
       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) {
+    try {
+      await generateEmailsPreview(watchDir, 'templates');
+    } catch (e) {
       throw new Error(
-        `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${result.cat()}`,
+        `Something went wrong while copying the file to ${PACKAGE_EMAILS_PATH}, ${
+          // @ts-expect-error
+          e?.message
+        }`,
       );
     }
   });