react-email 4.1.0-canary.9 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # react-email
 
+## 4.1.1
+
+### Patch Changes
+
+- ef77691: fix path resolution done wrong breaking `email dev` on Windows
+
+## 4.1.0
+
+### Minor Changes
+
+- abf8599: use a separate package for storing the preview server (@react-email/preview-server)
+
+### Patch Changes
+
+- e173b44: Use the same version for the preview-server and react-email
+
+## 4.1.0-canary.12
+
+## 4.1.0-canary.11
+
+### Patch Changes
+
+- 19d4b45: fix static file serving security issue with logging
+
+## 4.1.0-canary.10
+
 ## 4.1.0-canary.9
 
 ### Patch Changes
@@ -63,6 +89,24 @@
 
 - 4a0d4e3: Theme switcher for email template
 
+## 4.0.17
+
+### Patch Changes
+
+- e352a67: fix `<svg>` not being flagged as incompatible
+- 8f64ebd: fix the forced `color-scheme: dark` for the preview
+- 6de4e9f: fix static file serving security issue with logging
+- b2e96d5: Add support for hot reloading with tsconfig path aliases
+- 6b0cfd6: fix hot reloading with collapsed directories
+- 8c93330: Fix prettier errors causing NextJS serialization error
+- a07eebf: Pre-render email templates on hover
+
+## 4.0.16
+
+### Patch Changes
+
+- 1340a0a: fix mobile's sidebar broken in the preview server
+
 ## 4.0.15
 
 ### Patch Changes

package/dev/CHANGELOG.md

@@ -0,0 +1,3 @@
+# email-dev
+
+## 0.0.1

package/dev/index.js

@@ -0,0 +1,44 @@
+import child_process from 'node:child_process';
+import path from 'node:path';
+import url from 'node:url';
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+const root = path.resolve(dirname, '../src/index.ts');
+
+const tsxPath = path.resolve(dirname, './node_modules/.bin/tsx');
+
+const tsx = child_process.spawn(tsxPath, [root, ...process.argv.slice(2)], {
+  shell: true,
+  cwd: process.cwd(),
+  stdio: 'inherit',
+});
+
+tsx.on('close', (code) => {
+  process.exit(code);
+});
+
+process.on('uncaughtExceptionMonitor', () => {
+  tsx.kill();
+});
+
+process.on('exit', (code) => {
+  tsx.kill(code);
+});
+
+process.on('SIGINT', () => {
+  tsx.kill('SIGINT');
+});
+
+process.on('SIGTERM', () => {
+  tsx.kill('SIGTERM');
+});
+
+process.on('SIGUSR1', () => {
+  tsx.kill('SIGUSR1');
+});
+
+process.on('SIGUSR2', () => {
+  tsx.kill('SIGUSR2');
+});

package/dev/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "email-dev",
+  "version": "0.0.1",
+  "bin": "index.js",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node ."
+  },
+  "dependencies": {
+    "tsx": "4.19.3"
+  }
+}

package/dist/index.js

@@ -106,7 +106,7 @@ import prompts from "prompts";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "4.1.0-canary.9",
+  version: "4.1.1",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./dist/index.js"
@@ -114,8 +114,8 @@ var package_default = {
   type: "module",
   scripts: {
     build: "tsup-node",
+    "build:watch": "tsup-node --watch src",
     clean: "rm -rf dist",
-    dev: "tsup-node --watch src",
     test: "vitest run",
     "test:watch": "vitest"
   },
@@ -189,7 +189,7 @@ var getPreviewServerLocation = async () => {
   let previewServerLocation;
   try {
     previewServerLocation = path2.dirname(
-      url.parse(usersProject.esmResolve("@react-email/preview-server"), true).path
+      url.fileURLToPath(usersProject.esmResolve("@react-email/preview-server"))
     );
   } catch (_exception) {
     await ensurePreviewServerInstalled(
@@ -326,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) => {
@@ -458,234 +458,14 @@ var build = async ({
 import fs6 from "node:fs";
 
 // src/utils/preview/hot-reloading/setup-hot-reloading.ts
-import path9 from "node:path";
+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 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";
-
-// 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 { existsSync, promises as fs3, statSync } 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);
-  }
-};
-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/preview/hot-reloading/get-imported-modules.ts
 import { parse } from "@babel/parser";
@@ -733,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);
@@ -752,7 +532,7 @@ var resolvePathAliases = (importPaths, projectPath) => {
         ".mjs"
       ]);
       if (unaliasedPath) {
-        return `./${path7.relative(projectPath, unaliasedPath)}`;
+        return `./${path4.relative(projectPath, unaliasedPath)}`;
       }
       return importedPath;
     });
