react-email 4.0.16 → 4.1.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # react-email
 
+## 4.1.0-canary.10
+
+## 4.1.0-canary.9
+
+### Patch Changes
+
+- 40fb596: Use the same version for the preview-server and react-email
+
+## 4.1.0-canary.8
+
+### Minor Changes
+
+- ed2f46a: use a separate package for storing the preview server (@react-email/preview-server)
+
+## 4.1.0-canary.7
+
+### Patch Changes
+
+- f00aff6: Fix prettier errors causing NextJS serialization error
+
+## 4.1.0-canary.6
+
+### Patch Changes
+
+- 11c4600: Add support for hot reloading with tsconfig path aliases
+
+## 4.1.0-canary.5
+
+### Patch Changes
+
+- b947f98: Pre-render email templates on hover
+
+## 4.1.0-canary.4
+
+### Patch Changes
+
+- 5c6150d: Add .json import support for hot reloading
+- aae2f59: Ensure dependencies outside emails directory are completely resolved
+- b4b2373: Fix non-email files being rendered during hot reloading
+
+## 4.1.0-canary.3
+
+### Patch Changes
+
+- 681d4ed: fix backwards compatibility with `render` versions
+
+## 4.1.0-canary.2
+
+### Patch Changes
+
+- 9b1adb0: Use range of versions for dependencies
+
+## 4.1.0-canary.1
+
+### Patch Changes
+
+- a587e17: Fix dependent of dependents not causing hot reloads
+- dbf3a64: Add error message for when an email template does not have a default export
+
+## 4.1.0-canary.0
+
+### Minor Changes
+
+- 4a0d4e3: Theme switcher for email template
+
 ## 4.0.16
 
 ### Patch Changes

package/dev/index.js

@@ -0,0 +1,40 @@
+import child_process from 'node:child_process';
+import path from 'node:path';
+import url from 'node:url';
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+const root = path.resolve(dirname, '../src/index.ts');
+
+const tsxPath = path.resolve(dirname, './node_modules/.bin/tsx');
+
+const tsx = child_process.spawn(tsxPath, [root, ...process.argv.slice(2)], {
+  shell: true,
+  cwd: process.cwd(),
+  stdio: 'inherit',
+});
+
+process.on('uncaughtExceptionMonitor', () => {
+  tsx.kill();
+});
+
+process.on('exit', (code) => {
+  tsx.kill(code);
+});
+
+process.on('SIGINT', () => {
+  tsx.kill('SIGINT');
+});
+
+process.on('SIGTERM', () => {
+  tsx.kill('SIGTERM');
+});
+
+process.on('SIGUSR1', () => {
+  tsx.kill('SIGUSR1');
+});
+
+process.on('SIGUSR2', () => {
+  tsx.kill('SIGUSR2');
+});

package/dev/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "email-dev",
+  "version": "0.0.0",
+  "bin": "index.js",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node ."
+  },
+  "dependencies": {
+    "tsx": "4.19.3"
+  }
+}

package/dist/index.js

@@ -106,7 +106,7 @@ import prompts from "prompts";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "4.1.0-canary.9",
+  version: "4.1.0-canary.10",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./dist/index.js"

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-email",
-  "version": "4.0.16",
+  "version": "4.1.0-canary.10",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
-    "email": "./dist/cli/index.mjs"
+    "email": "./dist/index.js"
   },
+  "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -27,67 +28,33 @@
     "debounce": "^2.0.0",
     "esbuild": "^0.25.0",
     "glob": "^11.0.0",
+    "jiti": "2.4.2",
     "log-symbols": "^7.0.0",
     "mime-types": "^3.0.0",
-    "next": "^15.3.1",
     "normalize-path": "^3.0.0",
+    "nypm": "0.6.0",
     "ora": "^8.0.0",
-    "socket.io": "^4.8.1"
+    "prompts": "2.4.2",
+    "socket.io": "^4.8.1",
+    "tsconfig-paths": "4.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.10",
-    "@lottiefiles/dotlottie-react": "0.13.3",
-    "@radix-ui/colors": "3.0.0",
-    "@radix-ui/react-collapsible": "1.1.7",
-    "@radix-ui/react-dropdown-menu": "2.1.10",
-    "@radix-ui/react-popover": "1.1.10",
-    "@radix-ui/react-slot": "1.2.0",
-    "@radix-ui/react-tabs": "1.1.7",
-    "@radix-ui/react-toggle-group": "1.1.6",
-    "@radix-ui/react-tooltip": "1.2.3",
-    "@swc/core": "1.11.21",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "7.20.7",
-    "@types/fs-extra": "11.0.1",
     "@types/mime-types": "2.1.4",
-    "@types/node": "22.14.1",
-    "@types/normalize-path": "3.0.2",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
-    "@types/webpack": "5.28.5",
-    "autoprefixer": "10.4.21",
-    "clsx": "2.1.1",
-    "framer-motion": "12.7.5",
-    "jiti": "2.4.2",
-    "json5": "2.2.3",
-    "module-punycode": "npm:punycode@2.3.1",
-    "node-html-parser": "7.0.1",
-    "postcss": "8.5.3",
-    "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.4.1",
+    "@types/prompts": "2.4.9",
+    "next": "^15.3.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "sharp": "0.34.1",
-    "socket.io-client": "4.8.1",
-    "sonner": "2.0.3",
-    "source-map-js": "1.2.1",
-    "spamc": "0.0.5",
-    "stacktrace-parser": "0.1.11",
-    "tailwind-merge": "3.2.0",
-    "tailwindcss": "3.4.0",
     "tsup": "8.4.0",
     "tsx": "4.19.3",
     "typescript": "5.8.3",
