react-email 4.0.15 → 4.0.17

package/dist/cli/index.mjs

@@ -6,7 +6,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "4.0.15",
+  version: "4.0.17",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./dist/cli/index.mjs"
@@ -47,7 +47,8 @@ var package_default = {
     next: "^15.3.1",
     "normalize-path": "^3.0.0",
     ora: "^8.0.0",
-    "socket.io": "^4.8.1"
+    "socket.io": "^4.8.1",
+    "tsconfig-paths": "4.2.0"
   },
   devDependencies: {
     "@babel/core": "7.26.10",
@@ -102,7 +103,7 @@ var package_default = {
 // src/cli/commands/build.ts
 import { spawn } from "node:child_process";
 import fs5 from "node:fs";
-import path8 from "node:path";
+import path9 from "node:path";
 import logSymbols3 from "log-symbols";
 import ora2 from "ora";
 
@@ -218,14 +219,14 @@ var registerSpinnerAutostopping = (spinner) => {
 };
 
 // src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts
-import path6 from "node:path";
+import path7 from "node:path";
 import { watch } from "chokidar";
 import debounce from "debounce";
 import { Server as SocketServer } from "socket.io";
 
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 import { existsSync as existsSync2, promises as fs3, statSync } from "node:fs";
-import path5 from "node:path";
+import path6 from "node:path";
 
 // src/cli/utils/preview/start-dev-server.ts
 import http from "node:http";
@@ -274,7 +275,8 @@ var serveStaticFile = async (res, parsedUrl, staticDirRelativePath) => {
     } 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
       );
       res.statusCode = 500;
@@ -492,12 +494,40 @@ var getImportedModules = (contents) => {
   return importedPaths;
 };
 
+// src/cli/utils/preview/hot-reloading/resolve-path-aliases.ts
+import path5 from "node:path";
+import { createMatchPath, loadConfig } from "tsconfig-paths";
+var resolvePathAliases = (importPaths, projectPath) => {
+  const configLoadResult = loadConfig(projectPath);
+  if (configLoadResult.resultType === "success") {
+    const matchPath = createMatchPath(
+      configLoadResult.absoluteBaseUrl,
+      configLoadResult.paths
+    );
+    return importPaths.map((importedPath) => {
+      const unaliasedPath = matchPath(importedPath, void 0, void 0, [
+        ".tsx",
+        ".ts",
+        ".js",
+        ".jsx",
+        ".cjs",
+        ".mjs"
+      ]);
+      if (unaliasedPath) {
+        return `./${path5.relative(projectPath, unaliasedPath)}`;
+      }
+      return importedPath;
+    });
+  }
+  return importPaths;
+};
+
 // src/cli/utils/preview/hot-reloading/create-dependency-graph.ts
 var readAllFilesInsideDirectory = async (directory) => {
   let allFilePaths = [];
   const topLevelDirents = await fs3.readdir(directory, { withFileTypes: true });
   for await (const dirent of topLevelDirents) {
-    const pathToDirent = path5.join(directory, dirent.name);
+    const pathToDirent = path6.join(directory, dirent.name);
     if (dirent.isDirectory()) {
       allFilePaths = allFilePaths.concat(
         await readAllFilesInsideDirectory(pathToDirent)
@@ -509,7 +539,7 @@ var readAllFilesInsideDirectory = async (directory) => {
   return allFilePaths;
 };
 var isJavascriptModule = (filePath) => {
-  const extensionName = path5.extname(filePath);
+  const extensionName = path6.extname(filePath);
   return [".js", ".ts", ".jsx", ".tsx", ".mjs", ".cjs"].includes(extensionName);
 };
 var checkFileExtensionsUntilItExists = (pathWithoutExtension) => {
@@ -536,10 +566,10 @@ var createDependencyGraph = async (directory) => {
   const filePaths = await readAllFilesInsideDirectory(directory);
   const modulePaths = filePaths.filter(isJavascriptModule);
   const graph = Object.fromEntries(
-    modulePaths.map((path12) => [
-      path12,
+    modulePaths.map((path13) => [
+      path13,
       {
-        path: path12,
+        path: path13,
         dependencyPaths: [],
         dependentPaths: [],
         moduleDependencies: []
@@ -548,14 +578,14 @@ var createDependencyGraph = async (directory) => {
   );
   const getDependencyPaths = async (filePath) => {
     const contents = await fs3.readFile(filePath, "utf8");
-    const importedPaths = isJavascriptModule(filePath) ? getImportedModules(contents) : [];
+    const importedPaths = isJavascriptModule(filePath) ? resolvePathAliases(getImportedModules(contents), path6.dirname(filePath)) : [];
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {
         const isModulePath = !dependencyPath.startsWith(".");
-        if (isModulePath || path5.isAbsolute(dependencyPath)) {
+        if (isModulePath || path6.isAbsolute(dependencyPath)) {
           return dependencyPath;
         }
-        let pathToDependencyFromDirectory = path5.resolve(
+        let pathToDependencyFromDirectory = path6.resolve(
           /*
                       path.resolve resolves paths differently from what imports on javascript do.
           
@@ -563,7 +593,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
                     */
-          path5.dirname(filePath),
+          path6.dirname(filePath),
           dependencyPath
         );
         let isDirectory = false;
@@ -584,7 +614,7 @@ var createDependencyGraph = async (directory) => {
             );
           }
         }
-        const extension = path5.extname(pathToDependencyFromDirectory);
+        const extension = path6.extname(pathToDependencyFromDirectory);
         const pathWithEnsuredExtension = (() => {
           if (extension.length > 0 && existsSync2(pathToDependencyFromDirectory)) {
             return pathToDependencyFromDirectory;
@@ -604,10 +634,10 @@ var createDependencyGraph = async (directory) => {
       }
     );
     const moduleDependencies = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => !dependencyPath.startsWith(".") && !path5.isAbsolute(dependencyPath)
+      (dependencyPath) => !dependencyPath.startsWith(".") && !path6.isAbsolute(dependencyPath)
     );
     const nonNodeModuleImportPathsRelativeToDirectory = importedPathsRelativeToDirectory.filter(
-      (dependencyPath) => dependencyPath.startsWith(".") || path5.isAbsolute(dependencyPath)
+      (dependencyPath) => dependencyPath.startsWith(".") || path6.isAbsolute(dependencyPath)
     );
     return {
       dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
@@ -738,14 +768,14 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
         changes.filter(
           (change) => (
             // Ensures only changes inside the emails directory are emitted
-            path6.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
+            path7.resolve(absolutePathToEmailsDirectory, change.filename).startsWith(absolutePathToEmailsDirectory)
           )
         )
       );
     });
     changes = [];
   }, 150);
-  const absolutePathToEmailsDirectory = path6.resolve(
+  const absolutePathToEmailsDirectory = path7.resolve(
     process.cwd(),
     emailDirRelativePath
   );
@@ -755,7 +785,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     cwd: absolutePathToEmailsDirectory
   });
   const getFilesOutsideEmailsDirectory = () => Object.keys(dependencyGraph).filter(
-    (p) => path6.relative(absolutePathToEmailsDirectory, p).startsWith("..")
+    (p) => path7.relative(absolutePathToEmailsDirectory, p).startsWith("..")
   );
   let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
   for (const p of filesOutsideEmailsDirectory) {
@@ -767,11 +797,11 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
   process.on("SIGINT", exit);
   process.on("uncaughtException", exit);
   watcher.on("all", async (event, relativePathToChangeTarget) => {
-    const file = relativePathToChangeTarget.split(path6.sep);
+    const file = relativePathToChangeTarget.split(path7.sep);
     if (file.length === 0) {
       return;
     }
-    const pathToChangeTarget = path6.resolve(
+    const pathToChangeTarget = path7.resolve(
       absolutePathToEmailsDirectory,
       relativePathToChangeTarget
     );
@@ -795,7 +825,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
     for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
         event: "change",
-        filename: path6.relative(absolutePathToEmailsDirectory, dependentPath)
+        filename: path7.relative(absolutePathToEmailsDirectory, dependentPath)
       });
     }
     reload();
@@ -806,7 +836,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
 // src/cli/utils/tree.ts
 import { promises as fs4 } from "node:fs";
 import os from "node:os";
-import path7 from "node:path";
+import path8 from "node:path";
 var SYMBOLS = {
   BRANCH: "\u251C\u2500\u2500 ",
   EMPTY: "",
@@ -816,8 +846,8 @@ var SYMBOLS = {
 };
 var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
   const base = process.cwd();
-  const dirFullpath = path7.resolve(base, dirPath);
-  const dirname2 = path7.basename(dirFullpath);
+  const dirFullpath = path8.resolve(base, dirPath);
+  const dirname2 = path8.basename(dirFullpath);
   let lines = [dirname2];
   const dirStat = await fs4.stat(dirFullpath);
   if (dirStat.isDirectory() && currentDepth < depth) {
@@ -839,7 +869,7 @@ var getTreeLines = async (dirPath, depth, currentDepth = 0) => {
       if (dirent.isFile()) {
         lines.push(`${branchingSymbol}${dirent.name}`);
       } else {
-        const pathToDirectory = path7.join(dirFullpath, dirent.name);
+        const pathToDirectory = path8.join(dirFullpath, dirent.name);
         const treeLinesForSubDirectory = await getTreeLines(
           pathToDirectory,
           depth,
@@ -918,7 +948,7 @@ module.exports = {
   },
 }`;
   await fs5.promises.writeFile(
-    path8.resolve(builtPreviewAppPath, "./next.config.js"),
+    path9.resolve(builtPreviewAppPath, "./next.config.js"),
     nextConfigContents,
     "utf8"
   );
@@ -928,7 +958,7 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
     (filename3) => slugs.push(
-      path8.join(directoryPathRelativeToEmailsDirectory, filename3).split(path8.sep).filter((segment) => segment.length > 0)
+      path9.join(directoryPathRelativeToEmailsDirectory, filename3).split(path9.sep).filter((segment) => segment.length > 0)
     )
   );
   emailDirectory.subDirectories.forEach((directory) => {
@@ -959,13 +989,13 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     );
   };
   await removeForceDynamic(
-    path8.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
+    path9.resolve(builtPreviewAppPath, "./src/app/layout.tsx")
   );
   await removeForceDynamic(
-    path8.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
+    path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx")
   );
   await fs5.promises.appendFile(
-    path8.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
+    path9.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
 export function generateStaticParams() { 
@@ -977,7 +1007,7 @@ export function generateStaticParams() {
   );
 };
 var updatePackageJson = async (builtPreviewAppPath) => {
-  const packageJsonPath = path8.resolve(builtPreviewAppPath, "./package.json");
+  const packageJsonPath = path9.resolve(builtPreviewAppPath, "./package.json");
   const packageJson = JSON.parse(
     await fs5.promises.readFile(packageJsonPath, "utf8")
   );
@@ -1036,9 +1066,9 @@ var build = async ({
     if (!fs5.existsSync(emailsDirRelativePath)) {
       process.exit(1);
     }
-    const emailsDirPath = path8.join(process.cwd(), emailsDirRelativePath);
-    const staticPath = path8.join(emailsDirPath, "static");
-    const builtPreviewAppPath = path8.join(process.cwd(), ".react-email");
+    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 });
@@ -1052,7 +1082,7 @@ var build = async ({
     });
     if (fs5.existsSync(staticPath)) {
       spinner.text = "Copying `static` folder into `.react-email/public/static`";
-      const builtStaticDirectory = path8.resolve(
+      const builtStaticDirectory = path9.resolve(
         builtPreviewAppPath,
         "./public/static"
       );
@@ -1106,7 +1136,7 @@ var dev = async ({ dir: emailsDirRelativePath, port }) => {
 // src/cli/commands/export.ts
 import fs8, { unlinkSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
-import path10 from "node:path";
+import path11 from "node:path";
 import url2 from "node:url";
 import { build as build2 } from "esbuild";
 import { glob } from "glob";
@@ -1116,7 +1146,7 @@ import ora3 from "ora";
 
 // src/utils/esbuild/renderring-utilities-exporter.ts
 import { promises as fs7 } from "node:fs";
-import path9 from "node:path";
+import path10 from "node:path";
 
 // src/utils/esbuild/escape-string-for-regex.ts
 function escapeStringForRegex(string) {
@@ -1139,7 +1169,7 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
           export { render } from 'react-email-module-that-will-export-render'
           export { createElement as reactEmailCreateReactElement } from 'react';
         `,
-          loader: path9.extname(pathToFile).slice(1)
+          loader: path10.extname(pathToFile).slice(1)
         };
       }
     );
@@ -1170,7 +1200,7 @@ var renderingUtilitiesExporter = (emailTemplates) => ({
 var getEmailTemplatesFromDirectory = (emailDirectory) => {
   const templatePaths = [];
   emailDirectory.emailFilenames.forEach(
-    (filename3) => templatePaths.push(path10.join(emailDirectory.absolutePath, filename3))
+    (filename3) => templatePaths.push(path11.join(emailDirectory.absolutePath, filename3))
   );
   emailDirectory.subDirectories.forEach((directory) => {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
@@ -1189,7 +1219,7 @@ var exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirecto
     registerSpinnerAutostopping(spinner);
   }
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
-    path10.resolve(process.cwd(), emailsDirectoryPath),
+    path11.resolve(process.cwd(), emailsDirectoryPath),
     true
   );
   if (typeof emailsDirectoryMetadata === "undefined") {
@@ -1271,9 +1301,9 @@ ${buildFailure.message}`);
     spinner.text = "Copying static files";
     spinner.render();
   }
-  const staticDirectoryPath = path10.join(emailsDirectoryPath, "static");
+  const staticDirectoryPath = path11.join(emailsDirectoryPath, "static");
   if (fs8.existsSync(staticDirectoryPath)) {
-    const pathToDumpStaticFilesInto = path10.join(
+    const pathToDumpStaticFilesInto = path11.join(
       pathToWhereEmailMarkupShouldBeDumped,
       "static"
     );
@@ -1311,11 +1341,11 @@ ${buildFailure.message}`);
 // src/cli/commands/start.ts
 import { spawn as spawn2 } from "node:child_process";
 import fs9 from "node:fs";
-import path11 from "node:path";
+import path12 from "node:path";
 var start = async () => {
   try {
     const usersProjectLocation = process.cwd();
-    const builtPreviewPath = path11.resolve(
+    const builtPreviewPath = path12.resolve(
       usersProjectLocation,
       "./.react-email"
     );

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+export * from '@react-email/body';
+export * from '@react-email/button';
+export * from '@react-email/code-block';
+export * from '@react-email/code-inline';
+export * from '@react-email/column';
+export * from '@react-email/container';
+export * from '@react-email/font';
+export * from '@react-email/head';
+export * from '@react-email/heading';
+export * from '@react-email/hr';
+export * from '@react-email/html';
+export * from '@react-email/img';
+export * from '@react-email/link';
+export * from '@react-email/markdown';
+export * from '@react-email/preview';
+export * from '@react-email/render';
+export * from '@react-email/row';
+export * from '@react-email/section';
+export * from '@react-email/tailwind';
+export * from '@react-email/text';

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export * from '@react-email/body';
+export * from '@react-email/button';
+export * from '@react-email/code-block';
+export * from '@react-email/code-inline';
+export * from '@react-email/column';
+export * from '@react-email/container';
+export * from '@react-email/font';
+export * from '@react-email/head';
+export * from '@react-email/heading';
+export * from '@react-email/hr';
+export * from '@react-email/html';
+export * from '@react-email/img';
+export * from '@react-email/link';
+export * from '@react-email/markdown';
+export * from '@react-email/preview';
+export * from '@react-email/render';
+export * from '@react-email/row';
+export * from '@react-email/section';
+export * from '@react-email/tailwind';
+export * from '@react-email/text';