@@ -763,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)
@@ -777,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`;
   }
 };
@@ -815,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.
           
@@ -831,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;
@@ -846,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(
@@ -863,7 +643,7 @@ var createDependencyGraph = async (directory) => {
         })();
         if (pathWithEnsuredExtension) {
           pathToDependencyFromDirectory = pathWithEnsuredExtension;
-        } else if (isDev) {
+        } else {
           console.warn(
             `Could not find file at ${pathToDependencyFromDirectory}`
           );
@@ -872,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,
@@ -1006,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
   );
@@ -1023,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) {
@@ -1035,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
     );
@@ -1063,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();
@@ -1071,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";
@@ -1085,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 });
@@ -1215,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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.1.0-canary.9",
+  "version": "4.1.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -49,12 +49,12 @@
     "tsup": "8.4.0",
     "tsx": "4.19.3",
     "typescript": "5.8.3",
-    "@react-email/components": "0.1.0-canary.4"
+    "@react-email/components": "0.2.0"
   },
   "scripts": {
     "build": "tsup-node",
+    "build:watch": "tsup-node --watch src",
     "clean": "rm -rf dist",
-    "dev": "tsup-node --watch src",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/readme.md

@@ -39,6 +39,22 @@ Generates the plain HTML files of your emails into a `out` directory.
 npx react-email export
 ```
 
+## Setting Up the Environment
+
+When working in the CLI, a lot of friction can get introduced with installing it and rebuilding for every change. To avoid that, we have a script that can be linked globally to directly run the source code of the CLI. You can use it the same as you would the standard CLI.
+
+### 1. Link `react-email` globally
+
+```sh
+pnpm link ./dev -g
+```
+
+### 2. Run the CLI
+
+```sh
+email-dev [command] [flags]
+```
+
 ## License
 
 MIT License

package/src/actions/email-validation/__snapshots__/check-images.spec.tsx.snap

@@ -0,0 +1,84 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`checkImages() 1`] = `
+[
+  {
+    "checks": [
+      {
+        "metadata": {
+          "alt": undefined,
+        },
+        "passed": false,
+        "type": "accessibility",
+      },
+      {
+        "passed": true,
+        "type": "syntax",
+      },
+      {
+        "passed": true,
+        "type": "security",
+      },
+      {
+        "metadata": {
+          "fetchStatusCode": 200,
+        },
+        "passed": true,
+        "type": "fetch_attempt",
+      },
+      {
+        "metadata": {
+          "byteCount": 26808,
+        },
+        "passed": true,
+        "type": "image_size",
+      },
+    ],
+    "codeLocation": {
+      "column": 3,
+      "line": 2,
+    },
+    "source": "https://resend.com/static/brand/resend-icon-white.png",
+    "status": "warning",
+  },
+  {
+    "checks": [
+      {
+        "metadata": {
+          "alt": "codepen challenges",
+        },
+        "passed": true,
+        "type": "accessibility",
+      },
+      {
+        "passed": true,
+        "type": "syntax",
+      },
+      {
+        "passed": true,
+        "type": "security",
+      },
+      {
+        "metadata": {
+          "fetchStatusCode": 200,
+        },
+        "passed": true,
+        "type": "fetch_attempt",
+      },
+      {
+        "metadata": {
+          "byteCount": 111922,
+        },
+        "passed": true,
+        "type": "image_size",
+      },
+    ],
+    "codeLocation": {
+      "column": 3,
+      "line": 3,
+    },
+    "source": "/static/codepen-challengers.png",
+    "status": "success",
+  },
+]
+`;

