react-email 5.0.0-canary.1 → 5.0.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # react-email
 
+## 5.0.0-canary.10
+
+## 5.0.0-canary.9
+
+## 5.0.0-canary.8
+
+### Patch Changes
+
+- b6b027c: improved integration setup flow
+
+## 5.0.0-canary.7
+
+## 5.0.0-canary.6
+
+## 5.0.0-canary.5
+
+## 5.0.0-canary.4
+
+## 5.0.0-canary.3
+
+### Minor Changes
+
+- 95c7417: Dark mode switcher emulating email client color inversion
+
+## 5.0.0-canary.2
+
+### Patch Changes
+
+- 1b3176e: fallback to not text coloring for Node.js < 20
+
 ## 5.0.0-canary.1
 
 ## 5.0.0-canary.0

package/dist/index.js

@@ -17,7 +17,8 @@ import { parse } from "@babel/parser";
 import traverseModule from "@babel/traverse";
 import { createMatchPath, loadConfig } from "tsconfig-paths";
 import http from "node:http";
-import { styleText } from "node:util";
+import Conf from "conf";
+import * as nodeUtil from "node:util";
 import { lookup } from "mime-types";
 import os from "node:os";
 import { build } from "esbuild";
@@ -86,7 +87,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "5.0.0-canary.1",
+	version: "5.0.0-canary.10",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/index.js" },
 	type: "module",
@@ -104,12 +105,13 @@ var package_default = {
 		"directory": "packages/react-email"
 	},
 	keywords: ["react", "email"],
-	engines: { "node": ">=18.0.0" },
+	engines: { "node": ">=22.0.0" },
 	dependencies: {
 		"@babel/parser": "^7.27.0",
 		"@babel/traverse": "^7.27.0",
 		"chokidar": "^4.0.3",
 		"commander": "^13.0.0",
+		"conf": "^15.0.2",
 		"debounce": "^2.0.0",
 		"esbuild": "^0.25.0",
 		"glob": "^11.0.0",
@@ -129,7 +131,7 @@ var package_default = {
 		"@types/babel__traverse": "7.20.7",
 		"@types/mime-types": "2.1.4",
 		"@types/prompts": "2.4.9",
-		"next": "^15.3.2",
+		"next": "16.0.1",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
 		"typescript": "5.8.3"
@@ -228,37 +230,22 @@ module.exports = {
     PREVIEW_SERVER_LOCATION: '${builtPreviewAppPath.replace(/\\/g, "/")}',
     USER_PROJECT_LOCATION: userProjectLocation
   },
-  // this is needed so that the code for building emails works properly
-  webpack: (
-    /** @type {import('webpack').Configuration & { externals: string[] }} */
-    config,
-    { isServer }
-  ) => {
-    if (isServer) {
-      config.externals.push('esbuild');
-    }
-
-    return config;
-  },
+  serverExternalPackages: ['esbuild'],
   typescript: {
     ignoreBuildErrors: true
   },
-  eslint: {
-    ignoreDuringBuilds: true
-  },
   experimental: {
     webpackBuildWorker: true
   },
 }`;
+	await fs.promises.rm(path.resolve(builtPreviewAppPath, "./next.config.ts"));
 	await fs.promises.writeFile(path.resolve(builtPreviewAppPath, "./next.config.js"), nextConfigContents, "utf8");
 };
 const getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePath) => {
 	const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
 	const slugs = [];
-	emailDirectory.emailFilenames.forEach((filename) => slugs.push(path.join(directoryPathRelativeToEmailsDirectory, filename).split(path.sep).filter((segment) => segment.length > 0)));
-	emailDirectory.subDirectories.forEach((directory) => {
-		slugs.push(...getEmailSlugsFromEmailDirectory(directory, emailsDirectoryAbsolutePath));
-	});
+	for (const filename of emailDirectory.emailFilenames) slugs.push(path.join(directoryPathRelativeToEmailsDirectory, filename).split(path.sep).filter((segment) => segment.length > 0));
+	for (const directory of emailDirectory.subDirectories) slugs.push(...getEmailSlugsFromEmailDirectory(directory, emailsDirectoryAbsolutePath));
 	return slugs;
 };
 const forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
@@ -280,12 +267,11 @@ export function generateStaticParams() {
 const updatePackageJson = async (builtPreviewAppPath) => {
 	const packageJsonPath = path.resolve(builtPreviewAppPath, "./package.json");
 	const packageJson = JSON.parse(await fs.promises.readFile(packageJsonPath, "utf8"));
-	packageJson.scripts.build = "next build";
+	packageJson.scripts.build = "next build --webpack";
 	packageJson.scripts.start = "next start";
 	delete packageJson.scripts.postbuild;
 	packageJson.name = "preview-server";
 	for (const [dependency, version$1] of Object.entries(packageJson.dependencies)) packageJson.dependencies[dependency] = version$1.replace("workspace:", "");
-	delete packageJson.devDependencies["@react-email/render"];
 	delete packageJson.devDependencies["@react-email/components"];
 	delete packageJson.scripts.prepare;
 	await fs.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8");
@@ -601,14 +587,27 @@ const setupHotreloading = async (devServer$1, emailDirRelativePath) => {
 	return watcher;
 };
 
+//#endregion
+//#region src/utils/conf.ts
+const encryptionKey = "h2#x658}1#qY(@!:7,BD1J)q12$[tM25";
+const conf = new Conf({
+	projectName: "react-email",
+	encryptionKey
+});
+
+//#endregion
+//#region src/utils/style-text.ts
+const styleText = nodeUtil.styleText ? nodeUtil.styleText : (_, text) => text;
+
 //#endregion
 //#region src/utils/preview/get-env-variables-for-preview-app.ts
-const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServerLocation, cwd) => {
+const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServerLocation, cwd, resendApiKey) => {
 	return {
 		EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
 		EMAILS_DIR_ABSOLUTE_PATH: path.resolve(cwd, relativePathToEmailsDirectory),
 		PREVIEW_SERVER_LOCATION: previewServerLocation,
-		USER_PROJECT_LOCATION: cwd
+		USER_PROJECT_LOCATION: cwd,
+		RESEND_API_KEY: resendApiKey
 	};
 };
 
@@ -658,8 +657,8 @@ const safeAsyncServerListen = (server, port) => {
 };
 const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
 	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.`);
