react-email 3.0.6 → 4.0.0-alpha.0

package/dist/cli/index.js

@@ -340,7 +340,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "3.0.6",
+    version: "4.0.0-alpha.0",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./dist/cli/index.js"
@@ -350,8 +350,7 @@ var package_default = {
         dev: "tsup-node --watch",
         test: "vitest run",
         "test:watch": "vitest",
-        clean: "rm -rf dist",
-        lint: "eslint . && tsc"
+        clean: "rm -rf dist"
     },
     license: "MIT",
     repository: {
@@ -367,8 +366,8 @@ var package_default = {
         node: ">=18.0.0"
     },
     dependencies: {
-        "@babel/core": "7.24.5",
         "@babel/parser": "7.24.5",
+        "@babel/traverse": "7.25.6",
         chalk: "4.1.2",
         chokidar: "4.0.3",
         commander: "11.1.0",
@@ -382,16 +381,22 @@ var package_default = {
         ora: "5.4.1",
         "socket.io": "4.8.0"
     },
+    overrides: {
+        react: "^19",
+        "react-dom": "^19"
+    },
     devDependencies: {
         "@radix-ui/colors": "1.0.1",
         "@radix-ui/react-collapsible": "1.1.0",
         "@radix-ui/react-popover": "1.1.1",
         "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-tabs": "1.1.1",
         "@radix-ui/react-toggle-group": "1.1.0",
         "@radix-ui/react-tooltip": "1.1.2",
         "@react-email/render": "workspace:*",
         "@swc/core": "1.4.15",
         "@types/babel__core": "7.20.5",
+        "@types/babel__traverse": "*",
         "@types/fs-extra": "11.0.1",
         "@types/mime-types": "2.1.4",
         "@types/node": "22.10.2",
@@ -402,11 +407,11 @@ var package_default = {
         "@vercel/style-guide": "5.1.0",
         autoprefixer: "10.4.20",
         clsx: "2.1.0",
-        eslint: "8.50.0",
-        "eslint-config-prettier": "9.0.0",
-        "eslint-config-turbo": "2.1.0",
         "framer-motion": "12.0.0-alpha.2",
+        "lottie-react": "^2.4.0",
+        "node-html-parser": "6.1.13",
         postcss: "8.4.40",
+        "prettier-plugin-tailwindcss": "0.6.6",
         "prism-react-renderer": "2.1.0",
         react: "^19",
         "react-dom": "^19",
@@ -423,12 +428,121 @@ var package_default = {
         vitest: "1.1.3"
     }
 };
-// src/cli/commands/dev.ts
-var import_node_fs4 = __toESM(require("fs"));
+// src/cli/commands/build.ts
+var import_node_child_process = require("child_process");
+var import_node_fs5 = __toESM(require("fs"));
+var import_node_path8 = __toESM(require("path"));
+var import_log_symbols3 = __toESM(require("log-symbols"));
+var import_ora2 = __toESM(require("ora"));
+// src/utils/get-emails-directory-metadata.ts
+var import_node_fs = __toESM(require("fs"));
+var import_node_path = __toESM(require("path"));
+var isFileAnEmail = function(fullPath) {
+    var stat = import_node_fs.default.statSync(fullPath);
+    if (stat.isDirectory()) return false;
+    var ext = import_node_path.default.parse(fullPath).ext;
+    if (![
+        ".js",
+        ".tsx",
+        ".jsx"
+    ].includes(ext)) return false;
+    if (!import_node_fs.default.existsSync(fullPath)) {
+        return false;
+    }
+    var fileContents = import_node_fs.default.readFileSync(fullPath, "utf8");
+    return /\bexport\s+default\b/gm.test(fileContents);
+};
+var mergeDirectoriesWithSubDirectories = function(emailsDirectoryMetadata) {
+    var currentResultingMergedDirectory = emailsDirectoryMetadata;
+    while(currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1){
+        var onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
+        currentResultingMergedDirectory = _object_spread_props(_object_spread({}, onlySubDirectory), {
+            directoryName: import_node_path.default.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
+        });
+    }
+    return currentResultingMergedDirectory;
+};
+var getEmailsDirectoryMetadata = function() {
+    var _ref = _async_to_generator(function(absolutePathToEmailsDirectory) {
+        var keepFileExtensions, isSubDirectory, baseDirectoryPath, dirents, emailFilenames, subDirectories, emailsMetadata;
+        var _arguments = arguments;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    keepFileExtensions = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : false, isSubDirectory = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : false, baseDirectoryPath = _arguments.length > 3 && _arguments[3] !== void 0 ? _arguments[3] : absolutePathToEmailsDirectory;
+                    if (!import_node_fs.default.existsSync(absolutePathToEmailsDirectory)) return [
+                        2
+                    ];
+                    return [
+                        4,
+                        import_node_fs.default.promises.readdir(absolutePathToEmailsDirectory, {
+                            withFileTypes: true
+                        })
+                    ];
+                case 1:
+                    dirents = _state.sent();
+                    emailFilenames = dirents.filter(function(dirent) {
+                        return isFileAnEmail(import_node_path.default.join(absolutePathToEmailsDirectory, dirent.name));
+                    }).map(function(dirent) {
+                        return keepFileExtensions ? dirent.name : dirent.name.replace(import_node_path.default.extname(dirent.name), "");
+                    });
+                    return [
+                        4,
+                        Promise.all(dirents.filter(function(dirent) {
+                            return dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static";
+                        }).map(function(dirent) {
+                            var direntAbsolutePath = import_node_path.default.join(absolutePathToEmailsDirectory, dirent.name);
+                            return getEmailsDirectoryMetadata(direntAbsolutePath, keepFileExtensions, true, baseDirectoryPath);
+                        }))
+                    ];
+                case 2:
+                    subDirectories = _state.sent();
+                    emailsMetadata = {
+                        absolutePath: absolutePathToEmailsDirectory,
+                        relativePath: import_node_path.default.relative(baseDirectoryPath, absolutePathToEmailsDirectory),
+                        directoryName: absolutePathToEmailsDirectory.split(import_node_path.default.sep).pop(),
+                        emailFilenames: emailFilenames,
+                        subDirectories: subDirectories
+                    };
+                    return [
+                        2,
+                        isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata
+                    ];
+            }
+        });
+    });
+    return function getEmailsDirectoryMetadata(absolutePathToEmailsDirectory) {
+        return _ref.apply(this, arguments);
+    };
+}();
+// src/utils/register-spinner-autostopping.ts
+var import_log_symbols = __toESM(require("log-symbols"));
+var spinners = /* @__PURE__ */ new Set();
+process.on("SIGINT", function() {
+    spinners.forEach(function(spinner) {
+        if (spinner.isSpinning) {
+            spinner.stop();
+        }
+    });
+});
+process.on("exit", function(code) {
+    if (code !== 0) {
+        spinners.forEach(function(spinner) {
+            if (spinner.isSpinning) {
+                spinner.stopAndPersist({
+                    symbol: import_log_symbols.default.error
+                });
+            }
+        });
+    }
+});
+var registerSpinnerAutostopping = function(spinner) {
+    spinners.add(spinner);
+};
 // src/cli/utils/tree.ts
-var import_node_fs = require("fs");
+var import_node_fs2 = require("fs");
 var import_node_os = __toESM(require("os"));
