react-email 4.1.0-canary.7 → 4.1.0-canary.9

package/dist/{cli/index.mjs → index.js}

@@ -1,112 +1,14 @@
 #!/usr/bin/env node
 
-// src/cli/index.ts
+// src/index.ts
 import { program } from "commander";
 
-// package.json
-var package_default = {
-  name: "react-email",
-  version: "4.1.0-canary.7",
-  description: "A live preview of your emails right in your browser.",
-  bin: {
-    email: "./dist/cli/index.mjs"
-  },
-  scripts: {
-    build: "tsup-node && node ./scripts/build-preview-server.mjs",
-    postbuild: "pnpm install --frozen-lockfile",
-    "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
-    clean: "rm -rf dist",
-    dev: "tsup-node --watch",
-    "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev",
-    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",
-    "log-symbols": "^7.0.0",
-    "mime-types": "^3.0.0",
-    next: "^15.3.1",
-    "normalize-path": "^3.0.0",
-    ora: "^8.0.0",
-    "socket.io": "^4.8.1",
-    "tsconfig-paths": "4.2.0"
-  },
-  devDependencies: {
-    "@babel/core": "7.26.10",
-    "@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.11.21",
-    "@types/babel__core": "7.20.5",
-    "@types/babel__traverse": "7.20.7",
-    "@types/fs-extra": "11.0.1",
-    "@types/mime-types": "2.1.4",
-    "@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",
-    autoprefixer: "10.4.21",
-    clsx: "2.1.1",
-    "framer-motion": "12.7.5",
-    jiti: "2.4.2",
-    json5: "2.2.3",
-    "module-punycode": "npm:punycode@2.3.1",
-    "node-html-parser": "7.0.1",
-    postcss: "8.5.3",
-    "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.4.1",
-    react: "19.0.0",
-    "react-dom": "19.0.0",
-    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.11",
-    "tailwind-merge": "3.2.0",
-    tailwindcss: "3.4.0",
-    tsup: "8.4.0",
-    tsx: "4.19.3",
-    typescript: "5.8.3",
-    "use-debounce": "10.0.4",
-    zod: "3.24.3"
-  }
-};
-
-// src/cli/commands/build.ts
+// src/commands/build.ts
 import { spawn } from "node:child_process";
-import fs5 from "node:fs";
-import path9 from "node:path";
-import logSymbols3 from "log-symbols";
-import ora2 from "ora";
+import fs2 from "node:fs";
+import path3 from "node:path";
+import logSymbols2 from "log-symbols";
+import ora from "ora";
 
 // src/utils/get-emails-directory-metadata.ts
 import fs from "node:fs";
@@ -194,6 +96,115 @@ var getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileE
   return isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata;
 };
 
+// src/utils/get-preview-server-location.ts
+import path2 from "node:path";
+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-canary.9",
+  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.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;
+  try {
+    previewServerLocation = path2.dirname(
+      url.parse(usersProject.esmResolve("@react-email/preview-server"), true).path
+    );
+  } 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;
+};
+
 // src/utils/register-spinner-autostopping.ts
 import logSymbols from "log-symbols";
 var spinners = /* @__PURE__ */ new Set();
@@ -214,58 +225,285 @@ process.on("exit", (code) => {
       }
     });
   }