+	if (majorNodeVersion && Number.parseInt(majorNodeVersion, 10) < 20) {
+		console.error(` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 20 or higher.`);
 		process.exit(1);
 	}
 	const previewServerLocation = await getPreviewServerLocation();
@@ -711,7 +710,7 @@ const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath,
 	process.env = {
 		NODE_ENV: "development",
 		...process.env,
-		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd())
+		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd(), conf.get("resendApiKey"))
 	};
 	const app = (await previewServer.import("next", { default: true }))({
 		dev: false,
@@ -813,7 +812,7 @@ const dev = async ({ dir: emailsDirRelativePath, port }) => {
 			console.error(`Missing ${emailsDirRelativePath} folder`);
 			process.exit(1);
 		}
-		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port)), emailsDirRelativePath);
+		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port, 10)), emailsDirRelativePath);
 	} catch (error) {
 		console.log(error);
 		process.exit(1);
@@ -871,10 +870,8 @@ const renderingUtilitiesExporter = (emailTemplates) => ({
 //#region src/commands/export.ts
 const getEmailTemplatesFromDirectory = (emailDirectory) => {
 	const templatePaths = [];
-	emailDirectory.emailFilenames.forEach((filename) => templatePaths.push(path.join(emailDirectory.absolutePath, filename)));
-	emailDirectory.subDirectories.forEach((directory) => {
-		templatePaths.push(...getEmailTemplatesFromDirectory(directory));
-	});
+	for (const filename of emailDirectory.emailFilenames) templatePaths.push(path.join(emailDirectory.absolutePath, filename));
+	for (const directory of emailDirectory.subDirectories) templatePaths.push(...getEmailTemplatesFromDirectory(directory));
 	return templatePaths;
 };
 const require = createRequire(url.fileURLToPath(import.meta.url));
@@ -969,6 +966,30 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 	}
 };
 
+//#endregion
+//#region src/commands/resend/reset.ts
+async function resendReset() {
+	conf.delete("resendApiKey");
+	console.info(`${logSymbols.success} Resend API Key successfully deleted`);
+}
+
+//#endregion
+//#region src/commands/resend/setup.ts
+async function resendSetup() {
+	const previousValue = conf.get("resendApiKey");
+	if (typeof previousValue === "string" && previousValue.length > 0) console.info(`You already have a Resend API Key configured (${styleText("grey", previousValue.slice(0, 11))}...), continuing will replace it.`);
+	const { apiKey } = await prompts({
+		type: "password",
+		name: "apiKey",
+		message: "Enter your API Key (make sure it has \"Full Access\")"
+	});
+	if (apiKey?.trim().length > 0) {
+		conf.set("resendApiKey", apiKey);
+		console.info(`${logSymbols.success} Resend integration successfully set up`);
+		console.info(`You can always remove it with ${styleText("green", "npx react-email@latest resend reset")}`);
+	}
+}
+
 //#endregion
 //#region src/commands/start.ts
 const start = async () => {
@@ -1011,6 +1032,9 @@ program.command("export").description("Build the templates to the `out` director
 	plainText,
 	pretty
 }));
