@depup/react-email 5.2.10-depup.0 → 6.9.0-depup.1

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

@@ -1,226 +0,0 @@
-import { existsSync, promises as fs } from 'node:fs';
-import path from 'node:path';
-import {
-  createDependencyGraph,
-  type DependencyGraph,
-} from './create-dependency-graph.js';
-
-const testingDiretctory = path.join(
-  import.meta.dirname,
-  './test/dependency-graph/inner',
-);
-
-const pathToTemporaryFile = path.join(
-  testingDiretctory,
-  './.temporary-file.ts',
-);
-
-vi.mock('@babel/traverse', async () => {
-  const traverse = await vi.importActual('@babel/traverse');
-  return { default: traverse };
-});
-
-describe('createDependencyGraph()', async () => {
-  if (existsSync(pathToTemporaryFile)) {
-    await fs.rm(pathToTemporaryFile);
-  }
-
-  const [dependencyGraph, updateDependencyGraph, { resolveDependentsOf }] =
-    await createDependencyGraph(testingDiretctory);
-
-  const toAbsolute = (relativePath: string) => {
-    return path.resolve(testingDiretctory, relativePath);
-  };
-
-  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'),
-    ]);
-  });
-
-  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).replace(/\\/g, '/'),
-          {
-            path: path
-              .relative(testingDiretctory, value.path)
-              .replace(/\\/g, '/'),
-            dependentPaths: value.dependentPaths.map((p) =>
-              path.relative(testingDiretctory, p).replace(/\\/g, '/'),
-            ),
-            dependencyPaths: value.dependencyPaths.map((p) =>
-              path.relative(testingDiretctory, p).replace(/\\/g, '/'),
-            ),
-            moduleDependencies: value.moduleDependencies,
-          },
-        ];
-      }),
-    );
-    expect(relativePathDependencyGraph).toMatchInlineSnapshot(`
-      {
-        "../../some-file.ts": {
-          "dependencyPaths": [],
-          "dependentPaths": [
-            "path-aliases.ts",
-          ],
-          "moduleDependencies": [],
-          "path": "../../some-file.ts",
-        },
-        "../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",
-        },
-        "path-aliases.ts": {
-          "dependencyPaths": [
-            "../../some-file.ts",
-          ],
-          "dependentPaths": [],
-          "moduleDependencies": [],
-          "path": "path-aliases.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: [],
-      dependencyPaths: [
-        toAbsolute('file-a.ts'),
-        toAbsolute('file-b.ts'),
-        toAbsolute('general-importing-file.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,
-    ).toContain(pathToTemporaryFile);
-  });
-
-  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', 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);
-  });
-
-  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

@@ -1,343 +0,0 @@
-import { existsSync, promises as fs, statSync } from 'node:fs';
-import path from 'node:path';
-import type { EventName } from 'chokidar/handler.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 javascriptExtensions = ['.js', '.ts', '.jsx', '.tsx', '.mjs', '.cjs'];
-
-const isJavascriptModule = (filePath: string) => {
-  const extensionName = path.extname(filePath);
-
-  return javascriptExtensions.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 {
-            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;
-          }
-          if (javascriptExtensions.includes(extension)) {
-            return checkFileExtensionsUntilItExists(
-              pathToDependencyFromDirectory.replace(extension, ''),
-            );
-          }
-          return checkFileExtensionsUntilItExists(
-            pathToDependencyFromDirectory,
-          );
-        })();
-
-        if (pathWithEnsuredExtension) {
-          pathToDependencyFromDirectory = pathWithEnsuredExtension;
-        } else {
-          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;
-        }
-      }
-    },
-    {
-      /**
-       * 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;
-
-          for (const dependentPath of moduleEntry.dependentPaths) {
-            if (
-              dependentPaths.has(dependentPath) ||
-              dependentPath === pathToModule
-            )
-              continue;
-
-            dependentPaths.add(dependentPath);
-            stack.push(dependentPath);
-          }
-        }
-
-        return [...dependentPaths.values()];
-      },
-    },
-  ] as const;
-};