react-email 4.1.0-canary.8 → 4.1.0

package/dist/index.js

@@ -102,6 +102,88 @@ import url from "node:url";
 import { createJiti } from "jiti";
 import { addDevDependency } from "nypm";
 import prompts from "prompts";
+
+// package.json
+var package_default = {
+  name: "react-email",
+  version: "4.1.0",
+  description: "A live preview of your emails right in your browser.",
+  bin: {
+    email: "./dist/index.js"
+  },
+  type: "module",
+  scripts: {
+    build: "tsup-node",
+    "build:watch": "tsup-node --watch src",
+    clean: "rm -rf dist",
+    test: "vitest run",
+    "test:watch": "vitest"
+  },
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/resend/react-email.git",
+    directory: "packages/react-email"
+  },
+  keywords: [
+    "react",
+    "email"
+  ],
+  engines: {
+    node: ">=18.0.0"
+  },
+  dependencies: {
+    "@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",
+    jiti: "2.4.2",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    "normalize-path": "^3.0.0",
+    nypm: "0.6.0",
+    ora: "^8.0.0",
+    prompts: "2.4.2",
+    "socket.io": "^4.8.1",
+    "tsconfig-paths": "4.2.0"
+  },
+  devDependencies: {
+    "@react-email/components": "workspace:*",
+    "@types/babel__core": "7.20.5",
+    "@types/babel__traverse": "7.20.7",
+    "@types/mime-types": "2.1.4",
+    "@types/prompts": "2.4.9",
+    next: "^15.3.2",
+    react: "19.0.0",
+    "react-dom": "19.0.0",
+    tsup: "8.4.0",
+    tsx: "4.19.3",
+    typescript: "5.8.3"
+  }
+};
+
+// src/utils/get-preview-server-location.ts
+var ensurePreviewServerInstalled = async (message) => {
+  const response = await prompts({
+    type: "confirm",
+    name: "installPreviewServer",
+    message,
+    initial: true
+  });
+  if (response.installPreviewServer) {
+    console.log('Installing "@react-email/preview-server"');
+    await addDevDependency(
+      `@react-email/preview-server@${package_default.version}`
+    );
+    process.exit(0);
+  } else {
+    process.exit(0);
+  }
+};
 var getPreviewServerLocation = async () => {
   const usersProject = createJiti(process.cwd());
   let previewServerLocation;
@@ -109,20 +191,16 @@ var getPreviewServerLocation = async () => {
     previewServerLocation = path2.dirname(
       url.parse(usersProject.esmResolve("@react-email/preview-server"), true).path
     );
-  } catch (exception) {
-    const response = await prompts({
-      type: "confirm",
-      name: "installPreviewServer",
-      message: 'To run the preview server, the pacakge "@react-email/preview-server" must be installed. Would you like to install it?',
-      initial: true
-    });
-    if (response.installPreviewServer) {
-      console.log('Installing "@react-email/preview-server"');
-      await addDevDependency("@react-email/preview-server");
-      process.exit(0);
-    } else {
-      process.exit(0);
-    }
+  } catch (_exception) {
+    await ensurePreviewServerInstalled(
+      'To run the preview server, the package "@react-email/preview-server" must be installed. Would you like to install it?'
+    );
+  }
+  const { version } = await usersProject.import("@react-email/preview-server");
+  if (version !== package_default.version) {
+    await ensurePreviewServerInstalled(
+      `To run the preview server, the version of "@react-email/preview-server" must match the version of "react-email" (${package_default.version}). Would you like to install it?`
+    );
   }
   return previewServerLocation;
 };