-});
-var registerSpinnerAutostopping = (spinner) => {
-  spinners.add(spinner);
+});
+var registerSpinnerAutostopping = (spinner) => {
+  spinners.add(spinner);
+};
+
+// src/commands/build.ts
+var buildPreviewApp = (absoluteDirectory) => {
+  return new Promise((resolve, reject) => {
+    const nextBuild = spawn("npm", ["run", "build"], {
+      cwd: absoluteDirectory,
+      shell: true
+    });
+    nextBuild.stdout.pipe(process.stdout);
+    nextBuild.stderr.pipe(process.stderr);
+    nextBuild.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `Unable to build the Next app and it exited with code: ${code}`
+          )
+        );
+      }
+    });
+  });
+};
+var npmInstall = async (builtPreviewAppPath, packageManager) => {
+  return new Promise((resolve, reject) => {
+    const childProc = spawn(
+      packageManager,
+      [
+        "install",
+        packageManager === "deno" ? "" : "--include=dev",
+        packageManager === "deno" ? "--quiet" : "--silent"
+      ],
+      {
+        cwd: builtPreviewAppPath,
+        shell: true
+      }
+    );
+    childProc.stdout.pipe(process.stdout);
+    childProc.stderr.pipe(process.stderr);
+    childProc.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `Unable to install the dependencies and it exited with code: ${code}`
+          )
+        );
+      }
+    });
+  });
+};
+var setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath) => {
+  const nextConfigContents = `
+const path = require('path');
+const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
+const userProjectLocation = '${process.cwd()}';
+/** @type {import('next').NextConfig} */
+module.exports = {
+  env: {
+    NEXT_PUBLIC_IS_BUILDING: 'true',
+    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
+    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
+    USER_PROJECT_LOCATION: userProjectLocation
+  },
+  // this is needed so that the code for building emails works properly
+  webpack: (
+    /** @type {import('webpack').Configuration & { externals: string[] }} */
+    config,
+    { isServer }
+  ) => {
+    if (isServer) {
+      config.externals.push('esbuild');
+    }
+
+    return config;
+  },
+  typescript: {
+    ignoreBuildErrors: true
+  },
+  eslint: {
+    ignoreDuringBuilds: true
+  },
+  experimental: {
+    webpackBuildWorker: true
+  },
+}`;
+  await fs2.promises.writeFile(
+    path3.resolve(builtPreviewAppPath, "./next.config.js"),
+    nextConfigContents,
+    "utf8"
+  );
+};
+var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePath) => {
+  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)
+    )
+  );
+  emailDirectory.subDirectories.forEach((directory) => {
+    slugs.push(
+      ...getEmailSlugsFromEmailDirectory(
+        directory,
+        emailsDirectoryAbsolutePath
+      )
+    );
+  });
+  return slugs;
+};
+var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
+  const emailDirectoryMetadata = (
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await getEmailsDirectoryMetadata(emailsDirPath)
+  );
+  const parameters = getEmailSlugsFromEmailDirectory(
+    emailDirectoryMetadata,
+    emailsDirPath
+  ).map((slug) => ({ slug }));
+  const removeForceDynamic = async (filePath) => {
+    const contents = await fs2.promises.readFile(filePath, "utf8");
+    await fs2.promises.writeFile(
+      filePath,
+      contents.replace("export const dynamic = 'force-dynamic';", ""),
+      "utf8"
+    );
+  };
+  await removeForceDynamic(
+    path3.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
+  );
+  await removeForceDynamic(
+    path3.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
+  );
+  await fs2.promises.appendFile(
+    path3.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
+    `
+
+export function generateStaticParams() { 
+  return Promise.resolve(
+    ${JSON.stringify(parameters)}
+  );
+}`,
+    "utf8"
+  );
+};
+var updatePackageJson = async (builtPreviewAppPath) => {
+  const packageJsonPath = path3.resolve(builtPreviewAppPath, "./package.json");
+  const packageJson = JSON.parse(
+    await fs2.promises.readFile(packageJsonPath, "utf8")
+  );
+  packageJson.scripts.build = "next build";
+  packageJson.scripts.start = "next start";
+  delete packageJson.scripts.postbuild;
+  packageJson.name = "preview-server";
+  delete packageJson.devDependencies["@react-email/render"];
+  delete packageJson.devDependencies["@react-email/components"];
+  delete packageJson.scripts.prepare;
+  await fs2.promises.writeFile(
+    packageJsonPath,
+    JSON.stringify(packageJson),
+    "utf8"
+  );
+};
+var build = async ({
+  dir: emailsDirRelativePath,
+  packageManager
+}) => {
+  try {
+    const previewServerLocation = await getPreviewServerLocation();
+    const spinner = ora({
+      text: "Starting build process...",
+      prefixText: "  "
+    }).start();
+    registerSpinnerAutostopping(spinner);
+    spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
+    if (!fs2.existsSync(emailsDirRelativePath)) {
+      process.exit(1);
+    }
+    const emailsDirPath = path3.join(process.cwd(), emailsDirRelativePath);
+    const staticPath = path3.join(emailsDirPath, "static");
+    const builtPreviewAppPath = path3.join(process.cwd(), ".react-email");
+    if (fs2.existsSync(builtPreviewAppPath)) {
+      spinner.text = "Deleting pre-existing `.react-email` folder";
+      await fs2.promises.rm(builtPreviewAppPath, { recursive: true });
+    }
+    spinner.text = "Copying preview app from CLI to `.react-email`";
+    await fs2.promises.cp(previewServerLocation, builtPreviewAppPath, {
+      recursive: true,
+      filter: (source) => {
+        return !/(\/|\\)cli(\/|\\)?/.test(source) && !/(\/|\\)\.next(\/|\\)?/.test(source) && !/(\/|\\)\.turbo(\/|\\)?/.test(source) && !/(\/|\\)node_modules(\/|\\)?$/.test(source);
+      }
+    });
+    if (fs2.existsSync(staticPath)) {
+      spinner.text = "Copying `static` folder into `.react-email/public/static`";
+      const builtStaticDirectory = path3.resolve(
+        builtPreviewAppPath,
+        "./public/static"
+      );
+      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/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-import path7 from "node:path";
+// 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/cli/utils/preview/hot-reloading/create-dependency-graph.ts
-import { existsSync as existsSync2, promises as fs3, statSync } from "node:fs";
-import path6 from "node:path";
+// 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/cli/utils/preview/start-dev-server.ts
+// src/utils/preview/start-dev-server.ts
 import http from "node:http";
-import path4 from "node:path";
-import url from "node:url";
+import path6 from "node:path";
+import url2 from "node:url";
 import chalk from "chalk";
-import logSymbols2 from "log-symbols";
-import next from "next";
-import ora from "ora";
+import { createJiti as createJiti2 } from "jiti";
+import logSymbols3 from "log-symbols";
+import ora2 from "ora";
 
-// src/cli/utils/preview/get-env-variables-for-preview-app.ts
-import path2 from "node:path";
+// 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: path2.resolve(cwd, relativePathToEmailsDirectory),
+    EMAILS_DIR_ABSOLUTE_PATH: path4.resolve(cwd, relativePathToEmailsDirectory),
     USER_PROJECT_LOCATION: cwd,
     NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? "true" : "false"
   };
 };
 
-// src/cli/utils/preview/serve-static-file.ts
-import { existsSync, promises as fs2 } from "node:fs";
-import path3 from "node:path";
+// 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 = path3.parse(pathname).ext;
-  const staticBaseDir = path3.resolve(process.cwd(), staticDirRelativePath);
-  const fileAbsolutePath = path3.resolve(staticBaseDir, pathname);
+  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 fs2.open(fileAbsolutePath, "r");
-    const fileData = await fs2.readFile(fileHandle);
+    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();
@@ -287,7 +525,7 @@ var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
   }
 };
 
