react-email 5.0.0-canary.5 → 5.0.0-canary.7

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # react-email
 
+## 5.0.0-canary.7
+
+## 5.0.0-canary.6
+
 ## 5.0.0-canary.5
 
 ## 5.0.0-canary.4

package/dist/index.js

@@ -17,6 +17,7 @@ import { parse } from "@babel/parser";
 import traverseModule from "@babel/traverse";
 import { createMatchPath, loadConfig } from "tsconfig-paths";
 import http from "node:http";
+import Conf from "conf";
 import * as nodeUtil from "node:util";
 import { lookup } from "mime-types";
 import os from "node:os";
@@ -86,7 +87,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "5.0.0-canary.5",
+	version: "5.0.0-canary.7",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/index.js" },
 	type: "module",
@@ -110,6 +111,7 @@ var package_default = {
 		"@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",
@@ -242,10 +244,8 @@ module.exports = {
 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) => {
@@ -587,18 +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
 	};
 };
 
@@ -648,7 +657,7 @@ const safeAsyncServerListen = (server, port) => {
 };
 const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port) => {
 	const [majorNodeVersion] = process.versions.node.split(".");
-	if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 20) {
+	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);
 	}
@@ -701,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,
@@ -803,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);
@@ -861,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));
@@ -959,6 +966,22 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 	}
 };
 
+//#endregion
+//#region src/commands/resend-setup.ts
+async function resendSetup(apiKey) {
+	const previousValue = conf.get("resendApiKey");
+	if (typeof previousValue === "string" && previousValue.length > 0) {
+		if (!(await prompts({
+			type: "confirm",
+			name: "replaceApiKey",
+			message: `You already have a Resend API Key configured (${styleText("grey", previousValue.slice(0, 11))}...). Do you want to replace it?`,
+			initial: false
+		})).replaceApiKey) process.exit(0);
+	}
+	conf.set("resendApiKey", apiKey);
+	console.info(`${logSymbols.success} Resend integration successfully set up`);
+}
+
 //#endregion
 //#region src/commands/start.ts
 const start = async () => {
@@ -1001,6 +1024,7 @@ program.command("export").description("Build the templates to the `out` director
 	plainText,
 	pretty
 }));
+program.command("resend").command("setup").description("Sets up the integration between the React Email CLI, and your Resend account through an API Key").argument("apiKey", "API Key for use setting up the integration").action(resendSetup);
 program.parse();
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "5.0.0-canary.5",
+  "version": "5.0.0-canary.7",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -24,6 +24,7 @@
     "@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",
@@ -46,7 +47,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript": "5.8.3",
-    "@react-email/components": "1.0.0-canary.6"
+    "@react-email/components": "1.0.0-canary.7"
   },
   "scripts": {
     "build": "tsdown",

package/src/commands/build.ts

@@ -115,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;
 };

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-setup.ts

@@ -0,0 +1,22 @@
+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(apiKey: string) {
+  const previousValue = conf.get('resendApiKey');
+  if (typeof previousValue === 'string' && previousValue.length > 0) {
+    const response = await prompts({
+      type: 'confirm',
+      name: 'replaceApiKey',
+      message: `You already have a Resend API Key configured (${styleText('grey', previousValue.slice(0, 11))}...). Do you want to replace it?`,
+      initial: false,
+    });
+    if (!response.replaceApiKey) {
+      process.exit(0);
+    }
+  }
+
+  conf.set('resendApiKey', apiKey);
+  console.info(`${logSymbols.success} Resend integration successfully set up`);
+}

package/src/index.ts

@@ -3,6 +3,7 @@ import { program } from 'commander';
 import { build } from './commands/build.js';
 import { dev } from './commands/dev.js';
 import { exportTemplates } from './commands/export.js';
+import { resendSetup } from './commands/resend-setup.js';
 import { start } from './commands/start.js';
 import { packageJson } from './utils/packageJson.js';
 
@@ -52,4 +53,13 @@ program
     exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
   );
 
+program
+  .command('resend')
+  .command('setup')
+  .description(
+    'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
+  )
+  .argument('apiKey', 'API Key for use setting up the integration')
+  .action(resendSetup);
+
 program.parse();

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

@@ -16,6 +16,7 @@ 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

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

@@ -5,6 +5,7 @@ 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';
@@ -33,7 +34,7 @@ export const startDevServer = async (
   port: number,
 ): Promise<http.Server> => {
   const [majorNodeVersion] = process.versions.node.split('.');
-  if (majorNodeVersion && Number.parseInt(majorNodeVersion) < 20) {
+  if (majorNodeVersion && Number.parseInt(majorNodeVersion, 10) < 20) {
     console.error(
       ` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 20 or higher.`,
     );
@@ -131,6 +132,7 @@ export const startDevServer = async (
       path.normalize(emailsDirRelativePath),
       previewServerLocation,
       process.cwd(),
+      conf.get('resendApiKey'),
     ),
   };
 

package/src/utils/style-text.ts

@@ -4,7 +4,7 @@
  */
 import * as nodeUtil from 'node:util';
 
-type StyleTextFunction = (style: string, text: string) => string;
+type StyleTextFunction = typeof nodeUtil.styleText;
 
 export const styleText: StyleTextFunction = (nodeUtil as any).styleText
   ? (nodeUtil as any).styleText