react-email 4.0.16 → 4.1.0-canary.10

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

@@ -0,0 +1,284 @@
+import { existsSync, promises as fs } from 'node:fs';
+import path from 'node:path';
+import {
+  createDependencyGraph,
+  type DependencyGraph,
+} from './create-dependency-graph.js';
+
+const pathToFileForTestingDependencyGraph = path.join(
+  __dirname,
+  '.for-dependency-graph.ts',
+);
+
+vi.mock('@babel/traverse', async () => {
+  const traverse = await vi.importActual('@babel/traverse');
+  return { default: traverse };
+});
+
+test('createDependencyGraph()', async () => {
+  if (existsSync(pathToFileForTestingDependencyGraph)) {
+    await fs.rm(pathToFileForTestingDependencyGraph);
+  }
+
+  const [dependencyGraph, updateDependencyGraph] =
+    await createDependencyGraph(__dirname);
+
+  const toAbsolute = (relativePath: string) => {
+    return path.resolve(__dirname, 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({
+    '../../../../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',
+      ],
+      dependentPaths: [
+        'create-dependency-graph.spec.ts',
+        'setup-hot-reloading.ts',
+      ],
+      moduleDependencies: ['node:fs', 'node:path', 'chokidar/handler.js'],
+    },
+    '../../get-preview-server-location.ts': {
+      dependencyPaths: ['../../packageJson.ts'],
+      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: [
+        '../../get-preview-server-location.ts',
+        '../../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: [],
+      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: [
+        'create-dependency-graph.ts',
+        'get-imported-modules.spec.ts',
+      ],
+      dependencyPaths: [],
+      moduleDependencies: ['@babel/parser', '@babel/traverse'],
+    },
+    'get-imported-modules.spec.ts': {
+      path: 'get-imported-modules.spec.ts',
+      dependencyPaths: ['get-imported-modules.ts'],
+      dependentPaths: [],
+      moduleDependencies: ['node:fs'],
+    },
+    'setup-hot-reloading.ts': {
+      path: 'setup-hot-reloading.ts',
+      dependencyPaths: [
+        '../../types/hot-reload-change.ts',
+        'create-dependency-graph.ts',
+      ],
+      dependentPaths: [],
+      moduleDependencies: [
+        'node:http',
+        'node:path',
+        'chokidar',
+        'debounce',
+        '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'],
+      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);
+
+  await fs.writeFile(
+    pathToFileForTestingDependencyGraph,
+    `
+import {} from './setup-hot-reloading';
+import {} from './create-dependency-graph.ts';
+`,
+    '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);
+
+  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);
+});

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

@@ -0,0 +1,321 @@
+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';
+
+interface Module {
+  path: string;
+
+  dependencyPaths: string[];
+  dependentPaths: string[];
+
+  moduleDependencies: string[];
+}
+
+export type DependencyGraph = Record</* path to module */ string, Module>;
+
+const readAllFilesInsideDirectory = async (directory: string) => {
+  let allFilePaths: string[] = [];
+
+  const topLevelDirents = await fs.readdir(directory, { withFileTypes: true });
+
+  for await (const dirent of topLevelDirents) {
+    const pathToDirent = path.join(directory, dirent.name);
+    if (dirent.isDirectory()) {
+      allFilePaths = allFilePaths.concat(
+        await readAllFilesInsideDirectory(pathToDirent),
+      );
+    } else {
+      allFilePaths.push(pathToDirent);
+    }
+  }
+
+  return allFilePaths;
+};
+
+const isJavascriptModule = (filePath: string) => {
+  const extensionName = path.extname(filePath);
+
+  return ['.js', '.ts', '.jsx', '.tsx', '.mjs', '.cjs'].includes(extensionName);
+};
+
+const checkFileExtensionsUntilItExists = (
+  pathWithoutExtension: string,
+): string | undefined => {
+  if (existsSync(`${pathWithoutExtension}.ts`)) {
+    return `${pathWithoutExtension}.ts`;
+  }
+
+  if (existsSync(`${pathWithoutExtension}.tsx`)) {
+    return `${pathWithoutExtension}.tsx`;
+  }
+
+  if (existsSync(`${pathWithoutExtension}.js`)) {
+    return `${pathWithoutExtension}.js`;
+  }
+
+  if (existsSync(`${pathWithoutExtension}.jsx`)) {
+    return `${pathWithoutExtension}.jsx`;
+  }
+
+  if (existsSync(`${pathWithoutExtension}.mjs`)) {
+    return `${pathWithoutExtension}.mjs`;
+  }
+
+  if (existsSync(`${pathWithoutExtension}.cjs`)) {
+    return `${pathWithoutExtension}.cjs`;
+  }
+};
+
+/**
+ * Creates a stateful dependency graph that is structured in a way that you can get
+ * the dependents of a module from its path.
+ *
+ * Stateful in the sense that it provides a `getter` and an "`updater`". The updater
+ * will receive changes to the files, that can be perceived through some file watching mechanism,
+ * so that it doesn't need to recompute the entire dependency graph but only the parts changed.
+ */
+export const createDependencyGraph = async (directory: string) => {
+  const filePaths = await readAllFilesInsideDirectory(directory);
+  const modulePaths = filePaths.filter(isJavascriptModule);
+  const graph: DependencyGraph = Object.fromEntries(
+    modulePaths.map((path) => [
+      path,
+      {
+        path,
+        dependencyPaths: [],
+        dependentPaths: [],
+        moduleDependencies: [],
+      },
+    ]),
+  );
+
+  const getDependencyPaths = async (filePath: string) => {
+    const contents = await fs.readFile(filePath, 'utf8');
+    const importedPaths = isJavascriptModule(filePath)
+      ? resolvePathAliases(getImportedModules(contents), path.dirname(filePath))
+      : [];
+    const importedPathsRelativeToDirectory = importedPaths.map(
+      (dependencyPath) => {
+        const isModulePath = !dependencyPath.startsWith('.');
+
+        /*
+          path.isAbsolute will return false if the path looks like JavaScript module imports
+          e.g. path.isAbsolute('react-dom/server') will return false, but for our purposes this
+          path is not a relative one.
+        */
+        if (isModulePath || path.isAbsolute(dependencyPath)) {
+          return dependencyPath;
+        }
+
+        let pathToDependencyFromDirectory = path.resolve(
+          /*
+            path.resolve resolves paths differently from what imports on javascript do.
+
+            So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependency path of "./other-email" 
+            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
+          */
+          path.dirname(filePath),
+          dependencyPath,
+        );
+
+        let isDirectory = false;
+        try {
+          // will throw if the the file is not existent
+          isDirectory = statSync(pathToDependencyFromDirectory).isDirectory();
+        } catch (_) {}
+        if (isDirectory) {
+          const pathToSubDirectory = pathToDependencyFromDirectory;
+          const pathWithExtension = checkFileExtensionsUntilItExists(
+            `${pathToSubDirectory}/index`,
+          );
+          if (pathWithExtension) {
+            pathToDependencyFromDirectory = pathWithExtension;
+          } else if (isDev) {
+            // only warn about this on development as it is probably going to be irrelevant otherwise
+            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 = path.extname(pathToDependencyFromDirectory);
+        const pathWithEnsuredExtension = (() => {
+          if (
+            extension.length > 0 &&
+            existsSync(pathToDependencyFromDirectory)
+          ) {
+            return pathToDependencyFromDirectory;
+          }
+          return checkFileExtensionsUntilItExists(
+            pathToDependencyFromDirectory.replace(extension, ''),
+          );
+        })();
+
+        if (pathWithEnsuredExtension) {
+          pathToDependencyFromDirectory = pathWithEnsuredExtension;
+        } else if (isDev) {
+          // only warn about this on development as it is probably going to be irrelevant otherwise
+          console.warn(
+            `Could not find file at ${pathToDependencyFromDirectory}`,
+          );
+        }
+
+        return pathToDependencyFromDirectory;
+      },
+    );
+
+    const moduleDependencies = importedPathsRelativeToDirectory.filter(
+      (dependencyPath) =>
+        !dependencyPath.startsWith('.') && !path.isAbsolute(dependencyPath),
+    );
+
+    const nonNodeModuleImportPathsRelativeToDirectory =
+      importedPathsRelativeToDirectory.filter(
+        (dependencyPath) =>
+          dependencyPath.startsWith('.') || path.isAbsolute(dependencyPath),
+      );
+
+    return {
+      dependencyPaths: nonNodeModuleImportPathsRelativeToDirectory,
+      moduleDependencies,
+    };
+  };
+
+  const updateModuleDependenciesInGraph = async (moduleFilePath: string) => {
+    if (graph[moduleFilePath] === undefined) {
+      graph[moduleFilePath] = {
+        path: moduleFilePath,
+        dependencyPaths: [],
+        dependentPaths: [],
+        moduleDependencies: [],
+      };
+    }
+
+    const { moduleDependencies, dependencyPaths: newDependencyPaths } =
+      await getDependencyPaths(moduleFilePath);
+
+    graph[moduleFilePath].moduleDependencies = moduleDependencies;
+
+    // we go through these to remove the ones that don't exist anymore
+    for (const dependencyPath of graph[moduleFilePath].dependencyPaths) {
+      // Looping through only the ones that were on the dependencyPaths but are not
+      // in the newDependencyPaths
+      if (newDependencyPaths.includes(dependencyPath)) continue;
+
+      const dependencyModule = graph[dependencyPath];
+      if (dependencyModule !== undefined) {
+        dependencyModule.dependentPaths =
+          dependencyModule.dependentPaths.filter(
+            (dependentPath) => dependentPath !== moduleFilePath,
+          );
+      }
+    }
+
+    graph[moduleFilePath].dependencyPaths = newDependencyPaths;
+
+    for await (const dependencyPath of newDependencyPaths) {
+      if (graph[dependencyPath] === undefined) {
+        /*
+          This import path might have not been initialized as it can be outside
+          of the original directory we looked into.
+        */
+        await updateModuleDependenciesInGraph(dependencyPath);
+      }
+
+      const dependencyModule = graph[dependencyPath];
+
+      if (dependencyModule === undefined) {
+        throw new Error(
+          `Loading the dependency path ${dependencyPath} did not initialize it at all. This is a bug in React Email.`,
+        );
+      }
+
+      if (!dependencyModule.dependentPaths.includes(moduleFilePath)) {
+        dependencyModule.dependentPaths.push(moduleFilePath);
+      }
+    }
+  };
+
+  for (const filePath of modulePaths) {
+    await updateModuleDependenciesInGraph(filePath);
+  }
+
+  const removeModuleFromGraph = (filePath: string) => {
+    const module = graph[filePath];
+    if (module) {
+      for (const dependencyPath of module.dependencyPaths) {
+        if (graph[dependencyPath]) {
+          graph[dependencyPath]!.dependentPaths = graph[
+            dependencyPath
+          ]!.dependentPaths.filter(
+            (dependentPath) => dependentPath !== filePath,
+          );
+        }
+      }
+      delete graph[filePath];
+    }
+  };
+
+  return [
+    graph,
+    async (event: EventName, pathToModified: string) => {
+      switch (event) {
+        case 'change':
+          if (isJavascriptModule(pathToModified)) {
+            await updateModuleDependenciesInGraph(pathToModified);
+          }
+          break;
+        case 'add':
+          if (isJavascriptModule(pathToModified)) {
+            await updateModuleDependenciesInGraph(pathToModified);
+          }
+          break;
+        case 'addDir': {
+          const filesInsideAddedDirectory =
+            await readAllFilesInsideDirectory(pathToModified);
+          const modulesInsideAddedDirectory =
+            filesInsideAddedDirectory.filter(isJavascriptModule);
+          for await (const filePath of modulesInsideAddedDirectory) {
+            await updateModuleDependenciesInGraph(filePath);
+          }
+          break;
+        }
+        case 'unlink':
+          if (isJavascriptModule(pathToModified)) {
+            removeModuleFromGraph(pathToModified);
+          }
+          break;
+        case 'unlinkDir': {
+          const filesInsideDeletedDirectory =
+            await readAllFilesInsideDirectory(pathToModified);
+          const modulesInsideDeletedDirectory =
+            filesInsideDeletedDirectory.filter(isJavascriptModule);
+          for await (const filePath of modulesInsideDeletedDirectory) {
+            removeModuleFromGraph(filePath);
+          }
+          break;
+        }
+      }
+    },
+    {
+      resolveDependentsOf: function resolveDependentsOf(pathToModule: string) {
+        const moduleEntry = graph[pathToModule];
+        const dependentPaths: Array<string> = [];
+
+        if (moduleEntry) {
+          for (const dependentPath of moduleEntry.dependentPaths) {
+            const dependentsOfDependent = resolveDependentsOf(dependentPath);
+            dependentPaths.push(...dependentsOfDependent);
+            dependentPaths.push(dependentPath);
+          }
+        }
+
+        return dependentPaths;
+      },
+    },
+  ] as const;
+};