react-email 5.0.0-canary.6 → 5.0.0-canary.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-email
 
+## 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

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.6",
+	version: "5.0.0-canary.8",
 	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",
@@ -585,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
 	};
 };
 
@@ -699,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,
@@ -955,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 () => {
@@ -997,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.6",
+  "version": "5.0.0-canary.8",
   "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",

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,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';
@@ -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