@@ -248,8 +326,8 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
-    (filename3) => slugs.push(
-      path3.join(directoryPathRelativeToEmailsDirectory, filename3).split(path3.sep).filter((segment) => segment.length > 0)
+    (filename2) => slugs.push(
+      path3.join(directoryPathRelativeToEmailsDirectory, filename2).split(path3.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -352,325 +430,42 @@ var build = async ({
       );
       await fs2.promises.cp(staticPath, builtStaticDirectory, {
         recursive: true
-      });
-    }
-    spinner.text = "Setting Next environment variables for preview app to work properly";
-    await setNextEnvironmentVariablesForBuild(
-      emailsDirRelativePath,
-      builtPreviewAppPath
-    );
-    spinner.text = "Setting server side generation for the email preview pages";
-    await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
-    spinner.text = "Updating package.json's build and start scripts";
-    await updatePackageJson(builtPreviewAppPath);
-    spinner.text = "Installing dependencies on `.react-email`";
-    await npmInstall(builtPreviewAppPath, packageManager);
-    spinner.stopAndPersist({
-      text: "Successfully prepared `.react-email` for `next build`",
-      symbol: logSymbols2.success
-    });
-    await buildPreviewApp(builtPreviewAppPath);
-  } catch (error) {
-    console.log(error);
-    process.exit(1);
-  }
-};
-
-// src/commands/dev.ts
-import fs6 from "node:fs";
-
-// src/utils/preview/hot-reloading/setup-hot-reloading.ts
-import path9 from "node:path";
-import { watch } from "chokidar";
-import debounce from "debounce";
-import { Server as SocketServer } from "socket.io";
-
-// src/utils/preview/hot-reloading/create-dependency-graph.ts
-import { existsSync as existsSync2, promises as fs4, statSync } from "node:fs";
-import path8 from "node:path";
-
-// src/utils/preview/start-dev-server.ts
-import http from "node:http";
-import path6 from "node:path";
-import url2 from "node:url";
-import chalk from "chalk";
-import { createJiti as createJiti2 } from "jiti";
-import logSymbols3 from "log-symbols";
-import ora2 from "ora";
-
-// package.json
-var package_default = {
-  name: "react-email",
-  version: "4.1.0-canary.8",
-  description: "A live preview of your emails right in your browser.",
-  bin: {
-    email: "./dist/index.js"
-  },
-  type: "module",
-  scripts: {
-    build: "tsup-node",
-    clean: "rm -rf dist",
-    dev: "tsup-node --watch src",
-    test: "vitest run",
-    "test:watch": "vitest"
-  },
-  license: "MIT",
-  repository: {
-    type: "git",
-    url: "https://github.com/resend/react-email.git",
-    directory: "packages/react-email"
-  },
-  keywords: [
-    "react",
-    "email"
-  ],
-  engines: {
-    node: ">=18.0.0"
-  },
-  dependencies: {
-    "@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",
-    jiti: "2.4.2",
-    "log-symbols": "^7.0.0",
-    "mime-types": "^3.0.0",
-    "normalize-path": "^3.0.0",
-    nypm: "0.6.0",
-    ora: "^8.0.0",
-    prompts: "2.4.2",
-    "socket.io": "^4.8.1",
-    "tsconfig-paths": "4.2.0"
-  },
-  devDependencies: {
-    "@react-email/components": "workspace:*",
-    "@types/babel__core": "7.20.5",
-    "@types/babel__traverse": "7.20.7",
-    "@types/mime-types": "2.1.4",
-    "@types/prompts": "2.4.9",
-    next: "^15.3.1",
-    react: "19.0.0",
-    "react-dom": "19.0.0",
-    tsup: "8.4.0",
-    tsx: "4.19.3",
-    typescript: "5.8.3"
-  }
-};
-
-// src/utils/preview/get-env-variables-for-preview-app.ts
-import path4 from "node:path";
-var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cwd) => {
-  return {
-    EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-    EMAILS_DIR_ABSOLUTE_PATH: path4.resolve(cwd, relativePathToEmailsDirectory),
-    USER_PROJECT_LOCATION: cwd,
-    NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? "true" : "false"
-  };
-};
-
-// src/utils/preview/serve-static-file.ts
-import { existsSync, promises as fs3 } from "node:fs";
-import path5 from "node:path";
-import { lookup } from "mime-types";
-var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
-  const pathname = parsedUrl.pathname.replace("/static", "./static");
-  const ext = path5.parse(pathname).ext;
-  const staticBaseDir = path5.resolve(process.cwd(), staticDirRelativePath);
-  const fileAbsolutePath = path5.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);
-    res.setHeader("Content-type", lookup(ext) || "text/plain");
-    res.end(fileData);
-    fileHandle.close();
-  } catch (exception) {
-    if (!existsSync(fileAbsolutePath)) {
-      res.statusCode = 404;
-      res.end();
-    } else {
-      const sanitizedFilePath = fileAbsolutePath.replace(/\n|\r/g, "");
-      console.error(
-        `Could not read file at ${sanitizedFilePath} to be served, here's the exception:`,
-        exception
-      );
-      res.statusCode = 500;
-      res.end(
-        "Could not read file to be served! Check your terminal for more information."
-      );
-    }
-  }
-};
-
-// src/utils/preview/start-dev-server.ts
-var devServer;
-var safeAsyncServerListen = (server, port) => {
-  return new Promise((resolve) => {
-    server.listen(port, () => {
-      resolve({ portAlreadyInUse: false });
-    });
-    server.on("error", (e) => {
-      if (e.code === "EADDRINUSE") {
-        resolve({ portAlreadyInUse: true });
-      }
-    });
-  });
-};
-var filename = url2.fileURLToPath(import.meta.url);
-var dirname = path6.dirname(filename);
-var isDev = !dirname.includes("dist");
-var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
-  const [majorNodeVersion] = process.versions.node.split(".");
-  if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 18) {
-    console.error(
-      ` ${logSymbols3.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 18 or higher.`
-    );
-    process.exit(1);
-  }
-  const previewServerLocation = await getPreviewServerLocation();
-  const previewServer = createJiti2(previewServerLocation);
-  const { default: next } = await previewServer.import("next");
-  devServer = http.createServer((req, res) => {
-    if (!req.url) {
-      res.end(404);
-      return;
-    }
-    const parsedUrl = url2.parse(req.url, true);
-    res.setHeader(
-      "Cache-Control",
-      "no-cache, max-age=0, must-revalidate, no-store"
-    );
-    res.setHeader("Pragma", "no-cache");
-    res.setHeader("Expires", "-1");
-    try {
-      if (parsedUrl.path?.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
-        void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
-      } else if (!isNextReady) {
-        void nextReadyPromise.then(
-          () => nextHandleRequest?.(req, res, parsedUrl)
-        );
-      } else {
-        void nextHandleRequest?.(req, res, parsedUrl);
-      }
-    } catch (e) {
-      console.error("caught error", e);
-      res.writeHead(500);
-      res.end();
-    }
-  });
-  const { portAlreadyInUse } = await safeAsyncServerListen(devServer, port);
-  if (!portAlreadyInUse) {
-    console.log(chalk.greenBright(`    React Email ${package_default.version}`));
-    console.log(`    Running preview at:          http://localhost:${port}
-`);
-  } else {
-    const nextPortToTry = port + 1;
-    console.warn(
-      ` ${logSymbols3.warning} Port ${port} is already in use, trying ${nextPortToTry}`
-    );
-    return startDevServer(
-      emailsDirRelativePath,
-      staticBaseDirRelativePath,
-      nextPortToTry
-    );
-  }
-  devServer.on("close", async () => {
-    await app.close();
-  });
-  devServer.on("error", (e) => {
-    spinner.stopAndPersist({
-      symbol: logSymbols3.error,
-      text: `Preview Server had an error: ${e}`
-    });
-    process.exit(1);
-  });
-  const spinner = ora2({
-    text: "Getting react-email preview server ready...\n",
-    prefixText: " "
-  }).start();
-  registerSpinnerAutostopping(spinner);
-  const timeBeforeNextReady = performance.now();
-  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.
-      path6.normalize(emailsDirRelativePath),
-      process.cwd()
-    )
-  };
-  const app = next({
-    // passing in env here does not get the environment variables there
-    dev: isDev,
-    conf: {
-      images: {
-        // This is to avoid the warning with sharp
-        unoptimized: true
-      }
-    },
-    hostname: "localhost",
-    port,
-    dir: previewServerLocation
-  });
-  let isNextReady = false;
-  const nextReadyPromise = app.prepare();
-  try {
-    await nextReadyPromise;
-  } catch (exception) {
-    spinner.stopAndPersist({
-      symbol: logSymbols3.error,
-      text: ` Preview Server had an error: ${exception}`
-    });
-    process.exit(1);
-  }
-  isNextReady = true;
-  const nextHandleRequest = app.getRequestHandler();
-  const secondsToNextReady = ((performance.now() - timeBeforeNextReady) / 1e3).toFixed(1);
-  spinner.stopAndPersist({
-    text: `Ready in ${secondsToNextReady}s
-`,
-    symbol: logSymbols3.success
-  });
-  return devServer;
-};
-var makeExitHandler = (options) => (codeSignalOrError) => {
-  if (typeof devServer !== "undefined") {
-    console.log("\nshutting down dev server");
-    devServer.close();
-    devServer = void 0;
-  }
-  if (codeSignalOrError instanceof Error) {
-    console.error(codeSignalOrError);
-  }
-  if (options?.shouldKillProcess) {
-    process.exit(options.killWithErrorCode ? 1 : 0);
+      });
+    }
+    spinner.text = "Setting Next environment variables for preview app to work properly";
+    await setNextEnvironmentVariablesForBuild(
+      emailsDirRelativePath,
+      builtPreviewAppPath
+    );
+    spinner.text = "Setting server side generation for the email preview pages";
+    await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
+    spinner.text = "Updating package.json's build and start scripts";
+    await updatePackageJson(builtPreviewAppPath);
+    spinner.text = "Installing dependencies on `.react-email`";
+    await npmInstall(builtPreviewAppPath, packageManager);
+    spinner.stopAndPersist({
+      text: "Successfully prepared `.react-email` for `next build`",
+      symbol: logSymbols2.success
+    });
+    await buildPreviewApp(builtPreviewAppPath);
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
   }
 };
