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

package/src/utils/preview/hot-reloading/get-imported-modules.spec.ts

@@ -1,151 +0,0 @@
-import { promises as fs } from 'node:fs';
-import { getImportedModules } from './get-imported-modules.js';
-
-vi.mock('@babel/traverse', async () => {
-  const traverse = await vi.importActual('@babel/traverse');
-  return { default: traverse };
-});
-
-describe('getImportedModules()', () => {
-  it('works with this test file', async () => {
-    const contents = await fs.readFile(import.meta.filename, 'utf8');
-
-    expect(getImportedModules(contents)).toEqual([
-      'node:fs',
-      './get-imported-modules.js',
-    ]);
-  });
-
-  it('works with direct exports', () => {
-    const contents = `export * from './component-a';
-    export { ComponentB } from './component-b'; 
-
-    import { ComponentC } from './component-c';
-    export { ComponentC }`;
-    expect(getImportedModules(contents)).toEqual([
-      './component-a',
-      './component-b',
-      './component-c',
-    ]);
-  });
-
-  it('works with regular imports and double quotes', () => {
-    const contents = `import {
-  Body,
-  Button,
-  Container,
-  Column,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} from "@react-email/components";
-import { Tailwind } from "@react-email/tailwind";
-import { Component } from '../../my-component';
-
-import * as React from "react";
-    `;
-    expect(getImportedModules(contents)).toEqual([
-      '@react-email/components',
-      '@react-email/tailwind',
-      '../../my-component',
-      'react',
-    ]);
-  });
-
-  it('works with regular imports and single quotes', () => {
-    const contents = `import {
-  Body,
-  Button,
-  Container,
-  Column,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} from '@react-email/components';
-import { Tailwind } from '@react-email/tailwind';
-import { Component } from '../../my-component';
-
-import * as React from 'react';
-    `;
-    expect(getImportedModules(contents)).toEqual([
-      '@react-email/components',
-      '@react-email/tailwind',
-      '../../my-component',
-      'react',
-    ]);
-  });
-
-  it('works with commonjs require with double quotes', () => {
-    const contents = `const {
-  Body,
-  Button,
-  Container,
-  Column,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} = require("@react-email/components");
-const { Tailwind } = require("@react-email/tailwind");
-const { Component } = require("../../my-component");
-
-const React = require("react");
-    `;
-    expect(getImportedModules(contents)).toEqual([
-      '@react-email/components',
-      '@react-email/tailwind',
-      '../../my-component',
-      'react',
-    ]);
-  });
-
-  it('works with commonjs require with single quotes', () => {
-    const contents = `const {
-  Body,
-  Button,
-  Container,
-  Column,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} = require('@react-email/components');
-const { Tailwind } = require('@react-email/tailwind');
-const { Component } = require('../../my-component');
-
-const React = require('react');
-    `;
-    expect(getImportedModules(contents)).toEqual([
-      '@react-email/components',
-      '@react-email/tailwind',
-      '../../my-component',
-      'react',
-    ]);
-  });
-});

package/src/utils/preview/hot-reloading/get-imported-modules.ts

@@ -1,49 +0,0 @@
-import { parse } from '@babel/parser';
-
-import traverseModule from '@babel/traverse';
-
-const traverse =
-  // we keep this check here so that this still works with the dev:preview
-  // script's use of tsx
-  typeof traverseModule === 'function'
-    ? traverseModule
-    : traverseModule.default;
-
-export const getImportedModules = (contents: string) => {
-  const importedPaths: string[] = [];
-  const parsedContents = parse(contents, {
-    sourceType: 'unambiguous',
-    strictMode: false,
-    errorRecovery: true,
-    plugins: ['jsx', 'typescript', 'decorators'],
-  });
-
-  traverse(parsedContents, {
-    ImportDeclaration({ node }) {
-      importedPaths.push(node.source.value);
-    },
-    ExportAllDeclaration({ node }) {
-      importedPaths.push(node.source.value);
-    },
-    ExportNamedDeclaration({ node }) {
-      if (node.source) {
-        importedPaths.push(node.source.value);
-      }
-    },
-    TSExternalModuleReference({ node }) {
-      importedPaths.push(node.expression.value);
-    },
-    CallExpression({ node }) {
-      if ('name' in node.callee && node.callee.name === 'require') {
-        if (node.arguments.length === 1) {
-          const importPathNode = node.arguments[0]!;
-          if (importPathNode!.type === 'StringLiteral') {
-            importedPaths.push(importPathNode.value);
-          }
-        }
-      }
-    },
-  });
-
-  return importedPaths;
-};

package/src/utils/preview/hot-reloading/resolve-path-aliases.spec.ts

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

package/src/utils/preview/hot-reloading/resolve-path-aliases.ts

@@ -1,32 +0,0 @@
-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;
-};

package/src/utils/preview/hot-reloading/setup-hot-reloading.ts

