feat(react-email): Unify all components into react-email

.changeset/selfish-dogs-deny.md

@@ -0,0 +1,5 @@
+---
+"react-email": major
+---
+
+Add the source for all components, build and export them all unified with `react-email`

.github/workflows/tests.yml

@@ -32,9 +32,6 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
-      - name: Run Build
-        run: pnpm build
-
       - name: Run Lint
         run: pnpm lint
 

apps/demo/emails/notifications/vercel-invite-user.tsx

@@ -14,7 +14,7 @@ import {
   Section,
   Tailwind,
   Text,
-} from '@react-email/components';
+} from 'react-email';
 
 interface VercelInviteUserEmailProps {
   username?: string;

apps/demo/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "pnpm install --frozen-lockfile && email build",
+    "build": "email build",
     "dev": "email dev",
     "start": "email start",
     "export": "email export"

biome.json

@@ -59,6 +59,7 @@
   "files": {
     "ignore": [
       "dist",
+      "patched",
       "pnpm-lock.yaml",
       ".next",
       "public",

package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "turbo run build --filter=!react-email-starter",
-    "dev": "turbo run dev --filter=!react-email-starter --parallel --concurrency 25",
-    "release": "turbo run build --filter=./packages/* --filter=!react-email-starter && pnpm changeset publish",
     "canary:enter": "changeset pre enter canary",
     "canary:exit": "changeset pre exit",
-    "version": "changeset version && pnpm install --no-frozen-lockfile",
+    "dev": "turbo run dev --filter=!react-email-starter --parallel --concurrency 25",
     "lint": "biome check",
     "lint:fix": "biome check --write .",
+    "release": "turbo run build --filter=./packages/* --filter=!react-email-starter && pnpm changeset publish",
     "test": "turbo run test",
-    "test:watch": "turbo run test:watch"
+    "test:watch": "turbo run test:watch",
+    "version": "changeset version && pnpm install --no-frozen-lockfile"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

packages/components/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@react-email/components",
   "version": "0.0.34",
+  "private": true,
   "description": "A collection of all components React Email.",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/react-email/.gitignore

@@ -1,8 +1,10 @@
 node_modules
 .next
 cli
+yalc.lock
 !src/cli
 
 # for testing
+package-lock.json
 .for-dependency-graph.ts
 static

packages/react-email/next.config.js

@@ -12,6 +12,9 @@ module.exports = {
 
     return config;
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   // Noticed an issue with typescript transpilation when going from Next 14.1.1 to 14.1.2
   // and I narrowed that down into this PR https://github.com/vercel/next.js/pull/62005
   //

packages/react-email/package.json

@@ -5,14 +5,75 @@
   "bin": {
     "email": "./dist/cli/index.js"
   },
+  "sideEffects": ["./dist/code-block.*"],
+  "main": "./dist/index.browser.js",
+  "module": "./dist/index.browser.mjs",
+  "types": "./dist/index.browser.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": {
+          "types": "./dist/index.node.d.mts",
+          "default": "./dist/index.node.mjs"
+        },
+        "require": {
+          "types": "./dist/index.node.d.ts",
+          "default": "./dist/index.node.js"
+        }
+      },
+      "deno": {
+        "import": {
+          "types": "./dist/index.browser.d.mts",
+          "default": "./dist/index.browser.mjs"
+        },
+        "require": {
+          "types": "./dist/index.browser.d.ts",
+          "default": "./dist/index.browser.js"
+        }
+      },
+      "worker": {
+        "import": {
+          "types": "./dist/index.browser.d.mts",
+          "default": "./dist/index.browser.mjs"
+        },
+        "require": {
+          "types": "./dist/index.browser.d.ts",
+          "default": "./dist/index.browser.js"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/index.browser.d.mts",
+          "default": "./dist/index.browser.mjs"
+        },
+        "require": {
+          "types": "./dist/index.browser.d.ts",
+          "default": "./dist/index.browser.js"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/index.node.d.mts",
+          "default": "./dist/index.node.mjs"
+        },
+        "require": {
+          "types": "./dist/index.node.d.ts",
+          "default": "./dist/index.node.js"
+        }
+      }
+    }
+  },
   "scripts": {
-    "build": "tsup-node && node ./scripts/build-preview-server.mjs",
+    "build:preview": "node ./scripts/build-preview-server.mjs",
+    "build:tsup": "node --max-old-space-size=8192 ./node_modules/tsup/dist/cli-node.js",
+    "build:package": "pnpm build:tsup && pnpm install --frozen-lockfile",
+    "build": "pnpm build:package && pnpm build:preview",
+    "dev": "pnpm build:tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
     "clean": "rm -rf dist",
-    "dev": "tsup-node --watch",
-    "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "dev:preview": "cd ../../apps/demo && tsx ../../packages/react-email/src/cli/index.ts dev"
   },
   "license": "MIT",
   "repository": {
@@ -31,17 +92,28 @@
     "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
-    "esbuild": "0.23.0",
+    "esbuild": "0.24.2",
     "glob": "10.3.4",
+    "html-to-text": "9.0.5",
     "log-symbols": "4.1.0",
+    "md-to-react-email": "5.0.5",
     "mime-types": "2.1.35",
     "next": "15.2.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
+    "prettier": "3.4.2",
+    "prismjs": "1.29.0",
+    "postcss": "8.4.40",
+    "postcss-selector-parser": "6.0.16",
+    "tailwindcss": "3.4.10",
     "socket.io": "4.8.1"
   },
+  "peerDependencies": {
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+  },
   "devDependencies": {
     "@babel/core": "7.26.10",
+    "@edge-runtime/vm": "3.1.8",
     "@lottiefiles/dotlottie-react": "0.12.3",
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
@@ -51,44 +123,48 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@react-email/render": "workspace:*",
+    "@responsive-email/react-email": "0.0.3",
     "@swc/core": "1.4.15",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "*",
     "@types/fs-extra": "11.0.1",
+    "@types/html-to-text": "9.0.4",
     "@types/mime-types": "2.1.4",
     "@types/node": "22.10.2",
     "@types/normalize-path": "3.0.2",
+    "@types/prismjs": "1.26.5",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
+    "@types/shelljs": "0.8.15",
     "@types/webpack": "5.28.5",
     "@vercel/style-guide": "5.1.0",
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
     "jiti": "2.4.2",
+    "jsdom": "23.0.1",
     "json5": "2.2.3",
     "module-punycode": "npm:[email protected]",
     "node-html-parser": "6.1.13",
-    "postcss": "8.4.40",
-    "prettier-plugin-tailwindcss": "0.6.6",
     "pretty-bytes": "6.1.1",
-    "prism-react-renderer": "2.1.0",
+    "prism-react-renderer": "2.4.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "sharp": "0.33.3",
+    "shelljs": "0.8.5",
     "socket.io-client": "4.8.0",
     "sonner": "1.7.1",
     "source-map-js": "1.0.2",
     "spamc": "0.0.5",
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
-    "tailwindcss": "3.4.0",
+    "tsconfig": "workspace:*",
     "tsup": "7.2.0",
     "tsx": "4.9.0",
     "typescript": "5.8.2",
     "use-debounce": "10.0.4",
-    "vitest": "1.1.3",
+    "vitest": "2.1.8",
+    "yalc": "1.0.0-pre.53",
     "zod": "3.24.2"
   }
 }