+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("reset").description("Deletes your API Key from the React Email configuration").action(resendReset);
 program.parse();
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "5.0.0-canary.1",
+  "version": "5.0.0-canary.10",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -17,13 +17,14 @@
     "email"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   },
   "dependencies": {
     "@babel/parser": "^7.27.0",
     "@babel/traverse": "^7.27.0",
     "chokidar": "^4.0.3",
     "commander": "^13.0.0",
+    "conf": "^15.0.2",
     "debounce": "^2.0.0",
     "esbuild": "^0.25.0",
     "glob": "^11.0.0",
@@ -42,11 +43,11 @@
     "@types/babel__traverse": "7.20.7",
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
-    "next": "^15.3.2",
+    "next": "16.0.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript": "5.8.3",
-    "@react-email/components": "1.0.0-canary.1"
+    "@react-email/components": "1.0.0-canary.7"
   },
   "scripts": {
     "build": "tsdown",

package/src/commands/build.ts

@@ -88,29 +88,17 @@ module.exports = {
     PREVIEW_SERVER_LOCATION: '${builtPreviewAppPath.replace(/\\/g, '/')}',
     USER_PROJECT_LOCATION: userProjectLocation
   },
-  // this is needed so that the code for building emails works properly
-  webpack: (
-    /** @type {import('webpack').Configuration & { externals: string[] }} */
-    config,
-    { isServer }
-  ) => {
-    if (isServer) {
-      config.externals.push('esbuild');
-    }
-
-    return config;
-  },
+  serverExternalPackages: ['esbuild'],
   typescript: {
     ignoreBuildErrors: true
   },
-  eslint: {
-    ignoreDuringBuilds: true
-  },
   experimental: {
     webpackBuildWorker: true
   },
 }`;
 
+  await fs.promises.rm(path.resolve(builtPreviewAppPath, './next.config.ts'));
+
   await fs.promises.writeFile(
     path.resolve(builtPreviewAppPath, './next.config.js'),
     nextConfigContents,
@@ -127,23 +115,23 @@ const getEmailSlugsFromEmailDirectory = (
     .trim();
 
   const slugs = [] as Array<string>[];
-  emailDirectory.emailFilenames.forEach((filename) =>
+  for (const filename of emailDirectory.emailFilenames) {
     slugs.push(
       path
         .join(directoryPathRelativeToEmailsDirectory, filename)
         .split(path.sep)
         // sometimes it gets empty segments due to trailing slashes
         .filter((segment) => segment.length > 0),
-    ),
-  );
-  emailDirectory.subDirectories.forEach((directory) => {
+    );
+  }
+  for (const directory of emailDirectory.subDirectories) {
     slugs.push(
       ...getEmailSlugsFromEmailDirectory(
         directory,
         emailsDirectoryAbsolutePath,
       ),
     );
-  });
+  }
 
   return slugs;
 };
@@ -202,7 +190,8 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
     dependencies: Record<string, string>;
     devDependencies: Record<string, string>;
   };
-  packageJson.scripts.build = 'next build';
+  // Turbopack has some errors with the imports in @react-email/tailwind
+  packageJson.scripts.build = 'next build --webpack';
   packageJson.scripts.start = 'next start';
   delete packageJson.scripts.postbuild;
 
@@ -214,12 +203,6 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
     packageJson.dependencies[dependency] = version.replace('workspace:', '');
   }
 
-  // We remove this one to avoid having resolve issues on our demo build process.
-  // This is only used in the `export` command so it's irrelevant to have it here.
-  //
-  // See `src/actions/render-email-by-path` for more info on how we render the
-  // email templates without `@react-email/render` being installed.
-  delete packageJson.devDependencies['@react-email/render'];
   delete packageJson.devDependencies['@react-email/components'];
   delete packageJson.scripts.prepare;
 

package/src/commands/dev.ts

@@ -16,7 +16,7 @@ export const dev = async ({ dir: emailsDirRelativePath, port }: Args) => {
     const devServer = await startDevServer(
       emailsDirRelativePath,
       emailsDirRelativePath, // defaults to ./emails/static for the static files that are served to the preview
-      Number.parseInt(port),
+      Number.parseInt(port, 10),
     );
 
     await setupHotreloading(devServer, emailsDirRelativePath);

package/src/commands/export.ts

@@ -19,12 +19,12 @@ import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopp
 
 const getEmailTemplatesFromDirectory = (emailDirectory: EmailsDirectory) => {
   const templatePaths = [] as string[];
-  emailDirectory.emailFilenames.forEach((filename) =>
-    templatePaths.push(path.join(emailDirectory.absolutePath, filename)),
-  );
-  emailDirectory.subDirectories.forEach((directory) => {
+  for (const filename of emailDirectory.emailFilenames) {
+    templatePaths.push(path.join(emailDirectory.absolutePath, filename));
+  }
+  for (const directory of emailDirectory.subDirectories) {
     templatePaths.push(...getEmailTemplatesFromDirectory(directory));
-  });
+  }
 
   return templatePaths;
 };

package/src/commands/resend/reset.ts

@@ -0,0 +1,8 @@
+import logSymbols from 'log-symbols';
+import { conf } from '../../utils/conf.js';
+
+export async function resendReset() {
+  conf.delete('resendApiKey');
+
+  console.info(`${logSymbols.success} Resend API Key successfully deleted`);
+}

package/src/commands/resend/setup.ts

@@ -0,0 +1,29 @@
+import logSymbols from 'log-symbols';
+import prompts from 'prompts';
+import { conf } from '../../utils/conf.js';
+import { styleText } from '../../utils/style-text.js';
+
+export async function resendSetup() {
+  const previousValue = conf.get('resendApiKey');
+  if (typeof previousValue === 'string' && previousValue.length > 0) {
+    console.info(
+      `You already have a Resend API Key configured (${styleText('grey', previousValue.slice(0, 11))}...), continuing will replace it.`,
+    );
+  }
+
+  const { apiKey } = await prompts({
+    type: 'password',
+    name: 'apiKey',
+    message: 'Enter your API Key (make sure it has "Full Access")',
+  });
+
+  if (apiKey?.trim().length > 0) {
+    conf.set('resendApiKey', apiKey);
+    console.info(
+      `${logSymbols.success} Resend integration successfully set up`,
+    );
+    console.info(
+      `You can always remove it with ${styleText('green', 'npx react-email@latest resend reset')}`,
+    );
+  }
+}

package/src/index.ts

@@ -3,6 +3,8 @@ import { program } from 'commander';
 import { build } from './commands/build.js';
 import { dev } from './commands/dev.js';
 import { exportTemplates } from './commands/export.js';
+import { resendReset } from './commands/resend/reset.js';
+import { resendSetup } from './commands/resend/setup.js';
 import { start } from './commands/start.js';
 import { packageJson } from './utils/packageJson.js';
 
@@ -52,4 +54,18 @@ program
     exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
   );
 
+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('reset')
+  .description('Deletes your API Key from the React Email configuration')
+  .action(resendReset);
+
 program.parse();

package/src/utils/__snapshots__/tree.spec.ts.snap

@@ -16,12 +16,14 @@ exports[`tree(__dirname, 2) 1`] = `
 ├── types
 │   ├── hot-reload-change.ts
 │   └── hot-reload-event.ts
