react-email 4.0.8 → 4.0.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # react-email
 
+## 4.0.9
+
+### Patch Changes
+
+- 643d841: Add .json import support for hot reloading
+- f21a983: fix Node 18 support
+- cd02449: Ensure dependencies outside emails directory are completely resolved
+- 73a31ed: Fix dependent of dependents not causing hot reloads
+- bdffd8c: fix backwards compatibility with `render` versions
+- e7fa043: Fix access to files outside `static` directory
+- 9aa033c: Use range of versions for dependencies
+- ab70556: Fix non-email files being rendered during hot reloading
+- 9c9aa5d: Add error message for when an email template does not have a default export
+
 ## 4.0.8
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -2,8 +2,7 @@
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
+  if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
@@ -13,10 +12,10 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "4.0.8",
+  version: "4.0.9",
   description: "A live preview of your emails right in your browser.",
   bin: {
-    email: "./dist/cli/index.js"
+    email: "./dist/cli/index.mjs"
   },
   scripts: {
     build: "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",
@@ -33,75 +32,76 @@ var package_default = {
     url: "https://github.com/resend/react-email.git",
     directory: "packages/react-email"
   },
-  keywords: ["react", "email"],
+  keywords: [
+    "react",
+    "email"
+  ],
   engines: {
     node: ">=18.0.0"
   },
   dependencies: {
-    "@babel/parser": "7.24.5",
-    "@babel/traverse": "7.25.6",
-    chalk: "4.1.2",
-    chokidar: "4.0.3",
-    commander: "11.1.0",
-    debounce: "2.0.0",
-    esbuild: "0.25.0",
-    glob: "10.3.4",
-    "log-symbols": "4.1.0",
-    "mime-types": "2.1.35",
-    next: "15.2.4",
-    "normalize-path": "3.0.0",
-    ora: "5.4.1",
-    "socket.io": "4.8.1"
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    chalk: "^5.0.0",
+    chokidar: "^4.0.3",
+    commander: "^13.0.0",
+    debounce: "^2.0.0",
+    esbuild: "^0.25.0",
+    glob: "^11.0.0",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    next: "^15.2.4",
+    "normalize-path": "^3.0.0",
+    ora: "^8.0.0",
+    "socket.io": "^4.8.1"
   },
   devDependencies: {
     "@babel/core": "7.26.10",
-    "@lottiefiles/dotlottie-react": "0.12.3",
-    "@radix-ui/colors": "1.0.1",
-    "@radix-ui/react-collapsible": "1.1.0",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.2",
+    "@lottiefiles/dotlottie-react": "0.13.3",
+    "@radix-ui/colors": "3.0.0",
+    "@radix-ui/react-collapsible": "1.1.7",
+    "@radix-ui/react-dropdown-menu": "2.1.10",
+    "@radix-ui/react-popover": "1.1.10",
+    "@radix-ui/react-slot": "1.2.0",
+    "@radix-ui/react-tabs": "1.1.7",
+    "@radix-ui/react-toggle-group": "1.1.6",
+    "@radix-ui/react-tooltip": "1.2.3",
     "@react-email/components": "workspace:*",
-    "@swc/core": "1.4.15",
+    "@swc/core": "1.11.21",
     "@types/babel__core": "7.20.5",
-    "@types/babel__traverse": "*",
+    "@types/babel__traverse": "7.20.7",
     "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "22.10.2",
+    "@types/node": "22.14.1",
     "@types/normalize-path": "3.0.2",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@types/webpack": "5.28.5",
-    "@vercel/style-guide": "5.1.0",
-    autoprefixer: "10.4.20",
+    autoprefixer: "10.4.21",
     clsx: "2.1.1",
-    "framer-motion": "12.0.0-alpha.2",
+    "framer-motion": "12.7.5",
     jiti: "2.4.2",
     json5: "2.2.3",
     "module-punycode": "npm:punycode@2.3.1",
-    "node-html-parser": "6.1.13",
-    postcss: "8.4.40",
-    "prettier-plugin-tailwindcss": "0.6.6",
+    "node-html-parser": "7.0.1",
+    postcss: "8.5.3",
     "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.1.0",
+    "prism-react-renderer": "2.4.1",
     react: "19.0.0",
     "react-dom": "19.0.0",
-    sharp: "0.33.3",
-    "socket.io-client": "4.8.0",
-    sonner: "1.7.1",
-    "source-map-js": "1.0.2",
+    sharp: "0.34.1",
+    "socket.io-client": "4.8.1",
+    sonner: "2.0.3",
+    "source-map-js": "1.2.1",
     spamc: "0.0.5",
-    "stacktrace-parser": "0.1.10",
-    "tailwind-merge": "2.2.0",
+    "stacktrace-parser": "0.1.11",
+    "tailwind-merge": "3.2.0",
     tailwindcss: "3.4.0",
-    tsup: "7.2.0",
-    tsx: "4.9.0",
-    typescript: "5.8.2",
+    tsup: "8.4.0",
+    tsx: "4.19.3",
+    typescript: "5.8.3",
     "use-debounce": "10.0.4",
-    zod: "3.24.2"
+    zod: "3.24.3"
   }
 };
 