package/src/utils/get-preview-server-location.ts

@@ -30,8 +30,7 @@ export const getPreviewServerLocation = async () => {
   let previewServerLocation!: string;
   try {
     previewServerLocation = path.dirname(
-      url.parse(usersProject.esmResolve('@react-email/preview-server'), true)
-        .path!,
+      url.fileURLToPath(usersProject.esmResolve('@react-email/preview-server')),
     );
   } catch (_exception) {
     await ensurePreviewServerInstalled(

package/src/utils/preview/get-env-variables-for-preview-app.ts

@@ -1,5 +1,4 @@
 import path from 'node:path';
-import { isDev } from './start-dev-server.js';
 
 export const getEnvVariablesForPreviewApp = (
   relativePathToEmailsDirectory: string,
@@ -9,6 +8,5 @@ export const getEnvVariablesForPreviewApp = (
     EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
     EMAILS_DIR_ABSOLUTE_PATH: path.resolve(cwd, relativePathToEmailsDirectory),
     USER_PROJECT_LOCATION: cwd,
-    NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT: isDev ? 'true' : 'false',
   } as const;
 };

package/src/utils/preview/hot-reloading/create-dependency-graph.spec.ts

@@ -44,49 +44,21 @@ test('createDependencyGraph()', async () => {
   };
 
   const initialDependencyGraph = convertPathsToAbsolute({
-    '../../../../package.json': {
-      dependencyPaths: [],
-      dependentPaths: ['../../packageJson.ts'],
-      moduleDependencies: [],
-      path: '../../../../package.json',
-    },
     'create-dependency-graph.ts': {
       path: 'create-dependency-graph.ts',
-      dependencyPaths: [
-        '../start-dev-server.ts',
-        'get-imported-modules.ts',
-        'resolve-path-aliases.ts',
-      ],
+      dependencyPaths: ['get-imported-modules.ts', 'resolve-path-aliases.ts'],
       dependentPaths: [
         'create-dependency-graph.spec.ts',
         'setup-hot-reloading.ts',
       ],
       moduleDependencies: ['node:fs', 'node:path', 'chokidar/handler.js'],
     },
-    '../../get-preview-server-location.ts': {
-      dependencyPaths: [],
-      dependentPaths: ['../../preview/start-dev-server.ts'],
-      moduleDependencies: ['node:path', 'node:url', 'jiti', 'nypm', 'prompts'],
-      path: '../../get-preview-server-location.ts',
-    },
-    '../../packageJson.ts': {
-      dependencyPaths: ['../../../../package.json'],
-      dependentPaths: ['../../preview/start-dev-server.ts'],
-      moduleDependencies: [],
-      path: '../../packageJson.ts',
-    },
     'create-dependency-graph.spec.ts': {
       path: 'create-dependency-graph.spec.ts',
       dependencyPaths: ['create-dependency-graph.ts'],
       dependentPaths: [],
       moduleDependencies: ['node:fs', 'node:path'],
     },
-    '../get-env-variables-for-preview-app.ts': {
-      dependencyPaths: ['../../preview/start-dev-server.ts'],
-      dependentPaths: ['../../preview/start-dev-server.ts'],
-      moduleDependencies: ['node:path'],
-      path: '../../preview/get-env-variables-for-preview-app.ts',
-    },
     './test/some-file.ts': {
       dependencyPaths: [],
       dependentPaths: [],
@@ -138,47 +110,6 @@ test('createDependencyGraph()', async () => {
         'socket.io',
       ],
     },
-    '../start-dev-server.ts': {
-      dependencyPaths: [
-        '../../register-spinner-autostopping.ts',
-        '../../get-preview-server-location.ts',
-        '../../packageJson.ts',
-        '../../preview/get-env-variables-for-preview-app.ts',
-        '../../preview/serve-static-file.ts',
-      ],
-      path: '../start-dev-server.ts',
-      dependentPaths: [
-        '../../preview/get-env-variables-for-preview-app.ts',
-        'create-dependency-graph.ts',
-      ],
-      moduleDependencies: [
-        'node:http',
-        'node:path',
-        'node:url',
-        'chalk',
-        'jiti',
-        'log-symbols',
-        'ora',
-      ],
-    },
-    '../../preview/serve-static-file.ts': {
-      dependencyPaths: [],
-      dependentPaths: ['../../preview/start-dev-server.ts'],
-      moduleDependencies: [
-        'node:fs',
-        'node:http',
-        'node:path',
-        'node:url',
-        'mime-types',
-      ],
-      path: '../../preview/serve-static-file.ts',
-    },
-    '../../register-spinner-autostopping.ts': {
-      dependencyPaths: [],
-      dependentPaths: ['../../preview/start-dev-server.ts'],
-      moduleDependencies: ['log-symbols', 'ora'],
-      path: '../../register-spinner-autostopping.ts',
-    },
     '../../types/hot-reload-event.ts': {
       dependencyPaths: [],
       dependentPaths: ['../../types/hot-reload-change.ts'],

package/src/utils/preview/hot-reloading/create-dependency-graph.ts

@@ -1,7 +1,6 @@
 import { existsSync, promises as fs, statSync } from 'node:fs';
 import path from 'node:path';
 import type { EventName } from 'chokidar/handler.js';
-import { isDev } from '../start-dev-server.js';
 import { getImportedModules } from './get-imported-modules.js';
 import { resolvePathAliases } from './resolve-path-aliases.js';
 
@@ -134,8 +133,7 @@ export const createDependencyGraph = async (directory: string) => {
           );
           if (pathWithExtension) {
             pathToDependencyFromDirectory = pathWithExtension;
-          } else if (isDev) {
-            // only warn about this on development as it is probably going to be irrelevant otherwise
+          } 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.`,
             );
@@ -157,8 +155,7 @@ export const createDependencyGraph = async (directory: string) => {
 
         if (pathWithEnsuredExtension) {
           pathToDependencyFromDirectory = pathWithEnsuredExtension;
-        } else if (isDev) {
-          // only warn about this on development as it is probably going to be irrelevant otherwise
+        } else {
           console.warn(
             `Could not find file at ${pathToDependencyFromDirectory}`,
           );

package/src/utils/preview/serve-static-file.ts

@@ -38,7 +38,8 @@ export const serveStaticFile = async (
     } else {
       const sanitizedFilePath = fileAbsolutePath.replace(/\n|\r/g, '');
       console.error(
-        `Could not read file at ${sanitizedFilePath} to be served, here's the exception:`,
+        `Could not read file at %s to be served, here's the exception:`,
+        sanitizedFilePath,
         exception,
       );
 

package/src/utils/preview/start-dev-server.ts

@@ -27,11 +27,6 @@ const safeAsyncServerListen = (server: http.Server, port: number) => {
   });
 };
 
-const filename = url.fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
-
-export const isDev = !dirname.includes('dist');
-
 export const startDevServer = async (
   emailsDirRelativePath: string,
   staticBaseDirRelativePath: string,
@@ -143,7 +138,7 @@ export const startDevServer = async (
 
   const app = next({
     // passing in env here does not get the environment variables there
-    dev: isDev,
+    dev: false,
     conf: {
       images: {
         // This is to avoid the warning with sharp