-process.on("exit", makeExitHandler());
-process.on(
-  "SIGINT",
-  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
-);
-process.on(
-  "SIGUSR1",
-  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
-);
-process.on(
-  "SIGUSR2",
-  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
-);
-process.on(
-  "uncaughtException",
-  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true })
-);
+
+// src/commands/dev.ts
+import fs6 from "node:fs";
+
+// src/utils/preview/hot-reloading/setup-hot-reloading.ts
+import path6 from "node:path";
+import { watch } from "chokidar";
+import debounce from "debounce";
+import { Server as SocketServer } from "socket.io";
+
+// src/utils/preview/hot-reloading/create-dependency-graph.ts
+import { existsSync, promises as fs3, statSync } from "node:fs";
+import path5 from "node:path";
 
 // src/utils/preview/hot-reloading/get-imported-modules.ts
 import { parse } from "@babel/parser";
@@ -718,7 +513,7 @@ var getImportedModules = (contents) => {
 };
 
 // src/utils/preview/hot-reloading/resolve-path-aliases.ts
-import path7 from "node:path";
+import path4 from "node:path";
 import { createMatchPath, loadConfig } from "tsconfig-paths";
 var resolvePathAliases = (importPaths, projectPath) => {
   const configLoadResult = loadConfig(projectPath);
@@ -737,7 +532,7 @@ var resolvePathAliases = (importPaths, projectPath) => {
         ".mjs"
       ]);
       if (unaliasedPath) {
-        return `./${path7.relative(projectPath, unaliasedPath)}`;
+        return `./${path4.relative(projectPath, unaliasedPath)}`;
       }
       return importedPath;
     });
