react-email 1.7.4 → 1.7.6

package/dist/package.json

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

package/dist/source/_preview/root.js

@@ -12,7 +12,7 @@ exports.root = [
     },
     {
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.9",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
     },
     {
         title: 'postcss.config.js',

package/dist/source/commands/dev.d.ts

@@ -1 +1,5 @@
-export declare const dev: () => Promise<void>;
+interface Args {
+    dir: string;
+}
+export declare const dev: ({ dir }: Args) => Promise<void>;
+export {};

package/dist/source/commands/dev.js

@@ -18,7 +18,9 @@ const ora_1 = __importDefault(require("ora"));
 const read_pkg_1 = __importDefault(require("read-pkg"));
 const shelljs_1 = __importDefault(require("shelljs"));
 const styles_1 = require("../_preview/styles");
-const dev = async () => {
+const dev = async ({ dir }) => {
+    const emailDir = convertToAbsolutePath(dir);
+    const watcherInstance = (0, utils_1.createWatcherInstance)(emailDir);
     try {
         const hasReactEmailDirectory = (0, utils_1.checkDirectoryExist)(utils_1.REACT_EMAIL_ROOT);
         let packageManager;
@@ -31,10 +33,10 @@ const dev = async () => {
         if (hasReactEmailDirectory) {
             const isUpToDate = await (0, utils_1.checkPackageIsUpToDate)();
             if (isUpToDate) {
-                await Promise.all([generateEmailsPreview(), syncPkg()]);
+                await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
                 await installDependencies(packageManager);
                 shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
-                (0, utils_1.watcher)();
+                (0, utils_1.watcher)(watcherInstance, emailDir);
                 return;
             }
             await fs_1.default.promises.rm(utils_1.REACT_EMAIL_ROOT, { recursive: true });
@@ -42,17 +44,18 @@ const dev = async () => {
         await createBasicStructure();
         await createAppDirectories();
         await createAppFiles();
-        await Promise.all([generateEmailsPreview(), syncPkg()]);
+        await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
         await installDependencies(packageManager);
         shelljs_1.default.exec(`${packageManager} run dev`, { async: true });
-        (0, utils_1.watcher)();
+        (0, utils_1.watcher)(watcherInstance, emailDir);
     }
     catch (error) {
-        await utils_1.watcherInstance.close();
+        await watcherInstance.close();
         shelljs_1.default.exit(1);
     }
 };
 exports.dev = dev;
+const convertToAbsolutePath = (dir) => path_1.default.isAbsolute(dir) ? dir : path_1.default.join(process.cwd(), dir);
 const createBasicStructure = async () => {
     try {
         // Create `.react-email` directory
@@ -111,12 +114,12 @@ const createAppFiles = async () => {
         throw new Error('Error creating app files');
     }
 };
-const generateEmailsPreview = async () => {
+const generateEmailsPreview = async (emailDir) => {
     try {
         const spinner = (0, ora_1.default)('Generating emails preview').start();
-        await createEmailPreviews();
-        await createStatisFiles();
-        await createComponents();
+        await createEmailPreviews(emailDir);
+        await createStaticFiles(emailDir);
+        await createComponents(emailDir);
         spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
             text: 'Emails preview generated',
@@ -126,10 +129,10 @@ const generateEmailsPreview = async () => {
         console.log({ error });
     }
 };
-const createEmailPreviews = async () => {
-    const hasEmailsDirectory = (0, utils_1.checkDirectoryExist)(utils_1.CLIENT_EMAILS_PATH);
+const createEmailPreviews = async (emailDir) => {
+    const hasEmailsDirectory = (0, utils_1.checkDirectoryExist)(emailDir);
     const isEmailsDirectoryEmpty = hasEmailsDirectory
-        ? await (0, utils_1.checkEmptyDirectory)(utils_1.CLIENT_EMAILS_PATH)
+        ? await (0, utils_1.checkEmptyDirectory)(emailDir)
         : true;
     if (isEmailsDirectoryEmpty) {
     }
@@ -137,30 +140,32 @@ const createEmailPreviews = async () => {
     if (hasPackageEmailsDirectory) {
         await fs_1.default.promises.rm(utils_1.PACKAGE_EMAILS_PATH, { recursive: true });
     }
-    await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, utils_1.PACKAGE_EMAILS_PATH);
+    await (0, cpy_1.default)(path_1.default.join(emailDir, '*{.tsx,.jsx}'), utils_1.PACKAGE_EMAILS_PATH);
 };
-const createStatisFiles = async () => {
+const createStaticFiles = async (emailDir) => {
     const hasPackageStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.REACT_EMAIL_ROOT}/public/static`);
-    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    const staticDir = path_1.default.join(emailDir, 'static');
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(staticDir);
     if (hasPackageStaticDirectory) {
         await fs_1.default.promises.rm(`${utils_1.REACT_EMAIL_ROOT}/public/static`, {
             recursive: true,
         });
     }
     if (hasStaticDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${utils_1.REACT_EMAIL_ROOT}/public/static`);
+        await (0, cpy_1.default)(staticDir, `${utils_1.REACT_EMAIL_ROOT}/public/static`);
     }
 };
-const createComponents = async () => {
+const createComponents = async (emailDir) => {
     const hasPackageComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.PACKAGE_EMAILS_PATH}/components`);
-    const hasComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/components`);
+    const componentDir = path_1.default.join(emailDir, 'components');
+    const hasComponentsDirectory = (0, utils_1.checkDirectoryExist)(componentDir);
     if (hasPackageComponentsDirectory) {
         await fs_1.default.promises.rm(`${utils_1.PACKAGE_EMAILS_PATH}/components`, {
             recursive: true,
         });
     }
     if (hasComponentsDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/components`, `${utils_1.PACKAGE_EMAILS_PATH}/components`);
+        await (0, cpy_1.default)(componentDir, `${utils_1.PACKAGE_EMAILS_PATH}/components`);
     }
 };
 const syncPkg = async () => {

package/dist/source/commands/export.d.ts

@@ -1,2 +1,2 @@
 import { Options } from '@react-email/render';
-export declare const exportTemplates: (outDir: string, options: Options) => Promise<never>;
+export declare const exportTemplates: (outDir: string, srcDir: string, options: Options) => Promise<never>;

package/dist/source/commands/export.js

@@ -37,14 +37,15 @@ const fs_1 = require("fs");
 const cpy_1 = __importDefault(require("cpy"));
 const normalize_path_1 = __importDefault(require("normalize-path"));
 const utils_1 = require("../utils");
+const path_1 = __importDefault(require("path"));
 /*
   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, options) => {
+const exportTemplates = async (outDir, srcDir, options) => {
     const spinner = (0, ora_1.default)('Preparing files...\n').start();
-    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(path_1.default.join(srcDir, '*.{tsx,jsx}')));
     esbuild_1.default.buildSync({
         bundle: true,
         entryPoints: allTemplates,
@@ -62,9 +63,10 @@ const exportTemplates = async (outDir, options) => {
         (0, fs_1.writeFileSync)(htmlPath, rendered);
         (0, fs_1.unlinkSync)(template);
     }
-    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    const staticDir = path_1.default.join(srcDir, 'static');
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(staticDir);
     if (hasStaticDirectory) {
-        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+        await (0, cpy_1.default)(staticDir, `${outDir}/static`);
     }
     const fileTree = (0, tree_node_cli_1.default)(outDir, {
         allFiles: true,

package/dist/source/index.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const extra_typings_1 = require("@commander-js/extra-typings");
-const constants_1 = require("./utils/constants");
 const dev_1 = require("./commands/dev");
 const export_1 = require("./commands/export");
+const constants_1 = require("./utils/constants");
 const package_json_1 = __importDefault(require("../package.json"));
 extra_typings_1.program
     .name(constants_1.PACKAGE_NAME)
@@ -16,12 +16,14 @@ extra_typings_1.program
 extra_typings_1.program
     .command('dev')
     .description('Starts the application in development mode')
-    .action(dev_1.dev);
+    .option('-d, --dir <path>', 'Directory with your email templates', './emails')
+    .action((args) => (0, dev_1.dev)(args));
 extra_typings_1.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)
-    .action(({ outDir, pretty, plainText }) => (0, export_1.exportTemplates)(outDir, { pretty, plainText }));
+    .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 }) => (0, export_1.exportTemplates)(outDir, srcDir, { pretty, plainText }));
 extra_typings_1.program.parse();

package/dist/source/utils/watcher.d.ts

@@ -1,3 +1,3 @@
-import chokidar from 'chokidar';
-export declare const watcherInstance: chokidar.FSWatcher;
-export declare const watcher: () => chokidar.FSWatcher;
+import chokidar, { FSWatcher } from 'chokidar';
+export declare const createWatcherInstance: (watchDir: string) => chokidar.FSWatcher;
+export declare const watcher: (watcherInstance: FSWatcher, watchDir: string) => void;

package/dist/source/utils/watcher.js

@@ -3,33 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.watcher = exports.watcherInstance = void 0;
+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 cpy_1 = __importDefault(require("cpy"));
-exports.watcherInstance = chokidar_1.default.watch(constants_1.CLIENT_EMAILS_PATH, {
+const createWatcherInstance = (watchDir) => chokidar_1.default.watch(watchDir, {
     ignoreInitial: true,
     cwd: constants_1.CURRENT_PATH,
     ignored: /(^|[\/\\])\../,
 });
-const watcher = () => exports.watcherInstance.on('all', async (event, filename) => {
-    if (event === constants_1.EVENT_FILE_DELETED) {
+exports.createWatcherInstance = createWatcherInstance;
+const watcher = (watcherInstance, watchDir) => {
+    watcherInstance.on('all', async (event, filename) => {
         const file = filename.split(path_1.default.sep);
-        if (file[1] === 'static' && file[2]) {
-            await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+        if (file[1] === undefined) {
+            return;
+        }
+        if (event === constants_1.EVENT_FILE_DELETED) {
+            if (file[1] === 'static' && file[2]) {
+                await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+                return;
+            }
+            await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
             return;
         }
-        await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
-    }
-    else {
-        const file = filename.split(path_1.default.sep);
         if (file[1] === 'static' && file[2]) {
-            await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/static/${file[2]}`, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
+            const srcPath = path_1.default.join(watchDir, 'static', file[2]);
+            await (0, cpy_1.default)(srcPath, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
             return;
         }
-        await (0, cpy_1.default)(path_1.default.join(constants_1.CURRENT_PATH, filename), path_1.default.join(constants_1.REACT_EMAIL_ROOT, file.slice(0, -1).join(path_1.default.sep)));
-    }
-});
+        await (0, cpy_1.default)(path_1.default.join(watchDir, ...file.slice(1)), path_1.default.join(constants_1.PACKAGE_EMAILS_PATH, ...file.slice(1, -1)));
+    });
+};
 exports.watcher = watcher;

package/package.json

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

package/preview/emails/test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Html } from '@react-email/html';
+import { Button } from '@react-email/button';
+import { Text } from '@react-email/text';
+import { Hr } from '@react-email/hr';
+
+export default function Email() {
+  return (
+    <Html lang="en">
+      <Text>Lorem ipsum</Text>
+      <Hr />
+      <Button href="https://example.com">Click me</Button>
+    </Html>
+  );
+};

package/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-preview",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "The React Email preview application",
   "license": "MIT",
   "scripts": {
@@ -12,7 +12,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=16.0.0"
   },
   "dependencies": {
     "@next/font": "13.0.4",

package/source/_preview/root.ts

@@ -12,7 +12,7 @@ export const root = [
   {
     title: 'package.json',
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.9",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=18.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+      '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
   },
   {
     title: 'postcss.config.js',

package/source/commands/dev.ts

@@ -2,8 +2,8 @@ import {
   checkDirectoryExist,
   checkEmptyDirectory,
   checkPackageIsUpToDate,
-  CLIENT_EMAILS_PATH,
   createDirectory,
+  createWatcherInstance,
   CURRENT_PATH,
   PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
@@ -11,7 +11,6 @@ import {
   getPreviewPkg,
   watcher,
   PUBLIC_PATH,
-  watcherInstance,
 } from '../utils';
 import path from 'path';
 import fs from 'fs';
@@ -27,7 +26,13 @@ import readPackage from 'read-pkg';
 import shell from 'shelljs';
 import { styles } from '../_preview/styles';
 
-export const dev = async () => {
+interface Args {
+  dir: string;
+}
+
+export const dev = async ({ dir }: Args) => {
+  const emailDir = convertToAbsolutePath(dir);
+  const watcherInstance = createWatcherInstance(emailDir);
   try {
     const hasReactEmailDirectory = checkDirectoryExist(REACT_EMAIL_ROOT);
     let packageManager: PackageManager;
@@ -41,10 +46,10 @@ export const dev = async () => {
       const isUpToDate = await checkPackageIsUpToDate();
 
       if (isUpToDate) {
-        await Promise.all([generateEmailsPreview(), syncPkg()]);
+        await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
         await installDependencies(packageManager);
         shell.exec(`${packageManager} run dev`, { async: true });
-        watcher();
+        watcher(watcherInstance, emailDir);
         return;
       }
 
@@ -54,16 +59,19 @@ export const dev = async () => {
     await createBasicStructure();
     await createAppDirectories();
     await createAppFiles();
-    await Promise.all([generateEmailsPreview(), syncPkg()]);
+    await Promise.all([generateEmailsPreview(emailDir), syncPkg()]);
     await installDependencies(packageManager);
     shell.exec(`${packageManager} run dev`, { async: true });
-    watcher();
+    watcher(watcherInstance, emailDir);
   } catch (error) {
     await watcherInstance.close();
     shell.exit(1);
   }
 };
 
+const convertToAbsolutePath = (dir: string): string =>
+  path.isAbsolute(dir) ? dir : path.join(process.cwd(), dir);
+
 const createBasicStructure = async () => {
   try {
     // Create `.react-email` directory
@@ -129,13 +137,13 @@ const createAppFiles = async () => {
   }
 };
 
-const generateEmailsPreview = async () => {
+const generateEmailsPreview = async (emailDir: string) => {
   try {
     const spinner = ora('Generating emails preview').start();
 
-    await createEmailPreviews();
-    await createStatisFiles();
-    await createComponents();
+    await createEmailPreviews(emailDir);
+    await createStaticFiles(emailDir);
+    await createComponents(emailDir);
 
     spinner.stopAndPersist({
       symbol: logSymbols.success,
@@ -146,11 +154,11 @@ const generateEmailsPreview = async () => {
   }
 };
 
-const createEmailPreviews = async () => {
-  const hasEmailsDirectory = checkDirectoryExist(CLIENT_EMAILS_PATH);
+const createEmailPreviews = async (emailDir: string) => {
+  const hasEmailsDirectory = checkDirectoryExist(emailDir);
 
   const isEmailsDirectoryEmpty = hasEmailsDirectory
-    ? await checkEmptyDirectory(CLIENT_EMAILS_PATH)
+    ? await checkEmptyDirectory(emailDir)
     : true;
 
   if (isEmailsDirectoryEmpty) {
@@ -162,15 +170,16 @@ const createEmailPreviews = async () => {
     await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
   }
 
-  await copy(`${CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, PACKAGE_EMAILS_PATH);
+  await copy(path.join(emailDir, '*{.tsx,.jsx}'), PACKAGE_EMAILS_PATH);
 };
 
-const createStatisFiles = async () => {
+const createStaticFiles = async (emailDir: string) => {
   const hasPackageStaticDirectory = checkDirectoryExist(
     `${REACT_EMAIL_ROOT}/public/static`,
   );
+  const staticDir = path.join(emailDir, 'static')
   const hasStaticDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/static`,
+    staticDir,
   );
 
   if (hasPackageStaticDirectory) {
@@ -181,19 +190,19 @@ const createStatisFiles = async () => {
 
   if (hasStaticDirectory) {
     await copy(
-      `${CLIENT_EMAILS_PATH}/static`,
+      staticDir,
       `${REACT_EMAIL_ROOT}/public/static`,
     );
   }
 };
 
-const createComponents = async () => {
+const createComponents = async (emailDir: string) => {
   const hasPackageComponentsDirectory = checkDirectoryExist(
     `${PACKAGE_EMAILS_PATH}/components`,
   );
-
+  const componentDir = path.join(emailDir, 'components')
   const hasComponentsDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/components`,
+    componentDir,
   );
 
   if (hasPackageComponentsDirectory) {
@@ -204,7 +213,7 @@ const createComponents = async () => {
 
   if (hasComponentsDirectory) {
     await copy(
-      `${CLIENT_EMAILS_PATH}/components`,
+      componentDir,
       `${PACKAGE_EMAILS_PATH}/components`,
     );
   }

package/source/commands/export.ts

@@ -7,17 +7,17 @@ import { render, Options } from '@react-email/render';
 import { unlinkSync, writeFileSync } from 'fs';
 import copy from 'cpy';
 import normalize from 'normalize-path';
-import { checkDirectoryExist, CLIENT_EMAILS_PATH } from '../utils';
-
+import { checkDirectoryExist } from '../utils';
+import path from 'path';
 /*
   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, options: Options) => {
+export const exportTemplates = async (outDir: string, srcDir: string, options: Options) => {
   const spinner = ora('Preparing files...\n').start();
   const allTemplates = glob.sync(
-    normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`),
+    normalize(path.join(srcDir, '*.{tsx,jsx}')),
   );
 
   esbuild.buildSync({
@@ -43,12 +43,13 @@ export const exportTemplates = async (outDir: string, options: Options) => {
     unlinkSync(template);
   }
 
+  const staticDir = path.join(srcDir, 'static')
   const hasStaticDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/static`,
+    staticDir
   );
 
   if (hasStaticDirectory) {
-    await copy(`${CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+    await copy(staticDir, `${outDir}/static`);
   }
 
   const fileTree = tree(outDir, {

package/source/index.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import { program } from '@commander-js/extra-typings';
-import { PACKAGE_NAME } from './utils/constants';
 import { dev } from './commands/dev';
 import { exportTemplates } from './commands/export';
+import { PACKAGE_NAME } from './utils/constants';
 import packageJson from '../package.json';
 
 program
@@ -13,16 +13,18 @@ program
 program
   .command('dev')
   .description('Starts the application in development mode')
-  .action(dev);
+  .option('-d, --dir <path>', 'Directory with your email templates', './emails')
+  .action((args) => dev(args));
 
 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)
-  .action(({ outDir, pretty, plainText }) =>
-    exportTemplates(outDir, { pretty, plainText }),
+  .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/watcher.ts

@@ -1,25 +1,29 @@
-import chokidar from 'chokidar';
+import chokidar, { FSWatcher } from 'chokidar';
 import {
-  CLIENT_EMAILS_PATH,
   CURRENT_PATH,
   EVENT_FILE_DELETED,
+  PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
 } from './constants';
 import fs from 'fs';
 import path from 'path';
 import copy from 'cpy';
 
-export const watcherInstance = chokidar.watch(CLIENT_EMAILS_PATH, {
-  ignoreInitial: true,
-  cwd: CURRENT_PATH,
-  ignored: /(^|[\/\\])\../,
-});
+export const createWatcherInstance = (watchDir: string) =>
+  chokidar.watch(watchDir, {
+    ignoreInitial: true,
+    cwd: CURRENT_PATH,
+    ignored: /(^|[\/\\])\../,
+  });
 
-export const watcher = () =>
+export const watcher = (watcherInstance: FSWatcher, watchDir: string) => {
   watcherInstance.on('all', async (event, filename) => {
-    if (event === EVENT_FILE_DELETED) {
-      const file = filename.split(path.sep);
+    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]),
@@ -28,20 +32,17 @@ export const watcher = () =>
       }
 
       await fs.promises.rm(path.join(REACT_EMAIL_ROOT, filename));
-    } else {
-      const file = filename.split(path.sep);
-
-      if (file[1] === 'static' && file[2]) {
-        await copy(
-          `${CLIENT_EMAILS_PATH}/static/${file[2]}`,
-          `${REACT_EMAIL_ROOT}/public/static`,
-        );
-        return;
-      }
+      return;
+    }
 
-      await copy(
-        path.join(CURRENT_PATH, filename),
-        path.join(REACT_EMAIL_ROOT, file.slice(0, -1).join(path.sep)),
-      );
+    if (file[1] === 'static' && file[2]) {
+      const srcPath = path.join(watchDir, 'static', file[2]);
+      await copy(srcPath, `${REACT_EMAIL_ROOT}/public/static`);
+      return;
     }
+    await copy(
+      path.join(watchDir, ...file.slice(1)),
+      path.join(PACKAGE_EMAILS_PATH, ...file.slice(1, -1)),
+    );
   });
+};