@@ -1,121 +0,0 @@
-import type http from 'node:http';
-import path from 'node:path';
-import { watch } from 'chokidar';
-import debounce from 'debounce';
-import { type Socket, Server as SocketServer } from 'socket.io';
-import type { HotReloadChange } from '../../types/hot-reload-change.js';
-import { createDependencyGraph } from './create-dependency-graph.js';
-
-export const setupHotreloading = async (
-  devServer: http.Server,
-  emailDirRelativePath: string,
-) => {
-  let clients: Socket[] = [];
-  const io = new SocketServer(devServer);
-
-  io.on('connection', (client) => {
-    clients.push(client);
-
-    client.on('disconnect', () => {
-      clients = clients.filter((item) => item !== client);
-    });
-  });
-
-  // used to keep track of all changes
-  // and send them at once to the preview app through the web socket
-  let changes = [] as HotReloadChange[];
-
-  const reload = debounce(() => {
-    // we detect these using the useHotreload hook on the Next app
-    clients.forEach((client) => {
-      client.emit(
-        'reload',
-        changes.filter((change) =>
-          // Ensures only changes inside the emails directory are emitted
-          path
-            .resolve(absolutePathToEmailsDirectory, change.filename)
-            .startsWith(absolutePathToEmailsDirectory),
-        ),
-      );
-    });
-
-    changes = [];
-  }, 150);
-
-  const absolutePathToEmailsDirectory = path.resolve(
-    process.cwd(),
-    emailDirRelativePath,
-  );
-
-  const [dependencyGraph, updateDependencyGraph, { resolveDependentsOf }] =
-    await createDependencyGraph(absolutePathToEmailsDirectory);
-
-  const watcher = watch('', {
-    ignoreInitial: true,
-    cwd: absolutePathToEmailsDirectory,
-  });
-
-  const getFilesOutsideEmailsDirectory = () =>
-    Object.keys(dependencyGraph).filter((p) =>
-      path.relative(absolutePathToEmailsDirectory, p).startsWith('..'),
-    );
-  let filesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
-  // adds in to be watched separately all of the files that are outside of
-  // the user's emails directory
-  for (const p of filesOutsideEmailsDirectory) {
-    watcher.add(p);
-  }
-
-  const exit = async () => {
-    await watcher.close();
-  };
-  process.on('SIGINT', exit);
-  process.on('uncaughtException', exit);
-
-  watcher.on('all', async (event, relativePathToChangeTarget) => {
-    const file = relativePathToChangeTarget.split(path.sep);
-    if (file.length === 0) {
-      return;
-    }
-    const pathToChangeTarget = path.resolve(
-      absolutePathToEmailsDirectory,
-      relativePathToChangeTarget,
-    );
-
-    await updateDependencyGraph(event, pathToChangeTarget);
-
-    const newFilesOutsideEmailsDirectory = getFilesOutsideEmailsDirectory();
-    // updates the files outside of the user's emails directory by unwatching
-    // the inexistent ones and watching the new ones
-    //
-    // this is necessary to avoid the issue mentioned here https://github.com/resend/react-email/issues/1433#issuecomment-2177515290
-    for (const p of filesOutsideEmailsDirectory) {
-      if (!newFilesOutsideEmailsDirectory.includes(p)) {
-        watcher.unwatch(p);
-      }
-    }
-    for (const p of newFilesOutsideEmailsDirectory) {
-      if (!filesOutsideEmailsDirectory.includes(p)) {
-        watcher.add(p);
-      }
-    }
-    filesOutsideEmailsDirectory = newFilesOutsideEmailsDirectory;
-
-    changes.push({
-      event,
-      filename: relativePathToChangeTarget,
-    });
-
-    // These dependents are dependents resolved recursively, so even dependents of dependents
-    // will be notified of this change so that we ensure that things are updated in the preview.
-    for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
-      changes.push({
-        event: 'change' as const,
-        filename: path.relative(absolutePathToEmailsDirectory, dependentPath),
-      });
-    }
-    reload();
-  });
-
-  return watcher;
-};

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

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

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

@@ -1,5 +0,0 @@
-/** 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

@@ -1,5 +0,0 @@
-/** 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

@@ -1,9 +0,0 @@
-/** 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

@@ -1,3 +0,0 @@
-/** 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/inner/path-aliases.ts

@@ -1 +0,0 @@
-import '@/some-file';

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

@@ -1,5 +0,0 @@
-/** 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/hot-reloading/test/tsconfig.json

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

package/src/utils/preview/index.ts

@@ -1,2 +0,0 @@
-export * from './hot-reloading/setup-hot-reloading.js';
-export * from './start-dev-server.js';

package/src/utils/preview/serve-static-file.ts

@@ -1,51 +0,0 @@
-import { existsSync, promises as fs } from 'node:fs';
-import type http from 'node:http';
-import path from 'node:path';
-import type url from 'node:url';
-import { lookup } from 'mime-types';
-
-export const serveStaticFile = async (
-  res: http.ServerResponse,
-  parsedUrl: url.UrlWithParsedQuery,
-  staticDirRelativePath: string,
-) => {
-  const pathname = parsedUrl.pathname!.replace('/static', './static');
-  const ext = path.parse(pathname).ext;
-
-  const staticBaseDir = path.resolve(process.cwd(), staticDirRelativePath);
-  const fileAbsolutePath = path.resolve(staticBaseDir, pathname);
-  if (!fileAbsolutePath.startsWith(staticBaseDir)) {
-    res.statusCode = 403;
-    res.end();
-    return;
-  }
-
-  try {
-    const fileHandle = await fs.open(fileAbsolutePath, 'r');
-
-    const fileData = await fs.readFile(fileHandle);
-
-    // if the file is found, set Content-type and send data
-    res.setHeader('Content-type', lookup(ext) || 'text/plain');
-    res.end(fileData);
-
-    fileHandle.close();
-  } catch (exception) {
-    if (!existsSync(fileAbsolutePath)) {
-      res.statusCode = 404;
-      res.end();
-    } else {
-      const sanitizedFilePath = fileAbsolutePath.replace(/\n|\r/g, '');
-      console.error(
-        `Could not read file at %s to be served, here's the exception:`,
-        sanitizedFilePath,
-        exception,
-      );
-
-      res.statusCode = 500;
-      res.end(
-        'Could not read file to be served! Check your terminal for more information.',
-      );
-    }
-  }
-};