-// src/cli/utils/preview/start-dev-server.ts
+// src/utils/preview/start-dev-server.ts
 var devServer;
 var safeAsyncServerListen = (server, port) => {
   return new Promise((resolve) => {
@@ -301,25 +539,26 @@ var safeAsyncServerListen = (server, port) => {
     });
   });
 };
-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 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(
-      ` ${logSymbols2.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 18 or higher.`
+      ` ${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 = url.parse(req.url, true);
+    const parsedUrl = url2.parse(req.url, true);
     res.setHeader(
       "Cache-Control",
       "no-cache, max-age=0, must-revalidate, no-store"
@@ -350,7 +589,7 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   } else {
     const nextPortToTry = port + 1;
     console.warn(
-      ` ${logSymbols2.warning} Port ${port} is already in use, trying ${nextPortToTry}`
+      ` ${logSymbols3.warning} Port ${port} is already in use, trying ${nextPortToTry}`
     );
     return startDevServer(
       emailsDirRelativePath,
@@ -363,12 +602,12 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   });
   devServer.on("error", (e) => {
     spinner.stopAndPersist({
-      symbol: logSymbols2.error,
+      symbol: logSymbols3.error,
       text: `Preview Server had an error: ${e}`
     });
     process.exit(1);
   });
-  const spinner = ora({
+  const spinner = ora2({
     text: "Getting react-email preview server ready...\n",
     prefixText: " "
   }).start();
@@ -379,7 +618,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.
-      path4.normalize(emailsDirRelativePath),
+      path6.normalize(emailsDirRelativePath),
       process.cwd()
     )
   };
@@ -402,7 +641,7 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
     await nextReadyPromise;
   } catch (exception) {
     spinner.stopAndPersist({
-      symbol: logSymbols2.error,
+      symbol: logSymbols3.error,
       text: ` Preview Server had an error: ${exception}`
     });
     process.exit(1);
@@ -413,16 +652,19 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   spinner.stopAndPersist({
     text: `Ready in ${secondsToNextReady}s
 `,
-    symbol: logSymbols2.success
+    symbol: logSymbols3.success
   });
   return devServer;
 };
-var makeExitHandler = (options) => (_codeOrSignal) => {
+var makeExitHandler = (options) => (codeSignalOrError) => {
   if (typeof devServer !== "undefined") {
-    console.log("\n    shutting down dev server");
+    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);
   }
@@ -445,10 +687,14 @@ process.on(
   makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true })
 );
 
-// src/cli/utils/preview/hot-reloading/get-imported-modules.ts
+// src/utils/preview/hot-reloading/get-imported-modules.ts
 import { parse } from "@babel/parser";
 import traverseModule from "@babel/traverse";
-var traverse = traverseModule.default;
+var traverse = (
+  // we keep this check here so that this still works with the dev:preview
+  // script's use of tsx
+  typeof traverseModule === "function" ? traverseModule : traverseModule.default
+);
 var getImportedModules = (contents) => {
   const importedPaths = [];
   const parsedContents = parse(contents, {
@@ -486,8 +732,8 @@ var getImportedModules = (contents) => {
   return importedPaths;
 };
 
-// src/cli/utils/preview/hot-reloading/resolve-path-aliases.ts
-import path5 from "node:path";
+// src/utils/preview/hot-reloading/resolve-path-aliases.ts
+import path7 from "node:path";
 import { createMatchPath, loadConfig } from "tsconfig-paths";
 var resolvePathAliases = (importPaths, projectPath) => {
   const configLoadResult = loadConfig(projectPath);
@@ -506,7 +752,7 @@ var resolvePathAliases = (importPaths, projectPath) => {
         ".mjs"
       ]);
       if (unaliasedPath) {
-        return `./${path5.relative(projectPath, unaliasedPath)}`;
+        return `./${path7.relative(projectPath, unaliasedPath)}`;
       }
       return importedPath;
     });
@@ -514,12 +760,12 @@ var resolvePathAliases = (importPaths, projectPath) => {
   return importPaths;
 };
 
-// src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
+// src/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 = path6.join(directory, dirent.name);
+    const pathToDirent = path8.join(directory, dirent.name);
     if (dirent.isDirectory()) {
       allFilePaths = allFilePaths.concat(
         await readAllFilesInsideDirectory(pathToDirent)
@@ -531,7 +777,7 @@ var readAllFilesInsideDirectory = async (directory) => {
   return allFilePaths;
 };
 var isJavascriptModule = (filePath) => {
-  const extensionName = path6.extname(filePath);
+  const extensionName = path8.extname(filePath);
   return [".js", ".ts", ".jsx", ".tsx", ".mjs", ".cjs"].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = (pathWithoutExtension) => {
@@ -558,10 +804,10 @@ var createDependencyGraph = async (directory) => {
   const filePaths = await readAllFilesInsideDirectory(directory);
   const modulePaths = filePaths.filter(isJavascriptModule);
   const graph = Object.fromEntries(
-    modulePaths.map((path13) => [
-      path13,
+    modulePaths.map((path14) => [
+      path14,
       {
-        path: path13,
+        path: path14,
         dependencyPaths: [],
         dependentPaths: [],
         moduleDependencies: []
@@ -569,15 +815,15 @@ var createDependencyGraph = async (directory) => {
     ])
   );
   const getDependencyPaths = async (filePath) => {
-    const contents = await fs3.readFile(filePath, "utf8");
-    const importedPaths = isJavascriptModule(filePath) ? resolvePathAliases(getImportedModules(contents), path6.dirname(filePath)) : [];
+    const contents = await fs4.readFile(filePath, "utf8");
+    const importedPaths = isJavascriptModule(filePath) ? resolvePathAliases(getImportedModules(contents), path8.dirname(filePath)) : [];
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {
         const isModulePath = !dependencyPath.startsWith(".");
-        if (isModulePath || path6.isAbsolute(dependencyPath)) {
+        if (isModulePath || path8.isAbsolute(dependencyPath)) {
           return dependencyPath;
         }
-        let pathToDependencyFromDirectory = path6.resolve(
+        let pathToDependencyFromDirectory = path8.resolve(
           /*
                       path.resolve resolves paths differently from what imports on javascript do.
           
@@ -585,7 +831,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
                     */
-          path6.dirname(filePath),
+          path8.dirname(filePath),
           dependencyPath
         );
         let isDirectory = false;
@@ -606,7 +852,7 @@ var createDependencyGraph = async (directory) => {
             );
           }
         }
-        const extension = path6.extname(pathToDependencyFromDirectory);
+        const extension = path8.extname(pathToDependencyFromDirectory);
         const pathWithEnsuredExtension = (() => {
           if (extension.length > 0 && existsSync2(pathToDependencyFromDirectory)) {
             return pathToDependencyFromDirectory;
@@ -626,10 +872,10 @@ var createDependencyGraph = async (directory) => {
       }
     );
     const moduleDependencies = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => !dependencyPath.startsWith(".") && !path6.isAbsolute(dependencyPath)
+      (dependencyPath) => !dependencyPath.startsWith(".") && !path8.isAbsolute(dependencyPath)
     );
     const nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => dependencyPath.startsWith(".") || path6.isAbsolute(dependencyPath)
+      (dependencyPath) => dependencyPath.startsWith(".") || path8.isAbsolute(dependencyPath)
     );
     return {
       dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
@@ -742,7 +988,7 @@ var createDependencyGraph = async (directory) => {
   ];
 };
 
-// src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
+// src/utils/preview/hot-reloading/setup-hot-reloading.ts
 var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   let clients = [];
   const io = new SocketServer(devServer2);
@@ -760,14 +1006,14 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
         changes.filter(
           (change) => (
             // Ensures only changes inside the emails directory are emitted
-            path7.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
+            path9.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
           )
         )
       );
     });
     changes = [];
   }, 150);
-  const absolutePathToEmailsDirectory = path7.resolve(
+  const absolutePathToEmailsDirectory = path9.resolve(
     process.cwd(),
     emailDirRelativePath
   );
@@ -777,7 +1023,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     cwd: absolutePathToEmailsDirectory
   });
   const getFilesOutsideEmailsDirectory = () => Object.keys(dependencyGraph).filter(
-    (p) => path7.relative(absolutePathToEmailsDirectory, p).startsWith("..")
+    (p) => path9.relative(absolutePathToEmailsDirectory, p).startsWith("..")
   );
   let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
   for (const p of filesOutsideEmailsDirectory) {
@@ -789,11 +1035,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(path9.sep);
     if (file.length === 0) {
       return;
     }
-    const pathToChangeTarget = path7.resolve(
+    const pathToChangeTarget = path9.resolve(
       absolutePathToEmailsDirectory,
       relativePathToChangeTarget
     );
@@ -817,7 +1063,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
         event: "change",
-        filename: path7.relative(absolutePathToEmailsDirectory, dependentPath)
+        filename: path9.relative(absolutePathToEmailsDirectory, dependentPath)
       });
     }
     reload();
@@ -825,10 +1071,10 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   return watcher;
 };
 
-// src/cli/utils/tree.ts
-import { promises as fs4 } from "node:fs";
+// src/utils/tree.ts
+import { promises as fs5 } from "node:fs";
 import os from "node:os";
-import path8 from "node:path";
+import path10 from "node:path";
 var SYMBOLS = {
   BRANCH: "\u251C\u2500\u2500 ",
   EMPTY: "",
@@ -838,12 +1084,12 @@ var SYMBOLS = {
 };
 var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
   const base = process.cwd();
-  const dirFullpath = path8.resolve(base, dirPath);
-  const dirname2 = path8.basename(dirFullpath);
+  const dirFullpath = path10.resolve(base, dirPath);
+  const dirname2 = path10.basename(dirFullpath);
   let lines = [dirname2];
-  const dirStat = await fs4.stat(dirFullpath);
+  const dirStat = await fs5.stat(dirFullpath);
   if (dirStat.isDirectory() && currentDepth < depth) {
-    const childDirents = await fs4.readdir(dirFullpath, { withFileTypes: true });
+    const childDirents = await fs5.readdir(dirFullpath, { withFileTypes: true });
     childDirents.sort((a, b) => {
       if (a.isDirectory() && b.isFile()) {
         return -1;
@@ -861,7 +1107,7 @@ var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
       if (dirent.isFile()) {
         lines.push(`${branchingSymbol}${dirent.name}`);
       } else {
-        const pathToDirectory = path8.join(dirFullpath, dirent.name);
+        const pathToDirectory = path10.join(dirFullpath, dirent.name);
         const treeLinesForSubDirectory = await getTreeLines(
           pathToDirectory,
           depth,
@@ -882,231 +1128,7 @@ var tree = async (dirPath, depth) => {
   return lines.join(os.EOL);
 };
 
-// src/cli/commands/build.ts
-var buildPreviewApp = (absoluteDirectory) => {
-  return new Promise((resolve, reject) => {
-    const nextBuild = spawn("npm", ["run", "build"], {
-      cwd: absoluteDirectory,
-      shell: true
-    });
-    nextBuild.stdout.pipe(process.stdout);
-    nextBuild.stderr.pipe(process.stderr);
-    nextBuild.on("close", (code) => {
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(
-          new Error(
-            `Unable to build the Next app and it exited with code: ${code}`
-          )
-        );
-      }
-    });
-  });
-};
-var setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath) => {
-  const nextConfigContents = `
-const path = require('path');
-const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
-const userProjectLocation = path.resolve(process.cwd(), '../');
-/** @type {import('next').NextConfig} */
-module.exports = {
-  env: {
-    NEXT_PUBLIC_IS_BUILDING: 'true',
-    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
-    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
-    USER_PROJECT_LOCATION: userProjectLocation
-  },
-  // this is needed so that the code for building emails works properly
-  webpack: (
-    /** @type {import('webpack').Configuration & { externals: string[] }} */
-    config,
-    { isServer }
-  ) => {
-    if (isServer) {
-      config.externals.push('esbuild');
-    }
-
-    return config;
-  },
-  typescript: {
-    ignoreBuildErrors: true
-  },
-  eslint: {
-    ignoreDuringBuilds: true
-  },
-  experimental: {
-    webpackBuildWorker: true
-  },
-}`;
-  await fs5.promises.writeFile(
-    path9.resolve(builtPreviewAppPath, "./next.config.js"),
-    nextConfigContents,
-    "utf8"
-  );
-};
-var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePath) => {
-  const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
-  const slugs = [];
-  emailDirectory.emailFilenames.forEach(
-    (filename3) => slugs.push(
-      path9.join(directoryPathRelativeToEmailsDirectory, filename3).split(path9.sep).filter((segment) => segment.length > 0)
-    )
-  );
-  emailDirectory.subDirectories.forEach((directory) => {
-    slugs.push(
-      ...getEmailSlugsFromEmailDirectory(
-        directory,
-        emailsDirectoryAbsolutePath
-      )
-    );
-  });
-  return slugs;
-};
-var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
-  const emailDirectoryMetadata = (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    await getEmailsDirectoryMetadata(emailsDirPath)
-  );
-  const parameters = getEmailSlugsFromEmailDirectory(
-    emailDirectoryMetadata,
-    emailsDirPath
-  ).map((slug) => ({ slug }));
-  const removeForceDynamic = async (filePath) => {
-    const contents = await fs5.promises.readFile(filePath, "utf8");
-    await fs5.promises.writeFile(
-      filePath,
-      contents.replace("export const dynamic = 'force-dynamic';", ""),
-      "utf8"
-    );
-  };
-  await removeForceDynamic(
-    path9.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
-  );
-  await removeForceDynamic(
-    path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
-  );
-  await fs5.promises.appendFile(
-    path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
-    `
-
-export function generateStaticParams() { 
-  return Promise.resolve(
-    ${JSON.stringify(parameters)}
-  );
-}`,
-    "utf8"
-  );
-};
-var updatePackageJson = async (builtPreviewAppPath) => {
-  const packageJsonPath = path9.resolve(builtPreviewAppPath, "./package.json");
-  const packageJson = JSON.parse(
-    await fs5.promises.readFile(packageJsonPath, "utf8")
-  );
-  packageJson.scripts.build = "next build";
-  packageJson.scripts.start = "next start";
-  delete packageJson.scripts.postbuild;
-  packageJson.name = "preview-server";
-  delete packageJson.devDependencies["@react-email/render"];
-  delete packageJson.devDependencies["@react-email/components"];
-  delete packageJson.scripts.prepare;
-  await fs5.promises.writeFile(
-    packageJsonPath,
-    JSON.stringify(packageJson),
-    "utf8"
-  );
-};
-var npmInstall = async (builtPreviewAppPath, packageManager) => {
-  return new Promise((resolve, reject) => {
-    const childProc = spawn(
-      packageManager,
-      [
-        "install",
-        packageManager === "deno" ? "" : "--include=dev",
-        packageManager === "deno" ? "--quiet" : "--silent"
-      ],
-      {
-        cwd: builtPreviewAppPath,
-        shell: true
-      }
-    );
-    childProc.stdout.pipe(process.stdout);
-    childProc.stderr.pipe(process.stderr);
-    childProc.on("close", (code) => {
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(
-          new Error(
-            `Unable to install the dependencies and it exited with code: ${code}`
-          )
-        );
-      }
-    });
-  });
-};
-var build = async ({
-  dir: emailsDirRelativePath,
-  packageManager
-}) => {
-  try {
-    const spinner = ora2({
-      text: "Starting build process...",
-      prefixText: "  "
-    }).start();
-    registerSpinnerAutostopping(spinner);
-    spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
-    if (!fs5.existsSync(emailsDirRelativePath)) {
-      process.exit(1);
-    }
-    const emailsDirPath = path9.join(process.cwd(), emailsDirRelativePath);
-    const staticPath = path9.join(emailsDirPath, "static");
-    const builtPreviewAppPath = path9.join(process.cwd(), ".react-email");
-    if (fs5.existsSync(builtPreviewAppPath)) {
-      spinner.text = "Deleting pre-existing `.react-email` folder";
-      await fs5.promises.rm(builtPreviewAppPath, { recursive: true });
-    }
-    spinner.text = "Copying preview app from CLI to `.react-email`";
-    await fs5.promises.cp(cliPackageLocation, builtPreviewAppPath, {
-      recursive: true,
-      filter: (source) => {
-        return !/(\/|\\)cli(\/|\\)?/.test(source) && !/(\/|\\)\.next(\/|\\)?/.test(source) && !/(\/|\\)\.turbo(\/|\\)?/.test(source) && !/(\/|\\)node_modules(\/|\\)?$/.test(source);
-      }
-    });
-    if (fs5.existsSync(staticPath)) {
-      spinner.text = "Copying `static` folder into `.react-email/public/static`";
-      const builtStaticDirectory = path9.resolve(
-        builtPreviewAppPath,
-        "./public/static"
-      );
-      await fs5.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: logSymbols3.success
-    });
-    await buildPreviewApp(builtPreviewAppPath);
-  } catch (error) {
-    console.log(error);
-    process.exit(1);
-  }
-};
-
-// src/cli/commands/dev.ts
-import fs6 from "node:fs";
+// src/commands/dev.ts
 var dev = async ({ dir: emailsDirRelativePath, port }) => {
   try {
     if (!fs6.existsSync(emailsDirRelativePath)) {
@@ -1126,11 +1148,11 @@ var dev = async ({ dir: emailsDirRelativePath, port }) => {
   }
 };
 
-// src/cli/commands/export.ts
+// src/commands/export.ts
 import fs8, { unlinkSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
-import path11 from "node:path";
-import url2 from "node:url";
+import path12 from "node:path";
+import url3 from "node:url";
 import { build as build2 } from "esbuild";
 import { glob } from "glob";
 import logSymbols4 from "log-symbols";
@@ -1139,7 +1161,7 @@ import ora3 from "ora";
 
 // src/utils/esbuild/renderring-utilities-exporter.ts
 import { promises as fs7 } from "node:fs";
-import path10 from "node:path";
+import path11 from "node:path";
 
 // src/utils/esbuild/escape-string-for-regex.ts
 function escapeStringForRegex(string) {
@@ -1162,7 +1184,7 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
           export { render } from 'react-email-module-that-will-export-render'
           export { createElement as reactEmailCreateReactElement } from 'react';
         `,
-          loader: path10.extname(pathToFile).slice(1)
+          loader: path11.extname(pathToFile).slice(1)
         };
       }
     );
