feat(react-email): TypeScript's path aliases support for hot reloading (#2215)

Author: gabrielmfern

packages/react-email/package.json

@@ -42,7 +42,8 @@
     "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",

packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.spec.ts

@@ -52,7 +52,11 @@ test('createDependencyGraph()', async () => {
     },
     'create-dependency-graph.ts': {
       path: 'create-dependency-graph.ts',
-      dependencyPaths: ['../start-dev-server.ts', 'get-imported-modules.ts'],
+      dependencyPaths: [
+        '../start-dev-server.ts',
+        'get-imported-modules.ts',
+        'resolve-path-aliases.ts',
+      ],
       dependentPaths: [
         'create-dependency-graph.spec.ts',
         'setup-hot-reloading.ts',
@@ -71,6 +75,27 @@ test('createDependencyGraph()', async () => {
       moduleDependencies: ['node:path'],
       path: '../../../utils/preview/get-env-variables-for-preview-app.ts',
     },
+    './test/some-file.ts': {
+      dependencyPaths: [],
+      dependentPaths: [],
+      moduleDependencies: [],
+      path: '/home/gabriel/Projects/Resend/react-email/packages/react-email/src/cli/utils/preview/hot-reloading/test/some-file.ts',
+    },
+    'resolve-path-aliases.ts': {
+      path: 'resolve-path-aliases.ts',
+      dependentPaths: [
+        'create-dependency-graph.ts',
+        'resolve-path-aliases.spec.ts',
+      ],
+      dependencyPaths: [],
+      moduleDependencies: ['node:path', 'tsconfig-paths'],
+    },
+    'resolve-path-aliases.spec.ts': {
+      path: 'resolve-path-aliases.spec.ts',
+      dependencyPaths: ['resolve-path-aliases.ts'],
+      dependentPaths: [],
+      moduleDependencies: ['node:path'],
+    },
     'get-imported-modules.ts': {
       path: 'get-imported-modules',
       dependentPaths: [

packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts

@@ -3,6 +3,7 @@ import path from 'node:path';
 import type { EventName } from 'chokidar/handler';
 import { isDev } from '../start-dev-server';
 import { getImportedModules } from './get-imported-modules';
+import { resolvePathAliases } from './resolve-path-aliases';
 
 interface Module {
   path: string;
@@ -93,9 +94,8 @@ export const createDependencyGraph = async (directory: string) => {
 
   const getDependencyPaths = async (filePath: string) => {
     const contents = await fs.readFile(filePath, 'utf8');
-
     const importedPaths = isJavascriptModule(filePath)
-      ? getImportedModules(contents)
+      ? resolvePathAliases(getImportedModules(contents), path.dirname(filePath))
       : [];
     const importedPathsRelativeToDirectory = importedPaths.map(
       (dependencyPath) => {

packages/react-email/src/cli/utils/preview/hot-reloading/resolve-path-aliases.spec.ts

@@ -0,0 +1,11 @@
+import path from 'node:path';
+import { resolvePathAliases } from './resolve-path-aliases';
+
+test('resolveImports()', async () => {
+  expect(
+    resolvePathAliases(
+      ['@/some-file'],
+      path.resolve(import.meta.dirname, './test'),
+    ),
+  ).toEqual(['./some-file']);
+});

packages/react-email/src/cli/utils/preview/hot-reloading/resolve-path-aliases.ts

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import { createMatchPath, loadConfig } from 'tsconfig-paths';
+
+export const resolvePathAliases = (
+  importPaths: string[],
+  projectPath: string,
+) => {
+  const configLoadResult = loadConfig(projectPath);
+
+  if (configLoadResult.resultType === 'success') {
+    const matchPath = createMatchPath(
+      configLoadResult.absoluteBaseUrl,
+      configLoadResult.paths,
+    );
+    return importPaths.map((importedPath) => {
+      const unaliasedPath = matchPath(importedPath, undefined, undefined, [
+        '.tsx',
+        '.ts',
+        '.js',
+        '.jsx',
+        '.cjs',
+        '.mjs',
+      ]);
+      if (unaliasedPath) {
+        return `./${path.relative(projectPath, unaliasedPath)}`;
+      }
+      return importedPath;
+    });
+  }
+
+  return importPaths;
+};

packages/react-email/src/cli/utils/preview/hot-reloading/test/some-file.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}