react-email 2.1.0 → 2.1.1-canary.1

package/cli/index.js

@@ -200,6 +200,20 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
+function _ts_values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function() {
+            if (o && i >= o.length) o = void 0;
+            return {
+                value: o && o[i++],
+                done: !o
+            };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -252,7 +266,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.1.0",
+    version: "2.1.1-canary.1",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -280,11 +294,11 @@ var package_default = {
     dependencies: {
         "@radix-ui/colors": "1.0.1",
         "@radix-ui/react-collapsible": "1.0.3",
-        "@radix-ui/react-popover": "1.0.6",
+        "@radix-ui/react-popover": "1.0.7",
         "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-toggle-group": "1.0.4",
         "@radix-ui/react-tooltip": "1.0.6",
-        "@react-email/components": "0.0.15",
+        "@react-email/components": "0.0.16-canary.1",
         "@react-email/render": "0.0.12",
         "@swc/core": "1.3.101",
         "@types/react": "^18.2.0",
@@ -318,7 +332,6 @@ var package_default = {
         "stacktrace-parser": "0.1.10",
         "tailwind-merge": "2.2.0",
         tailwindcss: "3.4.0",
-        "tree-cli": "0.6.7",
         typescript: "5.1.6"
     },
     devDependencies: {
@@ -330,43 +343,158 @@ var package_default = {
         "@vercel/style-guide": "5.1.0",
         eslint: "8.50.0",
         tsup: "7.2.0",
-        tsx: "4.7.0",
+        tsx: "4.7.1",
         vitest: "1.1.3",
         watch: "1.0.2"
     }
 };
 // src/cli/commands/dev.ts
-var import_node_fs2 = __toESM(require("fs"));
+var import_node_fs3 = __toESM(require("fs"));
 // src/cli/utils/tree.ts
-var import_tree_cli = __toESM(require("tree-cli"));
-var tree = function() {
-    var _ref = _async_to_generator(function(dir, depth) {
-        var report;
+var import_node_fs = require("fs");
+var import_node_os = __toESM(require("os"));
+var import_node_path = __toESM(require("path"));
+var SYMBOLS = {
+    BRANCH: "├── ",
+    EMPTY: "",
+    INDENT: "    ",
+    LAST_BRANCH: "└── ",
+    VERTICAL: "│   "
+};
+var getTreeLines = function() {
+    var _ref = _async_to_generator(function(dirPath, depth) {
+        var currentDepth, base, dirFullpath, dirname, lines, dirStat, _loop, childDirents, i;
+        var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 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);
+                    lines = [
+                        dirname
+                    ];
                     return [
                         4,
-                        (0, import_tree_cli.default)({
-                            l: depth,
-                            base: dir
+                        import_node_fs.promises.stat(dirFullpath)
+                    ];
+                case 1:
+                    dirStat = _state.sent();
+                    if (!(dirStat.isDirectory() && currentDepth < depth)) return [
+                        3,
+                        6
+                    ];
+                    _loop = function(i) {
+                        var dirent, isLast, branchingSymbol, verticalSymbol, pathToDirectory, treeLinesForSubDirectory;
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    dirent = childDirents[i];
+                                    isLast = i === childDirents.length - 1;
+                                    branchingSymbol = isLast ? SYMBOLS.LAST_BRANCH : SYMBOLS.BRANCH;
+                                    verticalSymbol = isLast ? SYMBOLS.INDENT : SYMBOLS.VERTICAL;
+                                    if (!dirent.isFile()) return [
+                                        3,
+                                        1
+                                    ];
+                                    lines.push("".concat(branchingSymbol).concat(dirent.name));
+                                    return [
+                                        3,
+                                        3
+                                    ];
+                                case 1:
+                                    pathToDirectory = import_node_path.default.join(dirFullpath, dirent.name);
+                                    return [
+                                        4,
+                                        getTreeLines(pathToDirectory, depth, currentDepth + 1)
+                                    ];
+                                case 2:
+                                    treeLinesForSubDirectory = _state.sent();
+                                    lines = lines.concat(treeLinesForSubDirectory.map(function(line, index) {
+                                        return index === 0 ? "".concat(branchingSymbol).concat(line) : "".concat(verticalSymbol).concat(line);
+                                    }));
+                                    _state.label = 3;
+                                case 3:
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    };
+                    return [
+                        4,
+                        import_node_fs.promises.readdir(dirFullpath, {
+                            withFileTypes: true
                         })
                     ];
+                case 2:
+                    childDirents = _state.sent();
+                    childDirents.sort(function(a, b) {
+                        if (a.isDirectory() && b.isFile()) {
+                            return -1;
+                        } else if (a.isFile() && b.isDirectory()) {
+                            return 1;
+                        }
+                        return b.name > a.name ? -1 : 1;
+                    });
+                    i = 0;
+                    _state.label = 3;
+                case 3:
+                    if (!(i < childDirents.length)) return [
+                        3,
+                        6
+                    ];
+                    return [
+                        5,
+                        _ts_values(_loop(i))
+                    ];
+                case 4:
+                    _state.sent();
+                    _state.label = 5;
+                case 5:
+                    i++;
+                    return [
+                        3,
+                        3
+                    ];
+                case 6:
+                    return [
+                        2,
+                        lines
+                    ];
+            }
+        });
+    });
+    return function getTreeLines(dirPath, depth) {
+        return _ref.apply(this, arguments);
+    };
+}();
+var tree = function() {
+    var _ref = _async_to_generator(function(dirPath, depth) {
+        var lines;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        getTreeLines(dirPath, depth)
+                    ];
                 case 1:
-                    report = _state.sent().report;
+                    lines = _state.sent();
                     return [
                         2,
-                        report
+                        lines.join(import_node_os.default.EOL)
                     ];
             }
         });
     });
-    return function tree(dir, depth) {
+    return function tree(dirPath, depth) {
         return _ref.apply(this, arguments);
     };
 }();
 // src/cli/utils/preview/setup-hot-reloading.ts
-var import_node_path = __toESM(require("path"));
+var import_node_path2 = __toESM(require("path"));
 var import_socket = require("socket.io");
 var import_chokidar = require("chokidar");
 var import_debounce = __toESM(require("debounce"));
@@ -383,7 +511,7 @@ var setupHotreloading = function(devServer2, emailDirRelativePath) {
     });
     var watcher = (0, import_chokidar.watch)(emailDirRelativePath, {
         ignoreInitial: true,
-        cwd: import_node_path.default.resolve(process.cwd()),
+        cwd: import_node_path2.default.resolve(process.cwd()),
         // eslint-disable-next-line prefer-named-capture-group
         ignored: /(^|[/\\])\../
     });
