react-email 4.0.0-alpha.4 → 4.0.0-alpha.6

package/dist/preview/.next/types/cache-life.d.ts

@@ -112,13 +112,13 @@ declare module 'next/cache' {
     /**
      * Cache this `"use cache"` using a custom timespan.
      * ```
-     *   stale: ... // seconds 
+     *   stale: ... // seconds
      *   revalidate: ... // seconds
      *   expire: ... // seconds
      * ```
-     * 
+     *
      * This is similar to Cache-Control: max-age=`stale`,s-max-age=`revalidate`,stale-while-revalidate=`expire-revalidate`
-     * 
+     *
      * If a value is left out, the lowest of other cacheLife() calls or the default, is used instead.
      */
     export function unstable_cacheLife(profile: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.6",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -29,12 +29,13 @@
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "15.1.2",
+    "next": "15.2.2",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "socket.io": "4.8.1"
   },
   "devDependencies": {
+    "@babel/core": "7.26.10",
     "@lottiefiles/dotlottie-react": "0.12.3",
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
@@ -51,21 +52,23 @@
     "@types/mime-types": "2.1.4",
     "@types/node": "22.10.2",
     "@types/normalize-path": "3.0.2",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@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",
+    "json5": "2.2.3",
+    "module-punycode": "npm:punycode@2.3.1",
     "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",
-    "module-punycode": "npm:punycode@2.3.1",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "sharp": "0.33.3",
     "socket.io-client": "4.8.0",
     "sonner": "1.7.1",
@@ -76,16 +79,19 @@
     "tailwindcss": "3.4.0",
     "tsup": "7.2.0",
     "tsx": "4.9.0",
-    "typescript": "5.1.6",
+    "typescript": "5.8.2",
     "use-debounce": "10.0.4",
     "vitest": "1.1.3",
+    "zod": "3.24.2",
     "@react-email/render": "1.0.5"
   },
   "scripts": {
-    "build": "tsup-node && node build-preview-server.mjs",
+    "build": "tsup-node && node ./scripts/build-preview-server.mjs",
+    "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",
-    "clean": "rm -rf dist"
+    "test:watch": "vitest"
   }
 }

package/scripts/build-preview-server.mjs

@@ -0,0 +1,32 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const nextBuildProcess = spawn('pnpm', ['next', 'build'], {
+  detached: true,
+  shell: true,
+  stdio: 'inherit',
+  cwd: path.resolve(__dirname, '../'),
+});
+
+process.on('SIGINT', () => {
+  nextBuildProcess.kill('SIGINT');
+});
+
+nextBuildProcess.on('exit', (code) => {
+  if (code !== 0) {
+    console.error(`next build failed with exit code ${code}`);
+    process.exit(code);
+  }
+
+  const builtPreviewPath = path.resolve(__dirname, '../dist/preview');
+
+  if (fs.existsSync(builtPreviewPath)) {
+    fs.rmSync(builtPreviewPath, { recursive: true });
+  }
+  fs.mkdirSync(builtPreviewPath, { recursive: true });
+  fs.renameSync('.next', path.join(builtPreviewPath, '/.next'));
+});

package/scripts/fill-caniemail-data.mjs

@@ -0,0 +1,36 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const caniemailDataURL =
+  'https://www.caniemail.com/api/data-ordered.json';
+
+const responseFromCaniemail = await fetch(caniemailDataURL);
+if (!responseFromCaniemail.ok) {
+  throw new Error(
+    `Could not get the data from Caniemail and there is no cached data under your temporary folder to fallback for. 
+
+This could be happneing for the following reasons:
+- You don't have internet connectivity
+- Caniemail is down
+- Caniemail changed from where to fetch their data from, which means we need to fix this. If this is the case, please open up an issue.`,
+    {
+      cause: {
+        responseFromCaniemail,
+      },
+    },
+  );
+}
+
+const response = await responseFromCaniemail.json();
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+await fs.writeFile(
+  path.resolve(__dirname, '../src/actions/email-validation/caniemail-data.ts'),
+  `import type { SupportEntry } from "./check-compatibility";
+
+export const nicenames = ${JSON.stringify(response.nicenames, null, 2)};
+
+export const supportEntries: SupportEntry[] = ${JSON.stringify(response.data, null, 2)}`,
+);