react-email 4.0.16 → 4.1.0-canary.10

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

@@ -0,0 +1,151 @@
+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('should work 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('should work 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('should work 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('should work 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('should work 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('should work 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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -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;
+};

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

@@ -0,0 +1,121 @@
+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/tsconfig.json

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

package/src/utils/preview/index.ts

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

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

@@ -0,0 +1,51 @@
+import { existsSync, promises as fs } from 'node:fs';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+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 ${sanitizedFilePath} to be served, here's the exception:`,
+        exception,
+      );
+
+      res.statusCode = 500;
+      res.end(
+        'Could not read file to be served! Check your terminal for more information.',
+      );
+    }
+  }
+};

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

@@ -0,0 +1,234 @@
+import http from 'node:http';
+import path from 'node:path';
+import url from 'node:url';
+import chalk from 'chalk';
+import { createJiti } from 'jiti';
+import logSymbols from 'log-symbols';
+import ora from 'ora';
+import { registerSpinnerAutostopping } from '../../utils/register-spinner-autostopping.js';
+import { getPreviewServerLocation } from '../get-preview-server-location.js';
+import { packageJson } from '../packageJson.js';
+import { getEnvVariablesForPreviewApp } from './get-env-variables-for-preview-app.js';
+import { serveStaticFile } from './serve-static-file.js';
+
+let devServer: http.Server | undefined;
+
+const safeAsyncServerListen = (server: http.Server, port: number) => {
+  return new Promise<{ portAlreadyInUse: boolean }>((resolve) => {
+    server.listen(port, () => {
+      resolve({ portAlreadyInUse: false });
+    });
+
+    server.on('error', (e: NodeJS.ErrnoException) => {
+      if (e.code === 'EADDRINUSE') {
+        resolve({ portAlreadyInUse: true });
+      }
+    });
+  });
+};
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+export const isDev = !dirname.includes('dist');
+
+export const startDevServer = async (
+  emailsDirRelativePath: string,
+  staticBaseDirRelativePath: string,
+  port: number,
+): Promise<http.Server> => {
+  const [majorNodeVersion] = process.versions.node.split('.');
+  if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 18) {
+    console.error(
+      ` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 18 or higher.`,
+    );
+    process.exit(1);
+  }
+
+  const previewServerLocation = await getPreviewServerLocation();
+  const previewServer = createJiti(previewServerLocation);
+
+  const { default: next } =
+    await previewServer.import<typeof import('next')>('next');
+
+  devServer = http.createServer((req, res) => {
+    if (!req.url) {
+      res.end(404);
+      return;
+    }
+
+    const parsedUrl = url.parse(req.url, true);
+
+    // Never cache anything to avoid
+    res.setHeader(
+      'Cache-Control',
+      'no-cache, max-age=0, must-revalidate, no-store',
+    );
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '-1');
+
+    try {
+      if (
+        parsedUrl.path?.includes('static/') &&
+        !parsedUrl.path.includes('_next/static/')
+      ) {
+        void serveStaticFile(res, parsedUrl, staticBaseDirRelativePath);
+      } else if (!isNextReady) {
+        void nextReadyPromise.then(() =>
+          nextHandleRequest?.(req, res, parsedUrl),
+        );
+      } else {
+        void nextHandleRequest?.(req, res, parsedUrl);
+      }
+    } catch (e) {
+      console.error('caught error', e);
+
+      res.writeHead(500);
+      res.end();
+    }
+  });
+
+  const { portAlreadyInUse } = await safeAsyncServerListen(devServer, port);
+
+  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(`    Running preview at:          http://localhost:${port}\n`);
+  } else {
+    const nextPortToTry = port + 1;
+    console.warn(
+      ` ${logSymbols.warning} Port ${port} is already in use, trying ${nextPortToTry}`,
+    );
+    return startDevServer(
+      emailsDirRelativePath,
+      staticBaseDirRelativePath,
+      nextPortToTry,
+    );
+  }
+
+  devServer.on('close', async () => {
+    await app.close();
+  });
+
+  devServer.on('error', (e: NodeJS.ErrnoException) => {
+    spinner.stopAndPersist({
+      symbol: logSymbols.error,
+      text: `Preview Server had an error: ${e}`,
+    });
+    process.exit(1);
+  });
+
+  const spinner = ora({
+    text: 'Getting react-email preview server ready...\n',
+    prefixText: ' ',
+  }).start();
+
+  registerSpinnerAutostopping(spinner);
+  const timeBeforeNextReady = performance.now();
+
+  // these environment variables are used on the next app
+  // this is the most reliable way of communicating these paths through
+  process.env = {
+    NODE_ENV: 'development',
+    ...(process.env as Omit<NodeJS.ProcessEnv, 'NODE_ENV'> & {
+      NODE_ENV?: NodeJS.ProcessEnv['NODE_ENV'];
+    }),
+    ...getEnvVariablesForPreviewApp(
+      // If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
+      path.normalize(emailsDirRelativePath),
+      process.cwd(),
+    ),
+  };
+
+  const app = next({
+    // passing in env here does not get the environment variables there
+    dev: isDev,
+    conf: {
+      images: {
+        // This is to avoid the warning with sharp
+        unoptimized: true,
+      },
+    },
+    hostname: 'localhost',
+    port,
+    dir: previewServerLocation,
+  });
+
+  let isNextReady = false;
+  const nextReadyPromise = app.prepare();
+  try {
+    await nextReadyPromise;
+  } catch (exception) {
+    spinner.stopAndPersist({
+      symbol: logSymbols.error,
+      text: ` Preview Server had an error: ${exception}`,
+    });
+    process.exit(1);
+  }
+  isNextReady = true;
+
+  const nextHandleRequest:
+    | ReturnType<typeof app.getRequestHandler>
+    | undefined = app.getRequestHandler();
+
+  const secondsToNextReady = (
+    (performance.now() - timeBeforeNextReady) /
+    1000
+  ).toFixed(1);
+
+  spinner.stopAndPersist({
+    text: `Ready in ${secondsToNextReady}s\n`,
+    symbol: logSymbols.success,
+  });
+
+  return devServer;
+};
+
+// based on https://stackoverflow.com/a/14032965
+const makeExitHandler =
+  (
+    options?:
+      | { shouldKillProcess: false }
+      | { shouldKillProcess: true; killWithErrorCode: boolean },
+  ) =>
+  (codeSignalOrError: number | NodeJS.Signals | Error) => {
+    if (typeof devServer !== 'undefined') {
+      console.log('\nshutting down dev server');
+      devServer.close();
+      devServer = undefined;
+    }
+
+    if (codeSignalOrError instanceof Error) {
+      console.error(codeSignalOrError);
+    }
+
+    if (options?.shouldKillProcess) {
+      process.exit(options.killWithErrorCode ? 1 : 0);
+    }
+  };
+
+// do something when app is closing
+process.on('exit', makeExitHandler());
+
+// catches ctrl+c event
+process.on(
+  'SIGINT',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+
+//  catches "kill pid" (for example: nodemon restart)
+process.on(
+  'SIGUSR1',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+process.on(
+  'SIGUSR2',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: false }),
+);
+
+// catches uncaught exceptions
+process.on(
+  'uncaughtException',
+  makeExitHandler({ shouldKillProcess: true, killWithErrorCode: true }),
+);

package/src/utils/tree.spec.ts

@@ -0,0 +1,5 @@
+import { tree } from './tree.js';
+
+test('tree(__dirname, 2)', async () => {
+  expect(await tree(__dirname, 2)).toMatchSnapshot();
+});