@@ -748,9 +543,9 @@ var resolvePathAliases = (importPaths, projectPath) => {
 // src/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 = path8.join(directory, dirent.name);
+    const pathToDirent = path5.join(directory, dirent.name);
     if (dirent.isDirectory()) {
       allFilePaths = allFilePaths.concat(
         await readAllFilesInsideDirectory(pathToDirent)
@@ -762,26 +557,26 @@ var readAllFilesInsideDirectory = async (directory) => {
   return allFilePaths;
 };
 var isJavascriptModule = (filePath) => {
-  const extensionName = path8.extname(filePath);
+  const extensionName = path5.extname(filePath);
   return [".js", ".ts", ".jsx", ".tsx", ".mjs", ".cjs"].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = (pathWithoutExtension) => {
-  if (existsSync2(`${pathWithoutExtension}.ts`)) {
+  if (existsSync(`${pathWithoutExtension}.ts`)) {
     return `${pathWithoutExtension}.ts`;
   }
-  if (existsSync2(`${pathWithoutExtension}.tsx`)) {
+  if (existsSync(`${pathWithoutExtension}.tsx`)) {
     return `${pathWithoutExtension}.tsx`;
   }
-  if (existsSync2(`${pathWithoutExtension}.js`)) {
+  if (existsSync(`${pathWithoutExtension}.js`)) {
     return `${pathWithoutExtension}.js`;
   }
-  if (existsSync2(`${pathWithoutExtension}.jsx`)) {
+  if (existsSync(`${pathWithoutExtension}.jsx`)) {
     return `${pathWithoutExtension}.jsx`;
   }
-  if (existsSync2(`${pathWithoutExtension}.mjs`)) {
+  if (existsSync(`${pathWithoutExtension}.mjs`)) {
     return `${pathWithoutExtension}.mjs`;
   }
-  if (existsSync2(`${pathWithoutExtension}.cjs`)) {
+  if (existsSync(`${pathWithoutExtension}.cjs`)) {
     return `${pathWithoutExtension}.cjs`;
   }
 };
@@ -800,15 +595,15 @@ var createDependencyGraph = async (directory) => {
     ])
   );
   const getDependencyPaths = async (filePath) => {
-    const contents = await fs4.readFile(filePath, "utf8");
-    const importedPaths = isJavascriptModule(filePath) ? resolvePathAliases(getImportedModules(contents), path8.dirname(filePath)) : [];
+    const contents = await fs3.readFile(filePath, "utf8");
+    const importedPaths = isJavascriptModule(filePath) ? resolvePathAliases(getImportedModules(contents), path5.dirname(filePath)) : [];
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {
         const isModulePath = !dependencyPath.startsWith(".");
-        if (isModulePath || path8.isAbsolute(dependencyPath)) {
+        if (isModulePath || path5.isAbsolute(dependencyPath)) {
           return dependencyPath;
         }
-        let pathToDependencyFromDirectory = path8.resolve(
+        let pathToDependencyFromDirectory = path5.resolve(
           /*
                       path.resolve resolves paths differently from what imports on javascript do.
           
@@ -816,7 +611,7 @@ var createDependencyGraph = async (directory) => {
                       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
                     */
-          path8.dirname(filePath),
+          path5.dirname(filePath),
           dependencyPath
         );
         let isDirectory = false;
@@ -831,15 +626,15 @@ var createDependencyGraph = async (directory) => {
           );
           if (pathWithExtension) {
             pathToDependencyFromDirectory = pathWithExtension;
-          } else if (isDev) {
+          } else {
             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.`
             );
           }
         }
-        const extension = path8.extname(pathToDependencyFromDirectory);
+        const extension = path5.extname(pathToDependencyFromDirectory);
         const pathWithEnsuredExtension = (() => {
-          if (extension.length > 0 && existsSync2(pathToDependencyFromDirectory)) {
+          if (extension.length > 0 && existsSync(pathToDependencyFromDirectory)) {
             return pathToDependencyFromDirectory;
           }
           return checkFileExtensionsUntilItExists(
@@ -848,7 +643,7 @@ var createDependencyGraph = async (directory) => {
         })();
         if (pathWithEnsuredExtension) {
           pathToDependencyFromDirectory = pathWithEnsuredExtension;
-        } else if (isDev) {
+        } else {
           console.warn(
             `Could not find file at ${pathToDependencyFromDirectory}`
           );
@@ -857,10 +652,10 @@ var createDependencyGraph = async (directory) => {
       }
     );
     const moduleDependencies = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => !dependencyPath.startsWith(".") && !path8.isAbsolute(dependencyPath)
+      (dependencyPath) => !dependencyPath.startsWith(".") && !path5.isAbsolute(dependencyPath)
     );
     const nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => dependencyPath.startsWith(".") || path8.isAbsolute(dependencyPath)
+      (dependencyPath) => dependencyPath.startsWith(".") || path5.isAbsolute(dependencyPath)
     );
     return {
       dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
@@ -991,14 +786,14 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
         changes.filter(
           (change) => (
             // Ensures only changes inside the emails directory are emitted
-            path9.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
+            path6.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
           )
         )
       );
     });
     changes = [];
   }, 150);
-  const absolutePathToEmailsDirectory = path9.resolve(
+  const absolutePathToEmailsDirectory = path6.resolve(
     process.cwd(),
     emailDirRelativePath
   );
@@ -1008,7 +803,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     cwd: absolutePathToEmailsDirectory
   });
   const getFilesOutsideEmailsDirectory = () => Object.keys(dependencyGraph).filter(
-    (p) => path9.relative(absolutePathToEmailsDirectory, p).startsWith("..")
+    (p) => path6.relative(absolutePathToEmailsDirectory, p).startsWith("..")
   );
   let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
   for (const p of filesOutsideEmailsDirectory) {
@@ -1020,11 +815,11 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   process.on("SIGINT", exit);
   process.on("uncaughtException", exit);
   watcher.on("all", async (event, relativePathToChangeTarget) => {
-    const file = relativePathToChangeTarget.split(path9.sep);
+    const file = relativePathToChangeTarget.split(path6.sep);
     if (file.length === 0) {
       return;
     }
-    const pathToChangeTarget = path9.resolve(
+    const pathToChangeTarget = path6.resolve(
       absolutePathToEmailsDirectory,
       relativePathToChangeTarget
     );
@@ -1048,7 +843,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
         event: "change",
-        filename: path9.relative(absolutePathToEmailsDirectory, dependentPath)
+        filename: path6.relative(absolutePathToEmailsDirectory, dependentPath)
       });
     }
     reload();
@@ -1056,6 +851,223 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   return watcher;
 };
 
+// src/utils/preview/start-dev-server.ts
+import http from "node:http";
+import path9 from "node:path";
+import url2 from "node:url";
+import chalk from "chalk";
+import { createJiti as createJiti2 } from "jiti";
+import logSymbols3 from "log-symbols";
+import ora2 from "ora";
+
+// src/utils/preview/get-env-variables-for-preview-app.ts
+import path7 from "node:path";
+var getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, cwd) => {
+  return {
+    EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
+    EMAILS_DIR_ABSOLUTE_PATH: path7.resolve(cwd, relativePathToEmailsDirectory),
+    USER_PROJECT_LOCATION: cwd
+  };
+};
+
+// src/utils/preview/serve-static-file.ts
+import { existsSync as existsSync2, promises as fs4 } from "node:fs";
+import path8 from "node:path";
+import { lookup } from "mime-types";
+var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
+  const pathname = parsedUrl.pathname.replace("/static", "./static");
+  const ext = path8.parse(pathname).ext;
+  const staticBaseDir = path8.resolve(process.cwd(), staticDirRelativePath);
+  const fileAbsolutePath = path8.resolve(staticBaseDir, pathname);
+  if (!fileAbsolutePath.startsWith(staticBaseDir)) {
+    res.statusCode = 403;
+    res.end();
+    return;
+  }
+  try {
+    const fileHandle = await fs4.open(fileAbsolutePath, "r");
+    const fileData = await fs4.readFile(fileHandle);
+    res.setHeader("Content-type", lookup(ext) || "text/plain");
+    res.end(fileData);
+    fileHandle.close();
+  } catch (exception) {
+    if (!existsSync2(fileAbsolutePath)) {
+      res.statusCode = 404;
+      res.end();
+    } else {
+      const sanitizedFilePath = fileAbsolutePath.replace(/\n|\r/g, "");
+      console.error(
+        `Could not read file at %s to be served, here's the exception:`,
+        sanitizedFilePath,
+        exception
+      );
+      res.statusCode = 500;
+      res.end(
+        "Could not read file to be served! Check your terminal for more information."
+      );
+    }
+  }
+};
+
+// src/utils/preview/start-dev-server.ts
+var devServer;
+var safeAsyncServerListen = (server, port) => {
+  return new Promise((resolve) => {
+    server.listen(port, () => {
+      resolve({ portAlreadyInUse: false });
+    });
+    server.on("error", (e) => {
+      if (e.code === "EADDRINUSE") {
+        resolve({ portAlreadyInUse: true });
+      }
+    });
+  });
+};
+var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
+  const [majorNodeVersion] = process.versions.node.split(".");
+  if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 18) {
+    console.error(
+      ` ${logSymbols3.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 18 or higher.`
+    );
+    process.exit(1);
+  }
+  const previewServerLocation = await getPreviewServerLocation();
+  const previewServer = createJiti2(previewServerLocation);
+  const { default: next } = await previewServer.import("next");
+  devServer = http.createServer((req, res) => {
+    if (!req.url) {
+      res.end(404);
+      return;
+    }
+    const parsedUrl = url2.parse(req.url, true);
+    res.setHeader(
+      "Cache-Control",
+      "no-cache, max-age=0, must-revalidate, no-store"
+    );
+    res.setHeader("Pragma", "no-cache");
+    res.setHeader("Expires", "-1");
+    try {
+      if (parsedUrl.path?.includes("static/") && !parsedUrl.path.includes("_next/static/")) {
+        void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
+      } else if (!isNextReady) {
+        void nextReadyPromise.then(
+          () => nextHandleRequest?.(req, res, parsedUrl)
+        );
+      } else {
+        void nextHandleRequest?.(req, res, parsedUrl);
+      }
+    } catch (e) {
+      console.error("caught error", e);
+      res.writeHead(500);
+      res.end();
+    }
+  });
+  const { portAlreadyInUse } = await safeAsyncServerListen(devServer, port);
+  if (!portAlreadyInUse) {
+    console.log(chalk.greenBright(`    React Email ${package_default.version}`));
+    console.log(`    Running preview at:          http://localhost:${port}
+`);
+  } else {
+    const nextPortToTry = port + 1;
+    console.warn(
+      ` ${logSymbols3.warning} Port ${port} is already in use, trying ${nextPortToTry}`
+    );
+    return startDevServer(
+      emailsDirRelativePath,
+      staticBaseDirRelativePath,
+      nextPortToTry
+    );
+  }
+  devServer.on("close", async () => {
+    await app.close();
+  });
+  devServer.on("error", (e) => {
+    spinner.stopAndPersist({
+      symbol: logSymbols3.error,
+      text: `Preview Server had an error: ${e}`
+    });
+    process.exit(1);
+  });
+  const spinner = ora2({
+    text: "Getting react-email preview server ready...\n",
+    prefixText: " "
+  }).start();
+  registerSpinnerAutostopping(spinner);
+  const timeBeforeNextReady = performance.now();
+  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.
+      path9.normalize(emailsDirRelativePath),
+      process.cwd()
+    )
+  };
+  const app = next({
+    // passing in env here does not get the environment variables there
+    dev: false,
+    conf: {
+      images: {
+        // This is to avoid the warning with sharp
+        unoptimized: true
+      }
+    },
+    hostname: "localhost",
+    port,
+    dir: previewServerLocation
+  });
+  let isNextReady = false;
+  const nextReadyPromise = app.prepare();
+  try {
+    await nextReadyPromise;
+  } catch (exception) {
+    spinner.stopAndPersist({
+      symbol: logSymbols3.error,
+      text: ` Preview Server had an error: ${exception}`
+    });
+    process.exit(1);
+  }
+  isNextReady = true;
+  const nextHandleRequest = app.getRequestHandler();
+  const secondsToNextReady = ((performance.now() - timeBeforeNextReady) / 1e3).toFixed(1);
+  spinner.stopAndPersist({
+    text: `Ready in ${secondsToNextReady}s
+`,
+    symbol: logSymbols3.success
+  });
+  return devServer;
+};
+var makeExitHandler = (options) => (codeSignalOrError) => {
+  if (typeof devServer !== "undefined") {
+    console.log("\nshutting down dev server");
+    devServer.close();
+    devServer = void 0;
+  }
+  if (codeSignalOrError instanceof Error) {
+    console.error(codeSignalOrError);
+  }
+  if (options?.shouldKillProcess) {
+    process.exit(options.killWithErrorCode ? 1 : 0);
+  }
+};
+process.on("exit", makeExitHandler());
+process.on(
+  "SIGINT",
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
+);
+process.on(
+  "SIGUSR1",
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
+);
+process.on(
+  "SIGUSR2",
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false })
+);
+process.on(
+  "uncaughtException",
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true })
+);
+
 // src/utils/tree.ts
 import { promises as fs5 } from "node:fs";
 import os from "node:os";
@@ -1070,8 +1082,8 @@ var SYMBOLS = {
 var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
   const base = process.cwd();
   const dirFullpath = path10.resolve(base, dirPath);
-  const dirname2 = path10.basename(dirFullpath);
-  let lines = [dirname2];
+  const dirname = path10.basename(dirFullpath);
+  let lines = [dirname];
   const dirStat = await fs5.stat(dirFullpath);
   if (dirStat.isDirectory() && currentDepth < depth) {
     const childDirents = await fs5.readdir(dirFullpath, { withFileTypes: true });
@@ -1200,15 +1212,15 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename3) => templatePaths.push(path12.join(emailDirectory.absolutePath, filename3))
+    (filename2) => templatePaths.push(path12.join(emailDirectory.absolutePath, filename2))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
   });
   return templatePaths;
 };
-var filename2 = url3.fileURLToPath(import.meta.url);
-var require2 = createRequire(filename2);
+var filename = url3.fileURLToPath(import.meta.url);
+var require2 = createRequire(filename);
 var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) => {
   if (fs8.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
     fs8.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });