react-email 5.2.4 → 5.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -43,13 +43,13 @@
     "@types/babel__traverse": "7.20.7",
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
-    "next": "16.0.10",
+    "next": "16.1.5",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "shlex": "3.0.0",
     "tsx": "4.21.0",
     "typescript": "5.8.3",
-    "@react-email/components": "1.0.4"
+    "@react-email/components": "1.0.7"
   },
   "scripts": {
     "build": "tsdown",

package/src/commands/build.ts

@@ -1,5 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getPackages } from '@manypkg/get-packages';
 import logSymbols from 'log-symbols';
 import { installDependencies, type PackageManagerName, runScript } from 'nypm';
 import ora from 'ora';
@@ -15,25 +17,37 @@ interface Args {
   packageManager: PackageManagerName;
 }
 
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const isInReactEmailMonorepo = !dirname.includes('node_modules');
+
 const setNextEnvironmentVariablesForBuild = async (
   emailsDirRelativePath: string,
   builtPreviewAppPath: string,
+  usersProjectLocation: string,
 ) => {
+  let rootDir = 'previewServerLocation';
+  if (isInReactEmailMonorepo) {
+    rootDir = `'${await getPackages(usersProjectLocation).then((p) => p.rootDir.replaceAll('\\', '/'))}'`;
+  }
   const nextConfigContents = `
 import path from 'path';
 const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
-const userProjectLocation = '${process.cwd().replace(/\\/g, '/')}';
-const previewServerLocation = '${builtPreviewAppPath.replace(/\\/g, '/')}';
+const userProjectLocation = '${process.cwd().replaceAll('\\', '/')}';
+const previewServerLocation = '${builtPreviewAppPath.replaceAll('\\', '/')}';
+const rootDir = ${rootDir};
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   env: {
     NEXT_PUBLIC_IS_BUILDING: 'true',
-    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
-    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
-    PREVIEW_SERVER_LOCATION: previewServerLocation,
-    USER_PROJECT_LOCATION: userProjectLocation
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
+    REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
+    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: userProjectLocation
+  },
+  turbopack: {
+    root: rootDir,
   },
-  outputFileTracingRoot: previewServerLocation,
+  outputFileTracingRoot: rootDir,
   serverExternalPackages: ['esbuild'],
   typescript: {
     ignoreBuildErrors: true
@@ -135,8 +149,10 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
     devDependencies: Record<string, string>;
   };
   // Turbopack has some errors with the imports in @react-email/tailwind
-  packageJson.scripts.build = 'next build';
-  packageJson.scripts.start = 'next start';
+  packageJson.scripts.build =
+    'cross-env NODE_OPTIONS="--experimental-vm-modules --disable-warning=ExperimentalWarning" next build';
+  packageJson.scripts.start =
+    'cross-env NODE_OPTIONS="--experimental-vm-modules --disable-warning=ExperimentalWarning" next start';
   delete packageJson.scripts.postbuild;
 
   packageJson.name = 'preview-server';
@@ -162,6 +178,7 @@ export const build = async ({
   packageManager,
 }: Args) => {
   try {
+    const usersProjectLocation = process.cwd();
     const previewServerLocation = await getPreviewServerLocation();
 
     const spinner = ora({
@@ -175,10 +192,13 @@ export const build = async ({
       process.exit(1);
     }
 
-    const emailsDirPath = path.join(process.cwd(), emailsDirRelativePath);
+    const emailsDirPath = path.join(
+      usersProjectLocation,
+      emailsDirRelativePath,
+    );
     const staticPath = path.join(emailsDirPath, 'static');
 
-    const builtPreviewAppPath = path.join(process.cwd(), '.react-email');
+    const builtPreviewAppPath = path.join(usersProjectLocation, '.react-email');
 
     if (fs.existsSync(builtPreviewAppPath)) {
       spinner.text = 'Deleting pre-existing `.react-email` folder';
@@ -189,12 +209,11 @@ export const build = async ({
     await fs.promises.cp(previewServerLocation, builtPreviewAppPath, {
       recursive: true,
       filter: (source: string) => {
-        // do not copy the CLI files
+        const relativeSource = path.relative(previewServerLocation, source);
         return (
-          !/(\/|\\)cli(\/|\\)?/.test(source) &&
-          !/(\/|\\)\.next(\/|\\)?/.test(source) &&
-          !/(\/|\\)\.turbo(\/|\\)?/.test(source) &&
-          !/(\/|\\)node_modules(\/|\\)?$/.test(source)
+          !/\.next/.test(relativeSource) &&
+          !/\.turbo/.test(relativeSource) &&
+          (isInReactEmailMonorepo || !/node_modules/.test(relativeSource))
         );
       },
     });
@@ -216,6 +235,7 @@ export const build = async ({
     await setNextEnvironmentVariablesForBuild(
       emailsDirRelativePath,
       builtPreviewAppPath,
+      usersProjectLocation,
     );
 
     spinner.text = 'Setting server side generation for the email preview pages';
@@ -224,12 +244,14 @@ export const build = async ({
     spinner.text = "Updating package.json's build and start scripts";
     await updatePackageJson(builtPreviewAppPath);
 
-    spinner.text = 'Installing dependencies on `.react-email`';
-    await installDependencies({
-      cwd: builtPreviewAppPath,
-      silent: true,
-      packageManager,
-    });
+    if (!isInReactEmailMonorepo) {
+      spinner.text = 'Installing dependencies on `.react-email`';
+      await installDependencies({
+        cwd: builtPreviewAppPath,
+        silent: true,
+        packageManager,
+      });
+    }
 
     spinner.stopAndPersist({
       text: 'Successfully prepared `.react-email` for `next build`',
@@ -238,10 +260,6 @@ export const build = async ({
 
     await runScript('build', {
       packageManager,
-      env: {
-        NODE_OPTIONS:
-          '--experimental-vm-modules --disable-warning=ExperimentalWarning',
-      },
       cwd: builtPreviewAppPath,
     });
   } catch (error) {

package/src/index.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import { spawn } from 'node:child_process';
 import { program } from 'commander';
 import { build } from './commands/build.js';
 import { dev } from './commands/dev.js';
@@ -8,64 +9,102 @@ import { resendSetup } from './commands/resend/setup.js';
 import { start } from './commands/start.js';
 import { packageJson } from './utils/packageJson.js';
 
-const PACKAGE_NAME = 'react-email';
+const requiredFlags = [
+  '--experimental-vm-modules',
+  '--disable-warning=ExperimentalWarning',
+];
 
-program
-  .name(PACKAGE_NAME)
-  .description('A live preview of your emails right in your browser')
-  .version(packageJson.version);
+const hasRequiredFlags = requiredFlags.every((flag) =>
+  process.execArgv.includes(flag),
+);
 
-program
-  .command('dev')
-  .description('Starts the preview email development app')
-  .option('-d, --dir <path>', 'Directory with your email templates', './emails')
-  .option('-p --port <port>', 'Port to run dev server on', '3000')
-  .action(dev);
+if (!hasRequiredFlags) {
+  const child = spawn(
+    process.execPath,
+    [
+      ...requiredFlags,
+      ...process.execArgv,
+      process.argv[1] ?? '',
+      ...process.argv.slice(2),
+    ],
+    { stdio: 'inherit' },
+  );
 
-program
-  .command('build')
-  .description('Copies the preview app for onto .react-email and builds it')
-  .option('-d, --dir <path>', 'Directory with your email templates', './emails')
-  .option(
-    '-p --packageManager <name>',
-    'Package name to use on installation on `.react-email`',
-    'npm',
-  )
-  .action(build);
+  child.on('exit', (code) => {
+    process.exit(code ?? 0);
+  });
+} else {
+  const PACKAGE_NAME = 'react-email';
 
-program
-  .command('start')
-  .description('Runs the built preview app that is inside of ".react-email"')
-  .action(start);
+  program
+    .name(PACKAGE_NAME)
+    .description('A live preview of your emails right in your browser')
+    .version(packageJson.version);
 
-program
-  .command('export')
-  .description('Build the templates to the `out` directory')
-  .option('--outDir <path>', 'Output directory', 'out')
-  .option('-p, --pretty', 'Pretty print the output', false)
-  .option('-t, --plainText', 'Set output format as plain text', false)
-  .option('-d, --dir <path>', 'Directory with your email templates', './emails')
-  .option(
-    '-s, --silent',
-    'To, or not to show a spinner with process information',
-    false,
-  )
-  .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
-    exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
-  );
+  program
+    .command('dev')
+    .description('Starts the preview email development app')
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option('-p --port <port>', 'Port to run dev server on', '3000')
+    .action(dev);
+
+  program
+    .command('build')
+    .description('Copies the preview app for onto .react-email and builds it')
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option(
+      '-p --packageManager <name>',
+      'Package name to use on installation on `.react-email`',
+      'npm',
+    )
+    .action(build);
+
+  program
+    .command('start')
+    .description('Runs the built preview app that is inside of ".react-email"')
+    .action(start);
+
+  program
+    .command('export')
+    .description('Build the templates to the `out` directory')
+    .option('--outDir <path>', 'Output directory', 'out')
+    .option('-p, --pretty', 'Pretty print the output', false)
+    .option('-t, --plainText', 'Set output format as plain text', false)
+    .option(
+      '-d, --dir <path>',
+      'Directory with your email templates',
+      './emails',
+    )
+    .option(
+      '-s, --silent',
+      'To, or not to show a spinner with process information',
+      false,
+    )
+    .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
+      exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
+    );
 
-const resend = program.command('resend');
+  const resend = program.command('resend');
 
-resend
-  .command('setup')
-  .description(
-    'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
-  )
-  .action(resendSetup);
+  resend
+    .command('setup')
+    .description(
+      'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
+    )
+    .action(resendSetup);
 
-resend
-  .command('reset')
-  .description('Deletes your API Key from the React Email configuration')
-  .action(resendReset);
+  resend
+    .command('reset')
+    .description('Deletes your API Key from the React Email configuration')
+    .action(resendReset);
 
-program.parse();
+  program.parse();
+}

package/src/utils/preview/get-env-variables-for-preview-app.ts

@@ -7,12 +7,14 @@ export const getEnvVariablesForPreviewApp = (
   resendApiKey?: string,
 ) => {
   return {
-    NODE_OPTIONS:
-      '--experimental-vm-modules --disable-warning=ExperimentalWarning',
-    EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
-    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(cwd, relativePathToEmailsDirectory),
-    PREVIEW_SERVER_LOCATION: previewServerLocation,
-    USER_PROJECT_LOCATION: cwd,
-    RESEND_API_KEY: resendApiKey,
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH:
+      relativePathToEmailsDirectory,
+    REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(
+      cwd,
+      relativePathToEmailsDirectory,
+    ),
+    REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
+    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: cwd,
+    REACT_EMAIL_INTERNAL_RESEND_API_KEY: resendApiKey,
   } as const;
 };

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

@@ -5,7 +5,10 @@ import {
   type DependencyGraph,
 } from './create-dependency-graph.js';
 
-const testingDiretctory = path.join(__dirname, './test/dependency-graph/inner');
+const testingDiretctory = path.join(
+  import.meta.dirname,
+  './test/dependency-graph/inner',
+);
 
 const pathToTemporaryFile = path.join(
   testingDiretctory,
@@ -58,6 +61,14 @@ describe('createDependencyGraph()', async () => {
     );
     expect(relativePathDependencyGraph).toMatchInlineSnapshot(`
       {
+        "../../some-file.ts": {
+          "dependencyPaths": [],
+          "dependentPaths": [
+            "path-aliases.ts",
+          ],
+          "moduleDependencies": [],
+          "path": "../../some-file.ts",
+        },
         "../outer.ts": {
           "dependencyPaths": [
             "outer-dependency.ts",
@@ -120,6 +131,14 @@ describe('createDependencyGraph()', async () => {
           "moduleDependencies": [],
           "path": "outer-dependency.ts",
         },
+        "path-aliases.ts": {
+          "dependencyPaths": [
+            "../../some-file.ts",
+          ],
+          "dependentPaths": [],
+          "moduleDependencies": [],
+          "path": "path-aliases.ts",
+        },
       }
     `);
   });

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

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

package/src/actions/email-validation/__snapshots__/check-images.spec.tsx.snap

@@ -1,84 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`checkImages() 1`] = `
-[
-  {
-    "checks": [
-      {
-        "metadata": {
-          "alt": undefined,
-        },
-        "passed": false,
-        "type": "accessibility",
-      },
-      {
-        "passed": true,
-        "type": "syntax",
-      },
-      {
-        "passed": true,
-        "type": "security",
-      },
-      {
-        "metadata": {
-          "fetchStatusCode": 200,
-        },
-        "passed": true,
-        "type": "fetch_attempt",
-      },
-      {
-        "metadata": {
-          "byteCount": 26808,
-        },
-        "passed": true,
-        "type": "image_size",
-      },
-    ],
-    "codeLocation": {
-      "column": 3,
-      "line": 2,
-    },
-    "source": "https://resend.com/static/brand/resend-icon-white.png",
-    "status": "warning",
-  },
-  {
-    "checks": [
-      {
-        "metadata": {
-          "alt": "codepen challenges",
-        },
-        "passed": true,
-        "type": "accessibility",
-      },
-      {
-        "passed": true,
-        "type": "syntax",
-      },
-      {
-        "passed": true,
-        "type": "security",
-      },
-      {
-        "metadata": {
-          "fetchStatusCode": 200,
-        },
-        "passed": true,
-        "type": "fetch_attempt",
-      },
-      {
-        "metadata": {
-          "byteCount": 111922,
-        },
-        "passed": true,
-        "type": "image_size",
-      },
-    ],
-    "codeLocation": {
-      "column": 3,
-      "line": 3,
-    },
-    "source": "/static/codepen-challengers.png",
-    "status": "success",
-  },
-]
-`;