react-email 3.0.6 → 3.0.7-canary.1

package/dist/cli/index.mjs

@@ -13,7 +13,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "3.0.6",
+  version: "3.0.7-canary.1",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./dist/cli/index.js"
@@ -23,8 +23,7 @@ var package_default = {
     dev: "tsup-node --watch",
     test: "vitest run",
     "test:watch": "vitest",
-    clean: "rm -rf dist",
-    lint: "eslint . && tsc"
+    clean: "rm -rf dist"
   },
   license: "MIT",
   repository: {
@@ -32,10 +31,7 @@ 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"
   },
@@ -46,14 +42,14 @@ var package_default = {
     chokidar: "4.0.3",
     commander: "11.1.0",
     debounce: "2.0.0",
-    esbuild: "0.19.11",
+    esbuild: "0.23.0",
     glob: "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
     next: "15.1.2",
     "normalize-path": "3.0.0",
     ora: "5.4.1",
-    "socket.io": "4.8.0"
+    "socket.io": "4.8.1"
   },
   devDependencies: {
     "@radix-ui/colors": "1.0.1",
@@ -75,9 +71,6 @@ var package_default = {
     "@vercel/style-guide": "5.1.0",
     autoprefixer: "10.4.20",
     clsx: "2.1.0",
-    eslint: "8.50.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-config-turbo": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
     postcss: "8.4.40",
     "prism-react-renderer": "2.1.0",
@@ -97,13 +90,112 @@ var package_default = {
   }
 };
 
-// src/cli/commands/dev.ts
-import fs4 from "node:fs";
+// src/cli/commands/build.ts
+import { spawn } from "node:child_process";
+import fs5 from "node:fs";
+import path8 from "node:path";
+import logSymbols3 from "log-symbols";
+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())
+    return false;
+  const { ext } = path.parse(fullPath);
+  if (![".js", ".tsx", ".jsx"].includes(ext))
+    return false;
+  if (!fs.existsSync(fullPath)) {
+    return false;
+  }
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  return /\bexport\s+default\b/gm.test(fileContents);
+};
+var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
+  let currentResultingMergedDirectory = emailsDirectoryMetadata;
+  while (currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1) {
+    const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
+    currentResultingMergedDirectory = {
+      ...onlySubDirectory,
+      directoryName: path.join(
+        currentResultingMergedDirectory.directoryName,
+        onlySubDirectory.directoryName
+      )
+    };
+  }
+  return currentResultingMergedDirectory;
+};
+var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileExtensions = false, isSubDirectory = false, baseDirectoryPath = absolutePathToEmailsDirectory) => {
+  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(
+    (dirent) => keepFileExtensions ? dirent.name : dirent.name.replace(path.extname(dirent.name), "")
+  );
+  const subDirectories = await Promise.all(
+    dirents.filter(
+      (dirent) => dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static"
+    ).map((dirent) => {
+      const direntAbsolutePath = path.join(
+        absolutePathToEmailsDirectory,
+        dirent.name
+      );
+      return getEmailsDirectoryMetadata(
+        direntAbsolutePath,
+        keepFileExtensions,
+        true,
+        baseDirectoryPath
+      );
+    })
+  );
+  const emailsMetadata = {
+    absolutePath: absolutePathToEmailsDirectory,
+    relativePath: path.relative(
+      baseDirectoryPath,
+      absolutePathToEmailsDirectory
+    ),
+    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop(),
+    emailFilenames,
+    subDirectories
+  };
+  return isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata;
+};
+
+// src/utils/register-spinner-autostopping.ts
+import logSymbols from "log-symbols";
+var spinners = /* @__PURE__ */ new Set();
+process.on("SIGINT", () => {
+  spinners.forEach((spinner) => {
+    if (spinner.isSpinning) {
+      spinner.stop();
+    }
+  });
+});
+process.on("exit", (code) => {
+  if (code !== 0) {
+    spinners.forEach((spinner) => {
+      if (spinner.isSpinning) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error
+        });
+      }
+    });
+  }
+});
+var registerSpinnerAutostopping = (spinner) => {
+  spinners.add(spinner);
+};
 
 // src/cli/utils/tree.ts
-import { promises as fs } from "node:fs";
+import { promises as fs2 } from "node:fs";
 import os from "node:os";