@@ -400,7 +528,7 @@ var setupHotreloading = function(devServer2, emailDirRelativePath) {
         changes = [];
     }, 150);
     watcher.on("all", function(event, filename) {
-        var file = filename.split(import_node_path.default.sep);
+        var file = filename.split(import_node_path2.default.sep);
         if (file.length === 0) {
             return;
         }
@@ -413,7 +541,7 @@ var setupHotreloading = function(devServer2, emailDirRelativePath) {
     return watcher;
 };
 // src/cli/utils/preview/start-dev-server.ts
-var import_node_path3 = __toESM(require("path"));
+var import_node_path4 = __toESM(require("path"));
 var import_node_http = __toESM(require("http"));
 var import_node_url = __toESM(require("url"));
 var import_next = __toESM(require("next"));
@@ -427,8 +555,8 @@ var closeOraOnSIGNIT = function(spinner) {
     });
 };
 // src/cli/utils/preview/serve-static-file.ts
-var import_node_path2 = __toESM(require("path"));
-var import_node_fs = require("fs");
+var import_node_path3 = __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) {
@@ -436,11 +564,11 @@ 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_path3.default.join(process.cwd(), staticDirRelativePath);
                     pathname = parsedUrl.pathname;
-                    ext = import_node_path2.default.parse(pathname).ext;
-                    fileAbsolutePath = import_node_path2.default.join(staticBaseDir, pathname);
-                    doesFileExist = (0, import_node_fs.existsSync)(fileAbsolutePath);
+                    ext = import_node_path3.default.parse(pathname).ext;
+                    fileAbsolutePath = import_node_path3.default.join(staticBaseDir, pathname);
+                    doesFileExist = (0, import_node_fs2.existsSync)(fileAbsolutePath);
                     if (!!doesFileExist) return [
                         3,
                         1
@@ -454,7 +582,7 @@ var serveStaticFile = function() {
                 case 1:
                     return [
                         4,
-                        import_node_fs.promises.stat(fileAbsolutePath)
+                        import_node_fs2.promises.stat(fileAbsolutePath)
                     ];
                 case 2:
                     fileStat = _state.sent();
@@ -463,7 +591,7 @@ var serveStaticFile = function() {
                     }
                     return [
                         4,
-                        import_node_fs.promises.readFile(fileAbsolutePath)
+                        import_node_fs2.promises.readFile(fileAbsolutePath)
                     ];
                 case 3:
                     fileData = _state.sent();
@@ -509,8 +637,8 @@ var safeAsyncServerListen = function(server, port) {
         });
     });
 };
-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 isRunningBuilt = __filename.endsWith(import_node_path4.default.join("cli", "index.js"));
+var cliPacakgeLocation = isRunningBuilt ? import_node_path4.default.resolve(__dirname, "..") : import_node_path4.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;
@@ -585,7 +713,8 @@ var startDevServer = function() {
                     }).start();
                     closeOraOnSIGNIT(spinner);
                     timeBeforeNextReady = performance.now();