packages/react-email/scripts/adjust-package-index.ts

@@ -0,0 +1,36 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+export async function adjustPackageIndex() {
+  const distFiles = await fs.readdir(path.resolve(process.cwd(), 'dist'));
+  const indexFiles = distFiles.filter((file) => file.startsWith('index'));
+
+  for await (const file of indexFiles) {
+    const extension = path.extname(file);
+
+    if (extension === '.js' || extension === '.mjs') {
+      const pathToFile = path.resolve(process.cwd(), 'dist', file);
+      const originalContents = await fs.readFile(pathToFile, 'utf8');
+
+      await fs.writeFile(
+        pathToFile,
+        originalContents.replaceAll(
+          /"(?<componentPath>\.\/[^"]+)"/g,
+          (value, componentPath: string) => {
+            if (componentPath.startsWith('./render')) {
+              const newComponentPath = componentPath
+                .replace('/browser', '.browser')
+                .replace('/node', '.node');
+              return value.replace(
+                componentPath,
+                `${newComponentPath}${extension}`,
+              );
+            }
+            return value.replace(componentPath, `${componentPath}${extension}`);
+          },
+        ),
+        'utf8',
+      );
+    }
+  }
+}

packages/react-email/src/cli/commands/build.ts

@@ -165,20 +165,29 @@ const updatePackageJson = async (builtPreviewAppPath: string) => {
   ) as {
     name: string;
     scripts: Record<string, string>;
+    peerDependencies?: Record<string, string>;
     dependencies: Record<string, string>;
     devDependencies: Record<string, string>;
   };
   packageJson.scripts.build = 'next build';
   packageJson.scripts.start = 'next start';
 
   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'];
+  for (const [key, value] of Object.entries(packageJson.dependencies)) {
+    if (value.startsWith('workspace:')) {
+      delete packageJson.dependencies[key];
+    }
+  }
+  for (const [key, value] of Object.entries(packageJson.devDependencies)) {
+    if (value.startsWith('workspace:')) {
+      delete packageJson.devDependencies[key];
+    }
+  }
+
+  // This is meant to avoid issues with peer dependencies while the package doesn't upgrade
+  delete packageJson.devDependencies['@responsive-email/react-email'];
+
+  delete packageJson.peerDependencies;
   await fs.promises.writeFile(
     packageJsonPath,
     JSON.stringify(packageJson),

packages/react-email/src/cli/commands/export.ts

@@ -1,12 +1,12 @@
 import fs, { unlinkSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
-import type { Options } from '@react-email/render';
 import { type BuildFailure, build } from 'esbuild';
 import { glob } from 'glob';
 import logSymbols from 'log-symbols';
 import normalize from 'normalize-path';
 import ora from 'ora';
-import type React from 'react';
+import type { createElement } from 'react';
+import type { Options } from '../../package/render/node';
 import { renderingUtilitiesExporter } from '../../utils/esbuild/renderring-utilities-exporter';
 import {
   type EmailsDirectory,
@@ -117,7 +117,7 @@ export const exportTemplates = async (
           element: React.ReactElement,
           options: Record<string, unknown>,
         ) => Promise<string>;
-        reactEmailCreateReactElement: typeof React.createElement;
+        reactEmailCreateReactElement: typeof createElement;
       };
       const rendered = await emailModule.render(
         emailModule.reactEmailCreateReactElement(emailModule.default, {}),

packages/react-email/src/package/body/__snapshots__/body.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Body> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body>Lorem ipsum<!--/$--></body>"`;

packages/react-email/src/package/body/body.spec.tsx

@@ -0,0 +1,26 @@
+import { Body } from '.';
+import { render } from '../render/node';
+
+describe('<Body> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Body>{testMessage}</Body>);
+    expect(html).toContain(testMessage);
+  });
+
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Body data-testid="body-test" style={style}>
+        Test
+      </Body>,
+    );
+    expect(html).toContain('style="background-color:red"');
+    expect(html).toContain('data-testid="body-test"');
+  });
+
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Body>Lorem ipsum</Body>);
+    expect(actualOutput).toMatchSnapshot();
+  });
+});