@@ -115,17 +115,26 @@ import ora2 from "ora";
 // src/utils/get-emails-directory-metadata.ts
 import fs from "node:fs";
 import path from "node:path";
-var isFileAnEmail = (fullPath) => {
-  const stat = fs.statSync(fullPath);
-  if (stat.isDirectory())
+var isFileAnEmail = async (fullPath) => {
+  let fileHandle;
+  try {
+    fileHandle = await fs.promises.open(fullPath, "r");
+  } catch (exception) {
+    console.warn(exception);
     return false;
-  const { ext } = path.parse(fullPath);
-  if (![".js", ".tsx", ".jsx"].includes(ext))
+  }
+  const stat = await fileHandle.stat();
+  if (stat.isDirectory()) {
+    await fileHandle.close();
     return false;
-  if (!fs.existsSync(fullPath)) {
+  }
+  const { ext } = path.parse(fullPath);
+  if (![".js", ".tsx", ".jsx"].includes(ext)) {
+    await fileHandle.close();
     return false;
   }
-  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const fileContents = await fileHandle.readFile("utf8");
+  await fileHandle.close();
   const hasES6DefaultExport = /\bexport\s+default\b/gm.test(fileContents);
   const hasCommonJSExport = /\bmodule\.exports\s*=/gm.test(fileContents);
   const hasNamedExport = /\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(
@@ -148,14 +157,16 @@ var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
   return currentResultingMergedDirectory;
 };
 var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileExtensions = false, isSubDirectory = false, baseDirectoryPath = absolutePathToEmailsDirectory) => {
-  if (!fs.existsSync(absolutePathToEmailsDirectory))
-    return;
+  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
   const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
     withFileTypes: true
   });
-  const emailFilenames = dirents.filter(
-    (dirent) => isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name))
-  ).map(
+  const isEmailPredicates = await Promise.all(
+    dirents.map(
+      (dirent) => isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name))
+    )
+  );
+  const emailFilenames = dirents.filter((_, i) => isEmailPredicates[i]).map(
     (dirent) => keepFileExtensions ? dirent.name : dirent.name.replace(path.extname(dirent.name), "")
   );
   const subDirectories = await Promise.all(
@@ -212,76 +223,19 @@ var registerSpinnerAutostopping = (spinner) => {
   spinners.add(spinner);
 };
 
-// src/cli/utils/tree.ts
-import { promises as fs2 } from "node:fs";
-import os from "node:os";
-import path2 from "node: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 = path2.resolve(base, dirPath);
-  const dirname = path2.basename(dirFullpath);
-  let lines = [dirname];
-  const dirStat = await fs2.stat(dirFullpath);
-  if (dirStat.isDirectory() && currentDepth < depth) {
-    const childDirents = await fs2.readdir(dirFullpath, { withFileTypes: true });
-    childDirents.sort((a, b) => {
-      if (a.isDirectory() && b.isFile()) {
-        return -1;
-      }
-      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 = path2.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/hot-reloading/setup-hot-reloading.ts
-import path7 from "node:path";
+import path6 from "node:path";
 import { watch } from "chokidar";
 import debounce from "debounce";
 import { Server as SocketServer } from "socket.io";
 
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
-import { promises as fs4, existsSync as existsSync2, statSync } from "node:fs";
-import path6 from "node:path";
+import { existsSync as existsSync2, promises as fs3, statSync } from "node:fs";
+import path5 from "node:path";
 
 // src/cli/utils/preview/start-dev-server.ts
 import http from "node:http";
-import path5 from "node:path";
+import path4 from "node:path";
 import url from "node:url";
 import chalk from "chalk";
 import logSymbols2 from "log-symbols";
@@ -289,28 +243,33 @@ import next from "next";
 import ora from "ora";
 
 // src/cli/utils/preview/get-env-variables-for-preview-app.ts
-import path3 from "node:path";
+import path2 from "node:path";
 var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cwd) => {
   return {
     EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-    EMAILS_DIR_ABSOLUTE_PATH: path3.resolve(cwd, relativePathToEmailsDirectory),
+    EMAILS_DIR_ABSOLUTE_PATH: path2.resolve(cwd, relativePathToEmailsDirectory),
     USER_PROJECT_LOCATION: cwd,
     NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? "true" : "false"
   };
 };
 
 // src/cli/utils/preview/serve-static-file.ts
-import { promises as fs3, existsSync } from "node:fs";
-import path4 from "node:path";
+import { existsSync, promises as fs2 } from "node:fs";
+import path3 from "node:path";
 import { lookup } from "mime-types";
 var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
-  const staticBaseDir = path4.join(process.cwd(), staticDirRelativePath);
-  const pathname = parsedUrl.pathname;
-  const ext = path4.parse(pathname).ext;
-  const fileAbsolutePath = path4.join(staticBaseDir, pathname);
+  const pathname = parsedUrl.pathname.replace("/static", "./static");
+  const ext = path3.parse(pathname).ext;
+  const staticBaseDir = path3.resolve(process.cwd(), staticDirRelativePath);
+  const fileAbsolutePath = path3.resolve(staticBaseDir, pathname);
+  if (!fileAbsolutePath.startsWith(staticBaseDir)) {
+    res.statusCode = 403;
+    res.end();
+    return;
+  }
   try {
-    const fileHandle = await fs3.open(fileAbsolutePath, "r");
-    const fileData = await fs3.readFile(fileHandle);
+    const fileHandle = await fs2.open(fileAbsolutePath, "r");
+    const fileData = await fs2.readFile(fileHandle);
     res.setHeader("Content-type", lookup(ext) || "text/plain");
     res.end(fileData);
     fileHandle.close();
@@ -346,9 +305,11 @@ var safeAsyncServerListen = (server, port) => {
     });
   });
 };