-    "use-debounce": "10.0.4",
-    "zod": "3.24.3",
-    "@react-email/components": "0.0.41"
+    "@react-email/components": "0.1.0-canary.4"
   },
   "scripts": {
-    "build": "tsup-node && node ./scripts/build-preview-server.mjs && pnpm install --frozen-lockfile",
-    "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
+    "build": "tsup-node",
     "clean": "rm -rf dist",
-    "dev": "tsup-node --watch",
-    "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev",
+    "dev": "tsup-node --watch src",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/readme.md

@@ -39,6 +39,22 @@ Generates the plain HTML files of your emails into a `out` directory.
 npx react-email export
 ```
 
+## Setting Up the Environment
+
+When working in the CLI, a lot of friction can get introduced with installing it and rebuilding for every change. To avoid that, we have a script that can be linked globally to directly run the source code of the CLI. You can use it the same as you would the standard CLI.
+
+### 1. Link `react-email` globally
+
+```sh
+pnpm link ./dev -g
+```
+
+### 2. Run the CLI
+
+```sh
+email-dev [command] [flags]
+```
+
 ## License
 
 MIT License

package/src/commands/build.ts

@@ -0,0 +1,306 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import logSymbols from 'log-symbols';
+import ora from 'ora';
+import {
+  type EmailsDirectory,
+  getEmailsDirectoryMetadata,
+} from '../utils/get-emails-directory-metadata.js';
+import { getPreviewServerLocation } from '../utils/get-preview-server-location.js';
+import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping.js';
+
+interface Args {
+  dir: string;
+  packageManager: string;
+}
+
+const buildPreviewApp = (absoluteDirectory: string) => {
+  return new Promise<void>((resolve, reject) => {
+    const nextBuild = spawn('npm', ['run', 'build'], {
+      cwd: absoluteDirectory,
+      shell: true,
+    });
+    nextBuild.stdout.pipe(process.stdout);
+    nextBuild.stderr.pipe(process.stderr);
+
+    nextBuild.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `Unable to build the Next app and it exited with code: ${code}`,
+          ),
+        );
+      }
+    });
+  });
+};
+
+const npmInstall = async (
+  builtPreviewAppPath: string,
+  packageManager: string,
+) => {
+  return new Promise<void>((resolve, reject) => {
+    const childProc = spawn(
+      packageManager,
+      [
+        'install',
+        packageManager === 'deno' ? '' : '--include=dev',
+        packageManager === 'deno' ? '--quiet' : '--silent',
+      ],
+      {
+        cwd: builtPreviewAppPath,
+        shell: true,
+      },
+    );
+    childProc.stdout.pipe(process.stdout);
+    childProc.stderr.pipe(process.stderr);
+    childProc.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `Unable to install the dependencies and it exited with code: ${code}`,
+          ),
+        );
+      }
+    });
+  });
+};
+
+const setNextEnvironmentVariablesForBuild = async (
+  emailsDirRelativePath: string,
+  builtPreviewAppPath: string,
+) => {
+  const nextConfigContents = `
+const path = require('path');
+const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
+const userProjectLocation = '${process.cwd()}';
+/** @type {import('next').NextConfig} */
+module.exports = {
+  env: {
+    NEXT_PUBLIC_IS_BUILDING: 'true',
+    EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
+    EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
+    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;
+  },
+  typescript: {
+    ignoreBuildErrors: true
+  },
+  eslint: {
+    ignoreDuringBuilds: true
+  },
+  experimental: {
+    webpackBuildWorker: true
+  },
+}`;
+
+  await fs.promises.writeFile(
+    path.resolve(builtPreviewAppPath, './next.config.js'),
+    nextConfigContents,
+    'utf8',
+  );
+};
+
+const getEmailSlugsFromEmailDirectory = (
+  emailDirectory: EmailsDirectory,
+  emailsDirectoryAbsolutePath: string,
+) => {
+  const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath
+    .replace(emailsDirectoryAbsolutePath, '')
+    .trim();
+
+  const slugs = [] as Array<string>[];
+  emailDirectory.emailFilenames.forEach((filename) =>
+    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) => {
+    slugs.push(
+      ...getEmailSlugsFromEmailDirectory(
+        directory,
+        emailsDirectoryAbsolutePath,
+      ),
+    );
+  });
+
+  return slugs;
+};
+
+// we do this because otherwise it won't be able to find the emails
+// after build
+const forceSSGForEmailPreviews = async (
+  emailsDirPath: string,
+  builtPreviewAppPath: string,
+) => {
+  const emailDirectoryMetadata =
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (await getEmailsDirectoryMetadata(emailsDirPath))!;
+
+  const parameters = getEmailSlugsFromEmailDirectory(
+    emailDirectoryMetadata,
+    emailsDirPath,
+  ).map((slug) => ({ slug }));
+
+  const removeForceDynamic = async (filePath: string) => {
+    const contents = await fs.promises.readFile(filePath, 'utf8');
+
+    await fs.promises.writeFile(
+      filePath,
+      contents.replace("export const dynamic = 'force-dynamic';", ''),
+      'utf8',
+    );
+  };
+  await removeForceDynamic(
+    path.resolve(builtPreviewAppPath, './src/app/layout.tsx'),
+  );
+  await removeForceDynamic(
+    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
+  );
+
+  await fs.promises.appendFile(
+    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
+    `
+
+export function generateStaticParams() { 
+  return Promise.resolve(
+    ${JSON.stringify(parameters)}
+  );
+}`,
+    'utf8',
+  );
+};
+
+const updatePackageJson = async (builtPreviewAppPath: string) => {
+  const packageJsonPath = path.resolve(builtPreviewAppPath, './package.json');
+  const packageJson = JSON.parse(
+    await fs.promises.readFile(packageJsonPath, 'utf8'),
+  ) as {
+    name: string;
+    scripts: Record<string, string>;
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+  };
+  packageJson.scripts.build = 'next build';
+  packageJson.scripts.start = 'next start';
+  delete packageJson.scripts.postbuild;
+
+  packageJson.name = 'preview-server';
+
+  // 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;
+
+  await fs.promises.writeFile(
+    packageJsonPath,
+    JSON.stringify(packageJson),
+    'utf8',
+  );
+};
+
+export const build = async ({
+  dir: emailsDirRelativePath,
+  packageManager,
+}: Args) => {
+  try {
+    const previewServerLocation = await getPreviewServerLocation();
+
+    const spinner = ora({
+      text: 'Starting build process...',
+      prefixText: '  ',
+    }).start();
+    registerSpinnerAutostopping(spinner);
+
+    spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
+    if (!fs.existsSync(emailsDirRelativePath)) {
+      process.exit(1);
+    }
+
+    const emailsDirPath = path.join(process.cwd(), emailsDirRelativePath);
+    const staticPath = path.join(emailsDirPath, 'static');
+
+    const builtPreviewAppPath = path.join(process.cwd(), '.react-email');
+
+    if (fs.existsSync(builtPreviewAppPath)) {
+      spinner.text = 'Deleting pre-existing `.react-email` folder';
+      await fs.promises.rm(builtPreviewAppPath, { recursive: true });
+    }
+
+    spinner.text = 'Copying preview app from CLI to `.react-email`';
+    await fs.promises.cp(previewServerLocation, builtPreviewAppPath, {
+      recursive: true,
+      filter: (source: string) => {
+        // do not copy the CLI files
+        return (
+          !/(\/|\\)cli(\/|\\)?/.test(source) &&
+          !/(\/|\\)\.next(\/|\\)?/.test(source) &&
+          !/(\/|\\)\.turbo(\/|\\)?/.test(source) &&
+          !/(\/|\\)node_modules(\/|\\)?$/.test(source)
+        );
+      },
+    });
+
+    if (fs.existsSync(staticPath)) {
+      spinner.text =
+        'Copying `static` folder into `.react-email/public/static`';
+      const builtStaticDirectory = path.resolve(
+        builtPreviewAppPath,
+        './public/static',
+      );
+      await fs.promises.cp(staticPath, builtStaticDirectory, {
+        recursive: true,
+      });
+    }
+
+    spinner.text =
+      'Setting Next environment variables for preview app to work properly';
+    await setNextEnvironmentVariablesForBuild(
+      emailsDirRelativePath,
+      builtPreviewAppPath,
+    );
+
+    spinner.text = 'Setting server side generation for the email preview pages';
+    await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
+
+    spinner.text = "Updating package.json's build and start scripts";
+    await updatePackageJson(builtPreviewAppPath);
+
+    spinner.text = 'Installing dependencies on `.react-email`';
+    await npmInstall(builtPreviewAppPath, packageManager);
+
+    spinner.stopAndPersist({
+      text: 'Successfully prepared `.react-email` for `next build`',
+      symbol: logSymbols.success,
+    });
+
+    await buildPreviewApp(builtPreviewAppPath);
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};

package/src/commands/dev.ts

@@ -0,0 +1,27 @@
+import fs from 'node:fs';
+import { setupHotreloading, startDevServer } from '../utils/index.js';
+
+interface Args {
+  dir: string;
+  port: string;
+}
+
+export const dev = async ({ dir: emailsDirRelativePath, port }: Args) => {
+  try {
+    if (!fs.existsSync(emailsDirRelativePath)) {
+      console.error(`Missing ${emailsDirRelativePath} folder`);
+      process.exit(1);
+    }
+
+    const devServer = await startDevServer(
+      emailsDirRelativePath,
+      emailsDirRelativePath, // defaults to ./emails/static for the static files that are served to the preview
+      Number.parseInt(port),
+    );
+
+    await setupHotreloading(devServer, emailsDirRelativePath);
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};