react-email 2.1.3 → 2.1.4

package/cli/index.js

@@ -340,7 +340,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.1.3",
+    version: "2.1.4",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -367,7 +367,8 @@ var package_default = {
         node: ">=18.0.0"
     },
     dependencies: {
-        "@babel/parser": "7.24.1",
+        "@babel/core": "7.24.5",
+        "@babel/parser": "7.24.5",
         "@radix-ui/colors": "1.0.1",
         "@radix-ui/react-collapsible": "1.0.3",
         "@radix-ui/react-popover": "1.0.7",
@@ -379,7 +380,6 @@ var package_default = {
         "@types/react-dom": "^18.2.0",
         "@types/webpack": "5.28.5",
         autoprefixer: "10.4.14",
-        "babel-walk": "3.0.0",
         chalk: "4.1.2",
         chokidar: "3.5.3",
         clsx: "2.1.0",
@@ -410,8 +410,9 @@ var package_default = {
         typescript: "5.1.6"
     },
     devDependencies: {
-        "@react-email/components": "0.0.18",
-        "@react-email/render": "0.0.14",
+        "@react-email/components": "0.0.19",
+        "@react-email/render": "0.0.15",
+        "@types/babel__core": "7.20.5",
         "@types/fs-extra": "11.0.1",
         "@types/mime-types": "2.1.4",
         "@types/node": "18.0.0",
@@ -570,31 +571,16 @@ var tree = function() {
     };
 }();
 // src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-var import_node_path3 = __toESM(require("path"));
+var import_node_path5 = __toESM(require("path"));
 var import_socket = require("socket.io");
 var import_chokidar = require("chokidar");
 var import_debounce = __toESM(require("debounce"));
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
-var import_node_path2 = __toESM(require("path"));
-var import_node_fs2 = require("fs");
+var import_node_path4 = __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 walk = __toESM(require("babel-walk"));
-var importVisitor = walk.simple({
-    ImportDeclaration: function ImportDeclaration(node, importedPaths) {
-        importedPaths.push(node.source.value);
-    },
-    CallExpression: function CallExpression(node, importedPaths) {
-        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);
-                }
-            }
-        }
-    }
-});
 var getImportedModules = function(contents) {
     var importedPaths = [];
     var parsedContents = (0, import_parser.parse)(contents, {
@@ -606,9 +592,282 @@ var getImportedModules = function(contents) {
             "typescript"
         ]
     });
-    importVisitor(parsedContents, importedPaths);
+    (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;
 };
+// src/cli/utils/preview/start-dev-server.ts
+var import_node_path3 = __toESM(require("path"));
+var import_node_http = __toESM(require("http"));
+var import_node_url = __toESM(require("url"));
+var import_next = __toESM(require("next"));
+var import_ora = __toESM(require("ora"));
+var import_log_symbols = __toESM(require("log-symbols"));
+var import_chalk = __toESM(require("chalk"));
+// src/cli/utils/close-ora-on-sigint.ts
+var closeOraOnSIGNIT = function(spinner) {
+    process.on("SIGINT", function() {
+        spinner.stop();
+    });
+};
+// src/cli/utils/preview/serve-static-file.ts
+var import_node_path2 = __toESM(require("path"));
+var import_node_fs2 = require("fs");
+var import_mime_types = require("mime-types");
+var serveStaticFile = function() {
+    var _ref = _async_to_generator(function(res, parsedUrl, staticDirRelativePath) {
+        var staticBaseDir, pathname, ext, fileAbsolutePath, fileHandle, fileData, exception;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    staticBaseDir = import_node_path2.default.join(process.cwd(), staticDirRelativePath);
+                    pathname = parsedUrl.pathname;
+                    ext = import_node_path2.default.parse(pathname).ext;
+                    fileAbsolutePath = import_node_path2.default.join(staticBaseDir, pathname);
+                    return [
+                        4,
+                        import_node_fs2.promises.open(fileAbsolutePath, "r")
+                    ];
+                case 1:
+                    fileHandle = _state.sent();
+                    _state.label = 2;
+                case 2:
+                    _state.trys.push([
+                        2,
+                        4,
+                        5,
+                        6
+                    ]);
+                    return [
+                        4,
+                        import_node_fs2.promises.readFile(fileHandle)
+                    ];
+                case 3:
+                    fileData = _state.sent();
+                    res.setHeader("Content-type", (0, import_mime_types.lookup)(ext) || "text/plain");
+                    res.end(fileData);
+                    return [
+                        3,
+                        6
+                    ];
+                case 4:
+                    exception = _state.sent();
+                    console.error("Could not read file at ".concat(fileAbsolutePath, " to be served, here's the exception:"), exception);
+                    res.statusCode = 500;
+                    res.end("Could not read file to be served! Check your terminal for more information.");
+                    return [
+                        3,
+                        6
+                    ];
+                case 5:
+                    fileHandle.close();
+                    return [
+                        7
+                    ];
+                case 6:
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return function serveStaticFile(res, parsedUrl, staticDirRelativePath) {
+        return _ref.apply(this, arguments);
+    };
+}();
+// src/cli/utils/preview/get-env-variables-for-preview-app.ts
+var import_path = __toESM(require("path"));
+var getEnvVariablesForPreviewApp = function(relativePathToEmailsDirectory, cliPackageLocation, cwd) {
+    return {
+        NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
+        NEXT_PUBLIC_CLI_PACKAGE_LOCATION: cliPackageLocation,
+        NEXT_PUBLIC_OS_PATH_SEPARATOR: import_path.default.sep,
+        NEXT_PUBLIC_USER_PROJECT_LOCATION: cwd
+    };
+};
+// src/cli/utils/preview/start-dev-server.ts
+var devServer;
+var safeAsyncServerListen = function(server, port) {
+    return new Promise(function(resolve) {
+        server.listen(port, function() {
+            resolve({
+                portAlreadyInUse: false
+            });
+        });
+        server.on("error", function(e) {
+            if (e.code === "EADDRINUSE") {
+                resolve({
+                    portAlreadyInUse: true
+                });
+            }
+        });
+    });
+};
+var isRunningBuilt = __filename.endsWith(import_node_path3.default.join("cli", "index.js"));
+var cliPacakgeLocation = isRunningBuilt ? import_node_path3.default.resolve(__dirname, "..") : import_node_path3.default.resolve(__dirname, "../../../..");
+var startDevServer = function() {
+    var _ref = _async_to_generator(function(emailsDirRelativePath, staticBaseDirRelativePath, port) {
+        var portAlreadyInUse, nextPortToTry, spinner, timeBeforeNextReady, app, isNextReady, nextReadyPromise, nextHandleRequest, secondsToNextReady;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    devServer = import_node_http.default.createServer(function(req, res) {
+                        if (!req.url) {
+                            res.end(404);
+                            return;
+                        }
+                        var parsedUrl = import_node_url.default.parse(req.url, true);
+                        res.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");
+                        res.setHeader("Pragma", "no-cache");
+                        res.setHeader("Expires", "-1");
+                        try {
+                            if (parsedUrl.path && parsedUrl.path.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
+                                void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
+                            } else if (!isNextReady) {
+                                void nextReadyPromise.then(function() {
+                                    return nextHandleRequest === null || nextHandleRequest === void 0 ? void 0 : nextHandleRequest(req, res, parsedUrl);
+                                });
+                            } else {
+                                void (nextHandleRequest === null || nextHandleRequest === void 0 ? void 0 : nextHandleRequest(req, res, parsedUrl));
+                            }
+                        } catch (e) {
+                            console.error("caught error", e);
+                            res.writeHead(500);
+                            res.end();
+                        }
+                    });
+                    return [
+                        4,
+                        safeAsyncServerListen(devServer, port)
+                    ];
+                case 1:
+                    portAlreadyInUse = _state.sent().portAlreadyInUse;
+                    if (!portAlreadyInUse) {
+                        console.log(import_chalk.default.greenBright("    React Email ".concat(package_default.version)));
+                        console.log("    Running preview at:          http://localhost:".concat(port, "\n"));
+                    } else {
+                        nextPortToTry = port + 1;
+                        console.warn(" ".concat(import_log_symbols.default.warning, " Port ").concat(port, " is already in use, trying ").concat(nextPortToTry));
+                        return [
+                            2,
+                            startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry)
+                        ];
+                    }
+                    devServer.on("close", /*#__PURE__*/ _async_to_generator(function() {
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    return [
+                                        4,
+                                        app.close()
+                                    ];
+                                case 1:
+                                    _state.sent();
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    }));
+                    devServer.on("error", function(e) {
+                        console.error(" ".concat(import_log_symbols.default.error, " preview server error: "), JSON.stringify(e));
+                        process.exit(1);
+                    });
+                    spinner = (0, import_ora.default)({
+                        text: "Getting react-email preview server ready...\n",
+                        prefixText: " "
+                    }).start();
+                    closeOraOnSIGNIT(spinner);
+                    timeBeforeNextReady = performance.now();
+                    process.env = _object_spread({}, process.env, getEnvVariablesForPreviewApp(// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+                    import_node_path3.default.normalize(emailsDirRelativePath), cliPacakgeLocation, process.cwd()));
+                    app = (0, import_next.default)({
+                        // passing in env here does not get the environment variables there
+                        dev: true,
+                        hostname: "localhost",
+                        port: port,
+                        dir: cliPacakgeLocation
+                    });
+                    isNextReady = false;
+                    nextReadyPromise = app.prepare();
+                    return [
+                        4,
+                        nextReadyPromise
+                    ];
+                case 2:
+                    _state.sent();
+                    isNextReady = true;
+                    nextHandleRequest = app.getRequestHandler();
+                    secondsToNextReady = ((performance.now() - timeBeforeNextReady) / 1e3).toFixed(1);
+                    spinner.stopAndPersist({
+                        text: "Ready in ".concat(secondsToNextReady, "s\n"),
+                        symbol: import_log_symbols.default.success
+                    });
+                    return [
+                        2,
+                        devServer
+                    ];
+            }
+        });
+    });
+    return function startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, port) {
+        return _ref.apply(this, arguments);
+    };
+}();
+var makeExitHandler = function(options) {
+    return function(_codeOrSignal) {
+        if (typeof devServer !== "undefined") {
+            console.log("\nshutting down dev server");
+            devServer.close();
+            devServer = void 0;
+        }
+        if (options === null || options === void 0 ? void 0 : options.shouldKillProcess) {
+            process.exit(options.killWithErrorCode ? 1 : 0);
+        }
+    };
+};
+process.on("exit", makeExitHandler());
+process.on("SIGINT", makeExitHandler({
+    shouldKillProcess: true,
+    killWithErrorCode: false
+}));
+process.on("SIGUSR1", makeExitHandler({
+    shouldKillProcess: true,
+    killWithErrorCode: false
+}));
+process.on("SIGUSR2", makeExitHandler({
+    shouldKillProcess: true,
+    killWithErrorCode: false
+}));
+process.on("uncaughtException", makeExitHandler({
+    shouldKillProcess: true,
+    killWithErrorCode: true
+}));
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 var readAllFilesInsideDirectory = function() {
     var _ref = _async_to_generator(function(directory) {
@@ -619,7 +878,7 @@ var readAllFilesInsideDirectory = function() {
                     allFilePaths = [];
                     return [
                         4,
-                        import_node_fs2.promises.readdir(directory, {
+                        import_node_fs3.promises.readdir(directory, {
                             withFileTypes: true
                         })
                     ];
@@ -648,7 +907,7 @@ var readAllFilesInsideDirectory = function() {
                     ];
                     _value = _step.value;
                     dirent = _value;
-                    pathToDirent = import_node_path2.default.join(directory, dirent.name);
+                    pathToDirent = import_node_path4.default.join(directory, dirent.name);
                     if (!dirent.isDirectory()) return [
                         3,
                         6
@@ -735,7 +994,7 @@ var readAllFilesInsideDirectory = function() {
     };
 }();
 var isJavascriptModule = function(filePath) {
-    var extensionName = import_node_path2.default.extname(filePath);
+    var extensionName = import_node_path4.default.extname(filePath);
     return [
         ".js",
         ".ts",
@@ -745,6 +1004,21 @@ var isJavascriptModule = function(filePath) {
         ".cjs"
     ].includes(extensionName);
 };
+var checkFileExtensionsUntilItExists = function(pathWithoutExtension) {
+    if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".ts"))) {
+        return "".concat(pathWithoutExtension, ".ts");
+    } else if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".tsx"))) {
+        return "".concat(pathWithoutExtension, ".tsx");
+    } else if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".js"))) {
+        return "".concat(pathWithoutExtension, ".js");
+    } else if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".jsx"))) {
+        return "".concat(pathWithoutExtension, ".jsx");
+    } else if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".mjs"))) {
+        return "".concat(pathWithoutExtension, ".mjs");
+    } else if ((0, import_node_fs3.existsSync)("".concat(pathWithoutExtension, ".cjs"))) {
+        return "".concat(pathWithoutExtension, ".cjs");
+    }
+};
 var createDependencyGraph = function() {
     var _ref = _async_to_generator(function(directory) {
         var filePaths, modulePaths, graph, getDependencyPaths, updateModuleDependenciesInGraph, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, filePath, err, removeModuleFromGraph;
@@ -777,23 +1051,41 @@ var createDependencyGraph = function() {
                                     case 0:
                                         return [
                                             4,
-                                            import_node_fs2.promises.readFile(filePath, "utf8")
+                                            import_node_fs3.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_path2.default.isAbsolute(dependencyPath)) {
-                                                var pathToDependencyFromDirectory = import_node_path2.default.resolve(/*
+                                            if (!isModulePath && !import_node_path4.default.isAbsolute(dependencyPath)) {
+                                                var pathToDependencyFromDirectory = import_node_path4.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_path2.default.dirname(filePath), dependencyPath);
+                        */ import_node_path4.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 (!isRunningBuilt) {
+                                                        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)) {
-                                                    pathToDependencyFromDirectory = "".concat(pathToDependencyFromDirectory).concat(import_node_path2.default.extname(filePath));
+                                                    var pathWithExtension1 = checkFileExtensionsUntilItExists(pathToDependencyFromDirectory);
+                                                    if (pathWithExtension1) {
+                                                        pathToDependencyFromDirectory = pathWithExtension1;
+                                                    } else if (!isRunningBuilt) {
+                                                        console.warn("Could not determine the file extension for the file at ".concat(pathWithExtension1));
+                                                    }
                                                 }
                                                 return pathToDependencyFromDirectory;
                                             } else {
@@ -801,10 +1093,10 @@ var createDependencyGraph = function() {
                                             }
                                         });
                                         moduleDependencies = importedPathsRelativeToDirectory.filter(function(dependencyPath) {
-                                            return !dependencyPath.startsWith(".") && !import_node_path2.default.isAbsolute(dependencyPath);
+                                            return !dependencyPath.startsWith(".") && !import_node_path4.default.isAbsolute(dependencyPath);
                                         });
                                         nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(function(dependencyPath) {
-                                            return dependencyPath.startsWith(".") || import_node_path2.default.isAbsolute(dependencyPath);
+                                            return dependencyPath.startsWith(".") || import_node_path4.default.isAbsolute(dependencyPath);
                                         });
                                         return [
                                             2,
@@ -1274,363 +1566,163 @@ var createDependencyGraph = function() {
                                                 ];
                                         }
                                     });
-                                });
-                                return function(event, pathToModified) {
-                                    return _ref.apply(this, arguments);
-                                };
-                            }()
-                        ]
-                    ];
-            }
-        });
-    });
-    return function createDependencyGraph(directory) {
-        return _ref.apply(this, arguments);
-    };
-}();
-// src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-var setupHotreloading = function() {
-    var _ref = _async_to_generator(function(devServer2, emailDirRelativePath) {
-        var clients, io, watcher, exit, changes, reload, absolutePathToEmailsDirectory, _ref, dependencyGraph, updateDependencyGraph;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    clients = [];
-                    io = new import_socket.Server(devServer2);
-                    io.on("connection", function(client) {
-                        clients.push(client);
-                        client.on("disconnect", function() {
-                            clients = clients.filter(function(item) {
-                                return item !== client;
-                            });
-                        });
-                    });
-                    watcher = (0, import_chokidar.watch)(emailDirRelativePath, {
-                        ignoreInitial: true,
-                        cwd: import_node_path3.default.resolve(process.cwd()),
-                        // eslint-disable-next-line prefer-named-capture-group
-                        ignored: /(^|[/\\])\../
-                    });
-                    exit = function() {
-                        void watcher.close();
-                    };
-                    process.on("SIGINT", exit);
-                    process.on("uncaughtException", exit);
-                    changes = [];
-                    reload = (0, import_debounce.default)(function() {
-                        clients.forEach(function(client) {
-                            client.emit("reload", changes);
-                        });
-                        changes = [];
-                    }, 150);
-                    absolutePathToEmailsDirectory = import_node_path3.default.resolve(process.cwd(), emailDirRelativePath);
-                    return [
-                        4,
-                        createDependencyGraph(absolutePathToEmailsDirectory)
-                    ];
-                case 1:
-                    _ref = _sliced_to_array.apply(void 0, [
-                        _state.sent(),
-                        2
-                    ]), dependencyGraph = _ref[0], updateDependencyGraph = _ref[1];
-                    watcher.on("all", function() {
-                        var _ref = _async_to_generator(function(event, relativePathToChangeTarget) {
-                            var _changes, _dependencyGraph_pathToChangeTarget, file, pathToChangeTarget, _dependencyGraph_pathToChangeTarget_dependentPaths;
-                            return _ts_generator(this, function(_state) {
-                                switch(_state.label){
-                                    case 0:
-                                        file = relativePathToChangeTarget.split(import_node_path3.default.sep);
-                                        if (file.length === 0) {
-                                            return [
-                                                2
-                                            ];
-                                        }
-                                        pathToChangeTarget = import_node_path3.default.resolve(process.cwd(), relativePathToChangeTarget);
-                                        return [
-                                            4,
-                                            updateDependencyGraph(event, pathToChangeTarget)
-                                        ];
-                                    case 1:
-                                        _state.sent();
-                                        changes.push({
-                                            event: event,
-                                            filename: relativePathToChangeTarget
-                                        });
-                                        (_changes = changes).push.apply(_changes, _to_consumable_array(((_dependencyGraph_pathToChangeTarget_dependentPaths = (_dependencyGraph_pathToChangeTarget = dependencyGraph[pathToChangeTarget]) === null || _dependencyGraph_pathToChangeTarget === void 0 ? void 0 : _dependencyGraph_pathToChangeTarget.dependentPaths) !== null && _dependencyGraph_pathToChangeTarget_dependentPaths !== void 0 ? _dependencyGraph_pathToChangeTarget_dependentPaths : []).map(function(dependentPath) {
-                                            return {
-                                                event: "change",
-                                                filename: import_node_path3.default.relative(absolutePathToEmailsDirectory, dependentPath)
-                                            };
-                                        })));
-                                        reload();
-                                        return [
-                                            2
-                                        ];
-                                }
-                            });
-                        });
-                        return function(event, relativePathToChangeTarget) {
-                            return _ref.apply(this, arguments);
-                        };
-                    }());
-                    return [
-                        2,
-                        watcher
-                    ];
-            }
-        });
-    });
-    return function setupHotreloading(devServer2, emailDirRelativePath) {
-        return _ref.apply(this, arguments);
-    };
-}();
-// src/cli/utils/preview/start-dev-server.ts
-var import_node_path5 = __toESM(require("path"));
-var import_node_http = __toESM(require("http"));
-var import_node_url = __toESM(require("url"));
-var import_next = __toESM(require("next"));
-var import_ora = __toESM(require("ora"));
-var import_log_symbols = __toESM(require("log-symbols"));
-var import_chalk = __toESM(require("chalk"));
-// src/cli/utils/close-ora-on-sigint.ts
-var closeOraOnSIGNIT = function(spinner) {
-    process.on("SIGINT", function() {
-        spinner.stop();
-    });
-};
-// src/cli/utils/preview/serve-static-file.ts
-var import_node_path4 = __toESM(require("path"));
-var import_node_fs3 = require("fs");
-var import_mime_types = require("mime-types");
-var serveStaticFile = function() {
-    var _ref = _async_to_generator(function(res, parsedUrl, staticDirRelativePath) {
-        var staticBaseDir, pathname, ext, fileAbsolutePath, fileHandle, fileData, exception;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    staticBaseDir = import_node_path4.default.join(process.cwd(), staticDirRelativePath);
-                    pathname = parsedUrl.pathname;
-                    ext = import_node_path4.default.parse(pathname).ext;
-                    fileAbsolutePath = import_node_path4.default.join(staticBaseDir, pathname);
-                    return [
-                        4,
-                        import_node_fs3.promises.open(fileAbsolutePath, "r")
-                    ];
-                case 1:
-                    fileHandle = _state.sent();
-                    _state.label = 2;
-                case 2:
-                    _state.trys.push([
-                        2,
-                        4,
-                        5,
-                        6
-                    ]);
-                    return [
-                        4,
-                        import_node_fs3.promises.readFile(fileHandle)
-                    ];
-                case 3:
-                    fileData = _state.sent();
-                    res.setHeader("Content-type", (0, import_mime_types.lookup)(ext) || "text/plain");
-                    res.end(fileData);
-                    return [
-                        3,
-                        6
-                    ];
-                case 4:
-                    exception = _state.sent();
-                    console.error("Could not read file at ".concat(fileAbsolutePath, " to be served, here's the exception:"), exception);
-                    res.statusCode = 500;
-                    res.end("Could not read file to be served! Check your terminal for more information.");
-                    return [
-                        3,
-                        6
-                    ];
-                case 5:
-                    fileHandle.close();
-                    return [
-                        7
-                    ];
-                case 6:
-                    return [
-                        2
+                                });
+                                return function(event, pathToModified) {
+                                    return _ref.apply(this, arguments);
+                                };
+                            }()
+                        ]
                     ];
             }
         });
     });