-var import_node_path = __toESM(require("path"));
+var import_node_path2 = __toESM(require("path"));
 var SYMBOLS = {
     BRANCH: "├── ",
     EMPTY: "",
@@ -445,14 +559,14 @@ var getTreeLines = function() {
                 case 0:
                     currentDepth = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : 0;
                     base = process.cwd();
-                    dirFullpath = import_node_path.default.resolve(base, dirPath);
-                    dirname = import_node_path.default.basename(dirFullpath);
+                    dirFullpath = import_node_path2.default.resolve(base, dirPath);
+                    dirname = import_node_path2.default.basename(dirFullpath);
                     lines = [
                         dirname
                     ];
                     return [
                         4,
-                        import_node_fs.promises.stat(dirFullpath)
+                        import_node_fs2.promises.stat(dirFullpath)
                     ];
                 case 1:
                     dirStat = _state.sent();
@@ -479,7 +593,7 @@ var getTreeLines = function() {
                                         3
                                     ];
                                 case 1:
-                                    pathToDirectory = import_node_path.default.join(dirFullpath, dirent.name);
+                                    pathToDirectory = import_node_path2.default.join(dirFullpath, dirent.name);
                                     return [
                                         4,
                                         getTreeLines(pathToDirectory, depth, currentDepth + 1)
@@ -499,7 +613,7 @@ var getTreeLines = function() {
                     };
                     return [
                         4,
-                        import_node_fs.promises.readdir(dirFullpath, {
+                        import_node_fs2.promises.readdir(dirFullpath, {
                             withFileTypes: true
                         })
                     ];
@@ -570,92 +684,33 @@ var tree = function() {
     };
 }();
 // src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-var import_node_path6 = __toESM(require("path"));
-var import_socket = require("socket.io");
+var import_node_path7 = __toESM(require("path"));
 var import_chokidar = require("chokidar");
 var import_debounce = __toESM(require("debounce"));
+var import_socket = require("socket.io");
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
-var import_node_path5 = __toESM(require("path"));
-var import_node_fs3 = require("fs");
-// src/cli/utils/preview/hot-reloading/get-imported-modules.ts
-var import_core = require("@babel/core");
-var import_parser = require("@babel/parser");
-var getImportedModules = function(contents) {
-    var importedPaths = [];
-    var parsedContents = (0, import_parser.parse)(contents, {
-        sourceType: "unambiguous",
-        strictMode: false,
-        errorRecovery: true,
-        plugins: [
-            "jsx",
-            "typescript",
-            "decorators"
-        ]
-    });
-    (0, import_core.traverse)(parsedContents, {
-        ImportDeclaration: function ImportDeclaration(param) {
-            var node = param.node;
-            importedPaths.push(node.source.value);
-        },
-        ExportAllDeclaration: function ExportAllDeclaration(param) {
-            var node = param.node;
-            importedPaths.push(node.source.value);
-        },
-        ExportNamedDeclaration: function ExportNamedDeclaration(param) {
-            var node = param.node;
-            if (node.source) {
-                importedPaths.push(node.source.value);
-            }
-        },
-        CallExpression: function CallExpression(param) {
-            var node = param.node;
-            if ("name" in node.callee && node.callee.name === "require") {
-                if (node.arguments.length === 1) {
-                    var importPathNode = node.arguments[0];
-                    if (importPathNode.type === "StringLiteral") {
-                        importedPaths.push(importPathNode.value);
-                    }
-                }
-            }
-        }
-    });
-    return importedPaths;
-};
+var import_node_fs4 = require("fs");
+var import_node_path6 = __toESM(require("path"));
 // src/cli/utils/preview/start-dev-server.ts
-var import_node_path4 = __toESM(require("path"));
 var import_node_http = __toESM(require("http"));
+var import_node_path5 = __toESM(require("path"));
 var import_node_url = __toESM(require("url"));
+var import_chalk = __toESM(require("chalk"));
+var import_log_symbols2 = __toESM(require("log-symbols"));
 var import_next = __toESM(require("next"));
 var import_ora = __toESM(require("ora"));
-var import_log_symbols2 = __toESM(require("log-symbols"));
-var import_chalk = __toESM(require("chalk"));
-// src/utils/register-spinner-autostopping.ts
-var import_log_symbols = __toESM(require("log-symbols"));
-var spinners = /* @__PURE__ */ new Set();
-process.on("SIGINT", function() {
-    spinners.forEach(function(spinner) {
-        if (spinner.isSpinning) {
-            spinner.stop();
-        }
-    });
-});
-process.on("exit", function(code) {
-    if (code !== 0) {
-        spinners.forEach(function(spinner) {
-            if (spinner.isSpinning) {
-                spinner.stopAndPersist({
-                    symbol: import_log_symbols.default.error
-                });
-            }
-        });
-    }
-});
-var registerSpinnerAutostopping = function(spinner) {
-    spinners.add(spinner);
+// src/cli/utils/preview/get-env-variables-for-preview-app.ts
+var import_node_path3 = __toESM(require("path"));
+var getEnvVariablesForPreviewApp = function(relativePathToEmailsDirectory, cwd) {
+    return {
+        EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
+        EMAILS_DIR_ABSOLUTE_PATH: import_node_path3.default.resolve(cwd, relativePathToEmailsDirectory),
+        USER_PROJECT_LOCATION: cwd
+    };
 };
 // src/cli/utils/preview/serve-static-file.ts
-var import_node_path2 = __toESM(require("path"));
-var import_node_fs2 = require("fs");
+var import_node_fs3 = require("fs");
+var import_node_path4 = __toESM(require("path"));
 var import_mime_types = require("mime-types");
 var serveStaticFile = function() {
     var _ref = _async_to_generator(function(res, parsedUrl, staticDirRelativePath) {
@@ -663,13 +718,13 @@ var serveStaticFile = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    staticBaseDir = import_node_path2.default.join(process.cwd(), staticDirRelativePath);
+                    staticBaseDir = import_node_path4.default.join(process.cwd(), staticDirRelativePath);
                     pathname = parsedUrl.pathname;
-                    ext = import_node_path2.default.parse(pathname).ext;
-                    fileAbsolutePath = import_node_path2.default.join(staticBaseDir, pathname);
+                    ext = import_node_path4.default.parse(pathname).ext;
+                    fileAbsolutePath = import_node_path4.default.join(staticBaseDir, pathname);
                     return [
                         4,
-                        import_node_fs2.promises.open(fileAbsolutePath, "r")
+                        import_node_fs3.promises.open(fileAbsolutePath, "r")
                     ];
                 case 1:
                     fileHandle = _state.sent();
@@ -683,7 +738,7 @@ var serveStaticFile = function() {
                     ]);
                     return [
                         4,
-                        import_node_fs2.promises.readFile(fileHandle)
+                        import_node_fs3.promises.readFile(fileHandle)
                     ];
                 case 3:
                     fileData = _state.sent();
@@ -718,15 +773,6 @@ var serveStaticFile = function() {
         return _ref.apply(this, arguments);
     };
 }();
-// src/cli/utils/preview/get-env-variables-for-preview-app.ts
-var import_node_path3 = __toESM(require("path"));
-var getEnvVariablesForPreviewApp = function(relativePathToEmailsDirectory, cwd) {
-    return {
-        EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-        EMAILS_DIR_ABSOLUTE_PATH: import_node_path3.default.resolve(cwd, relativePathToEmailsDirectory),
-        USER_PROJECT_LOCATION: cwd
-    };
-};
 // src/cli/utils/preview/start-dev-server.ts
 var devServer;
 var safeAsyncServerListen = function(server, port) {
@@ -745,9 +791,9 @@ var safeAsyncServerListen = function(server, port) {
         });
     });
 };
-var isDev = !__filename.endsWith(import_node_path4.default.join("cli", "index.js"));
-var cliPacakgeLocation = isDev ? import_node_path4.default.resolve(__dirname, "../../../..") : import_node_path4.default.resolve(__dirname, "../..");
-var previewServerLocation = isDev ? import_node_path4.default.resolve(__dirname, "../../../..") : import_node_path4.default.resolve(__dirname, "../preview");
+var isDev = !__filename.endsWith(import_node_path5.default.join("cli", "index.js"));
+var cliPacakgeLocation = isDev ? import_node_path5.default.resolve(__dirname, "../../../..") : import_node_path5.default.resolve(__dirname, "../..");
+var previewServerLocation = isDev ? import_node_path5.default.resolve(__dirname, "../../../..") : import_node_path5.default.resolve(__dirname, "../preview");
 var startDevServer = function() {
     var _ref = _async_to_generator(function(emailsDirRelativePath, staticBaseDirRelativePath, port) {
         var portAlreadyInUse, nextPortToTry, spinner, timeBeforeNextReady, app, isNextReady, nextReadyPromise, nextHandleRequest, secondsToNextReady;
@@ -764,7 +810,8 @@ var startDevServer = function() {
                         res.setHeader("Pragma", "no-cache");
                         res.setHeader("Expires", "-1");
                         try {
-                            if (parsedUrl.path && parsedUrl.path.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
+                            var _parsedUrl_path;
+                            if (((_parsedUrl_path = parsedUrl.path) === null || _parsedUrl_path === void 0 ? void 0 : _parsedUrl_path.includes("static/")) && !parsedUrl.path.includes("_next/static/")) {
                                 void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
                             } else if (!isNextReady) {
                                 void nextReadyPromise.then(function() {
@@ -825,7 +872,7 @@ var startDevServer = function() {
                     process.env = _object_spread(_object_spread_props(_object_spread({}, process.env), {
                         NODE_ENV: "development"
                     }), getEnvVariablesForPreviewApp(// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-                    import_node_path4.default.normalize(emailsDirRelativePath), process.cwd()));
+                    import_node_path5.default.normalize(emailsDirRelativePath), process.cwd()));
                     app = (0, import_next.default)({
                         // passing in env here does not get the environment variables there
                         dev: isDev,
@@ -894,6 +941,50 @@ process.on("uncaughtException", makeExitHandler({
     shouldKillProcess: true,
     killWithErrorCode: true
 }));
+// src/cli/utils/preview/hot-reloading/get-imported-modules.ts
+var import_parser = require("@babel/parser");
+var import_traverse = __toESM(require("@babel/traverse"));
+var getImportedModules = function(contents) {
+    var importedPaths = [];
+    var parsedContents = (0, import_parser.parse)(contents, {
+        sourceType: "unambiguous",
+        strictMode: false,
+        errorRecovery: true,
+        plugins: [
+            "jsx",
+            "typescript",
+            "decorators"
+        ]
+    });
+    (0, import_traverse.default)(parsedContents, {
+        ImportDeclaration: function ImportDeclaration(param) {
+            var node = param.node;
+            importedPaths.push(node.source.value);
+        },
+        ExportAllDeclaration: function ExportAllDeclaration(param) {
+            var node = param.node;
+            importedPaths.push(node.source.value);
+        },
+        ExportNamedDeclaration: function ExportNamedDeclaration(param) {
+            var node = param.node;
+            if (node.source) {
+                importedPaths.push(node.source.value);
+            }
+        },
+        CallExpression: function CallExpression(param) {
+            var node = param.node;
+            if ("name" in node.callee && node.callee.name === "require") {
+                if (node.arguments.length === 1) {
+                    var importPathNode = node.arguments[0];
+                    if (importPathNode.type === "StringLiteral") {
+                        importedPaths.push(importPathNode.value);
+                    }
+                }
+            }
+        }
+    });
+    return importedPaths;
+};
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 var readAllFilesInsideDirectory = function() {
     var _ref = _async_to_generator(function(directory) {
@@ -904,7 +995,7 @@ var readAllFilesInsideDirectory = function() {
                     allFilePaths = [];
                     return [
                         4,
-                        import_node_fs3.promises.readdir(directory, {
+                        import_node_fs4.promises.readdir(directory, {
                             withFileTypes: true
                         })
                     ];
@@ -933,7 +1024,7 @@ var readAllFilesInsideDirectory = function() {
                     ];
                     _value = _step.value;
                     dirent = _value;
-                    pathToDirent = import_node_path5.default.join(directory, dirent.name);
+                    pathToDirent = import_node_path6.default.join(directory, dirent.name);
                     if (!dirent.isDirectory()) return [
                         3,
                         6
@@ -1020,7 +1111,7 @@ var readAllFilesInsideDirectory = function() {
     };
 }();
 var isJavascriptModule = function(filePath) {
-    var extensionName = import_node_path5.default.extname(filePath);
+    var extensionName = import_node_path6.default.extname(filePath);
     return [
         ".js",
         ".ts",
@@ -1031,22 +1122,22 @@ var isJavascriptModule = function(filePath) {
     ].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = function(pathWithoutExtension) {
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".ts"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".ts"))) {
         return "".concat(pathWithoutExtension, ".ts");
     }
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".tsx"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".tsx"))) {
         return "".concat(pathWithoutExtension, ".tsx");
     }
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".js"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".js"))) {
         return "".concat(pathWithoutExtension, ".js");
     }
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".jsx"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".jsx"))) {
         return "".concat(pathWithoutExtension, ".jsx");
     }
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".mjs"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".mjs"))) {
         return "".concat(pathWithoutExtension, ".mjs");
     }
-    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".cjs"))) {
+    if ((0, import_node_fs4.existsSync)("".concat(pathWithoutExtension, ".cjs"))) {
         return "".concat(pathWithoutExtension, ".cjs");
     }
 };
@@ -1082,52 +1173,51 @@ var createDependencyGraph = function() {
                                     case 0:
                                         return [
                                             4,
-                                            import_node_fs3.promises.readFile(filePath, "utf8")
+                                            import_node_fs4.promises.readFile(filePath, "utf8")
                                         ];
                                     case 1:
                                         contents = _state.sent();
                                         importedPaths = getImportedModules(contents);
                                         importedPathsRelativeToDirectory = importedPaths.map(function(dependencyPath) {
                                             var isModulePath = !dependencyPath.startsWith(".");
-                                            if (!isModulePath && !import_node_path5.default.isAbsolute(dependencyPath)) {
-                                                var pathToDependencyFromDirectory = import_node_path5.default.resolve(/*
-                          path.resolve resolves paths differently from what imports on javascript do.
-            
-                          So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependecy path of "./other-email" 
-                          would end up going into /path/to/email.tsx/other-email instead of /path/to/other-email which is the
-                          one the import is meant to go to
-                        */ import_node_path5.default.dirname(filePath), dependencyPath);
-                                                var isDirectory = false;
-                                                try {
-                                                    isDirectory = (0, import_node_fs3.statSync)(pathToDependencyFromDirectory).isDirectory();
-                                                } catch (_) {}
-                                                if (isDirectory) {
-                                                    var pathToSubDirectory = pathToDependencyFromDirectory;
-                                                    var pathWithExtension = checkFileExtensionsUntilItExists("".concat(pathToSubDirectory, "/index"));
-                                                    if (pathWithExtension) {
-                                                        pathToDependencyFromDirectory = pathWithExtension;
-                                                    } else if (isDev) {
-                                                        console.warn("Could not find index file for directory at ".concat(pathToDependencyFromDirectory, ". This is probably going to cause issues with both hot reloading and your code."));
-                                                    }
+                                            if (isModulePath || import_node_path6.default.isAbsolute(dependencyPath)) {
+                                                return dependencyPath;
+                                            }
+                                            var pathToDependencyFromDirectory = import_node_path6.default.resolve(/*
+                      path.resolve resolves paths differently from what imports on javascript do.
+          
+                      So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependecy path of "./other-email" 
+                      would end up going into /path/to/email.tsx/other-email instead of /path/to/other-email which is the
+                      one the import is meant to go to
+                    */ import_node_path6.default.dirname(filePath), dependencyPath);
+                                            var isDirectory = false;
+                                            try {
+                                                isDirectory = (0, import_node_fs4.statSync)(pathToDependencyFromDirectory).isDirectory();
+                                            } catch (_) {}
+                                            if (isDirectory) {
+                                                var pathToSubDirectory = pathToDependencyFromDirectory;
+                                                var pathWithExtension = checkFileExtensionsUntilItExists("".concat(pathToSubDirectory, "/index"));
+                                                if (pathWithExtension) {
+                                                    pathToDependencyFromDirectory = pathWithExtension;
+                                                } else if (isDev) {
+                                                    console.warn("Could not find index file for directory at ".concat(pathToDependencyFromDirectory, ". This is probably going to cause issues with both hot reloading and your code."));
                                                 }
-                                                if (!isJavascriptModule(pathToDependencyFromDirectory)) {
-                                                    var pathWithExtension1 = checkFileExtensionsUntilItExists(pathToDependencyFromDirectory);
-                                                    if (pathWithExtension1) {
-                                                        pathToDependencyFromDirectory = pathWithExtension1;
-                                                    } else if (isDev) {
-                                                        console.warn("Could not determine the file extension for the file at ".concat(pathToDependencyFromDirectory));
-                                                    }
+                                            }
+                                            if (!isJavascriptModule(pathToDependencyFromDirectory)) {
+                                                var pathWithExtension1 = checkFileExtensionsUntilItExists(pathToDependencyFromDirectory);
+                                                if (pathWithExtension1) {
+                                                    pathToDependencyFromDirectory = pathWithExtension1;
+                                                } else if (isDev) {
+                                                    console.warn("Could not determine the file extension for the file at ".concat(pathToDependencyFromDirectory));
                                                 }
-                                                return pathToDependencyFromDirectory;
-                                            } else {
-                                                return dependencyPath;
                                             }
+                                            return pathToDependencyFromDirectory;
                                         });
                                         moduleDependencies = importedPathsRelativeToDirectory.filter(function(dependencyPath) {
-                                            return !dependencyPath.startsWith(".") && !import_node_path5.default.isAbsolute(dependencyPath);
+                                            return !dependencyPath.startsWith(".") && !import_node_path6.default.isAbsolute(dependencyPath);
                                         });
                                         nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(function(dependencyPath) {
-                                            return dependencyPath.startsWith(".") || import_node_path5.default.isAbsolute(dependencyPath);
+                                            return dependencyPath.startsWith(".") || import_node_path6.default.isAbsolute(dependencyPath);
                                         });
                                         return [
                                             2,
@@ -1665,7 +1755,7 @@ var setupHotreloading = function() {
                         });
                         changes = [];
                     }, 150);
-                    absolutePathToEmailsDirectory = import_node_path6.default.resolve(process.cwd(), emailDirRelativePath);
+                    absolutePathToEmailsDirectory = import_node_path7.default.resolve(process.cwd(), emailDirRelativePath);
                     return [
                         4,
                         createDependencyGraph(absolutePathToEmailsDirectory)
@@ -1681,7 +1771,7 @@ var setupHotreloading = function() {
                     });
                     getFilesOutsideEmailsDirectory = function() {
                         return Object.keys(dependencyGraph).filter(function(p) {
-                            return import_node_path6.default.relative(absolutePathToEmailsDirectory, p).startsWith("..");
+                            return import_node_path7.default.relative(absolutePathToEmailsDirectory, p).startsWith("..");
                         });
                     };
                     filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
@@ -1734,13 +1824,13 @@ var setupHotreloading = function() {
                             return _ts_generator(this, function(_state) {
                                 switch(_state.label){
                                     case 0:
-                                        file = relativePathToChangeTarget.split(import_node_path6.default.sep);
+                                        file = relativePathToChangeTarget.split(import_node_path7.default.sep);
                                         if (file.length === 0) {
                                             return [
                                                 2
                                             ];
                                         }
-                                        pathToChangeTarget = import_node_path6.default.resolve(absolutePathToEmailsDirectory, relativePathToChangeTarget);
+                                        pathToChangeTarget = import_node_path7.default.resolve(absolutePathToEmailsDirectory, relativePathToChangeTarget);
                                         return [
                                             4,
                                             updateDependencyGraph(event, pathToChangeTarget)
@@ -1803,7 +1893,7 @@ var setupHotreloading = function() {
                                                 dependentPath = _step2.value;
                                                 changes.push({
                                                     event: "change",
-                                                    filename: import_node_path6.default.relative(absolutePathToEmailsDirectory, dependentPath)
+                                                    filename: import_node_path7.default.relative(absolutePathToEmailsDirectory, dependentPath)
                                                 });
                                             }
                                         } catch (err) {
@@ -1842,193 +1932,444 @@ var setupHotreloading = function() {
         return _ref.apply(this, arguments);
     };
 }();
-// src/cli/commands/dev.ts
-var dev = function() {
-    var _ref = _async_to_generator(function(param) {
-        var emailsDirRelativePath, port, devServer2, error;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
+// src/cli/commands/build.ts
+var buildPreviewApp = function(absoluteDirectory) {
+    return new Promise(function(resolve, reject) {
+        var nextBuild = (0, import_node_child_process.spawn)("npm", [
+            "run",
+            "build"
+        ], {
+            cwd: absoluteDirectory,
+            shell: true
+        });
+        nextBuild.stdout.pipe(process.stdout);
+        nextBuild.stderr.pipe(process.stderr);
+        nextBuild.on("close", function(code) {
+            if (code === 0) {
+                resolve();
+            } else {
+                reject(new Error("Unable to build the Next app and it exited with code: ".concat(code)));
+            }
+        });
+    });
+};
+var setNextEnvironmentVariablesForBuild = function() {
+    var _ref = _async_to_generator(function(emailsDirRelativePath, builtPreviewAppPath) {
+        var nextConfigContents;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
                 case 0:
-                    emailsDirRelativePath = param.dir, port = param.port;
-                    _state.label = 1;
+                    nextConfigContents = "\nconst path = require('path');\nconst emailsDirRelativePath = path.normalize('".concat(emailsDirRelativePath, "');\nconst userProjectLocation = path.resolve(process.cwd(), '../');\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  env: {\n    NEXT_PUBLIC_IS_BUILDING: 'true',\n    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,\n    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),\n    USER_PROJECT_LOCATION: userProjectLocation\n  },\n  // this is needed so that the code for building emails works properly\n  webpack: (\n    /** @type {import('webpack').Configuration & { externals: string[] }} */\n    config,\n    { isServer }\n  ) => {\n    if (isServer) {\n      config.externals.push('esbuild');\n    }\n\n    return config;\n  },\n  typescript: {\n    ignoreBuildErrors: true\n  },\n  eslint: {\n    ignoreDuringBuilds: true\n  },\n  experimental: {\n    webpackBuildWorker: true\n  },\n}");
+                    return [
+                        4,
+                        import_node_fs5.default.promises.writeFile(import_node_path8.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
+                    ];
                 case 1:
-                    _state.trys.push([
-                        1,
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return function setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath) {
+        return _ref.apply(this, arguments);
+    };
+}();
+var getEmailSlugsFromEmailDirectory = function(emailDirectory, emailsDirectoryAbsolutePath) {
+    var directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
+    var slugs = [];
+    emailDirectory.emailFilenames.forEach(function(filename) {
+        return slugs.push(import_node_path8.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path8.default.sep).filter(function(segment) {
+            return segment.length > 0;
+        }));
+    });
+    emailDirectory.subDirectories.forEach(function(directory) {
+        var _slugs;
+        (_slugs = slugs).push.apply(_slugs, _to_consumable_array(getEmailSlugsFromEmailDirectory(directory, emailsDirectoryAbsolutePath)));
+    });
+    return slugs;
+};
+var forceSSGForEmailPreviews = function() {
+    var _ref = _async_to_generator(function(emailsDirPath, builtPreviewAppPath) {
+        var emailDirectoryMetadata, parameters, removeForceDynamic;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    return [
                         4,
-                        ,
-                        5
-                    ]);
-                    if (!import_node_fs4.default.existsSync(emailsDirRelativePath)) {
-                        console.error("Missing ".concat(emailsDirRelativePath, " folder"));
-                        process.exit(1);
-                    }
+                        getEmailsDirectoryMetadata(emailsDirPath)
+                    ];
+                case 1:
+                    emailDirectoryMetadata = _state.sent();
+                    parameters = getEmailSlugsFromEmailDirectory(emailDirectoryMetadata, emailsDirPath).map(function(slug) {
+                        return {
+                            slug: slug
+                        };
+                    });
+                    removeForceDynamic = function() {
+                        var _ref = _async_to_generator(function(filePath) {
+                            var contents;
+                            return _ts_generator(this, function(_state) {
+                                switch(_state.label){
+                                    case 0:
+                                        return [
+                                            4,
+                                            import_node_fs5.default.promises.readFile(filePath, "utf8")
+                                        ];
+                                    case 1:
+                                        contents = _state.sent();
+                                        return [
+                                            4,
+                                            import_node_fs5.default.promises.writeFile(filePath, contents.replace("export const dynamic = 'force-dynamic';", ""), "utf8")
+                                        ];
+                                    case 2:
+                                        _state.sent();
+                                        return [
+                                            2
+                                        ];
+                                }
+                            });
+                        });
+                        return function removeForceDynamic(filePath) {
+                            return _ref.apply(this, arguments);
+                        };
+                    }();
                     return [
                         4,
-                        startDevServer(emailsDirRelativePath, emailsDirRelativePath, // defaults to ./emails/static for the static files that are served to the preview
-                        Number.parseInt(port))
+                        removeForceDynamic(import_node_path8.default.resolve(builtPreviewAppPath, "./src/app/layout.tsx"))
                     ];
                 case 2:
-                    devServer2 = _state.sent();
+                    _state.sent();
                     return [
                         4,
-                        setupHotreloading(devServer2, emailsDirRelativePath)
+                        removeForceDynamic(import_node_path8.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"))
                     ];
                 case 3:
                     _state.sent();
                     return [
-                        3,
-                        5
+                        4,
+                        import_node_fs5.default.promises.appendFile(import_node_path8.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport function generateStaticParams() { \n  return Promise.resolve(\n    ".concat(JSON.stringify(parameters), "\n  );\n}"), "utf8")
                     ];
                 case 4:
-                    error = _state.sent();
-                    console.log(error);
-                    process.exit(1);
-                    return [
-                        3,
-                        5
-                    ];
-                case 5:
+                    _state.sent();
                     return [
                         2
                     ];
             }
         });
     });
-    return function dev(_) {
+    return function forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath) {
         return _ref.apply(this, arguments);
     };
 }();
-// src/cli/commands/export.ts
-var import_node_fs7 = __toESM(require("fs"));
-var import_node_path9 = __toESM(require("path"));
-var import_glob = require("glob");
-var import_esbuild = require("esbuild");
-var import_ora2 = __toESM(require("ora"));
-var import_log_symbols3 = __toESM(require("log-symbols"));
-var import_normalize_path = __toESM(require("normalize-path"));
-// src/utils/get-emails-directory-metadata.ts
-var import_node_fs5 = __toESM(require("fs"));
-var import_node_path7 = __toESM(require("path"));
-var isFileAnEmail = function(fullPath) {
-    var stat = import_node_fs5.default.statSync(fullPath);
-    if (stat.isDirectory()) return false;
-    var ext = import_node_path7.default.parse(fullPath).ext;
-    if (![
-        ".js",
-        ".tsx",
-        ".jsx"
-    ].includes(ext)) return false;
-    if (!import_node_fs5.default.existsSync(fullPath)) {
-        return false;
-    }
-    var fileContents = import_node_fs5.default.readFileSync(fullPath, "utf8");
-    return /\bexport\s+default\b/gm.test(fileContents);
-};
-var mergeDirectoriesWithSubDirectories = function(emailsDirectoryMetadata) {
-    var currentResultingMergedDirectory = emailsDirectoryMetadata;
-    while(currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1){
-        var onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
-        currentResultingMergedDirectory = _object_spread_props(_object_spread({}, onlySubDirectory), {
-            directoryName: import_node_path7.default.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
-        });
-    }
-    return currentResultingMergedDirectory;
-};
-var getEmailsDirectoryMetadata = function() {
-    var _ref = _async_to_generator(function(absolutePathToEmailsDirectory) {
-        var keepFileExtensions, isSubDirectory, baseDirectoryPath, dirents, emailFilenames, subDirectories, emailsMetadata;
-        var _arguments = arguments;
+var updatePackageJson = function() {
+    var _ref = _async_to_generator(function(builtPreviewAppPath) {
+        var packageJsonPath, packageJson, _;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    keepFileExtensions = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : false, isSubDirectory = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : false, baseDirectoryPath = _arguments.length > 3 && _arguments[3] !== void 0 ? _arguments[3] : absolutePathToEmailsDirectory;
-                    if (!import_node_fs5.default.existsSync(absolutePathToEmailsDirectory)) return [
-                        2
-                    ];
+                    packageJsonPath = import_node_path8.default.resolve(builtPreviewAppPath, "./package.json");
+                    _ = JSON.parse;
                     return [
                         4,
-                        import_node_fs5.default.promises.readdir(absolutePathToEmailsDirectory, {
-                            withFileTypes: true
-                        })
+                        import_node_fs5.default.promises.readFile(packageJsonPath, "utf8")
                     ];
                 case 1:
-                    dirents = _state.sent();
-                    emailFilenames = dirents.filter(function(dirent) {
-                        return isFileAnEmail(import_node_path7.default.join(absolutePathToEmailsDirectory, dirent.name));
-                    }).map(function(dirent) {
-                        return keepFileExtensions ? dirent.name : dirent.name.replace(import_node_path7.default.extname(dirent.name), "");
-                    });
+                    packageJson = _.apply(JSON, [
+                        _state.sent()
+                    ]);
+                    packageJson.scripts.build = "next build";
+                    packageJson.scripts.start = "next start";
+                    packageJson.name = "preview-server";
+                    delete packageJson.devDependencies["@react-email/render"];
+                    delete packageJson.devDependencies["@react-email/components"];
                     return [
                         4,
-                        Promise.all(dirents.filter(function(dirent) {
-                            return dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static";
-                        }).map(function(dirent) {
-                            var direntAbsolutePath = import_node_path7.default.join(absolutePathToEmailsDirectory, dirent.name);
-                            return getEmailsDirectoryMetadata(direntAbsolutePath, keepFileExtensions, true, baseDirectoryPath);
-                        }))
+                        import_node_fs5.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
                     ];
                 case 2:
-                    subDirectories = _state.sent();
-                    emailsMetadata = {
-                        absolutePath: absolutePathToEmailsDirectory,
-                        relativePath: import_node_path7.default.relative(baseDirectoryPath, absolutePathToEmailsDirectory),
-                        directoryName: absolutePathToEmailsDirectory.split(import_node_path7.default.sep).pop(),
-                        emailFilenames: emailFilenames,
-                        subDirectories: subDirectories
-                    };
+                    _state.sent();
                     return [
-                        2,
-                        isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata
+                        2
                     ];
             }
         });
     });
-    return function getEmailsDirectoryMetadata(absolutePathToEmailsDirectory) {
+    return function updatePackageJson(builtPreviewAppPath) {
         return _ref.apply(this, arguments);
     };
 }();
-// src/utils/esbuild/renderring-utilities-exporter.ts
-var import_node_path8 = __toESM(require("path"));
-var import_node_fs6 = require("fs");
-// src/utils/esbuild/escape-string-for-regex.ts
-function escapeStringForRegex(string) {
-    return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
-}
-// src/utils/esbuild/renderring-utilities-exporter.ts
-var renderingUtilitiesExporter = function(emailTemplates) {
-    return {
-        name: "rendering-utilities-exporter",
-        setup: function(b) {
-            b.onLoad({
-                filter: new RegExp(emailTemplates.map(function(emailPath) {
-                    return escapeStringForRegex(emailPath);
-                }).join("|"))
-            }, function() {
-                var _ref = _async_to_generator(function(param) {
-                    var pathToFile, _tmp, _, _1;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                pathToFile = param.path;
-                                _tmp = {};
-                                _1 = (_ = "").concat;
-                                return [
-                                    4,
-                                    import_node_fs6.promises.readFile(pathToFile, "utf8")
-                                ];
-                            case 1:
-                                return [
-                                    2,
-                                    (_tmp.contents = _1.apply(_, [
-                                        _state.sent(),
-                                        ";\n          export { render } from 'react-email-module-that-will-export-render'\n          export { createElement as reactEmailCreateReactElement } from 'react';\n        "
-                                    ]), _tmp.loader = import_node_path8.default.extname(pathToFile).slice(1), _tmp)
-                                ];
+var npmInstall = function() {
+    var _ref = _async_to_generator(function(builtPreviewAppPath, packageManager) {
+        return _ts_generator(this, function(_state) {
+            return [
+                2,
+                new Promise(function(resolve, reject) {
+                    var childProc = (0, import_node_child_process.spawn)(packageManager, [
+                        "install",
+                        "--silent",
+                        "--include=dev"
+                    ], {
+                        cwd: builtPreviewAppPath,
+                        shell: true
+                    });
+                    childProc.stdout.pipe(process.stdout);
+                    childProc.stderr.pipe(process.stderr);
+                    childProc.on("close", function(code) {
+                        if (code === 0) {
+                            resolve();
+                        } else {
+                            reject(new Error("Unable to install the dependencies and it exited with code: ".concat(code)));
                         }
                     });
-                });
-                return function(_) {
-                    return _ref.apply(this, arguments);
+                })
+            ];
+        });
+    });
+    return function npmInstall(builtPreviewAppPath, packageManager) {
+        return _ref.apply(this, arguments);
+    };
+}();
+var build = function() {
+    var _ref = _async_to_generator(function(param) {
+        var emailsDirRelativePath, packageManager, spinner, emailsDirPath, staticPath, builtPreviewAppPath, builtStaticDirectory, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    emailsDirRelativePath = param.dir, packageManager = param.packageManager;
+                    _state.label = 1;
+                case 1:
+                    _state.trys.push([
+                        1,
+                        12,
+                        ,
+                        13
+                    ]);
+                    spinner = (0, import_ora2.default)({
+                        text: "Starting build process...",
+                        prefixText: "  "
+                    }).start();
+                    registerSpinnerAutostopping(spinner);
+                    spinner.text = "Checking if ".concat(emailsDirRelativePath, " folder exists");
+                    if (!import_node_fs5.default.existsSync(emailsDirRelativePath)) {
+                        process.exit(1);
+                    }
+                    emailsDirPath = import_node_path8.default.join(process.cwd(), emailsDirRelativePath);
+                    staticPath = import_node_path8.default.join(emailsDirPath, "static");
+                    builtPreviewAppPath = import_node_path8.default.join(process.cwd(), ".react-email");
+                    if (!import_node_fs5.default.existsSync(builtPreviewAppPath)) return [
+                        3,
+                        3
+                    ];
+                    spinner.text = "Deleting pre-existing `.react-email` folder";
+                    return [
+                        4,
+                        import_node_fs5.default.promises.rm(builtPreviewAppPath, {
+                            recursive: true
+                        })
+                    ];
+                case 2:
+                    _state.sent();
+                    _state.label = 3;
+                case 3:
+                    spinner.text = "Copying preview app from CLI to `.react-email`";
+                    return [
+                        4,
+                        import_node_fs5.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+                            recursive: true,
+                            filter: function(source) {
+                                return !/(\/|\\)cli(\/|\\)?/.test(source) && !/(\/|\\)\.next(\/|\\)?/.test(source) && !/(\/|\\)\.turbo(\/|\\)?/.test(source) && !/(\/|\\)node_modules(\/|\\)?$/.test(source);
+                            }
+                        })
+                    ];
+                case 4:
+                    _state.sent();
+                    if (!import_node_fs5.default.existsSync(staticPath)) return [
+                        3,
+                        6
+                    ];
+                    spinner.text = "Copying `static` folder into `.react-email/public/static`";
+                    builtStaticDirectory = import_node_path8.default.resolve(builtPreviewAppPath, "./public/static");
+                    return [
+                        4,
+                        import_node_fs5.default.promises.cp(staticPath, builtStaticDirectory, {
+                            recursive: true
+                        })
+                    ];
+                case 5:
+                    _state.sent();
+                    _state.label = 6;
+                case 6:
+                    spinner.text = "Setting Next environment variables for preview app to work properly";
+                    return [
+                        4,
+                        setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath)
+                    ];
+                case 7:
+                    _state.sent();
+                    spinner.text = "Setting server side generation for the email preview pages";
+                    return [
+                        4,
+                        forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath)
+                    ];
+                case 8:
+                    _state.sent();
+                    spinner.text = "Updating package.json's build and start scripts";
+                    return [
+                        4,
+                        updatePackageJson(builtPreviewAppPath)
+                    ];
+                case 9:
+                    _state.sent();
+                    spinner.text = "Installing dependencies on `.react-email`";
+                    return [
+                        4,
+                        npmInstall(builtPreviewAppPath, packageManager)
+                    ];
+                case 10:
+                    _state.sent();
+                    spinner.stopAndPersist({
+                        text: "Successfully prepared `.react-email` for `next build`",
+                        symbol: import_log_symbols3.default.success
+                    });
+                    return [
+                        4,
+                        buildPreviewApp(builtPreviewAppPath)
+                    ];
+                case 11:
+                    _state.sent();
+                    return [
+                        3,
+                        13
+                    ];
+                case 12:
+                    error = _state.sent();
+                    console.log(error);
+                    process.exit(1);
+                    return [
+                        3,
+                        13
+                    ];
+                case 13:
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return function build(_) {
+        return _ref.apply(this, arguments);
+    };
+}();
+// src/cli/commands/dev.ts
+var import_node_fs6 = __toESM(require("fs"));
+var dev = function() {
+    var _ref = _async_to_generator(function(param) {
+        var emailsDirRelativePath, port, devServer2, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    emailsDirRelativePath = param.dir, port = param.port;
+                    _state.label = 1;
+                case 1:
+                    _state.trys.push([
+                        1,
+                        4,
+                        ,
+                        5
+                    ]);
+                    if (!import_node_fs6.default.existsSync(emailsDirRelativePath)) {
+                        console.error("Missing ".concat(emailsDirRelativePath, " folder"));
+                        process.exit(1);
+                    }
+                    return [
+                        4,
+                        startDevServer(emailsDirRelativePath, emailsDirRelativePath, // defaults to ./emails/static for the static files that are served to the preview
+                        Number.parseInt(port))
+                    ];
+                case 2:
+                    devServer2 = _state.sent();
+                    return [
+                        4,
+                        setupHotreloading(devServer2, emailsDirRelativePath)
+                    ];
+                case 3:
+                    _state.sent();
+                    return [
+                        3,
+                        5
+                    ];
+                case 4:
+                    error = _state.sent();
+                    console.log(error);
+                    process.exit(1);
+                    return [
+                        3,
+                        5
+                    ];
+                case 5:
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return function dev(_) {
+        return _ref.apply(this, arguments);
+    };
+}();
+// src/cli/commands/export.ts
+var import_node_fs8 = __toESM(require("fs"));
+var import_node_path10 = __toESM(require("path"));
+var import_esbuild = require("esbuild");
+var import_glob = require("glob");
+var import_log_symbols4 = __toESM(require("log-symbols"));
+var import_normalize_path = __toESM(require("normalize-path"));
+var import_ora3 = __toESM(require("ora"));
+// src/utils/esbuild/renderring-utilities-exporter.ts
+var import_node_fs7 = require("fs");
+var import_node_path9 = __toESM(require("path"));
+// src/utils/esbuild/escape-string-for-regex.ts
+function escapeStringForRegex(string) {
+    return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+}
+// src/utils/esbuild/renderring-utilities-exporter.ts
+var renderingUtilitiesExporter = function(emailTemplates) {
+    return {
+        name: "rendering-utilities-exporter",
+        setup: function(b) {
+            b.onLoad({
+                filter: new RegExp(emailTemplates.map(function(emailPath) {
+                    return escapeStringForRegex(emailPath);
+                }).join("|"))
+            }, function() {
+                var _ref = _async_to_generator(function(param) {
+                    var pathToFile, _tmp, _, _1;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                pathToFile = param.path;
+                                _tmp = {};
+                                _1 = (_ = "").concat;
+                                return [
+                                    4,
+                                    import_node_fs7.promises.readFile(pathToFile, "utf8")
+                                ];
+                            case 1:
+                                return [
+                                    2,
+                                    (_tmp.contents = _1.apply(_, [
+                                        _state.sent(),
+                                        ";\n          export { render } from 'react-email-module-that-will-export-render'\n          export { createElement as reactEmailCreateReactElement } from 'react';\n        "
+                                    ]), _tmp.loader = import_node_path9.default.extname(pathToFile).slice(1), _tmp)
+                                ];
+                        }
+                    });
+                });
+                return function(_) {
+                    return _ref.apply(this, arguments);
                 };
             }());
             b.onResolve({
@@ -2084,7 +2425,7 @@ var renderingUtilitiesExporter = function(emailTemplates) {
 var getEmailTemplatesFromDirectory = function(emailDirectory) {
     var templatePaths = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return templatePaths.push(import_node_path9.default.join(emailDirectory.absolutePath, filename));
+        return templatePaths.push(import_node_path10.default.join(emailDirectory.absolutePath, filename));
     });
     emailDirectory.subDirectories.forEach(function(directory) {
         var _templatePaths;
@@ -2098,25 +2439,25 @@ var exportTemplates = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    if (import_node_fs7.default.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
-                        import_node_fs7.default.rmSync(pathToWhereEmailMarkupShouldBeDumped, {
+                    if (import_node_fs8.default.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
+                        import_node_fs8.default.rmSync(pathToWhereEmailMarkupShouldBeDumped, {
                             recursive: true
                         });
                     }
                     if (!options.silent) {
-                        spinner = (0, import_ora2.default)("Preparing files...\n").start();
+                        spinner = (0, import_ora3.default)("Preparing files...\n").start();
                         registerSpinnerAutostopping(spinner);
                     }
                     return [
                         4,
-                        getEmailsDirectoryMetadata(import_node_path9.default.resolve(process.cwd(), emailsDirectoryPath), true)
+                        getEmailsDirectoryMetadata(import_node_path10.default.resolve(process.cwd(), emailsDirectoryPath), true)
                     ];
                 case 1:
                     emailsDirectoryMetadata = _state.sent();
                     if (typeof emailsDirectoryMetadata === "undefined") {
                         if (spinner) {
                             spinner.stopAndPersist({
-                                symbol: import_log_symbols3.default.error,
+                                symbol: import_log_symbols4.default.error,
                                 text: "Could not find the directory at ".concat(emailsDirectoryPath)
                             });
                         }
@@ -2165,7 +2506,7 @@ var exportTemplates = function() {
                     buildFailure = exception;
                     if (spinner) {
                         spinner.stopAndPersist({
-                            symbol: import_log_symbols3.default.error,
+                            symbol: import_log_symbols4.default.error,
                             text: "Failed to build emails"
                         });
                     }
@@ -2213,519 +2554,183 @@ var exportTemplates = function() {
                         12
                     ]);
                     if (spinner) {
-                        spinner.text = "rendering ".concat(template.split("/").pop());
-                        spinner.render();
-                    }
-                    delete require.cache[template];
-                    emailModule = require(template);
-                    return [
-                        4,
-                        emailModule.render(emailModule.reactEmailCreateReactElement(emailModule.default, {}), options)
-                    ];
-                case 10:
-                    rendered = _state.sent();
-                    htmlPath = template.replace(".cjs", options.plainText ? ".txt" : ".html");
-                    (0, import_node_fs7.writeFileSync)(htmlPath, rendered);
-                    (0, import_node_fs7.unlinkSync)(template);
-                    return [
-                        3,
-                        12
-                    ];
-                case 11:
-                    exception1 = _state.sent();
-                    if (spinner) {
-                        spinner.stopAndPersist({
-                            symbol: import_log_symbols3.default.error,
-                            text: "failed when rendering ".concat(template.split("/").pop())
-                        });
-                    }
-                    console.error(exception1);
-                    process.exit(1);
-                    return [
-                        3,
-                        12
-                    ];
-                case 12:
-                    _iteratorAbruptCompletion = false;
-                    return [
-                        3,
-                        7
-                    ];
-                case 13:
-                    return [
-                        3,
-                        20
-                    ];
-                case 14:
-                    err = _state.sent();
-                    _didIteratorError = true;
-                    _iteratorError = err;
-                    return [
-                        3,
-                        20
-                    ];
-                case 15:
-                    _state.trys.push([
-                        15,
-                        ,
-                        18,
-                        19
-                    ]);
-                    if (!(_iteratorAbruptCompletion && _iterator.return != null)) return [
-                        3,
-                        17
-                    ];
-                    return [
-                        4,
-                        _iterator.return()
-                    ];
-                case 16:
-                    _state.sent();
-                    _state.label = 17;
-                case 17:
-                    return [
-                        3,
-                        19
-                    ];
-                case 18:
-                    if (_didIteratorError) {
-                        throw _iteratorError;
-                    }
-                    return [
-                        7
-                    ];
-                case 19:
-                    return [
-                        7
-                    ];
-                case 20:
-                    if (spinner) {
-                        spinner.succeed("Rendered all files");
-                        spinner.text = "Copying static files";
-                        spinner.render();
-                    }
-                    staticDirectoryPath = import_node_path9.default.join(emailsDirectoryPath, "static");
-                    if (!import_node_fs7.default.existsSync(staticDirectoryPath)) return [
-                        3,
-                        25
-                    ];
-                    pathToDumpStaticFilesInto = import_node_path9.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
-                    if (!import_node_fs7.default.existsSync(pathToDumpStaticFilesInto)) return [
-                        3,
-                        22
-                    ];
-                    return [
-                        4,
-                        import_node_fs7.default.promises.rm(pathToDumpStaticFilesInto, {
-                            recursive: true
-                        })
-                    ];
-                case 21:
-                    _state.sent();
-                    _state.label = 22;
-                case 22:
-                    _state.trys.push([
-                        22,
-                        24,
-                        ,
-                        25
-                    ]);
-                    return [
-                        4,
-                        import_node_fs7.default.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
-                            recursive: true
-                        })
-                    ];
-                case 23:
-                    _state.sent();
-                    return [
-                        3,
-                        25
-                    ];
-                case 24:
-                    exception2 = _state.sent();
-                    console.error(exception2);
-                    if (spinner) {
-                        spinner.stopAndPersist({
-                            symbol: import_log_symbols3.default.error,
-                            text: "Failed to copy static files"
-                        });
-                    }
-                    console.error("Something went wrong while copying the file to ".concat(pathToWhereEmailMarkupShouldBeDumped, "/static, ").concat(exception2));
-                    process.exit(1);
-                    return [
-                        3,
-                        25
-                    ];
-                case 25:
-                    if (!(spinner && !options.silent)) return [
-                        3,
-                        27
-                    ];
-                    spinner.succeed();
-                    return [
-                        4,
-                        tree(pathToWhereEmailMarkupShouldBeDumped, 4)
-                    ];
-                case 26:
-                    fileTree = _state.sent();
-                    console.log(fileTree);
-                    spinner.stopAndPersist({
-                        symbol: import_log_symbols3.default.success,
-                        text: "Successfully exported emails"
-                    });
-                    _state.label = 27;
-                case 27:
-                    return [
-                        2
-                    ];
-            }
-        });
-    });
-    return function exportTemplates(pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) {
-        return _ref.apply(this, arguments);
-    };
-}();
-// src/cli/commands/build.ts
-var import_node_fs8 = __toESM(require("fs"));
-var import_node_path10 = __toESM(require("path"));
-var import_ora3 = __toESM(require("ora"));
-var import_node_child_process = require("child_process");
-var import_log_symbols4 = __toESM(require("log-symbols"));
-var buildPreviewApp = function(absoluteDirectory) {
-    return new Promise(function(resolve, reject) {
-        var nextBuild = (0, import_node_child_process.spawn)("npm", [
-            "run",
-            "build"
-        ], {
-            cwd: absoluteDirectory,
-            shell: true
-        });
-        nextBuild.stdout.pipe(process.stdout);
-        nextBuild.stderr.pipe(process.stderr);
-        nextBuild.on("close", function(code) {
-            if (code === 0) {
-                resolve();
-            } else {
-                reject(new Error("Unable to build the Next app and it exited with code: ".concat(code)));
-            }
-        });
-    });
-};
-var setNextEnvironmentVariablesForBuild = function() {
-    var _ref = _async_to_generator(function(emailsDirRelativePath, builtPreviewAppPath) {
-        var nextConfigContents;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    nextConfigContents = "\nconst path = require('path');\nconst emailsDirRelativePath = path.normalize('".concat(emailsDirRelativePath, "');\nconst userProjectLocation = path.resolve(process.cwd(), '../');\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  env: {\n    NEXT_PUBLIC_IS_BUILDING: 'true',\n    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,\n    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),\n    USER_PROJECT_LOCATION: userProjectLocation\n  },\n  // this is needed so that the code for building emails works properly\n  webpack: (\n    /** @type {import('webpack').Configuration & { externals: string[] }} */\n    config,\n    { isServer }\n  ) => {\n    if (isServer) {\n      config.externals.push('esbuild');\n    }\n\n    return config;\n  },\n  typescript: {\n    ignoreBuildErrors: true\n  },\n  eslint: {\n    ignoreDuringBuilds: true\n  },\n  experimental: {\n    webpackBuildWorker: true\n  },\n}");
-                    return [
-                        4,
-                        import_node_fs8.default.promises.writeFile(import_node_path10.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
-                    ];
-                case 1:
-                    _state.sent();
-                    return [
-                        2
-                    ];
-            }
-        });
-    });
-    return function setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath) {
-        return _ref.apply(this, arguments);
-    };
-}();
-var getEmailSlugsFromEmailDirectory = function(emailDirectory, emailsDirectoryAbsolutePath) {
-    var directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
-    var slugs = [];
-    emailDirectory.emailFilenames.forEach(function(filename) {
-        return slugs.push(import_node_path10.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path10.default.sep).filter(function(segment) {
-            return segment.length > 0;
-        }));
-    });
-    emailDirectory.subDirectories.forEach(function(directory) {
-        var _slugs;
-        (_slugs = slugs).push.apply(_slugs, _to_consumable_array(getEmailSlugsFromEmailDirectory(directory, emailsDirectoryAbsolutePath)));
-    });
-    return slugs;
-};
-var forceSSGForEmailPreviews = function() {
-    var _ref = _async_to_generator(function(emailsDirPath, builtPreviewAppPath) {
-        var emailDirectoryMetadata, parameters, removeForceDynamic;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    return [
-                        4,
-                        getEmailsDirectoryMetadata(emailsDirPath)
-                    ];
-                case 1:
-                    emailDirectoryMetadata = _state.sent();
-                    parameters = getEmailSlugsFromEmailDirectory(emailDirectoryMetadata, emailsDirPath).map(function(slug) {
-                        return {
-                            slug: slug
-                        };
-                    });
-                    removeForceDynamic = function() {
-                        var _ref = _async_to_generator(function(filePath) {
-                            var contents;
-                            return _ts_generator(this, function(_state) {
-                                switch(_state.label){
-                                    case 0:
-                                        return [
-                                            4,
-                                            import_node_fs8.default.promises.readFile(filePath, "utf8")
-                                        ];
-                                    case 1:
-                                        contents = _state.sent();
-                                        return [
-                                            4,
-                                            import_node_fs8.default.promises.writeFile(filePath, contents.replace("export const dynamic = 'force-dynamic';", ""), "utf8")
-                                        ];
-                                    case 2:
-                                        _state.sent();
-                                        return [
-                                            2
-                                        ];
-                                }
-                            });
-                        });
-                        return function removeForceDynamic(filePath) {
-                            return _ref.apply(this, arguments);
-                        };
-                    }();
-                    return [
-                        4,
-                        removeForceDynamic(import_node_path10.default.resolve(builtPreviewAppPath, "./src/app/layout.tsx"))
-                    ];
-                case 2:
-                    _state.sent();
+                        spinner.text = "rendering ".concat(template.split("/").pop());
+                        spinner.render();
+                    }
+                    delete require.cache[template];
+                    emailModule = require(template);
                     return [
                         4,
-                        removeForceDynamic(import_node_path10.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"))
+                        emailModule.render(emailModule.reactEmailCreateReactElement(emailModule.default, {}), options)
                     ];
-                case 3:
-                    _state.sent();
+                case 10:
+                    rendered = _state.sent();
+                    htmlPath = template.replace(".cjs", options.plainText ? ".txt" : ".html");
+                    (0, import_node_fs8.writeFileSync)(htmlPath, rendered);
+                    (0, import_node_fs8.unlinkSync)(template);
                     return [
-                        4,
-                        import_node_fs8.default.promises.appendFile(import_node_path10.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport function generateStaticParams() { \n  return Promise.resolve(\n    ".concat(JSON.stringify(parameters), "\n  );\n}"), "utf8")
+                        3,
+                        12
                     ];
-                case 4:
-                    _state.sent();
+                case 11:
+                    exception1 = _state.sent();
+                    if (spinner) {
+                        spinner.stopAndPersist({
+                            symbol: import_log_symbols4.default.error,
+                            text: "failed when rendering ".concat(template.split("/").pop())
+                        });
+                    }
+                    console.error(exception1);
+                    process.exit(1);
                     return [
-                        2
+                        3,
+                        12
                     ];
-            }
-        });
-    });
-    return function forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath) {
-        return _ref.apply(this, arguments);
-    };
-}();
-var updatePackageJson = function() {
-    var _ref = _async_to_generator(function(builtPreviewAppPath) {
-        var packageJsonPath, packageJson, _;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    packageJsonPath = import_node_path10.default.resolve(builtPreviewAppPath, "./package.json");
-                    _ = JSON.parse;
+                case 12:
+                    _iteratorAbruptCompletion = false;
                     return [
-                        4,
-                        import_node_fs8.default.promises.readFile(packageJsonPath, "utf8")
+                        3,
+                        7
                     ];
-                case 1:
-                    packageJson = _.apply(JSON, [
-                        _state.sent()
-                    ]);
-                    packageJson.scripts.build = "next build";
-                    packageJson.scripts.start = "next start";
-                    packageJson.name = "preview-server";
-                    delete packageJson.devDependencies["@react-email/render"];
-                    delete packageJson.devDependencies["@react-email/components"];
+                case 13:
                     return [
-                        4,
-                        import_node_fs8.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
+                        3,
+                        20
                     ];
-                case 2:
-                    _state.sent();
+                case 14:
+                    err = _state.sent();
+                    _didIteratorError = true;
+                    _iteratorError = err;
                     return [
-                        2
+                        3,
+                        20
                     ];
-            }
-        });
-    });
-    return function updatePackageJson(builtPreviewAppPath) {
-        return _ref.apply(this, arguments);
-    };
-}();
-var npmInstall = function() {
-    var _ref = _async_to_generator(function(builtPreviewAppPath, packageManager) {
-        return _ts_generator(this, function(_state) {
-            return [
-                2,
-                new Promise(function(resolve, reject) {
-                    var childProc = (0, import_node_child_process.spawn)(packageManager, [
-                        "install",
-                        "--silent",
-                        "--include=dev"
-                    ], {
-                        cwd: builtPreviewAppPath,
-                        shell: true
-                    });
-                    childProc.stdout.pipe(process.stdout);
-                    childProc.stderr.pipe(process.stderr);
-                    childProc.on("close", function(code) {
-                        if (code === 0) {
-                            resolve();
-                        } else {
-                            reject(new Error("Unable to install the dependencies and it exited with code: ".concat(code)));
-                        }
-                    });
-                })
-            ];
-        });
-    });
-    return function npmInstall(builtPreviewAppPath, packageManager) {
-        return _ref.apply(this, arguments);
-    };
-}();
-var build2 = function() {
-    var _ref = _async_to_generator(function(param) {
-        var emailsDirRelativePath, packageManager, spinner, emailsDirPath, staticPath, builtPreviewAppPath, builtStaticDirectory, error;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    emailsDirRelativePath = param.dir, packageManager = param.packageManager;
-                    _state.label = 1;
-                case 1:
+                case 15:
                     _state.trys.push([
-                        1,
-                        12,
+                        15,
                         ,
-                        13
+                        18,
+                        19
                     ]);
-                    spinner = (0, import_ora3.default)({
-                        text: "Starting build process...",
-                        prefixText: "  "
-                    }).start();
-                    registerSpinnerAutostopping(spinner);
-                    spinner.text = "Checking if ".concat(emailsDirRelativePath, " folder exists");
-                    if (!import_node_fs8.default.existsSync(emailsDirRelativePath)) {
-                        process.exit(1);
-                    }
-                    emailsDirPath = import_node_path10.default.join(process.cwd(), emailsDirRelativePath);
-                    staticPath = import_node_path10.default.join(emailsDirPath, "static");
-                    builtPreviewAppPath = import_node_path10.default.join(process.cwd(), ".react-email");
-                    if (!import_node_fs8.default.existsSync(builtPreviewAppPath)) return [
+                    if (!(_iteratorAbruptCompletion && _iterator.return != null)) return [
                         3,
-                        3
+                        17
                     ];
-                    spinner.text = "Deleting pre-existing `.react-email` folder";
                     return [
                         4,
-                        import_node_fs8.default.promises.rm(builtPreviewAppPath, {
-                            recursive: true
-                        })
+                        _iterator.return()
                     ];
-                case 2:
+                case 16:
                     _state.sent();
-                    _state.label = 3;
-                case 3:
-                    spinner.text = "Copying preview app from CLI to `.react-email`";
+                    _state.label = 17;
+                case 17:
                     return [
-                        4,
-                        import_node_fs8.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
-                            recursive: true,
-                            filter: function(source) {
-                                return !/(\/|\\)cli(\/|\\)?/.test(source) && !/(\/|\\)\.next(\/|\\)?/.test(source) && !/(\/|\\)\.turbo(\/|\\)?/.test(source) && !/(\/|\\)node_modules(\/|\\)?$/.test(source);
-                            }
-                        })
-                    ];
-                case 4:
-                    _state.sent();
-                    if (!import_node_fs8.default.existsSync(staticPath)) return [
                         3,
-                        6
+                        19
                     ];
-                    spinner.text = "Copying `static` folder into `.react-email/public/static`";
-                    builtStaticDirectory = import_node_path10.default.resolve(builtPreviewAppPath, "./public/static");
+                case 18:
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
                     return [
-                        4,
-                        import_node_fs8.default.promises.cp(staticPath, builtStaticDirectory, {
-                            recursive: true
-                        })
+                        7
                     ];
-                case 5:
-                    _state.sent();
-                    _state.label = 6;
-                case 6:
-                    spinner.text = "Setting Next environment variables for preview app to work properly";
+                case 19:
                     return [
-                        4,
-                        setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath)
+                        7
                     ];
-                case 7:
-                    _state.sent();
-                    spinner.text = "Setting server side generation for the email preview pages";
-                    return [
-                        4,
-                        forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath)
+                case 20:
+                    if (spinner) {
+                        spinner.succeed("Rendered all files");
+                        spinner.text = "Copying static files";
+                        spinner.render();
+                    }
+                    staticDirectoryPath = import_node_path10.default.join(emailsDirectoryPath, "static");
+                    if (!import_node_fs8.default.existsSync(staticDirectoryPath)) return [
+                        3,
+                        25
                     ];
-                case 8:
-                    _state.sent();
-                    spinner.text = "Updating package.json's build and start scripts";
-                    return [
-                        4,
-                        updatePackageJson(builtPreviewAppPath)
+                    pathToDumpStaticFilesInto = import_node_path10.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
+                    if (!import_node_fs8.default.existsSync(pathToDumpStaticFilesInto)) return [
+                        3,
+                        22
                     ];
-                case 9:
-                    _state.sent();
-                    spinner.text = "Installing dependencies on `.react-email`";
                     return [
                         4,
-                        npmInstall(builtPreviewAppPath, packageManager)
+                        import_node_fs8.default.promises.rm(pathToDumpStaticFilesInto, {
+                            recursive: true
+                        })
                     ];
-                case 10:
+                case 21:
                     _state.sent();
-                    spinner.stopAndPersist({
-                        text: "Successfully prepared `.react-email` for `next build`",
-                        symbol: import_log_symbols4.default.success
-                    });
+                    _state.label = 22;
+                case 22:
+                    _state.trys.push([
+                        22,
+                        24,
+                        ,
+                        25
+                    ]);
                     return [
                         4,
-                        buildPreviewApp(builtPreviewAppPath)
+                        import_node_fs8.default.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
+                            recursive: true
+                        })
                     ];
-                case 11:
+                case 23:
                     _state.sent();
                     return [
                         3,
-                        13
+                        25
                     ];
-                case 12:
-                    error = _state.sent();
-                    console.log(error);
+                case 24:
+                    exception2 = _state.sent();
+                    console.error(exception2);
+                    if (spinner) {
+                        spinner.stopAndPersist({
+                            symbol: import_log_symbols4.default.error,
+                            text: "Failed to copy static files"
+                        });
+                    }
+                    console.error("Something went wrong while copying the file to ".concat(pathToWhereEmailMarkupShouldBeDumped, "/static, ").concat(exception2));
                     process.exit(1);
                     return [
                         3,
-                        13
+                        25
                     ];
-                case 13:
+                case 25:
+                    if (!(spinner && !options.silent)) return [
+                        3,
+                        27
+                    ];
+                    spinner.succeed();
+                    return [
+                        4,
+                        tree(pathToWhereEmailMarkupShouldBeDumped, 4)
+                    ];
+                case 26:
+                    fileTree = _state.sent();
+                    console.log(fileTree);
+                    spinner.stopAndPersist({
+                        symbol: import_log_symbols4.default.success,
+                        text: "Successfully exported emails"
+                    });
+                    _state.label = 27;
+                case 27:
                     return [
                         2
                     ];
             }
         });
     });
-    return function build2(_) {
+    return function exportTemplates(pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) {
         return _ref.apply(this, arguments);
     };
 }();
 // src/cli/commands/start.ts
+var import_node_child_process2 = require("child_process");
 var import_node_fs9 = __toESM(require("fs"));
 var import_node_path11 = __toESM(require("path"));
-var import_node_child_process2 = require("child_process");
 var start = function() {
     var _ref = _async_to_generator(function() {
         var usersProjectLocation, builtPreviewPath, nextStart;
@@ -2766,7 +2771,7 @@ var start = function() {
 var PACKAGE_NAME = "react-email";
 import_commander.program.name(PACKAGE_NAME).description("A live preview of your emails right in your browser").version(package_default.version);
 import_commander.program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").action(dev);
-import_commander.program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --packageManager <name>", "Package name to use on installation on `.react-email`", "npm").action(build2);
+import_commander.program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --packageManager <name>", "Package name to use on installation on `.react-email`", "npm").action(build);
 import_commander.program.command("start").description('Runs the built preview app that is inside of ".react-email"').action(start);
 import_commander.program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-s, --silent", "To, or not to show a spinner with process information", false).action(function(param) {
     var outDir = param.outDir, pretty = param.pretty, plainText = param.plainText, silent = param.silent, srcDir = param.dir;