-var isDev = !__filename.endsWith(path5.join("cli", "index.js"));
-var cliPackageLocation = isDev ? path5.resolve(__dirname, "../../../..") : path5.resolve(__dirname, "../..");
-var previewServerLocation = isDev ? path5.resolve(__dirname, "../../../..") : path5.resolve(__dirname, "../preview");
+var filename = url.fileURLToPath(import.meta.url);
+var dirname = path4.dirname(filename);
+var isDev = !filename.endsWith(path4.join("cli", "index.mjs"));
+var cliPackageLocation = isDev ? path4.resolve(dirname, "../../../..") : path4.resolve(dirname, "../..");
+var previewServerLocation = isDev ? path4.resolve(dirname, "../../../..") : path4.resolve(dirname, "../preview");
 var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
   devServer = http.createServer((req, res) => {
     if (!req.url) {
@@ -415,7 +376,7 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
     ...process.env,
     ...getEnvVariablesForPreviewApp(
       // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-      path5.normalize(emailsDirRelativePath),
+      path4.normalize(emailsDirRelativePath),
       process.cwd()
     )
   };
@@ -513,9 +474,9 @@ var getImportedModules = (contents) => {
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 var readAllFilesInsideDirectory = async (directory) => {
   let allFilePaths = [];
-  const topLevelDirents = await fs4.readdir(directory, { withFileTypes: true });
+  const topLevelDirents = await fs3.readdir(directory, { withFileTypes: true });
   for await (const dirent of topLevelDirents) {
-    const pathToDirent = path6.join(directory, dirent.name);
+    const pathToDirent = path5.join(directory, dirent.name);
     if (dirent.isDirectory()) {
       allFilePaths = allFilePaths.concat(
         await readAllFilesInsideDirectory(pathToDirent)
@@ -527,7 +488,7 @@ var readAllFilesInsideDirectory = async (directory) => {
   return allFilePaths;
 };
 var isJavascriptModule = (filePath) => {
-  const extensionName = path6.extname(filePath);
+  const extensionName = path5.extname(filePath);
   return [".js", ".ts", ".jsx", ".tsx", ".mjs", ".cjs"].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = (pathWithoutExtension) => {
@@ -565,23 +526,23 @@ var createDependencyGraph = async (directory) => {
     ])
   );
   const getDependencyPaths = async (filePath) => {
-    const contents = await fs4.readFile(filePath, "utf8");
-    const importedPaths = getImportedModules(contents);
+    const contents = await fs3.readFile(filePath, "utf8");
+    const importedPaths = isJavascriptModule(filePath) ? getImportedModules(contents) : [];
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {
         const isModulePath = !dependencyPath.startsWith(".");
-        if (isModulePath || path6.isAbsolute(dependencyPath)) {
+        if (isModulePath || path5.isAbsolute(dependencyPath)) {
           return dependencyPath;
         }
-        let pathToDependencyFromDirectory = path6.resolve(
+        let pathToDependencyFromDirectory = path5.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" 
+                      So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependency 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
                     */
-          path6.dirname(filePath),
+          path5.dirname(filePath),
           dependencyPath
         );
         let isDirectory = false;
@@ -603,9 +564,7 @@ var createDependencyGraph = async (directory) => {
           }
         }
         if (!isJavascriptModule(pathToDependencyFromDirectory)) {
-          const pathWithExtension = checkFileExtensionsUntilItExists(
-            pathToDependencyFromDirectory
-          );
+          const pathWithExtension = path5.extname(pathToDependencyFromDirectory).length > 0 ? pathToDependencyFromDirectory : checkFileExtensionsUntilItExists(pathToDependencyFromDirectory);
           if (pathWithExtension) {
             pathToDependencyFromDirectory = pathWithExtension;
           } else if (isDev) {
@@ -618,10 +577,10 @@ var createDependencyGraph = async (directory) => {
       }
     );
     const moduleDependencies = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => !dependencyPath.startsWith(".") && !path6.isAbsolute(dependencyPath)
+      (dependencyPath) => !dependencyPath.startsWith(".") && !path5.isAbsolute(dependencyPath)
     );
     const nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => dependencyPath.startsWith(".") || path6.isAbsolute(dependencyPath)
+      (dependencyPath) => dependencyPath.startsWith(".") || path5.isAbsolute(dependencyPath)
     );
     return {
       dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
@@ -629,17 +588,18 @@ var createDependencyGraph = async (directory) => {
     };
   };
   const updateModuleDependenciesInGraph = async (moduleFilePath) => {
-    const module = graph[moduleFilePath] ?? {
-      path: moduleFilePath,
-      dependencyPaths: [],
-      dependentPaths: [],
-      moduleDependencies: []
-    };
+    if (graph[moduleFilePath] === void 0) {
+      graph[moduleFilePath] = {
+        path: moduleFilePath,
+        dependencyPaths: [],
+        dependentPaths: [],
+        moduleDependencies: []
+      };
+    }
     const { moduleDependencies, dependencyPaths: newDependencyPaths } = await getDependencyPaths(moduleFilePath);
-    module.moduleDependencies = moduleDependencies;
-    for (const dependencyPath of module.dependencyPaths) {
-      if (newDependencyPaths.includes(dependencyPath))
-        continue;
+    graph[moduleFilePath].moduleDependencies = moduleDependencies;
+    for (const dependencyPath of graph[moduleFilePath].dependencyPaths) {
+      if (newDependencyPaths.includes(dependencyPath)) continue;
       const dependencyModule = graph[dependencyPath];
       if (dependencyModule !== void 0) {
         dependencyModule.dependentPaths = dependencyModule.dependentPaths.filter(
@@ -647,21 +607,21 @@ var createDependencyGraph = async (directory) => {
         );
       }
     }
-    module.dependencyPaths = newDependencyPaths;
-    for (const dependencyPath of newDependencyPaths) {
+    graph[moduleFilePath].dependencyPaths = newDependencyPaths;
+    for await (const dependencyPath of newDependencyPaths) {
+      if (graph[dependencyPath] === void 0) {
+        await updateModuleDependenciesInGraph(dependencyPath);
+      }
       const dependencyModule = graph[dependencyPath];
-      if (dependencyModule !== void 0 && !dependencyModule.dependentPaths.includes(moduleFilePath)) {
+      if (dependencyModule === void 0) {
+        throw new Error(
+          `Loading the dependency path ${dependencyPath} did not initialize it at all. This is a bug in React Email.`
+        );
+      }
+      if (!dependencyModule.dependentPaths.includes(moduleFilePath)) {
         dependencyModule.dependentPaths.push(moduleFilePath);
-      } else {
-        graph[dependencyPath] = {
-          path: dependencyPath,
-          moduleDependencies: [],
-          dependencyPaths: [],
-          dependentPaths: [moduleFilePath]
-        };
       }
     }
-    graph[moduleFilePath] = module;
   };
   for (const filePath of modulePaths) {
     await updateModuleDependenciesInGraph(filePath);
@@ -746,11 +706,19 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   let changes = [];
   const reload = debounce(() => {
     clients.forEach((client) => {
-      client.emit("reload", changes);
+      client.emit(
+        "reload",
+        changes.filter(
+          (change) => (
+            // Ensures only changes inside the emails directory are emitted
+            path6.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
+          )
+        )
+      );
     });
     changes = [];
   }, 150);
-  const absolutePathToEmailsDirectory = path7.resolve(
+  const absolutePathToEmailsDirectory = path6.resolve(
     process.cwd(),
     emailDirRelativePath
   );
@@ -760,7 +728,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     cwd: absolutePathToEmailsDirectory
   });
   const getFilesOutsideEmailsDirectory = () => Object.keys(dependencyGraph).filter(
-    (p) => path7.relative(absolutePathToEmailsDirectory, p).startsWith("..")
+    (p) => path6.relative(absolutePathToEmailsDirectory, p).startsWith("..")
   );
   let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
   for (const p of filesOutsideEmailsDirectory) {
@@ -772,11 +740,11 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   process.on("SIGINT", exit);
   process.on("uncaughtException", exit);
   watcher.on("all", async (event, relativePathToChangeTarget) => {
-    const file = relativePathToChangeTarget.split(path7.sep);
+    const file = relativePathToChangeTarget.split(path6.sep);
     if (file.length === 0) {
       return;
     }
-    const pathToChangeTarget = path7.resolve(
+    const pathToChangeTarget = path6.resolve(
       absolutePathToEmailsDirectory,
       relativePathToChangeTarget
     );
@@ -800,7 +768,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
         event: "change",
-        filename: path7.relative(absolutePathToEmailsDirectory, dependentPath)
+        filename: path6.relative(absolutePathToEmailsDirectory, dependentPath)
       });
     }
     reload();
@@ -808,6 +776,63 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   return watcher;
 };
 
+// src/cli/utils/tree.ts
+import { promises as fs4 } from "node:fs";
+import os from "node:os";
+import path7 from "node: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 = path7.resolve(base, dirPath);
+  const dirname2 = path7.basename(dirFullpath);
+  let lines = [dirname2];
+  const dirStat = await fs4.stat(dirFullpath);
+  if (dirStat.isDirectory() && currentDepth < depth) {
+    const childDirents = await fs4.readdir(dirFullpath, { withFileTypes: true });
+    childDirents.sort((a, b) => {
+      if (a.isDirectory() && b.isFile()) {
+        return -1;
+      }
+      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 = path7.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/commands/build.ts
 var buildPreviewApp = (absoluteDirectory) => {
   return new Promise((resolve, reject) => {
@@ -875,8 +900,8 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
-    (filename) => slugs.push(
-      path8.join(directoryPathRelativeToEmailsDirectory, filename).split(path8.sep).filter((segment) => segment.length > 0)
+    (filename2) => slugs.push(
+      path8.join(directoryPathRelativeToEmailsDirectory, filename2).split(path8.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -1116,7 +1141,7 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename) => templatePaths.push(path10.join(emailDirectory.absolutePath, filename))
+    (filename2) => templatePaths.push(path10.join(emailDirectory.absolutePath, filename2))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
@@ -1300,6 +1325,6 @@ program.command("export").description("Build the templates to the `out` director
   "To, or not to show a spinner with process information",
   false
 ).action(
-  ({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, { pretty, silent, plainText })
+  ({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, { silent, plainText, pretty })
 );
 program.parse();

package/dist/preview/.next/BUILD_ID

@@ -1 +1 @@
-t22IN7aANTezJAJOfFnv-
+3apYH6rky7aNn7g4RIJp5