react-email 4.2.7 → 4.2.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-email
 
+## 4.2.9
+
+### Patch Changes
+
+- 1e53b4c: use `styleText` from `node:util` instead of `chalk`
+
+## 4.2.8
+
+### Patch Changes
+
+- 64cd6ec: fix hot reloading with circular dependencies
+
 ## 4.2.7
 
 ## 4.2.6

package/dist/index.js

@@ -106,7 +106,7 @@ import prompts from "prompts";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "4.2.7",
+  version: "4.2.9",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./dist/index.js"
@@ -135,7 +135,6 @@ var package_default = {
   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",
@@ -758,17 +757,27 @@ var createDependencyGraph = async (directory) => {
       }
     },
     {
+      /**
+       * Resolves all modules that depend on the specified module, directly or indirectly.
+       *
+       * @param pathToModule - The path to the module whose dependents we want to find
+       * @returns An array of paths to all modules that depend on the specified module
+       */
       resolveDependentsOf: function resolveDependentsOf(pathToModule) {
-        const moduleEntry = graph[pathToModule];
-        const dependentPaths = [];
-        if (moduleEntry) {
+        const dependentPaths = /* @__PURE__ */ new Set();
+        const stack = [pathToModule];
+        while (stack.length > 0) {
+          const currentPath = stack.pop();
+          const moduleEntry = graph[currentPath];
+          if (!moduleEntry) continue;
           for (const dependentPath of moduleEntry.dependentPaths) {
-            const dependentsOfDependent = resolveDependentsOf(dependentPath);
-            dependentPaths.push(...dependentsOfDependent);
-            dependentPaths.push(dependentPath);
+            if (dependentPaths.has(dependentPath) || dependentPath === pathToModule)
+              continue;
+            dependentPaths.add(dependentPath);
+            stack.push(dependentPath);
           }
         }
-        return dependentPaths;
+        return [...dependentPaths.values()];
       }
     }
   ];
@@ -861,7 +870,7 @@ var setupHotreloading = async (devServer2, emailDirRelativePath) => {
 import http from "node:http";
 import path9 from "node:path";
 import url2 from "node:url";
-import chalk from "chalk";
+import { styleText } from "node:util";
 import { createJiti as createJiti2 } from "jiti";
 import logSymbols3 from "log-symbols";
 import ora2 from "ora";
@@ -970,7 +979,9 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
   });
   const { portAlreadyInUse } = await safeAsyncServerListen(devServer, port);
   if (!portAlreadyInUse) {
-    console.log(chalk.greenBright(`    React Email ${package_default.version}`));
+    console.log(
+      styleText("greenBright", `    React Email ${package_default.version}`)
+    );
     console.log(`    Running preview at:          http://localhost:${port}
 `);
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -22,7 +22,6 @@
   "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",
@@ -48,7 +47,7 @@
     "react-dom": "19.0.0",
     "tsup": "8.4.0",
     "typescript": "5.8.3",
-    "@react-email/components": "0.4.0"
+    "@react-email/components": "0.5.2"
   },
   "scripts": {
     "build": "tsup-node",

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

@@ -0,0 +1,68 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`createDependencyGraph() > should have the right initial value for the dependency graph 1`] = `
+{
+  "../outer.ts": {
+    "dependencyPaths": [
+      "outer-dependency.ts",
+    ],
+    "dependentPaths": [
+      "general-importing-file.ts",
+    ],
+    "moduleDependencies": [],
+    "path": "../outer.ts",
+  },
+  "data-to-import.json": {
+    "dependencyPaths": [],
+    "dependentPaths": [
+      "general-importing-file.ts",
+    ],
+    "moduleDependencies": [],
+    "path": "data-to-import.json",
+  },
+  "file-a.ts": {
+    "dependencyPaths": [
+      "file-b.ts",
+    ],
+    "dependentPaths": [
+      "file-b.ts",
+      "general-importing-file.ts",
+    ],
+    "moduleDependencies": [],
+    "path": "file-a.ts",
+  },
+  "file-b.ts": {
+    "dependencyPaths": [
+      "file-a.ts",
+    ],
+    "dependentPaths": [
+      "file-a.ts",
+      "general-importing-file.ts",
+    ],
+    "moduleDependencies": [],
+    "path": "file-b.ts",
+  },
+  "general-importing-file.ts": {
+    "dependencyPaths": [
+      "../outer.ts",
+      "data-to-import.json",
+      "file-a.ts",
+      "file-b.ts",
+    ],
+    "dependentPaths": [],
+    "moduleDependencies": [
+      "node:os",
+      "node:path",
+    ],
+    "path": "general-importing-file.ts",
+  },
+  "outer-dependency.ts": {
+    "dependencyPaths": [],
+    "dependentPaths": [
+      "../outer.ts",
+    ],
+    "moduleDependencies": [],
+    "path": "outer-dependency.ts",
+  },
+}
+`;

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