+├── conf.ts
 ├── get-emails-directory-metadata.spec.ts
 ├── get-emails-directory-metadata.ts
 ├── get-preview-server-location.ts
 ├── index.ts
 ├── packageJson.ts
 ├── register-spinner-autostopping.ts
+├── style-text.ts
 ├── tree.spec.ts
 └── tree.ts"
 `;

package/src/utils/conf.ts

@@ -0,0 +1,9 @@
+import Conf from 'conf';
+
+// Just simple encryption. This isn't completely safe
+// because anyone can find this key here
+const encryptionKey = 'h2#x658}1#qY(@!:7,BD1J)q12$[tM25';
+
+export const conf = new Conf<{
+  resendApiKey?: string;
+}>({ projectName: 'react-email', encryptionKey });

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

@@ -4,11 +4,13 @@ export const getEnvVariablesForPreviewApp = (
   relativePathToEmailsDirectory: string,
   previewServerLocation: string,
   cwd: string,
+  resendApiKey?: string,
 ) => {
   return {
     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,
   } as const;
 };

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

@@ -1,13 +1,14 @@
 import http from 'node:http';
 import path from 'node:path';
 import url from 'node:url';
-import { styleText } from 'node:util';
 import { createJiti } from 'jiti';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
 import { registerSpinnerAutostopping } from '../../utils/register-spinner-autostopping.js';
+import { conf } from '../conf.js';
 import { getPreviewServerLocation } from '../get-preview-server-location.js';
 import { packageJson } from '../packageJson.js';
+import { styleText } from '../style-text.js';
 import { getEnvVariablesForPreviewApp } from './get-env-variables-for-preview-app.js';
 import { serveStaticFile } from './serve-static-file.js';
 
@@ -33,9 +34,9 @@ export const startDevServer = async (
   port: number,
 ): Promise<http.Server> => {
   const [majorNodeVersion] = process.versions.node.split('.');
-  if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 18) {
+  if (majorNodeVersion && Number.parseInt(majorNodeVersion, 10) < 20) {
     console.error(
-      ` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 18 or higher.`,
+      ` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 20 or higher.`,
     );
     process.exit(1);
   }
@@ -131,6 +132,7 @@ export const startDevServer = async (
       path.normalize(emailsDirRelativePath),
       previewServerLocation,
       process.cwd(),
+      conf.get('resendApiKey'),
     ),
   };
 

package/src/utils/style-text.ts

@@ -0,0 +1,11 @@
+/**
+ * Centralized fallback for Node versions (<20.12.0) without util.styleText.
+ * Returns the original text when styleText is unavailable.
+ */
+import * as nodeUtil from 'node:util';
+
+type StyleTextFunction = typeof nodeUtil.styleText;
+
+export const styleText: StyleTextFunction = (nodeUtil as any).styleText
+  ? (nodeUtil as any).styleText
+  : (_: string, text: string) => text;

package/tsconfig.json

@@ -23,7 +23,7 @@
     "declaration": false,
     "declarationMap": false,
     "incremental": false,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext", "ESNext.AsyncIterable"],
     "noEmit": true,
     "strict": false,