-    return function serveStaticFile(res, parsedUrl, staticDirRelativePath) {
+    return function createDependencyGraph(directory) {
         return _ref.apply(this, arguments);
     };
 }();
-// src/cli/utils/preview/get-env-variables-for-preview-app.ts
-var import_path = __toESM(require("path"));
-var getEnvVariablesForPreviewApp = function(relativePathToEmailsDirectory, cliPackageLocation, cwd) {
-    return {
-        NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-        NEXT_PUBLIC_CLI_PACKAGE_LOCATION: cliPackageLocation,
-        NEXT_PUBLIC_OS_PATH_SEPARATOR: import_path.default.sep,
-        NEXT_PUBLIC_USER_PROJECT_LOCATION: cwd
-    };
-};
-// src/cli/utils/preview/start-dev-server.ts
-var devServer;
-var safeAsyncServerListen = function(server, port) {
-    return new Promise(function(resolve) {
-        server.listen(port, function() {
-            resolve({
-                portAlreadyInUse: false
-            });
-        });
-        server.on("error", function(e) {
-            if (e.code === "EADDRINUSE") {
-                resolve({
-                    portAlreadyInUse: true
-                });
-            }
-        });
-    });
-};
-var isRunningBuilt = __filename.endsWith(import_node_path5.default.join("cli", "index.js"));
-var cliPacakgeLocation = isRunningBuilt ? import_node_path5.default.resolve(__dirname, "..") : import_node_path5.default.resolve(__dirname, "../../../..");
-var startDevServer = function() {
-    var _ref = _async_to_generator(function(emailsDirRelativePath, staticBaseDirRelativePath, port) {
-        var portAlreadyInUse, nextPortToTry, spinner, timeBeforeNextReady, app, isNextReady, nextReadyPromise, nextHandleRequest, secondsToNextReady;
+// src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
+var setupHotreloading = function() {
+    var _ref = _async_to_generator(function(devServer2, emailDirRelativePath) {
+        var clients, io, watcher, exit, changes, reload, absolutePathToEmailsDirectory, _ref, dependencyGraph, updateDependencyGraph, resolveDependentsOf;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    devServer = import_node_http.default.createServer(function(req, res) {
-                        if (!req.url) {
-                            res.end(404);
-                            return;
-                        }
-                        var parsedUrl = import_node_url.default.parse(req.url, true);
-                        res.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");
-                        res.setHeader("Pragma", "no-cache");
-                        res.setHeader("Expires", "-1");
-                        try {
-                            if (parsedUrl.path && parsedUrl.path.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
-                                void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
-                            } else if (!isNextReady) {
-                                void nextReadyPromise.then(function() {
-                                    return nextHandleRequest === null || nextHandleRequest === void 0 ? void 0 : nextHandleRequest(req, res, parsedUrl);
-                                });
-                            } else {
-                                void (nextHandleRequest === null || nextHandleRequest === void 0 ? void 0 : nextHandleRequest(req, res, parsedUrl));
-                            }
-                        } catch (e) {
-                            console.error("caught error", e);
-                            res.writeHead(500);
-                            res.end();
-                        }
+                    clients = [];
+                    io = new import_socket.Server(devServer2);
+                    io.on("connection", function(client) {
+                        clients.push(client);
+                        client.on("disconnect", function() {
+                            clients = clients.filter(function(item) {
+                                return item !== client;
+                            });
+                        });
+                    });
+                    watcher = (0, import_chokidar.watch)(emailDirRelativePath, {
+                        ignoreInitial: true,
+                        cwd: import_node_path5.default.resolve(process.cwd()),
+                        // eslint-disable-next-line prefer-named-capture-group
+                        ignored: /(^|[/\\])\../
                     });
+                    exit = function() {
+                        void watcher.close();
+                    };
+                    process.on("SIGINT", exit);
+                    process.on("uncaughtException", exit);
+                    changes = [];
+                    reload = (0, import_debounce.default)(function() {
+                        clients.forEach(function(client) {
+                            client.emit("reload", changes);
+                        });
+                        changes = [];
+                    }, 150);
+                    absolutePathToEmailsDirectory = import_node_path5.default.resolve(process.cwd(), emailDirRelativePath);
                     return [
                         4,
-                        safeAsyncServerListen(devServer, port)
+                        createDependencyGraph(absolutePathToEmailsDirectory)
                     ];
                 case 1:
-                    portAlreadyInUse = _state.sent().portAlreadyInUse;
-                    if (!portAlreadyInUse) {
-                        console.log(import_chalk.default.greenBright("    React Email ".concat(package_default.version)));
-                        console.log("    Running preview at:          http://localhost:".concat(port, "\n"));
-                    } else {
-                        nextPortToTry = port + 1;
-                        console.warn(" ".concat(import_log_symbols.default.warning, " Port ").concat(port, " is already in use, trying ").concat(nextPortToTry));
-                        return [
-                            2,
-                            startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry)
-                        ];
-                    }
-                    devServer.on("close", /*#__PURE__*/ _async_to_generator(function() {
-                        return _ts_generator(this, function(_state) {
-                            switch(_state.label){
-                                case 0:
-                                    return [
-                                        4,
-                                        app.close()
-                                    ];
-                                case 1:
-                                    _state.sent();
-                                    return [
-                                        2
-                                    ];
+                    _ref = _sliced_to_array.apply(void 0, [
+                        _state.sent(),
+                        2
+                    ]), dependencyGraph = _ref[0], updateDependencyGraph = _ref[1];
+                    resolveDependentsOf = function(pathToChangeTarget) {
+                        var moduleEntry = dependencyGraph[pathToChangeTarget];
+                        var dependentPaths = [];
+                        if (moduleEntry) {
+                            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                            try {
+                                for(var _iterator = moduleEntry.dependentPaths[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                                    var dependentPath = _step.value;
+                                    var _dependentPaths;
+                                    var dependentsOfDependent = resolveDependentsOf(dependentPath);
+                                    (_dependentPaths = dependentPaths).push.apply(_dependentPaths, _to_consumable_array(dependentsOfDependent));
+                                    dependentPaths.push(dependentPath);
+                                }
+                            } catch (err) {
+                                _didIteratorError = true;
+                                _iteratorError = err;
+                            } finally{
+                                try {
+                                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                        _iterator.return();
+                                    }
+                                } finally{
+                                    if (_didIteratorError) {
+                                        throw _iteratorError;
+                                    }
+                                }
                             }
+                        }
+                        return dependentPaths;
+                    };
+                    watcher.on("all", function() {
+                        var _ref = _async_to_generator(function(event, relativePathToChangeTarget) {
+                            var file, pathToChangeTarget, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, dependentPath;
+                            return _ts_generator(this, function(_state) {
+                                switch(_state.label){
+                                    case 0:
+                                        file = relativePathToChangeTarget.split(import_node_path5.default.sep);
+                                        if (file.length === 0) {
+                                            return [
+                                                2
+                                            ];
+                                        }
+                                        pathToChangeTarget = import_node_path5.default.resolve(process.cwd(), relativePathToChangeTarget);
+                                        return [
+                                            4,
+                                            updateDependencyGraph(event, pathToChangeTarget)
+                                        ];
+                                    case 1:
+                                        _state.sent();
+                                        changes.push({
+                                            event: event,
+                                            filename: relativePathToChangeTarget
+                                        });
+                                        _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                                        try {
+                                            for(_iterator = resolveDependentsOf(pathToChangeTarget)[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                                                dependentPath = _step.value;
+                                                changes.push({
+                                                    event: "change",
+                                                    filename: import_node_path5.default.relative(absolutePathToEmailsDirectory, dependentPath)
+                                                });
+                                            }
+                                        } catch (err) {
+                                            _didIteratorError = true;
+                                            _iteratorError = err;
+                                        } finally{
+                                            try {
+                                                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                                    _iterator.return();
+                                                }
+                                            } finally{
+                                                if (_didIteratorError) {
+                                                    throw _iteratorError;
+                                                }
+                                            }
+                                        }
+                                        reload();
+                                        return [
+                                            2
+                                        ];
+                                }
+                            });
                         });
-                    }));
-                    devServer.on("error", function(e) {
-                        console.error(" ".concat(import_log_symbols.default.error, " preview server error: "), JSON.stringify(e));
-                        process.exit(1);
-                    });
-                    spinner = (0, import_ora.default)({
-                        text: "Getting react-email preview server ready...\n",
-                        prefixText: " "
-                    }).start();
-                    closeOraOnSIGNIT(spinner);
-                    timeBeforeNextReady = performance.now();
-                    process.env = _object_spread({}, process.env, getEnvVariablesForPreviewApp(// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-                    import_node_path5.default.normalize(emailsDirRelativePath), cliPacakgeLocation, process.cwd()));
-                    app = (0, import_next.default)({
-                        // passing in env here does not get the environment variables there
-                        dev: true,
-                        hostname: "localhost",
-                        port: port,
-                        dir: cliPacakgeLocation
-                    });
-                    isNextReady = false;
-                    nextReadyPromise = app.prepare();
-                    return [
-                        4,
-                        nextReadyPromise
-                    ];
-                case 2:
-                    _state.sent();
-                    isNextReady = true;
-                    nextHandleRequest = app.getRequestHandler();
-                    secondsToNextReady = ((performance.now() - timeBeforeNextReady) / 1e3).toFixed(1);
-                    spinner.stopAndPersist({
-                        text: "Ready in ".concat(secondsToNextReady, "s\n"),
-                        symbol: import_log_symbols.default.success
-                    });
+                        return function(event, relativePathToChangeTarget) {
+                            return _ref.apply(this, arguments);
+                        };
+                    }());
                     return [
                         2,
-                        devServer
+                        watcher
                     ];
             }
         });
     });
-    return function startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, port) {
+    return function setupHotreloading(devServer2, emailDirRelativePath) {
         return _ref.apply(this, arguments);
     };
 }();
-var makeExitHandler = function(options) {
-    return function(_codeOrSignal) {
-        if (typeof devServer !== "undefined") {
-            console.log("\nshutting down dev server");
-            devServer.close();
-            devServer = void 0;
-        }
-        if (options === null || options === void 0 ? void 0 : options.shouldKillProcess) {
-            process.exit(options.killWithErrorCode ? 1 : 0);
-        }
-    };
-};
-process.on("exit", makeExitHandler());
-process.on("SIGINT", makeExitHandler({
-    shouldKillProcess: true,
-    killWithErrorCode: false
-}));
-process.on("SIGUSR1", makeExitHandler({
-    shouldKillProcess: true,
-    killWithErrorCode: false
-}));
-process.on("SIGUSR2", makeExitHandler({
-    shouldKillProcess: true,
-    killWithErrorCode: false
-}));
-process.on("uncaughtException", makeExitHandler({
-    shouldKillProcess: true,
-    killWithErrorCode: true
-}));
 // src/cli/commands/dev.ts
 var dev = function() {
     var _ref = _async_to_generator(function(param) {
@@ -1777,12 +1869,17 @@ var getEmailsDirectoryMetadata = function() {
 // src/utils/render-resolver-esbuild-plugin.ts
 var import_node_path7 = __toESM(require("path"));
 var import_node_fs6 = require("fs");
+function escapeStringForRegex(string) {
+    return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+}
 var renderResolver = function(emailTemplates) {
     return {
         name: "render-resolver",
         setup: function(b) {
             b.onLoad({
-                filter: new RegExp(emailTemplates.join("|"))
+                filter: new RegExp(emailTemplates.map(function(emailPath) {
+                    return escapeStringForRegex(emailPath);
+                }).join("|"))
             }, function() {
                 var _ref = _async_to_generator(function(param) {
                     var pathToFile, _tmp, _, _1;