-                    process.env = _object_spread({}, process.env, getEnvVariablesForPreviewApp(emailsDirRelativePath, cliPacakgeLocation, process.cwd()));
+                    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_path4.default.normalize(emailsDirRelativePath), cliPacakgeLocation, process.cwd()));
                     app = (0, import_next.default)({
                         // passing in env here does not get the environment variables there
                         dev: true,
@@ -664,7 +793,7 @@ var dev = function() {
                         ,
                         4
                     ]);
-                    if (!import_node_fs2.default.existsSync(emailsDirRelativePath)) {
+                    if (!import_node_fs3.default.existsSync(emailsDirRelativePath)) {
                         throw new Error("Missing ".concat(emailsDirRelativePath, " folder"));
                     }
                     return [
@@ -699,8 +828,8 @@ var dev = function() {
     };
 }();
 // src/cli/commands/export.ts
-var import_node_fs4 = __toESM(require("fs"));
-var import_node_path5 = __toESM(require("path"));
+var import_node_fs5 = __toESM(require("fs"));
+var import_node_path6 = __toESM(require("path"));
 var import_glob = require("glob");
 var import_esbuild = require("esbuild");
 var import_ora2 = __toESM(require("ora"));
@@ -709,18 +838,18 @@ var import_render = require("@react-email/render");
 var import_normalize_path = __toESM(require("normalize-path"));
 var import_shelljs = require("shelljs");
 // src/actions/get-emails-directory-metadata.ts
-var import_node_fs3 = __toESM(require("fs"));
-var import_node_path4 = __toESM(require("path"));
+var import_node_fs4 = __toESM(require("fs"));
+var import_node_path5 = __toESM(require("path"));
 var isFileAnEmail = function(fullPath) {
-    var stat = import_node_fs3.default.statSync(fullPath);
+    var stat = import_node_fs4.default.statSync(fullPath);
     if (stat.isDirectory()) return false;
-    var ext = import_node_path4.default.parse(fullPath).ext;
+    var ext = import_node_path5.default.parse(fullPath).ext;
     if (![
         ".js",
         ".tsx",
         ".jsx"
     ].includes(ext)) return false;
-    var fileContents = import_node_fs3.default.readFileSync(fullPath, "utf8");
+    var fileContents = import_node_fs4.default.readFileSync(fullPath, "utf8");
     return /\bexport\s+default\b/gm.test(fileContents);
 };
 var mergeDirectoriesWithSubDirectories = function(emailsDirectoryMetadata) {
@@ -731,7 +860,7 @@ var mergeDirectoriesWithSubDirectories = function(emailsDirectoryMetadata) {
             subDirectories: onlySubDirectory.subDirectories,
             emailFilenames: onlySubDirectory.emailFilenames,
             absolutePath: onlySubDirectory.absolutePath,
-            directoryName: import_node_path4.default.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
+            directoryName: import_node_path5.default.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
         };
     }
     return currentResultingMergedDirectory;
@@ -742,28 +871,28 @@ var getEmailsDirectoryMetadata = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    if (!import_node_fs3.default.existsSync(absolutePathToEmailsDirectory)) return [
+                    if (!import_node_fs4.default.existsSync(absolutePathToEmailsDirectory)) return [
                         2
                     ];
                     return [
                         4,
-                        import_node_fs3.default.promises.readdir(absolutePathToEmailsDirectory, {
+                        import_node_fs4.default.promises.readdir(absolutePathToEmailsDirectory, {
                             withFileTypes: true
                         })
                     ];
                 case 1:
                     dirents = _state.sent();
                     emailFilenames = dirents.filter(function(dirent) {
-                        return isFileAnEmail(import_node_path4.default.join(absolutePathToEmailsDirectory, dirent.name));
+                        return isFileAnEmail(import_node_path5.default.join(absolutePathToEmailsDirectory, dirent.name));
                     }).map(function(dirent) {
-                        return dirent.name.replace(import_node_path4.default.extname(dirent.name), "");
+                        return dirent.name.replace(import_node_path5.default.extname(dirent.name), "");
                     });
                     return [
                         4,
                         Promise.all(dirents.filter(function(dirent) {
                             return dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static";
                         }).map(function(dirent) {
-                            return getEmailsDirectoryMetadata(import_node_path4.default.join(absolutePathToEmailsDirectory, dirent.name));
+                            return getEmailsDirectoryMetadata(import_node_path5.default.join(absolutePathToEmailsDirectory, dirent.name));
                         }))
                     ];
                 case 2:
@@ -772,7 +901,7 @@ var getEmailsDirectoryMetadata = function() {
                         2,
                         mergeDirectoriesWithSubDirectories({
                             absolutePath: absolutePathToEmailsDirectory,
-                            directoryName: absolutePathToEmailsDirectory.split(import_node_path4.default.sep).pop(),
+                            directoryName: absolutePathToEmailsDirectory.split(import_node_path5.default.sep).pop(),
                             emailFilenames: emailFilenames,
                             subDirectories: subDirectories
                         })
@@ -788,7 +917,7 @@ var getEmailsDirectoryMetadata = function() {
 var getEmailTemplatesFromDirectory = function(emailDirectory) {
     var templatePaths = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return templatePaths.push(import_node_path5.default.join(emailDirectory.absolutePath, filename));
+        return templatePaths.push(import_node_path6.default.join(emailDirectory.absolutePath, filename));
     });
     emailDirectory.subDirectories.forEach(function(directory) {
         var _templatePaths;
@@ -806,7 +935,7 @@ var exportTemplates = function() {
                     closeOraOnSIGNIT(spinner);
                     return [
                         4,
-                        getEmailsDirectoryMetadata(import_node_path5.default.join(process.cwd(), emailsDirectoryPath))
+                        getEmailsDirectoryMetadata(import_node_path6.default.join(process.cwd(), emailsDirectoryPath))
                     ];
                 case 1:
                     emailsDirectoryMetadata = _state.sent();
@@ -863,8 +992,8 @@ var exportTemplates = function() {
                                 component = require(template);
                                 rendered = (0, import_render.render)(component.default({}), options);
                                 htmlPath = template.replace(".cjs", options.plainText ? ".txt" : ".html");
-                                (0, import_node_fs4.writeFileSync)(htmlPath, rendered);
-                                (0, import_node_fs4.unlinkSync)(template);
+                                (0, import_node_fs5.writeFileSync)(htmlPath, rendered);
+                                (0, import_node_fs5.unlinkSync)(template);
                             } catch (exception) {
                                 spinner.stopAndPersist({
                                     symbol: import_log_symbols2.default.error,
@@ -891,19 +1020,19 @@ var exportTemplates = function() {
                     spinner.succeed("Rendered all files");
                     spinner.text = "Copying static files";
                     spinner.render();
-                    staticDirectoryPath = import_node_path5.default.join(emailsDirectoryPath, "static");
-                    if (!import_node_fs4.default.existsSync(staticDirectoryPath)) return [
+                    staticDirectoryPath = import_node_path6.default.join(emailsDirectoryPath, "static");
+                    if (!import_node_fs5.default.existsSync(staticDirectoryPath)) return [
                         3,
                         4
                     ];
-                    pathToDumpStaticFilesInto = import_node_path5.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
-                    if (!import_node_fs4.default.existsSync(pathToDumpStaticFilesInto)) return [
+                    pathToDumpStaticFilesInto = import_node_path6.default.join(pathToWhereEmailMarkupShouldBeDumped, "static");
+                    if (!import_node_fs5.default.existsSync(pathToDumpStaticFilesInto)) return [
                         3,
                         3
                     ];
                     return [
                         4,
-                        import_node_fs4.default.promises.rm(pathToDumpStaticFilesInto, {
+                        import_node_fs5.default.promises.rm(pathToDumpStaticFilesInto, {
                             recursive: true
                         })
                     ];
@@ -911,7 +1040,7 @@ var exportTemplates = function() {
                     _state.sent();
                     _state.label = 3;
                 case 3:
-                    result = (0, import_shelljs.cp)("-r", staticDirectoryPath, import_node_path5.default.join(pathToWhereEmailMarkupShouldBeDumped, "static"));
+                    result = (0, import_shelljs.cp)("-r", staticDirectoryPath, import_node_path6.default.join(pathToWhereEmailMarkupShouldBeDumped, "static"));
                     if (result.code > 0) {
                         spinner.stopAndPersist({
                             symbol: import_log_symbols2.default.error,
@@ -945,8 +1074,8 @@ var exportTemplates = function() {
     };
 }();
 // src/cli/commands/build.ts
-var import_node_fs5 = __toESM(require("fs"));
-var import_node_path6 = __toESM(require("path"));
+var import_node_fs6 = __toESM(require("fs"));
+var import_node_path7 = __toESM(require("path"));
 var import_ora3 = __toESM(require("ora"));
 var import_shelljs2 = __toESM(require("shelljs"));
 var import_node_child_process = require("child_process");
@@ -980,13 +1109,14 @@ var setNextEnvironmentVariablesForBuild = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    envVariables = _object_spread_props(_object_spread({}, getEnvVariablesForPreviewApp(emailsDirRelativePath, "PLACEHOLDER", "PLACEHOLDER")), {
+                    envVariables = _object_spread_props(_object_spread({}, getEnvVariablesForPreviewApp(// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+                    import_node_path7.default.normalize(emailsDirRelativePath), "PLACEHOLDER", "PLACEHOLDER")), {
                         NEXT_PUBLIC_IS_BUILDING: "true"
                     });
                     nextConfigContents = "\nconst path = require('path');\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  env: {\n    ...".concat(JSON.stringify(envVariables), ",\n    NEXT_PUBLIC_USER_PROJECT_LOCATION: path.resolve(process.cwd(), '../'),\n    NEXT_PUBLIC_CLI_PACKAGE_LOCATION: process.cwd(),\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    serverComponentsExternalPackages: [\n      '@react-email/components',\n      '@react-email/render',\n      '@react-email/tailwind',\n    ],\n  },\n}");
                     return [
                         4,
-                        import_node_fs5.default.promises.writeFile(import_node_path6.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
+                        import_node_fs6.default.promises.writeFile(import_node_path7.default.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8")
                     ];
                 case 1:
                     _state.sent();
@@ -1004,7 +1134,7 @@ var getEmailSlugsFromEmailDirectory = function(emailDirectory, emailsDirectoryAb
     var directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
     var slugs = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return slugs.push(import_node_path6.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path6.default.sep).filter(function(segment) {
+        return slugs.push(import_node_path7.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path7.default.sep).filter(function(segment) {
             return segment.length > 0;
         }));
     });
@@ -1034,7 +1164,7 @@ var forceSSGForEmailPreviews = function() {
                     });
                     return [
                         4,
-                        import_node_fs5.default.promises.appendFile(import_node_path6.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport async function generateStaticParams() { \n  return ".concat(JSON.stringify(parameters), ";\n}"), "utf8")
+                        import_node_fs6.default.promises.appendFile(import_node_path7.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport async function generateStaticParams() { \n  return ".concat(JSON.stringify(parameters), ";\n}"), "utf8")
                     ];
                 case 2:
                     _state.sent();
@@ -1054,11 +1184,11 @@ var updatePackageJson = function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    packageJsonPath = import_node_path6.default.resolve(builtPreviewAppPath, "./package.json");
+                    packageJsonPath = import_node_path7.default.resolve(builtPreviewAppPath, "./package.json");
                     _ = JSON.parse;
                     return [
                         4,
-                        import_node_fs5.default.promises.readFile(packageJsonPath, "utf8")
+                        import_node_fs6.default.promises.readFile(packageJsonPath, "utf8")
                     ];
                 case 1:
                     packageJson = _.apply(JSON, [
@@ -1069,7 +1199,7 @@ var updatePackageJson = function() {
                     packageJson.dependencies.sharp = "0.33.2";
                     return [
                         4,
-                        import_node_fs5.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
+                        import_node_fs6.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
                     ];
                 case 2:
                     _state.sent();
@@ -1127,20 +1257,20 @@ var build = function() {
                     }).start();
                     closeOraOnSIGNIT(spinner);
                     spinner.text = "Checking if emails folder exists";
-                    if (!import_node_fs5.default.existsSync(emailsDirRelativePath)) {
+                    if (!import_node_fs6.default.existsSync(emailsDirRelativePath)) {
                         throw new Error("Missing ".concat(emailsDirRelativePath, " folder"));
                     }
-                    emailsDirPath = import_node_path6.default.join(process.cwd(), emailsDirRelativePath);
-                    staticPath = import_node_path6.default.join(emailsDirPath, "static");
-                    builtPreviewAppPath = import_node_path6.default.join(process.cwd(), ".react-email");
-                    if (!import_node_fs5.default.existsSync(builtPreviewAppPath)) return [
+                    emailsDirPath = import_node_path7.default.join(process.cwd(), emailsDirRelativePath);
+                    staticPath = import_node_path7.default.join(emailsDirPath, "static");
+                    builtPreviewAppPath = import_node_path7.default.join(process.cwd(), ".react-email");
+                    if (!import_node_fs6.default.existsSync(builtPreviewAppPath)) return [
                         3,
                         3
                     ];
                     spinner.text = "Deleting pre-existing `.react-email` folder";
                     return [
                         4,
-                        import_node_fs5.default.promises.rm(builtPreviewAppPath, {
+                        import_node_fs6.default.promises.rm(builtPreviewAppPath, {
                             recursive: true
                         })
                     ];
@@ -1151,7 +1281,7 @@ var build = function() {
                     spinner.text = "Copying preview app from CLI to `.react-email`";
                     return [
                         4,
-                        import_node_fs5.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+                        import_node_fs6.default.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
                             recursive: true,
                             filter: function(source) {
                                 return !source.includes("/cli/") && !source.includes("/.next/") && !/\/node_modules\/?$/.test(source);
@@ -1160,15 +1290,15 @@ var build = function() {
                     ];
                 case 4:
                     _state.sent();
-                    if (!import_node_fs5.default.existsSync(staticPath)) return [
+                    if (!import_node_fs6.default.existsSync(staticPath)) return [
                         3,
                         6
                     ];
                     spinner.text = "Copying `static` folder into `.react-email/public/static`";
-                    builtStaticDirectory = import_node_path6.default.resolve(builtPreviewAppPath, "./public/static");
+                    builtStaticDirectory = import_node_path7.default.resolve(builtPreviewAppPath, "./public/static");
                     return [
                         4,
-                        import_node_fs5.default.promises.cp(staticPath, builtStaticDirectory, {
+                        import_node_fs6.default.promises.cp(staticPath, builtStaticDirectory, {
                             recursive: true
                         })
                     ];
@@ -1238,8 +1368,8 @@ var build = function() {
     };
 }();
 // src/cli/commands/start.ts
-var import_node_fs6 = __toESM(require("fs"));
-var import_node_path7 = __toESM(require("path"));
+var import_node_fs7 = __toESM(require("fs"));
+var import_node_path8 = __toESM(require("path"));
 var import_node_child_process2 = require("child_process");
 var start = function() {
     var _ref = _async_to_generator(function() {
@@ -1247,8 +1377,8 @@ var start = function() {
         return _ts_generator(this, function(_state) {
             try {
                 usersProjectLocation = process.cwd();
-                builtPreviewPath = import_node_path7.default.resolve(usersProjectLocation, "./.react-email");
-                if (!import_node_fs6.default.existsSync(builtPreviewPath)) {
+                builtPreviewPath = import_node_path8.default.resolve(usersProjectLocation, "./.react-email");
+                if (!import_node_fs7.default.existsSync(builtPreviewPath)) {
                     throw new Error("Could not find `.react-email`, maybe you haven't ran `email build`?");
                 }
                 nextStart = (0, import_node_child_process2.spawn)("npm", [

package/cli/index.mjs

@@ -13,7 +13,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.1.0",
+  version: "2.1.1-canary.1",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -41,11 +41,11 @@ var package_default = {
   dependencies: {
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-popover": "1.0.6",
+    "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.15",
+    "@react-email/components": "0.0.16-canary.1",
     "@react-email/render": "0.0.12",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
@@ -79,7 +79,6 @@ var package_default = {
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
     tailwindcss: "3.4.0",
-    "tree-cli": "0.6.7",
     typescript: "5.1.6"
   },
   devDependencies: {
@@ -91,27 +90,73 @@ var package_default = {
     "@vercel/style-guide": "5.1.0",
     eslint: "8.50.0",
     tsup: "7.2.0",
-    tsx: "4.7.0",
+    tsx: "4.7.1",
     vitest: "1.1.3",
     watch: "1.0.2"
   }
 };
 
 // src/cli/commands/dev.ts
-import fs2 from "fs";
+import fs3 from "fs";
 
 // src/cli/utils/tree.ts
-import treeCli from "tree-cli";
-var tree = async (dir, depth) => {
-  const { report } = await treeCli({
-    l: depth,
-    base: dir
-  });
-  return report;
+import { promises as fs } from "fs";
+import os from "os";
+import path from "path";
+var SYMBOLS = {
+  BRANCH: "\u251C\u2500\u2500 ",
+  EMPTY: "",
+  INDENT: "    ",
+  LAST_BRANCH: "\u2514\u2500\u2500 ",
+  VERTICAL: "\u2502   "
+};
+var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
+  const base = process.cwd();
+  const dirFullpath = path.resolve(base, dirPath);
+  const dirname = path.basename(dirFullpath);
+  let lines = [dirname];
+  const dirStat = await fs.stat(dirFullpath);
+  if (dirStat.isDirectory() && currentDepth < depth) {
+    const childDirents = await fs.readdir(dirFullpath, { withFileTypes: true });
+    childDirents.sort((a, b) => {
+      if (a.isDirectory() && b.isFile()) {
+        return -1;
+      } else if (a.isFile() && b.isDirectory()) {
+        return 1;
+      }
+      return b.name > a.name ? -1 : 1;
+    });
+    for (let i = 0; i < childDirents.length; i++) {
+      const dirent = childDirents[i];
+      const isLast = i === childDirents.length - 1;
+      const branchingSymbol = isLast ? SYMBOLS.LAST_BRANCH : SYMBOLS.BRANCH;
+      const verticalSymbol = isLast ? SYMBOLS.INDENT : SYMBOLS.VERTICAL;
+      if (dirent.isFile()) {
+        lines.push(`${branchingSymbol}${dirent.name}`);
+      } else {
+        const pathToDirectory = path.join(dirFullpath, dirent.name);
+        const treeLinesForSubDirectory = await getTreeLines(
+          pathToDirectory,
+          depth,
+          currentDepth + 1
+        );
+        lines = lines.concat(
+          treeLinesForSubDirectory.map(
+            (line, index) => index === 0 ? `${branchingSymbol}${line}` : `${verticalSymbol}${line}`
+          )
+        );
+      }
+    }
+  }
+  return lines;
+};
+var tree = async (dirPath, depth) => {
+  const lines = await getTreeLines(dirPath, depth);
+  return lines.join(os.EOL);
 };
 
 // src/cli/utils/preview/setup-hot-reloading.ts
-import path from "path";
+import path2 from "path";
 import { Server as SocketServer } from "socket.io";
 import { watch } from "chokidar";
 import debounce from "debounce";
@@ -126,7 +171,7 @@ var setupHotreloading = (devServer2, emailDirRelativePath) => {
   });
   const watcher = watch(emailDirRelativePath, {
     ignoreInitial: true,
-    cwd: path.resolve(process.cwd()),
+    cwd: path2.resolve(process.cwd()),
     // eslint-disable-next-line prefer-named-capture-group
     ignored: /(^|[/\\])\../
   });
@@ -143,7 +188,7 @@ var setupHotreloading = (devServer2, emailDirRelativePath) => {
     changes = [];
   }, 150);
   watcher.on("all", (event, filename) => {
-    const file = filename.split(path.sep);
+    const file = filename.split(path2.sep);
     if (file.length === 0) {
       return;
     }
@@ -157,7 +202,7 @@ var setupHotreloading = (devServer2, emailDirRelativePath) => {
 };
 
 // src/cli/utils/preview/start-dev-server.ts
-import path4 from "path";
+import path5 from "path";
 import http from "http";
 import url from "url";
 import next from "next";
@@ -173,36 +218,36 @@ var closeOraOnSIGNIT = (spinner) => {
 };
 
 // src/cli/utils/preview/serve-static-file.ts
-import path2 from "path";
-import { promises as fs, existsSync } from "fs";
+import path3 from "path";
+import { promises as fs2, existsSync } from "fs";
 import { lookup } from "mime-types";
 var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
-  const staticBaseDir = path2.join(process.cwd(), staticDirRelativePath);
+  const staticBaseDir = path3.join(process.cwd(), staticDirRelativePath);
   const pathname = parsedUrl.pathname;
-  const ext = path2.parse(pathname).ext;
-  let fileAbsolutePath = path2.join(staticBaseDir, pathname);
+  const ext = path3.parse(pathname).ext;
+  let fileAbsolutePath = path3.join(staticBaseDir, pathname);
   const doesFileExist = existsSync(fileAbsolutePath);
   if (!doesFileExist) {
     res.statusCode = 404;
     res.end(`File ${pathname} not found!`);
   } else {
-    const fileStat = await fs.stat(fileAbsolutePath);
+    const fileStat = await fs2.stat(fileAbsolutePath);
     if (fileStat.isDirectory()) {
       fileAbsolutePath += `/index${ext}`;
     }
-    const fileData = await fs.readFile(fileAbsolutePath);
+    const fileData = await fs2.readFile(fileAbsolutePath);
     res.setHeader("Content-type", lookup(ext) || "text/plain");
     res.end(fileData);
   }
 };
 
 // src/cli/utils/preview/get-env-variables-for-preview-app.ts
-import path3 from "path";
+import path4 from "path";
 var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cliPackageLocation, cwd) => {
   return {
     NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
     NEXT_PUBLIC_CLI_PACKAGE_LOCATION: cliPackageLocation,
-    NEXT_PUBLIC_OS_PATH_SEPARATOR: path3.sep,
+    NEXT_PUBLIC_OS_PATH_SEPARATOR: path4.sep,
     NEXT_PUBLIC_USER_PROJECT_LOCATION: cwd
   };
 };
@@ -221,8 +266,8 @@ var safeAsyncServerListen = (server, port) => {
     });
   });
 };
-var isRunningBuilt = __filename.endsWith(path4.join("cli", "index.js"));
-var cliPacakgeLocation = isRunningBuilt ? path4.resolve(__dirname, "..") : path4.resolve(__dirname, "../../../..");
+var isRunningBuilt = __filename.endsWith(path5.join("cli", "index.js"));
+var cliPacakgeLocation = isRunningBuilt ? path5.resolve(__dirname, "..") : path5.resolve(__dirname, "../../../..");
 var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
   devServer = http.createServer((req, res) => {
     if (!req.url) {
@@ -287,7 +332,8 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   process.env = {
     ...process.env,
     ...getEnvVariablesForPreviewApp(
-      emailsDirRelativePath,
+      // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+      path5.normalize(emailsDirRelativePath),
       cliPacakgeLocation,
       process.cwd()
     )
@@ -343,7 +389,7 @@ process.on(
 // src/cli/commands/dev.ts
 var dev = async ({ dir: emailsDirRelativePath, port }) => {
   try {
-    if (!fs2.existsSync(emailsDirRelativePath)) {
+    if (!fs3.existsSync(emailsDirRelativePath)) {
       throw new Error(`Missing ${emailsDirRelativePath} folder`);
     }
     const devServer2 = await startDevServer(
@@ -360,8 +406,8 @@ var dev = async ({ dir: emailsDirRelativePath, port }) => {
 };
 
 // src/cli/commands/export.ts
-import fs4, { unlinkSync, writeFileSync } from "fs";
-import path6 from "path";
+import fs5, { unlinkSync, writeFileSync } from "fs";
+import path7 from "path";
 import { glob } from "glob";
 import { buildSync } from "esbuild";
 import ora2 from "ora";
@@ -371,16 +417,16 @@ import normalize from "normalize-path";
 import { cp } from "shelljs";
 
 // src/actions/get-emails-directory-metadata.ts
-import fs3 from "fs";
-import path5 from "path";
+import fs4 from "fs";
+import path6 from "path";
 var isFileAnEmail = (fullPath) => {
-  const stat = fs3.statSync(fullPath);
+  const stat = fs4.statSync(fullPath);
   if (stat.isDirectory())
     return false;
-  const { ext } = path5.parse(fullPath);
+  const { ext } = path6.parse(fullPath);
   if (![".js", ".tsx", ".jsx"].includes(ext))
     return false;
-  const fileContents = fs3.readFileSync(fullPath, "utf8");
+  const fileContents = fs4.readFileSync(fullPath, "utf8");
   return /\bexport\s+default\b/gm.test(fileContents);
 };
 var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
@@ -391,7 +437,7 @@ var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
       subDirectories: onlySubDirectory.subDirectories,
       emailFilenames: onlySubDirectory.emailFilenames,
       absolutePath: onlySubDirectory.absolutePath,
-      directoryName: path5.join(
+      directoryName: path6.join(
         currentResultingMergedDirectory.directoryName,
         onlySubDirectory.directoryName
       )
@@ -400,26 +446,26 @@ var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
   return currentResultingMergedDirectory;
 };
 var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory) => {
-  if (!fs3.existsSync(absolutePathToEmailsDirectory))
+  if (!fs4.existsSync(absolutePathToEmailsDirectory))
     return;
-  const dirents = await fs3.promises.readdir(absolutePathToEmailsDirectory, {
+  const dirents = await fs4.promises.readdir(absolutePathToEmailsDirectory, {
     withFileTypes: true
   });
   const emailFilenames = dirents.filter(
-    (dirent) => isFileAnEmail(path5.join(absolutePathToEmailsDirectory, dirent.name))
-  ).map((dirent) => dirent.name.replace(path5.extname(dirent.name), ""));
+    (dirent) => isFileAnEmail(path6.join(absolutePathToEmailsDirectory, dirent.name))
+  ).map((dirent) => dirent.name.replace(path6.extname(dirent.name), ""));
   const subDirectories = await Promise.all(
     dirents.filter(
       (dirent) => dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static"
     ).map(
       (dirent) => getEmailsDirectoryMetadata(
-        path5.join(absolutePathToEmailsDirectory, dirent.name)
+        path6.join(absolutePathToEmailsDirectory, dirent.name)
       )
     )
   );
   return mergeDirectoriesWithSubDirectories({
     absolutePath: absolutePathToEmailsDirectory,
-    directoryName: absolutePathToEmailsDirectory.split(path5.sep).pop(),
+    directoryName: absolutePathToEmailsDirectory.split(path6.sep).pop(),
     emailFilenames,
     subDirectories
   });
@@ -429,7 +475,7 @@ var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory) => {
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename) => templatePaths.push(path6.join(emailDirectory.absolutePath, filename))
+    (filename) => templatePaths.push(path7.join(emailDirectory.absolutePath, filename))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
@@ -440,7 +486,7 @@ var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirecto
   const spinner = ora2("Preparing files...\n").start();
   closeOraOnSIGNIT(spinner);
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
-    path6.join(process.cwd(), emailsDirectoryPath)
+    path7.join(process.cwd(), emailsDirectoryPath)
   );
   if (typeof emailsDirectoryMetadata === "undefined") {
     spinner.stopAndPersist({
@@ -507,18 +553,18 @@ ${allTemplates.map((p) => `- ${p}`).join("\n")}`
   spinner.succeed("Rendered all files");
   spinner.text = `Copying static files`;
   spinner.render();
-  const staticDirectoryPath = path6.join(emailsDirectoryPath, "static");
-  if (fs4.existsSync(staticDirectoryPath)) {
-    const pathToDumpStaticFilesInto = path6.join(
+  const staticDirectoryPath = path7.join(emailsDirectoryPath, "static");
+  if (fs5.existsSync(staticDirectoryPath)) {
+    const pathToDumpStaticFilesInto = path7.join(
       pathToWhereEmailMarkupShouldBeDumped,
       "static"
     );
-    if (fs4.existsSync(pathToDumpStaticFilesInto))
-      await fs4.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
+    if (fs5.existsSync(pathToDumpStaticFilesInto))
+      await fs5.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
     const result = cp(
       "-r",
       staticDirectoryPath,
-      path6.join(pathToWhereEmailMarkupShouldBeDumped, "static")
+      path7.join(pathToWhereEmailMarkupShouldBeDumped, "static")
     );
     if (result.code > 0) {
       spinner.stopAndPersist({
@@ -541,8 +587,8 @@ ${allTemplates.map((p) => `- ${p}`).join("\n")}`
 };
 
 // src/cli/commands/build.ts
-import fs5 from "fs";
-import path7 from "path";
+import fs6 from "fs";
+import path8 from "path";
 import ora3 from "ora";
 import shell from "shelljs";
 import { spawn } from "child_process";
@@ -574,7 +620,8 @@ var buildPreviewApp = (absoluteDirectory) => {
 var setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath) => {
   const envVariables = {
     ...getEnvVariablesForPreviewApp(
-      emailsDirRelativePath,
+      // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+      path8.normalize(emailsDirRelativePath),
       "PLACEHOLDER",
       "PLACEHOLDER"
     ),
@@ -616,8 +663,8 @@ module.exports = {
     ],
   },
 }`;
-  await fs5.promises.writeFile(
-    path7.resolve(builtPreviewAppPath, "./next.config.js"),
+  await fs6.promises.writeFile(
+    path8.resolve(builtPreviewAppPath, "./next.config.js"),
     nextConfigContents,
     "utf8"
   );
@@ -627,7 +674,7 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
     (filename) => slugs.push(
-      path7.join(directoryPathRelativeToEmailsDirectory, filename).split(path7.sep).filter((segment) => segment.length > 0)
+      path8.join(directoryPathRelativeToEmailsDirectory, filename).split(path8.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -649,8 +696,8 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     emailDirectoryMetadata,
     emailsDirPath
   ).map((slug) => ({ slug }));
-  await fs5.promises.appendFile(
-    path7.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
+  await fs6.promises.appendFile(
+    path8.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
 export async function generateStaticParams() { 
@@ -660,14 +707,14 @@ export async function generateStaticParams() {
   );
 };
 var updatePackageJson = async (builtPreviewAppPath) => {
-  const packageJsonPath = path7.resolve(builtPreviewAppPath, "./package.json");
+  const packageJsonPath = path8.resolve(builtPreviewAppPath, "./package.json");
   const packageJson = JSON.parse(
-    await fs5.promises.readFile(packageJsonPath, "utf8")
+    await fs6.promises.readFile(packageJsonPath, "utf8")
   );
   packageJson.scripts.build = "next build";
   packageJson.scripts.start = "next start";
   packageJson.dependencies.sharp = "0.33.2";
-  await fs5.promises.writeFile(
+  await fs6.promises.writeFile(
     packageJsonPath,
     JSON.stringify(packageJson),
     "utf8"
@@ -703,30 +750,30 @@ var build = async ({
     }).start();
     closeOraOnSIGNIT(spinner);
     spinner.text = "Checking if emails folder exists";
-    if (!fs5.existsSync(emailsDirRelativePath)) {
+    if (!fs6.existsSync(emailsDirRelativePath)) {
       throw new Error(`Missing ${emailsDirRelativePath} folder`);
     }
-    const emailsDirPath = path7.join(process.cwd(), emailsDirRelativePath);
-    const staticPath = path7.join(emailsDirPath, "static");
-    const builtPreviewAppPath = path7.join(process.cwd(), ".react-email");
-    if (fs5.existsSync(builtPreviewAppPath)) {
+    const emailsDirPath = path8.join(process.cwd(), emailsDirRelativePath);
+    const staticPath = path8.join(emailsDirPath, "static");
+    const builtPreviewAppPath = path8.join(process.cwd(), ".react-email");
+    if (fs6.existsSync(builtPreviewAppPath)) {
       spinner.text = "Deleting pre-existing `.react-email` folder";
-      await fs5.promises.rm(builtPreviewAppPath, { recursive: true });
+      await fs6.promises.rm(builtPreviewAppPath, { recursive: true });
     }
     spinner.text = "Copying preview app from CLI to `.react-email`";
-    await fs5.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+    await fs6.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
       recursive: true,
       filter: (source) => {
         return !source.includes("/cli/") && !source.includes("/.next/") && !/\/node_modules\/?$/.test(source);
       }
     });
-    if (fs5.existsSync(staticPath)) {
+    if (fs6.existsSync(staticPath)) {
       spinner.text = "Copying `static` folder into `.react-email/public/static`";
-      const builtStaticDirectory = path7.resolve(
+      const builtStaticDirectory = path8.resolve(
         builtPreviewAppPath,
         "./public/static"
       );
-      await fs5.promises.cp(staticPath, builtStaticDirectory, {
+      await fs6.promises.cp(staticPath, builtStaticDirectory, {
         recursive: true
       });
     }
@@ -753,17 +800,17 @@ var build = async ({
 };
 
 // src/cli/commands/start.ts
-import fs6 from "fs";
-import path8 from "path";
+import fs7 from "fs";
+import path9 from "path";
 import { spawn as spawn2 } from "child_process";
 var start = async () => {
   try {
     const usersProjectLocation = process.cwd();
-    const builtPreviewPath = path8.resolve(
+    const builtPreviewPath = path9.resolve(
       usersProjectLocation,
       "./.react-email"
     );
-    if (!fs6.existsSync(builtPreviewPath)) {
+    if (!fs7.existsSync(builtPreviewPath)) {
       throw new Error(
         "Could not find `.react-email`, maybe you haven't ran `email build`?"
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.1.0",
+  "version": "2.1.1-canary.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
@@ -21,11 +21,11 @@
   "dependencies": {
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-popover": "1.0.6",
+    "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.15",
+    "@react-email/components": "0.0.16-canary.1",
     "@react-email/render": "0.0.12",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
@@ -59,7 +59,6 @@
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
     "tailwindcss": "3.4.0",
-    "tree-cli": "0.6.7",
     "typescript": "5.1.6"
   },
   "devDependencies": {
@@ -71,7 +70,7 @@
     "@vercel/style-guide": "5.1.0",
     "eslint": "8.50.0",
     "tsup": "7.2.0",
-    "tsx": "4.7.0",
+    "tsx": "4.7.1",
     "vitest": "1.1.3",
     "watch": "1.0.2"
   },

package/src/utils/get-email-component.ts

@@ -56,6 +56,12 @@ export const getEmailComponent = async (
     ...global,
     console,
     Buffer,
+    TextDecoder,
+    TextDecoderStream,
+    TextEncoder,
+    TextEncoderStream,
+    ReadableStream,
+    URL,
     module: { exports: { default: undefined as unknown } },
     __filanem: emailPath,
     __dirname: path.dirname(emailPath),