@@ -5,9 +5,11 @@ import {
   type DependencyGraph,
 } from './create-dependency-graph.js';
 
-const pathToFileForTestingDependencyGraph = path.join(
-  __dirname,
-  '.for-dependency-graph.ts',
+const testingDiretctory = path.join(__dirname, './test/dependency-graph/inner');
+
+const pathToTemporaryFile = path.join(
+  testingDiretctory,
+  './.temporary-file.ts',
 );
 
 vi.mock('@babel/traverse', async () => {
@@ -15,198 +17,130 @@ vi.mock('@babel/traverse', async () => {
   return { default: traverse };
 });
 
-test('createDependencyGraph()', async () => {
-  if (existsSync(pathToFileForTestingDependencyGraph)) {
-    await fs.rm(pathToFileForTestingDependencyGraph);
+describe('createDependencyGraph()', async () => {
+  if (existsSync(pathToTemporaryFile)) {
+    await fs.rm(pathToTemporaryFile);
   }
 
-  const [dependencyGraph, updateDependencyGraph] =
-    await createDependencyGraph(__dirname);
+  const [dependencyGraph, updateDependencyGraph, { resolveDependentsOf }] =
+    await createDependencyGraph(testingDiretctory);
 
   const toAbsolute = (relativePath: string) => {
-    return path.resolve(__dirname, relativePath);
+    return path.resolve(testingDiretctory, relativePath);
   };
 
-  const convertPathsToAbsolute = (graph: DependencyGraph) => {
-    return Object.fromEntries(
-      Object.entries(graph).map(([relativePath, module]) => {
-        return [
-          toAbsolute(relativePath),
-          {
-            path: toAbsolute(relativePath),
-            dependencyPaths: module.dependencyPaths.map((p) => toAbsolute(p)),
-            dependentPaths: module.dependentPaths.map((p) => toAbsolute(p)),
-            moduleDependencies: module.moduleDependencies,
-          },
-        ];
-      }),
-    );
-  };
-
-  const initialDependencyGraph = convertPathsToAbsolute({
-    'create-dependency-graph.ts': {
-      path: 'create-dependency-graph.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'],
-    },
-    'create-dependency-graph.spec.ts': {
-      path: 'create-dependency-graph.spec.ts',
-      dependencyPaths: ['create-dependency-graph.ts'],
-      dependentPaths: [],
-      moduleDependencies: ['node:fs', 'node:path'],
-    },
-    './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',
+  it.sequential(
+    'should resolve dependents when there are circular dependencies',
+    async () => {
+      expect(resolveDependentsOf(toAbsolute('file-a.ts'))).toEqual([
+        toAbsolute('file-b.ts'),
+        toAbsolute('general-importing-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: [
-        'create-dependency-graph.ts',
-        'get-imported-modules.spec.ts',
-      ],
-      dependencyPaths: [],
-      moduleDependencies: ['@babel/parser', '@babel/traverse'],
+  );
+
+  it.sequential(
+    'should have the right initial value for the dependency graph',
+    () => {
+      const relativePathDependencyGraph = Object.fromEntries(
+        Object.entries(dependencyGraph).map(([key, value]) => {
+          return [
+            path.relative(testingDiretctory, key),
+            {
+              path: path.relative(testingDiretctory, value.path),
+              dependentPaths: value.dependentPaths.map((p) =>
+                path.relative(testingDiretctory, p),
+              ),
+              dependencyPaths: value.dependencyPaths.map((p) =>
+                path.relative(testingDiretctory, p),
+              ),
+              moduleDependencies: value.moduleDependencies,
+            },
+          ];
+        }),
+      );
+      expect(relativePathDependencyGraph).toMatchSnapshot();
     },
-    'get-imported-modules.spec.ts': {
-      path: 'get-imported-modules.spec.ts',
-      dependencyPaths: ['get-imported-modules.ts'],
+  );
+
+  it.sequential('should work when adding a new file', async () => {
+    await fs.writeFile(
+      pathToTemporaryFile,
+      `
+import {} from './file-a';
+import {} from './file-b';
+import {} from './general-importing-file';
+`,
+      'utf8',
+    );
+    await updateDependencyGraph('add', pathToTemporaryFile);
+    expect(dependencyGraph[pathToTemporaryFile]).toEqual({
+      path: pathToTemporaryFile,
       dependentPaths: [],
-      moduleDependencies: ['node:fs'],
-    },
-    'setup-hot-reloading.ts': {
-      path: 'setup-hot-reloading.ts',
       dependencyPaths: [
-        '../../types/hot-reload-change.ts',
-        'create-dependency-graph.ts',
+        toAbsolute('file-a.ts'),
+        toAbsolute('file-b.ts'),
+        toAbsolute('general-importing-file.ts'),
       ],
-      dependentPaths: [],
-      moduleDependencies: [
-        'node:http',
-        'node:path',
-        'chokidar',
-        'debounce',
-        'socket.io',
-      ],
-    },
-    '../../types/hot-reload-event.ts': {
-      dependencyPaths: [],
-      dependentPaths: ['../../types/hot-reload-change.ts'],
-      moduleDependencies: ['chokidar/handler.js'],
-      path: '../../types/hot-reload-event.ts',
-    },
-    '../../types/hot-reload-change.ts': {
-      path: '../../types/hot-reload-change.ts',
-      dependencyPaths: ['../../types/hot-reload-event.ts'],
-      dependentPaths: ['setup-hot-reloading.ts'],
       moduleDependencies: [],
-    },
-  } satisfies DependencyGraph);
-
-  expect(
-    dependencyGraph,
-    'the initial value for the dependency graph should work with the directory of this testing file',
-  ).toEqual(initialDependencyGraph);
-
-  await fs.writeFile(
-    pathToFileForTestingDependencyGraph,
-    `
-import {} from './setup-hot-reloading';
-import {} from './get-imported-modules';
-import {} from './create-dependency-graph.ts';
-`,
-    'utf8',
-  );
-  await updateDependencyGraph('add', pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[pathToFileForTestingDependencyGraph],
-    'added file to have proper dependency paths',
-  ).toEqual({
-    path: pathToFileForTestingDependencyGraph,
-    dependentPaths: [],
-    dependencyPaths: [
-      toAbsolute('setup-hot-reloading.ts'),
-      toAbsolute('get-imported-modules.ts'),
-      toAbsolute('create-dependency-graph.ts'),
-    ],
-    moduleDependencies: [],
-  } satisfies DependencyGraph[number]);
-  expect(
-    dependencyGraph[toAbsolute('setup-hot-reloading.ts')]?.dependentPaths,
-  ).toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('get-imported-modules.ts')]?.dependentPaths,
-  ).toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('create-dependency-graph.ts')]?.dependentPaths,
-  ).toContain(pathToFileForTestingDependencyGraph);
+    } satisfies DependencyGraph[number]);
+    expect(dependencyGraph[toAbsolute('file-a.ts')]?.dependentPaths).toContain(
+      pathToTemporaryFile,
+    );
+    expect(dependencyGraph[toAbsolute('file-b.ts')]?.dependentPaths).toContain(
+      pathToTemporaryFile,
+    );
+    expect(
+      dependencyGraph[toAbsolute('general-importing-file.ts')]?.dependentPaths,
+    ).toContain(pathToTemporaryFile);
+  });
 
-  await fs.writeFile(
-    pathToFileForTestingDependencyGraph,
-    `
-import {} from './setup-hot-reloading';
-import {} from './create-dependency-graph.ts';
+  it.sequential('should work when updating a file', async () => {
+    await fs.writeFile(
+      pathToTemporaryFile,
+      `
+import {} from './file-a';
+import {} from './file-b';
 `,
-    'utf8',
-  );
-  await updateDependencyGraph('change', pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[pathToFileForTestingDependencyGraph],
-    'changed file to have updated dependencyPaths',
-  ).toEqual({
-    path: pathToFileForTestingDependencyGraph,
-    dependentPaths: [],
-    dependencyPaths: [
-      toAbsolute('setup-hot-reloading.ts'),
-      toAbsolute('create-dependency-graph.ts'),
-    ],
-    moduleDependencies: [],
-  } satisfies DependencyGraph[number]);
-  expect(
-    dependencyGraph[toAbsolute('setup-hot-reloading.ts')]?.dependentPaths,
-  ).toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('get-imported-modules.ts')]?.dependentPaths,
-    'when removing dependency on a file, the dependency should have its dependents updated to not have the testing file again',
-  ).not.toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('create-dependency-graph.ts')]?.dependentPaths,
-  ).toContain(pathToFileForTestingDependencyGraph);
+      'utf8',
+    );
+    await updateDependencyGraph('change', pathToTemporaryFile);
+    expect(
+      dependencyGraph[pathToTemporaryFile],
+      'changed file to have updated dependencyPaths',
+    ).toEqual({
+      path: pathToTemporaryFile,
+      dependentPaths: [],
+      dependencyPaths: [toAbsolute('file-a.ts'), toAbsolute('file-b.ts')],
+      moduleDependencies: [],
+    } satisfies DependencyGraph[number]);
+    expect(dependencyGraph[toAbsolute('file-a.ts')]?.dependentPaths).toContain(
+      pathToTemporaryFile,
+    );
+    expect(dependencyGraph[toAbsolute('file-b.ts')]?.dependentPaths).toContain(
+      pathToTemporaryFile,
+    );
+    expect(
+      dependencyGraph[toAbsolute('general-importing-file.ts')]?.dependentPaths,
+      'when removing dependency on a file, the dependency should have its dependents updated to not have the testing file again',
+    ).not.toContain(pathToTemporaryFile);
+  });
 
-  await fs.rm(pathToFileForTestingDependencyGraph);
-  await updateDependencyGraph('unlink', pathToFileForTestingDependencyGraph);
-  expect(dependencyGraph[pathToFileForTestingDependencyGraph]).toBeUndefined();
-  expect(
-    dependencyGraph[toAbsolute('setup-hot-reloading.ts')]?.dependentPaths,
-    "should remove itself from dependents once it's unlinked",
-  ).not.toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('get-imported-modules.ts')]?.dependentPaths,
-    "should remove itself from dependents once it's unlinked",
-  ).not.toContain(pathToFileForTestingDependencyGraph);
-  expect(
-    dependencyGraph[toAbsolute('create-dependency-graph.ts')]?.dependentPaths,
-    "should remove itself from dependents once it's unlinked",
-  ).not.toContain(pathToFileForTestingDependencyGraph);
+  it.sequential('should work when unlinking a file', async () => {
+    await fs.rm(pathToTemporaryFile);
+    await updateDependencyGraph('unlink', pathToTemporaryFile);
+    expect(dependencyGraph[pathToTemporaryFile]).toBeUndefined();
+    expect(
+      dependencyGraph[toAbsolute('file-a.ts')]?.dependentPaths,
+      "should remove itself from dependents once it's unlinked",
+    ).not.toContain(pathToTemporaryFile);
+    expect(
+      dependencyGraph[toAbsolute('file-b.ts')]?.dependentPaths,
+      "should remove itself from dependents once it's unlinked",
+    ).not.toContain(pathToTemporaryFile);
+    expect(
+      dependencyGraph[toAbsolute('general-importing-file.ts')]?.dependentPaths,
+      "should remove itself from dependents once it's unlinked",
+    ).not.toContain(pathToTemporaryFile);
+  });
 });

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

@@ -306,19 +306,37 @@ export const createDependencyGraph = async (directory: string) => {
       }
     },
     {
-      resolveDependentsOf: function resolveDependentsOf(pathToModule: string) {
-        const moduleEntry = graph[pathToModule];
-        const dependentPaths: Array<string> = [];
+      /**
+       * Resolves all modules that depend on the specified module, directly or indirectly.
+       *
+       * @param pathToModule - The path to the module whose dependents we want to find
+       * @returns An array of paths to all modules that depend on the specified module
+       */
+      resolveDependentsOf: function resolveDependentsOf(
+        pathToModule: string,
+      ): string[] {
+        const dependentPaths = new Set<string>();
+        const stack: string[] = [pathToModule];
+
+        while (stack.length > 0) {
+          const currentPath = stack.pop()!;
+          const moduleEntry = graph[currentPath];
+
+          if (!moduleEntry) continue;
 
-        if (moduleEntry) {
           for (const dependentPath of moduleEntry.dependentPaths) {
-            const dependentsOfDependent = resolveDependentsOf(dependentPath);
-            dependentPaths.push(...dependentsOfDependent);
-            dependentPaths.push(dependentPath);
+            if (
+              dependentPaths.has(dependentPath) ||
+              dependentPath === pathToModule
+            )
+              continue;
+
+            dependentPaths.add(dependentPath);
+            stack.push(dependentPath);
           }
         }
 
-        return dependentPaths;
+        return [...dependentPaths.values()];
       },
     },
   ] as const;

package/src/utils/preview/hot-reloading/test/dependency-graph/inner/data-to-import.json

@@ -0,0 +1 @@
+{}

package/src/utils/preview/hot-reloading/test/dependency-graph/inner/file-a.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: used in testing */
+/** biome-ignore-all lint/complexity/noUselessEmptyExport: used in testing */
+import * as _ from './file-b';
+
+export {};

package/src/utils/preview/hot-reloading/test/dependency-graph/inner/file-b.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: used in testing */
+/** biome-ignore-all lint/complexity/noUselessEmptyExport: used in testing */
+import * as _ from './file-a';
+
+export {};

package/src/utils/preview/hot-reloading/test/dependency-graph/inner/general-importing-file.ts

@@ -0,0 +1,9 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: used in testing */
+/** biome-ignore-all lint/complexity/noUselessEmptyExport: used in testing */
+
+import _os from 'node:os';
+import _path from 'node:path';
+import * as _outer from '../outer';
+import _json from './data-to-import.json';
+import * as _a from './file-a';
+import * as _b from './file-b';

package/src/utils/preview/hot-reloading/test/dependency-graph/inner/outer-dependency.ts

@@ -0,0 +1,3 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: used in testing */
+/** biome-ignore-all lint/complexity/noUselessEmptyExport: used in testing */
+export {};

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

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: used in testing */
+/** biome-ignore-all lint/complexity/noUselessEmptyExport: used in testing */
+import * as _dependency from './inner/outer-dependency';
+
+export {};

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

@@ -1,7 +1,7 @@
 import http from 'node:http';
 import path from 'node:path';
 import url from 'node:url';
-import chalk from 'chalk';
+import { styleText } from 'node:util';
 import { createJiti } from 'jiti';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
@@ -85,7 +85,9 @@ export const startDevServer = async (
   if (!portAlreadyInUse) {
     // this errors when linting but doesn't on the editor so ignore the warning on this
     /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
-    console.log(chalk.greenBright(`    React Email ${packageJson.version}`));
+    console.log(
+      styleText('greenBright', `    React Email ${packageJson.version}`),
+    );
     console.log(`    Running preview at:          http://localhost:${port}\n`);
   } else {
     const nextPortToTry = port + 1;