@@ -1189,18 +1211,18 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
   }
 });
 
-// src/cli/commands/export.ts
+// src/commands/export.ts
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename3) => templatePaths.push(path11.join(emailDirectory.absolutePath, filename3))
+    (filename3) => templatePaths.push(path12.join(emailDirectory.absolutePath, filename3))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
   });
   return templatePaths;
 };
-var filename2 = url2.fileURLToPath(import.meta.url);
+var filename2 = url3.fileURLToPath(import.meta.url);
 var require2 = createRequire(filename2);
 var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, options) => {
   if (fs8.existsSync(pathToWhereEmailMarkupShouldBeDumped)) {
@@ -1212,7 +1234,7 @@ var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirecto
     registerSpinnerAutostopping(spinner);
   }
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
-    path11.resolve(process.cwd(), emailsDirectoryPath),
+    path12.resolve(process.cwd(), emailsDirectoryPath),
     true
   );
   if (typeof emailsDirectoryMetadata === "undefined") {
@@ -1294,9 +1316,9 @@ ${buildFailure.message}`);
     spinner.text = "Copying static files";
     spinner.render();
   }
-  const staticDirectoryPath = path11.join(emailsDirectoryPath, "static");
+  const staticDirectoryPath = path12.join(emailsDirectoryPath, "static");
   if (fs8.existsSync(staticDirectoryPath)) {
-    const pathToDumpStaticFilesInto = path11.join(
+    const pathToDumpStaticFilesInto = path12.join(
       pathToWhereEmailMarkupShouldBeDumped,
       "static"
     );
@@ -1331,14 +1353,15 @@ ${buildFailure.message}`);
   }
 };
 
-// src/cli/commands/start.ts
+// src/commands/start.ts
 import { spawn as spawn2 } from "node:child_process";
 import fs9 from "node:fs";
-import path12 from "node:path";
+import path13 from "node:path";
 var start = async () => {
   try {
+    const previewServerLocation = await getPreviewServerLocation();
     const usersProjectLocation = process.cwd();
-    const builtPreviewPath = path12.resolve(
+    const builtPreviewPath = path13.resolve(
       usersProjectLocation,
       "./.react-email"
     );
@@ -1348,8 +1371,8 @@ var start = async () => {
       );
       process.exit(1);
     }
-    const nextStart = spawn2("npm", ["start"], {
-      cwd: builtPreviewPath,
+    const nextStart = spawn2("npx", ["next", "start", builtPreviewPath], {
+      cwd: previewServerLocation,
       stdio: "inherit"
     });
     process.on("SIGINT", () => {
@@ -1364,7 +1387,7 @@ var start = async () => {
   }
 };
 
-// src/cli/index.ts
+// src/index.ts
 var PACKAGE_NAME = "react-email";
 program.name(PACKAGE_NAME).description("A live preview of your emails right in your browser").version(package_default.version);
 program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").action(dev);