-import path from "node:path";
+import path2 from "node:path";
 var SYMBOLS = {
   BRANCH: "\u251C\u2500\u2500 ",
   EMPTY: "",
@@ -113,12 +205,12 @@ var SYMBOLS = {
 };
 var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
   const base = process.cwd();
-  const dirFullpath = path.resolve(base, dirPath);
-  const dirname = path.basename(dirFullpath);
+  const dirFullpath = path2.resolve(base, dirPath);
+  const dirname = path2.basename(dirFullpath);
   let lines = [dirname];
-  const dirStat = await fs.stat(dirFullpath);
+  const dirStat = await fs2.stat(dirFullpath);
   if (dirStat.isDirectory() && currentDepth < depth) {
-    const childDirents = await fs.readdir(dirFullpath, { withFileTypes: true });
+    const childDirents = await fs2.readdir(dirFullpath, { withFileTypes: true });
     childDirents.sort((a, b) => {
       if (a.isDirectory() && b.isFile()) {
         return -1;
@@ -136,7 +228,7 @@ var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
       if (dirent.isFile()) {
         lines.push(`${branchingSymbol}${dirent.name}`);
       } else {
-        const pathToDirectory = path.join(dirFullpath, dirent.name);
+        const pathToDirectory = path2.join(dirFullpath, dirent.name);
         const treeLinesForSubDirectory = await getTreeLines(
           pathToDirectory,
           depth,
@@ -158,98 +250,46 @@ var tree = async (dirPath, depth) => {
 };
 
 // src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-import path6 from "node:path";
-import { Server as SocketServer } from "socket.io";
+import path7 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 path5 from "node:path";
-import { existsSync, promises as fs3, statSync } from "node:fs";
-
-// src/cli/utils/preview/hot-reloading/get-imported-modules.ts
-import { traverse } from "@babel/core";
-import { parse } from "@babel/parser";
-var getImportedModules = (contents) => {
-  const importedPaths = [];
-  const parsedContents = parse(contents, {
-    sourceType: "unambiguous",
-    strictMode: false,
-    errorRecovery: true,
-    plugins: ["jsx", "typescript", "decorators"]
-  });
-  traverse(parsedContents, {
-    ImportDeclaration({ node }) {
-      importedPaths.push(node.source.value);
-    },
-    ExportAllDeclaration({ node }) {
-      importedPaths.push(node.source.value);
-    },
-    ExportNamedDeclaration({ node }) {
-      if (node.source) {
-        importedPaths.push(node.source.value);
-      }
-    },
-    CallExpression({ node }) {
-      if ("name" in node.callee && node.callee.name === "require") {
-        if (node.arguments.length === 1) {
-          const importPathNode = node.arguments[0];
-          if (importPathNode.type === "StringLiteral") {
-            importedPaths.push(importPathNode.value);
-          }
-        }
-      }
-    }
-  });
-  return importedPaths;
-};
+import { promises as fs4, existsSync, statSync } from "node:fs";
+import path6 from "node:path";
 
 // src/cli/utils/preview/start-dev-server.ts
-import path4 from "node:path";
 import http from "node:http";
+import path5 from "node:path";
 import url from "node:url";
+import chalk from "chalk";
+import logSymbols2 from "log-symbols";
 import next from "next";
 import ora from "ora";
-import logSymbols2 from "log-symbols";
-import chalk from "chalk";
 
-// src/utils/register-spinner-autostopping.ts
-import logSymbols from "log-symbols";
-var spinners = /* @__PURE__ */ new Set();
-process.on("SIGINT", () => {
-  spinners.forEach((spinner) => {
-    if (spinner.isSpinning) {
-      spinner.stop();
-    }
-  });
-});
-process.on("exit", (code) => {
-  if (code !== 0) {
-    spinners.forEach((spinner) => {
-      if (spinner.isSpinning) {
-        spinner.stopAndPersist({
-          symbol: logSymbols.error
-        });
-      }
-    });
-  }
-});
-var registerSpinnerAutostopping = (spinner) => {
-  spinners.add(spinner);
+// src/cli/utils/preview/get-env-variables-for-preview-app.ts
+import path3 from "node:path";
+var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cwd) => {
+  return {
+    EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
+    EMAILS_DIR_ABSOLUTE_PATH: path3.resolve(cwd, relativePathToEmailsDirectory),
+    USER_PROJECT_LOCATION: cwd
+  };
 };
 
 // src/cli/utils/preview/serve-static-file.ts
-import path2 from "node:path";
-import { promises as fs2 } from "node:fs";
+import { promises as fs3 } from "node:fs";
+import path4 from "node:path";
 import { lookup } from "mime-types";
 var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
-  const staticBaseDir = path2.join(process.cwd(), staticDirRelativePath);
+  const staticBaseDir = path4.join(process.cwd(), staticDirRelativePath);
   const pathname = parsedUrl.pathname;
-  const ext = path2.parse(pathname).ext;
-  let fileAbsolutePath = path2.join(staticBaseDir, pathname);
-  const fileHandle = await fs2.open(fileAbsolutePath, "r");
+  const ext = path4.parse(pathname).ext;
+  const fileAbsolutePath = path4.join(staticBaseDir, pathname);
+  const fileHandle = await fs3.open(fileAbsolutePath, "r");
   try {
-    const fileData = await fs2.readFile(fileHandle);
+    const fileData = await fs3.readFile(fileHandle);
     res.setHeader("Content-type", lookup(ext) || "text/plain");
     res.end(fileData);
   } catch (exception) {
@@ -266,16 +306,6 @@ var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
   }
 };
 
-// src/cli/utils/preview/get-env-variables-for-preview-app.ts
-import path3 from "node:path";
-var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cwd) => {
-  return {
-    EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-    EMAILS_DIR_ABSOLUTE_PATH: path3.resolve(cwd, relativePathToEmailsDirectory),
-    USER_PROJECT_LOCATION: cwd
-  };
-};
-
 // src/cli/utils/preview/start-dev-server.ts
 var devServer;
 var safeAsyncServerListen = (server, port) => {
@@ -290,9 +320,9 @@ var safeAsyncServerListen = (server, port) => {
     });
   });
 };
-var isDev = !__filename.endsWith(path4.join("cli", "index.js"));
-var cliPacakgeLocation = isDev ? path4.resolve(__dirname, "../../../..") : path4.resolve(__dirname, "../..");
-var previewServerLocation = isDev ? path4.resolve(__dirname, "../../../..") : path4.resolve(__dirname, "../preview");
+var isDev = !__filename.endsWith(path5.join("cli", "index.js"));
+var cliPacakgeLocation = isDev ? path5.resolve(__dirname, "../../../..") : path5.resolve(__dirname, "../..");
+var previewServerLocation = isDev ? path5.resolve(__dirname, "../../../..") : path5.resolve(__dirname, "../preview");
 var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
   devServer = http.createServer((req, res) => {
     if (!req.url) {
@@ -307,7 +337,7 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
     res.setHeader("Pragma", "no-cache");
     res.setHeader("Expires", "-1");
     try {
-      if (parsedUrl.path && parsedUrl.path.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
+      if (parsedUrl.path?.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
         void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
       } else if (!isNextReady) {
         void nextReadyPromise.then(
@@ -355,11 +385,11 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   registerSpinnerAutostopping(spinner);
   const timeBeforeNextReady = performance.now();
   process.env = {
-    ...process.env,
     NODE_ENV: "development",
+    ...process.env,
     ...getEnvVariablesForPreviewApp(
       // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
-      path4.normalize(emailsDirRelativePath),
+      path5.normalize(emailsDirRelativePath),
       process.cwd()
     )
   };
@@ -417,12 +447,49 @@ process.on(
   makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true })
 );
 
+// src/cli/utils/preview/hot-reloading/get-imported-modules.ts
+import { traverse } from "@babel/core";
+import { parse } from "@babel/parser";
+var getImportedModules = (contents) => {
+  const importedPaths = [];
+  const parsedContents = parse(contents, {
+    sourceType: "unambiguous",
+    strictMode: false,
+    errorRecovery: true,
+    plugins: ["jsx", "typescript", "decorators"]
+  });
+  traverse(parsedContents, {
+    ImportDeclaration({ node }) {
+      importedPaths.push(node.source.value);
+    },
+    ExportAllDeclaration({ node }) {
+      importedPaths.push(node.source.value);
+    },
+    ExportNamedDeclaration({ node }) {
+      if (node.source) {
+        importedPaths.push(node.source.value);
+      }
+    },
+    CallExpression({ node }) {
+      if ("name" in node.callee && node.callee.name === "require") {
+        if (node.arguments.length === 1) {
+          const importPathNode = node.arguments[0];
+          if (importPathNode.type === "StringLiteral") {
+            importedPaths.push(importPathNode.value);
+          }
+        }
+      }
+    }
+  });
+  return importedPaths;
+};
+
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 var readAllFilesInsideDirectory = async (directory) => {
   let allFilePaths = [];
-  const topLevelDirents = await fs3.readdir(directory, { withFileTypes: true });
+  const topLevelDirents = await fs4.readdir(directory, { withFileTypes: true });
   for await (const dirent of topLevelDirents) {
-    const pathToDirent = path5.join(directory, dirent.name);
+    const pathToDirent = path6.join(directory, dirent.name);
     if (dirent.isDirectory()) {
       allFilePaths = allFilePaths.concat(
         await readAllFilesInsideDirectory(pathToDirent)
@@ -434,7 +501,7 @@ var readAllFilesInsideDirectory = async (directory) => {
   return allFilePaths;
 };
 var isJavascriptModule = (filePath) => {
-  const extensionName = path5.extname(filePath);
+  const extensionName = path6.extname(filePath);
   return [".js", ".ts", ".jsx", ".tsx", ".mjs", ".cjs"].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = (pathWithoutExtension) => {
@@ -472,64 +539,63 @@ var createDependencyGraph = async (directory) => {
     ])
   );
   const getDependencyPaths = async (filePath) => {
-    const contents = await fs3.readFile(filePath, "utf8");
+    const contents = await fs4.readFile(filePath, "utf8");
     const importedPaths = getImportedModules(contents);
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {
         const isModulePath = !dependencyPath.startsWith(".");
-        if (!isModulePath && !path5.isAbsolute(dependencyPath)) {
-          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" 
-                          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
-                        */
-            path5.dirname(filePath),
-            dependencyPath
+        if (isModulePath || path6.isAbsolute(dependencyPath)) {
+          return dependencyPath;
+        }
+        let pathToDependencyFromDirectory = path6.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
+                    */
+          path6.dirname(filePath),
+          dependencyPath
+        );
+        let isDirectory = false;
+        try {
+          isDirectory = statSync(pathToDependencyFromDirectory).isDirectory();
+        } catch (_) {
+        }
+        if (isDirectory) {
+          const pathToSubDirectory = pathToDependencyFromDirectory;
+          const pathWithExtension = checkFileExtensionsUntilItExists(
+            `${pathToSubDirectory}/index`
           );
-          let isDirectory = false;
-          try {
-            isDirectory = statSync(pathToDependencyFromDirectory).isDirectory();
-          } catch (_) {
-          }
-          if (isDirectory) {
-            const pathToSubDirectory = pathToDependencyFromDirectory;
-            const pathWithExtension = checkFileExtensionsUntilItExists(
-              `${pathToSubDirectory}/index`
+          if (pathWithExtension) {
+            pathToDependencyFromDirectory = pathWithExtension;
+          } else if (isDev) {
+            console.warn(
+              `Could not find index file for directory at ${pathToDependencyFromDirectory}. This is probably going to cause issues with both hot reloading and your code.`
             );
-            if (pathWithExtension) {
-              pathToDependencyFromDirectory = pathWithExtension;
-            } else if (isDev) {
-              console.warn(
-                `Could not find index file for directory at ${pathToDependencyFromDirectory}. This is probably going to cause issues with both hot reloading and your code.`
-              );
-            }
           }
-          if (!isJavascriptModule(pathToDependencyFromDirectory)) {
-            const pathWithExtension = checkFileExtensionsUntilItExists(
-              pathToDependencyFromDirectory
+        }
+        if (!isJavascriptModule(pathToDependencyFromDirectory)) {
+          const pathWithExtension = checkFileExtensionsUntilItExists(
+            pathToDependencyFromDirectory
+          );
+          if (pathWithExtension) {
+            pathToDependencyFromDirectory = pathWithExtension;
+          } else if (isDev) {
+            console.warn(
+              `Could not determine the file extension for the file at ${pathToDependencyFromDirectory}`
             );
-            if (pathWithExtension) {
-              pathToDependencyFromDirectory = pathWithExtension;
-            } else if (isDev) {
-              console.warn(
-                `Could not determine the file extension for the file at ${pathToDependencyFromDirectory}`
-              );
-            }
           }
-          return pathToDependencyFromDirectory;
-        } else {
-          return dependencyPath;
         }
+        return pathToDependencyFromDirectory;
       }
     );
     const moduleDependencies = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => !dependencyPath.startsWith(".") && !path5.isAbsolute(dependencyPath)
+      (dependencyPath) => !dependencyPath.startsWith(".") && !path6.isAbsolute(dependencyPath)
     );
     const nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => dependencyPath.startsWith(".") || path5.isAbsolute(dependencyPath)
+      (dependencyPath) => dependencyPath.startsWith(".") || path6.isAbsolute(dependencyPath)
     );
     return {
       dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
@@ -658,7 +724,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     });
     changes = [];
   }, 150);
-  const absolutePathToEmailsDirectory = path6.resolve(
+  const absolutePathToEmailsDirectory = path7.resolve(
     process.cwd(),
     emailDirRelativePath
   );
@@ -668,7 +734,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     cwd: absolutePathToEmailsDirectory
   });
   const getFilesOutsideEmailsDirectory = () => Object.keys(dependencyGraph).filter(
-    (p) => path6.relative(absolutePathToEmailsDirectory, p).startsWith("..")
+    (p) => path7.relative(absolutePathToEmailsDirectory, p).startsWith("..")
   );
   let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
   for (const p of filesOutsideEmailsDirectory) {
@@ -680,11 +746,11 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   process.on("SIGINT", exit);
   process.on("uncaughtException", exit);
   watcher.on("all", async (event, relativePathToChangeTarget) => {
-    const file = relativePathToChangeTarget.split(path6.sep);
+    const file = relativePathToChangeTarget.split(path7.sep);
     if (file.length === 0) {
       return;
     }
-    const pathToChangeTarget = path6.resolve(
+    const pathToChangeTarget = path7.resolve(
       absolutePathToEmailsDirectory,
       relativePathToChangeTarget
     );
@@ -708,7 +774,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
         event: "change",
-        filename: path6.relative(absolutePathToEmailsDirectory, dependentPath)
+        filename: path7.relative(absolutePathToEmailsDirectory, dependentPath)
       });
     }
     reload();
@@ -716,300 +782,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   return watcher;
 };
 
-// src/cli/commands/dev.ts
-var dev = async ({ dir: emailsDirRelativePath, port }) => {
-  try {
-    if (!fs4.existsSync(emailsDirRelativePath)) {
-      console.error(`Missing ${emailsDirRelativePath} folder`);
-      process.exit(1);
-    }
-    const devServer2 = await startDevServer(
-      emailsDirRelativePath,
-      emailsDirRelativePath,
-      // defaults to ./emails/static for the static files that are served to the preview
-      Number.parseInt(port)
-    );
-    await setupHotreloading(devServer2, emailsDirRelativePath);
-  } catch (error) {
-    console.log(error);
-    process.exit(1);
-  }
-};
-
-// src/cli/commands/export.ts
-import fs7, { unlinkSync, writeFileSync } from "node:fs";
-import path9 from "node:path";
-import { glob } from "glob";
-import { build } from "esbuild";
-import ora2 from "ora";
-import logSymbols3 from "log-symbols";
-import normalize from "normalize-path";
-
-// src/utils/get-emails-directory-metadata.ts
-import fs5 from "node:fs";
-import path7 from "node:path";
-var isFileAnEmail = (fullPath) => {
-  const stat = fs5.statSync(fullPath);
-  if (stat.isDirectory())
-    return false;
-  const { ext } = path7.parse(fullPath);
-  if (![".js", ".tsx", ".jsx"].includes(ext))
-    return false;
-  if (!fs5.existsSync(fullPath)) {
-    return false;
-  }
-  const fileContents = fs5.readFileSync(fullPath, "utf8");
-  return /\bexport\s+default\b/gm.test(fileContents);
-};
-var mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
-  let currentResultingMergedDirectory = emailsDirectoryMetadata;
-  while (currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1) {
-    const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
-    currentResultingMergedDirectory = {
-      ...onlySubDirectory,
-      directoryName: path7.join(
-        currentResultingMergedDirectory.directoryName,
-        onlySubDirectory.directoryName
-      )
-    };
-  }
-  return currentResultingMergedDirectory;
-};
-var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileExtensions = false, isSubDirectory = false, baseDirectoryPath = absolutePathToEmailsDirectory) => {
-  if (!fs5.existsSync(absolutePathToEmailsDirectory))
-    return;
-  const dirents = await fs5.promises.readdir(absolutePathToEmailsDirectory, {
-    withFileTypes: true
-  });
-  const emailFilenames = dirents.filter(
-    (dirent) => isFileAnEmail(path7.join(absolutePathToEmailsDirectory, dirent.name))
-  ).map(
-    (dirent) => keepFileExtensions ? dirent.name : dirent.name.replace(path7.extname(dirent.name), "")
-  );
-  const subDirectories = await Promise.all(
-    dirents.filter(
-      (dirent) => dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static"
-    ).map((dirent) => {
-      const direntAbsolutePath = path7.join(
-        absolutePathToEmailsDirectory,
-        dirent.name
-      );
-      return getEmailsDirectoryMetadata(
-        direntAbsolutePath,
-        keepFileExtensions,
-        true,
-        baseDirectoryPath
-      );
-    })
-  );
-  const emailsMetadata = {
-    absolutePath: absolutePathToEmailsDirectory,
-    relativePath: path7.relative(
-      baseDirectoryPath,
-      absolutePathToEmailsDirectory
-    ),
-    directoryName: absolutePathToEmailsDirectory.split(path7.sep).pop(),
-    emailFilenames,
-    subDirectories
-  };
-  return isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata;
-};
-
-// src/utils/esbuild/renderring-utilities-exporter.ts
-import path8 from "node:path";
-import { promises as fs6 } from "node:fs";
-
-// src/utils/esbuild/escape-string-for-regex.ts
-function escapeStringForRegex(string) {
-  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
-}
-
-// src/utils/esbuild/renderring-utilities-exporter.ts
-var renderingUtilitiesExporter = (emailTemplates) => ({
-  name: "rendering-utilities-exporter",
-  setup: (b) => {
-    b.onLoad(
-      {
-        filter: new RegExp(
-          emailTemplates.map((emailPath) => escapeStringForRegex(emailPath)).join("|")
-        )
-      },
-      async ({ path: pathToFile }) => {
-        return {
-          contents: `${await fs6.readFile(pathToFile, "utf8")};
-          export { render } from 'react-email-module-that-will-export-render'
-          export { createElement as reactEmailCreateReactElement } from 'react';
-        `,
-          loader: path8.extname(pathToFile).slice(1)
-        };
-      }
-    );
-    b.onResolve(
-      { filter: /^react-email-module-that-will-export-render$/ },
-      async (args) => {
-        const options = {
-          kind: "import-statement",
-          importer: args.importer,
-          resolveDir: args.resolveDir,
-          namespace: args.namespace
-        };
-        let result = await b.resolve("@react-email/render", options);
-        if (result.errors.length === 0) {
-          return result;
-        }
-        result = await b.resolve("@react-email/components", options);
-        if (result.errors.length > 0 && result.errors[0]) {
-          result.errors[0].text = "Failed trying to import `render` from either `@react-email/render` or `@react-email/components` to be able to render your email template.\n Maybe you don't have either of them installed?";
-        }
-        return result;
-      }
-    );
-  }
-});
-
-// src/cli/commands/export.ts
-var getEmailTemplatesFromDirectory = (emailDirectory) => {
-  const templatePaths = [];
-  emailDirectory.emailFilenames.forEach(
-    (filename) => templatePaths.push(path9.join(emailDirectory.absolutePath, filename))
-  );
-  emailDirectory.subDirectories.forEach((directory) => {
-    templatePaths.push(...getEmailTemplatesFromDirectory(directory));
-  });
-  return templatePaths;
-};
-var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) => {
-  if (fs7.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
-    fs7.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
-  }
-  let spinner;
-  if (!options.silent) {
-    spinner = ora2("Preparing files...\n").start();
-    registerSpinnerAutostopping(spinner);
-  }
-  const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
-    path9.resolve(process.cwd(), emailsDirectoryPath),
-    true
-  );
-  if (typeof emailsDirectoryMetadata === "undefined") {
-    if (spinner) {
-      spinner.stopAndPersist({
-        symbol: logSymbols3.error,
-        text: `Could not find the directory at ${emailsDirectoryPath}`
-      });
-    }
-    return;
-  }
-  const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
-  try {
-    await build({
-      bundle: true,
-      entryPoints: allTemplates,
-      plugins: [renderingUtilitiesExporter(allTemplates)],
-      platform: "node",
-      format: "cjs",
-      loader: { ".js": "jsx" },
-      outExtension: { ".js": ".cjs" },
-      jsx: "transform",
-      write: true,
-      outdir: pathToWhereEmailMarkupShouldBeDumped
-    });
-  } catch (exception) {
-    const buildFailure = exception;
-    if (spinner) {
-      spinner.stopAndPersist({
-        symbol: logSymbols3.error,
-        text: "Failed to build emails"
-      });
-    }
-    process.exit(1);
-  }
-  if (spinner) {
-    spinner.succeed();
-  }
-  const allBuiltTemplates = glob.sync(
-    normalize(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`),
-    {
-      absolute: true
-    }
-  );
-  for await (const template of allBuiltTemplates) {
-    try {
-      if (spinner) {
-        spinner.text = `rendering ${template.split("/").pop()}`;
-        spinner.render();
-      }
-      delete __require.cache[template];
-      const emailModule = __require(template);
-      const rendered = await emailModule.render(
-        emailModule.reactEmailCreateReactElement(emailModule.default, {}),
-        options
-      );
-      const htmlPath = template.replace(
-        ".cjs",
-        options.plainText ? ".txt" : ".html"
-      );
-      writeFileSync(htmlPath, rendered);
-      unlinkSync(template);
-    } catch (exception) {
-      if (spinner) {
-        spinner.stopAndPersist({
-          symbol: logSymbols3.error,
-          text: `failed when rendering ${template.split("/").pop()}`
-        });
-      }
-      console.error(exception);
-      process.exit(1);
-    }
-  }
-  if (spinner) {
-    spinner.succeed("Rendered all files");
-    spinner.text = "Copying static files";
-    spinner.render();
-  }
-  const staticDirectoryPath = path9.join(emailsDirectoryPath, "static");
-  if (fs7.existsSync(staticDirectoryPath)) {
-    const pathToDumpStaticFilesInto = path9.join(
-      pathToWhereEmailMarkupShouldBeDumped,
-      "static"
-    );
-    if (fs7.existsSync(pathToDumpStaticFilesInto))
-      await fs7.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
-    try {
-      await fs7.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
-        recursive: true
-      });
-    } catch (exception) {
-      console.error(exception);
-      if (spinner) {
-        spinner.stopAndPersist({
-          symbol: logSymbols3.error,
-          text: "Failed to copy static files"
-        });
-      }
-      console.error(
-        `Something went wrong while copying the file to ${pathToWhereEmailMarkupShouldBeDumped}/static, ${exception}`
-      );
-      process.exit(1);
-    }
-  }
-  if (spinner && !options.silent) {
-    spinner.succeed();
-    const fileTree = await tree(pathToWhereEmailMarkupShouldBeDumped, 4);
-    console.log(fileTree);
-    spinner.stopAndPersist({
-      symbol: logSymbols3.success,
-      text: "Successfully exported emails"
-    });
-  }
-};
-
 // src/cli/commands/build.ts
-import fs8 from "node:fs";
-import path10 from "node:path";
-import ora3 from "ora";
-import { spawn } from "node:child_process";
-import logSymbols4 from "log-symbols";
 var buildPreviewApp = (absoluteDirectory) => {
   return new Promise((resolve, reject) => {
     const nextBuild = spawn("npm", ["run", "build"], {
@@ -1066,8 +839,8 @@ module.exports = {
     webpackBuildWorker: true
   },
 }`;
-  await fs8.promises.writeFile(
-    path10.resolve(builtPreviewAppPath, "./next.config.js"),
+  await fs5.promises.writeFile(
+    path8.resolve(builtPreviewAppPath, "./next.config.js"),
     nextConfigContents,
     "utf8"
   );
@@ -1077,7 +850,7 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
     (filename) => slugs.push(
-      path10.join(directoryPathRelativeToEmailsDirectory, filename).split(path10.sep).filter((segment) => segment.length > 0)
+      path8.join(directoryPathRelativeToEmailsDirectory, filename).split(path8.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -1100,21 +873,21 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     emailsDirPath
   ).map((slug) => ({ slug }));
   const removeForceDynamic = async (filePath) => {
-    const contents = await fs8.promises.readFile(filePath, "utf8");
-    await fs8.promises.writeFile(
+    const contents = await fs5.promises.readFile(filePath, "utf8");
+    await fs5.promises.writeFile(
       filePath,
       contents.replace("export const dynamic = 'force-dynamic';", ""),
       "utf8"
     );
   };
   await removeForceDynamic(
-    path10.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
+    path8.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
   );
   await removeForceDynamic(
-    path10.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
+    path8.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
   );
-  await fs8.promises.appendFile(
-    path10.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
+  await fs5.promises.appendFile(
+    path8.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
 export function generateStaticParams() { 
@@ -1126,16 +899,16 @@ export function generateStaticParams() {
   );
 };
 var updatePackageJson = async (builtPreviewAppPath) => {
-  const packageJsonPath = path10.resolve(builtPreviewAppPath, "./package.json");
+  const packageJsonPath = path8.resolve(builtPreviewAppPath, "./package.json");
   const packageJson = JSON.parse(
-    await fs8.promises.readFile(packageJsonPath, "utf8")
+    await fs5.promises.readFile(packageJsonPath, "utf8")
   );
   packageJson.scripts.build = "next build";
   packageJson.scripts.start = "next start";
   packageJson.name = "preview-server";
   delete packageJson.devDependencies["@react-email/render"];
   delete packageJson.devDependencies["@react-email/components"];
-  await fs8.promises.writeFile(
+  await fs5.promises.writeFile(
     packageJsonPath,
     JSON.stringify(packageJson),
     "utf8"
@@ -1166,41 +939,41 @@ var npmInstall = async (builtPreviewAppPath, packageManager) => {
     });
   });
 };
-var build2 = async ({
+var build = async ({
   dir: emailsDirRelativePath,
   packageManager
 }) => {
   try {
-    const spinner = ora3({
+    const spinner = ora2({
       text: "Starting build process...",
       prefixText: "  "
     }).start();
     registerSpinnerAutostopping(spinner);
     spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
-    if (!fs8.existsSync(emailsDirRelativePath)) {
+    if (!fs5.existsSync(emailsDirRelativePath)) {
       process.exit(1);
     }
-    const emailsDirPath = path10.join(process.cwd(), emailsDirRelativePath);
-    const staticPath = path10.join(emailsDirPath, "static");
-    const builtPreviewAppPath = path10.join(process.cwd(), ".react-email");
-    if (fs8.existsSync(builtPreviewAppPath)) {
+    const emailsDirPath = path8.join(process.cwd(), emailsDirRelativePath);
+    const staticPath = path8.join(emailsDirPath, "static");
+    const builtPreviewAppPath = path8.join(process.cwd(), ".react-email");
+    if (fs5.existsSync(builtPreviewAppPath)) {
       spinner.text = "Deleting pre-existing `.react-email` folder";
-      await fs8.promises.rm(builtPreviewAppPath, { recursive: true });
+      await fs5.promises.rm(builtPreviewAppPath, { recursive: true });
     }
     spinner.text = "Copying preview app from CLI to `.react-email`";
-    await fs8.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
+    await fs5.promises.cp(cliPacakgeLocation, builtPreviewAppPath, {
       recursive: true,
       filter: (source) => {
         return !/(\/|\\)cli(\/|\\)?/.test(source) && !/(\/|\\)\.next(\/|\\)?/.test(source) && !/(\/|\\)\.turbo(\/|\\)?/.test(source) && !/(\/|\\)node_modules(\/|\\)?$/.test(source);
       }
     });
-    if (fs8.existsSync(staticPath)) {
+    if (fs5.existsSync(staticPath)) {
       spinner.text = "Copying `static` folder into `.react-email/public/static`";
-      const builtStaticDirectory = path10.resolve(
+      const builtStaticDirectory = path8.resolve(
         builtPreviewAppPath,
         "./public/static"
       );
-      await fs8.promises.cp(staticPath, builtStaticDirectory, {
+      await fs5.promises.cp(staticPath, builtStaticDirectory, {
         recursive: true
       });
     }
@@ -1217,7 +990,7 @@ var build2 = async ({
     await npmInstall(builtPreviewAppPath, packageManager);
     spinner.stopAndPersist({
       text: "Successfully prepared `.react-email` for `next build`",
-      symbol: logSymbols4.success
+      symbol: logSymbols3.success
     });
     await buildPreviewApp(builtPreviewAppPath);
   } catch (error) {
@@ -1226,10 +999,229 @@ var build2 = async ({
   }
 };
 
+// src/cli/commands/dev.ts
+import fs6 from "node:fs";
+var dev = async ({ dir: emailsDirRelativePath, port }) => {
+  try {
+    if (!fs6.existsSync(emailsDirRelativePath)) {
+      console.error(`Missing ${emailsDirRelativePath} folder`);
+      process.exit(1);
+    }
+    const devServer2 = await startDevServer(
+      emailsDirRelativePath,
+      emailsDirRelativePath,
+      // defaults to ./emails/static for the static files that are served to the preview
+      Number.parseInt(port)
+    );
+    await setupHotreloading(devServer2, emailsDirRelativePath);
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};
+
+// src/cli/commands/export.ts
+import fs8, { unlinkSync, writeFileSync } from "node:fs";
+import path10 from "node:path";
+import { build as build2 } from "esbuild";
+import { glob } from "glob";
+import logSymbols4 from "log-symbols";
+import normalize from "normalize-path";
+import ora3 from "ora";
+
+// src/utils/esbuild/renderring-utilities-exporter.ts
+import { promises as fs7 } from "node:fs";
+import path9 from "node:path";
+
+// src/utils/esbuild/escape-string-for-regex.ts
+function escapeStringForRegex(string) {
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+}
+
+// src/utils/esbuild/renderring-utilities-exporter.ts
+var renderingUtilitiesExporter = (emailTemplates) => ({
+  name: "rendering-utilities-exporter",
+  setup: (b) => {
+    b.onLoad(
+      {
+        filter: new RegExp(
+          emailTemplates.map((emailPath) => escapeStringForRegex(emailPath)).join("|")
+        )
+      },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs7.readFile(pathToFile, "utf8")};
+          export { render } from 'react-email-module-that-will-export-render'
+          export { createElement as reactEmailCreateReactElement } from 'react';
+        `,
+          loader: path9.extname(pathToFile).slice(1)
+        };
+      }
+    );
+    b.onResolve(
+      { filter: /^react-email-module-that-will-export-render$/ },
+      async (args) => {
+        const options = {
+          kind: "import-statement",
+          importer: args.importer,
+          resolveDir: args.resolveDir,
+          namespace: args.namespace
+        };
+        let result = await b.resolve("@react-email/render", options);
+        if (result.errors.length === 0) {
+          return result;
+        }
+        result = await b.resolve("@react-email/components", options);
+        if (result.errors.length > 0 && result.errors[0]) {
+          result.errors[0].text = "Failed trying to import `render` from either `@react-email/render` or `@react-email/components` to be able to render your email template.\n Maybe you don't have either of them installed?";
+        }
+        return result;
+      }
+    );
+  }
+});
+
+// src/cli/commands/export.ts
+var getEmailTemplatesFromDirectory = (emailDirectory) => {
+  const templatePaths = [];
+  emailDirectory.emailFilenames.forEach(
+    (filename) => templatePaths.push(path10.join(emailDirectory.absolutePath, filename))
+  );
+  emailDirectory.subDirectories.forEach((directory) => {
+    templatePaths.push(...getEmailTemplatesFromDirectory(directory));
+  });
+  return templatePaths;
+};
+var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) => {
+  if (fs8.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
+    fs8.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+  }
+  let spinner;
+  if (!options.silent) {
+    spinner = ora3("Preparing files...\n").start();
+    registerSpinnerAutostopping(spinner);
+  }
+  const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
+    path10.resolve(process.cwd(), emailsDirectoryPath),
+    true
+  );
+  if (typeof emailsDirectoryMetadata === "undefined") {
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols4.error,
+        text: `Could not find the directory at ${emailsDirectoryPath}`
+      });
+    }
+    return;
+  }
+  const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
+  try {
+    await build2({
+      bundle: true,
+      entryPoints: allTemplates,
+      plugins: [renderingUtilitiesExporter(allTemplates)],
+      platform: "node",
+      format: "cjs",
+      loader: { ".js": "jsx" },
+      outExtension: { ".js": ".cjs" },
+      jsx: "transform",
+      write: true,
+      outdir: pathToWhereEmailMarkupShouldBeDumped
+    });
+  } catch (exception) {
+    const buildFailure = exception;
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols4.error,
+        text: "Failed to build emails"
+      });
+    }
+    process.exit(1);
+  }
+  if (spinner) {
+    spinner.succeed();
+  }
+  const allBuiltTemplates = glob.sync(
+    normalize(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`),
+    {
+      absolute: true
+    }
+  );
+  for await (const template of allBuiltTemplates) {
+    try {
+      if (spinner) {
+        spinner.text = `rendering ${template.split("/").pop()}`;
+        spinner.render();
+      }
+      delete __require.cache[template];
+      const emailModule = __require(template);
+      const rendered = await emailModule.render(
+        emailModule.reactEmailCreateReactElement(emailModule.default, {}),
+        options
+      );
+      const htmlPath = template.replace(
+        ".cjs",
+        options.plainText ? ".txt" : ".html"
+      );
+      writeFileSync(htmlPath, rendered);
+      unlinkSync(template);
+    } catch (exception) {
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols4.error,
+          text: `failed when rendering ${template.split("/").pop()}`
+        });
+      }
+      console.error(exception);
+      process.exit(1);
+    }
+  }
+  if (spinner) {
+    spinner.succeed("Rendered all files");
+    spinner.text = "Copying static files";
+    spinner.render();
+  }
+  const staticDirectoryPath = path10.join(emailsDirectoryPath, "static");
+  if (fs8.existsSync(staticDirectoryPath)) {
+    const pathToDumpStaticFilesInto = path10.join(
+      pathToWhereEmailMarkupShouldBeDumped,
+      "static"
+    );
+    if (fs8.existsSync(pathToDumpStaticFilesInto))
+      await fs8.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
+    try {
+      await fs8.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
+        recursive: true
+      });
+    } catch (exception) {
+      console.error(exception);
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols4.error,
+          text: "Failed to copy static files"
+        });
+      }
+      console.error(
+        `Something went wrong while copying the file to ${pathToWhereEmailMarkupShouldBeDumped}/static, ${exception}`
+      );
+      process.exit(1);
+    }
+  }
+  if (spinner && !options.silent) {
+    spinner.succeed();
+    const fileTree = await tree(pathToWhereEmailMarkupShouldBeDumped, 4);
+    console.log(fileTree);
+    spinner.stopAndPersist({
+      symbol: logSymbols4.success,
+      text: "Successfully exported emails"
+    });
+  }
+};
+
 // src/cli/commands/start.ts
+import { spawn as spawn2 } from "node:child_process";
 import fs9 from "node:fs";
 import path11 from "node:path";
-import { spawn as spawn2 } from "node:child_process";
 var start = async () => {
   try {
     const usersProjectLocation = process.cwd();
@@ -1267,7 +1259,7 @@ program.command("build").description("Copies the preview app for onto .react-ema
   "-p --packageManager <name>",
   "Package name to use on installation on `.react-email`",
   "npm"
-).action(build2);
+).action(build);
 program.command("start").description('Runs the built preview app that is inside of ".react-email"').action(start);
 program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option(
   "-s, --silent",