@react-email/render 1.0.0 → 1.0.2-canary.0

package/dist/browser/index.d.mts

@@ -15,9 +15,9 @@ type Options = {
     htmlToTextOptions?: HtmlToTextOptions;
 });
 
-declare const render: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const render: (element: React.ReactElement, options?: Options) => Promise<string>;
 
-declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const renderAsync: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 declare const plainTextSelectors: SelectorDefinition[];
 

package/dist/browser/index.d.ts

@@ -15,9 +15,9 @@ type Options = {
     htmlToTextOptions?: HtmlToTextOptions;
 });
 
-declare const render: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const render: (element: React.ReactElement, options?: Options) => Promise<string>;
 
-declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const renderAsync: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 declare const plainTextSelectors: SelectorDefinition[];
 

package/dist/browser/index.js

@@ -70,8 +70,9 @@ __export(browser_exports, {
 });
 module.exports = __toCommonJS(browser_exports);
 
-// src/browser/render.ts
+// src/browser/render.tsx
 var import_html_to_text = require("html-to-text");
+var import_react = require("react");
 
 // src/shared/utils/pretty.ts
 var import_js_beautify = __toESM(require("js-beautify"));
@@ -96,14 +97,15 @@ var plainTextSelectors = [
   }
 ];
 
-// src/browser/render.ts
+// src/browser/render.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var decoder = new TextDecoder("utf-8");
 var readStream = (stream) => __async(void 0, null, function* () {
-  let result = "";
+  const chunks = [];
   if ("pipeTo" in stream) {
     const writableStream = new WritableStream({
       write(chunk) {
-        result += decoder.decode(chunk);
+        chunks.push(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -117,18 +119,29 @@ var readStream = (stream) => __async(void 0, null, function* () {
       }
     );
   }
-  return result;
+  let length = 0;
+  chunks.forEach((item) => {
+    length += item.length;
+  });
+  const mergedChunks = new Uint8Array(length);
+  let offset = 0;
+  chunks.forEach((item) => {
+    mergedChunks.set(item, offset);
+    offset += item.length;
+  });
+  return decoder.decode(mergedChunks);
 });
-var render = (component, options) => __async(void 0, null, function* () {
+var render = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream(stream);
@@ -154,15 +167,18 @@ var render = (component, options) => __async(void 0, null, function* () {
   return document;
 });
 
-// src/browser/render-async.ts
+// src/browser/render-async.tsx
 var import_html_to_text2 = require("html-to-text");
+var import_react2 = require("react");
+
+// src/browser/read-stream.ts
 var decoder2 = new TextDecoder("utf-8");
 var readStream2 = (stream) => __async(void 0, null, function* () {
-  let result = "";
+  const chunks = [];
   if ("pipeTo" in stream) {
     const writableStream = new WritableStream({
       write(chunk) {
-        result += decoder2.decode(chunk);
+        chunks.push(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -176,18 +192,32 @@ var readStream2 = (stream) => __async(void 0, null, function* () {
       }
     );
   }
-  return result;
+  let length = 0;
+  chunks.forEach((item) => {
+    length += item.length;
+  });
+  const mergedChunks = new Uint8Array(length);
+  let offset = 0;
+  chunks.forEach((item) => {
+    mergedChunks.set(item, offset);
+    offset += item.length;
+  });
+  return decoder2.decode(mergedChunks);
 });
-var renderAsync = (component, options) => __async(void 0, null, function* () {
+
+// src/browser/render-async.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var renderAsync = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream2(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream2(stream);

package/dist/browser/index.mjs

@@ -35,8 +35,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/browser/render.ts
+// src/browser/render.tsx
 import { convert } from "html-to-text";
+import { Suspense } from "react";
 
 // src/shared/utils/pretty.ts
 import jsBeautify from "js-beautify";
@@ -61,14 +62,15 @@ var plainTextSelectors = [
   }
 ];
 
-// src/browser/render.ts
+// src/browser/render.tsx
+import { jsx } from "react/jsx-runtime";
 var decoder = new TextDecoder("utf-8");
 var readStream = (stream) => __async(void 0, null, function* () {
-  let result = "";
+  const chunks = [];
   if ("pipeTo" in stream) {
     const writableStream = new WritableStream({
       write(chunk) {
-        result += decoder.decode(chunk);
+        chunks.push(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -82,18 +84,29 @@ var readStream = (stream) => __async(void 0, null, function* () {
       }
     );
   }
-  return result;
+  let length = 0;
+  chunks.forEach((item) => {
+    length += item.length;
+  });
+  const mergedChunks = new Uint8Array(length);
+  let offset = 0;
+  chunks.forEach((item) => {
+    mergedChunks.set(item, offset);
+    offset += item.length;
+  });
+  return decoder.decode(mergedChunks);
 });
-var render = (component, options) => __async(void 0, null, function* () {
+var render = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ jsx(Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream(stream);
@@ -119,15 +132,18 @@ var render = (component, options) => __async(void 0, null, function* () {
   return document;
 });
 
-// src/browser/render-async.ts
+// src/browser/render-async.tsx
 import { convert as convert2 } from "html-to-text";
+import { Suspense as Suspense2 } from "react";
+
+// src/browser/read-stream.ts
 var decoder2 = new TextDecoder("utf-8");
 var readStream2 = (stream) => __async(void 0, null, function* () {
-  let result = "";
+  const chunks = [];
   if ("pipeTo" in stream) {
     const writableStream = new WritableStream({
       write(chunk) {
-        result += decoder2.decode(chunk);
+        chunks.push(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -141,18 +157,32 @@ var readStream2 = (stream) => __async(void 0, null, function* () {
       }
     );
   }
-  return result;
+  let length = 0;
+  chunks.forEach((item) => {
+    length += item.length;
+  });
+  const mergedChunks = new Uint8Array(length);
+  let offset = 0;
+  chunks.forEach((item) => {
+    mergedChunks.set(item, offset);
+    offset += item.length;
+  });
+  return decoder2.decode(mergedChunks);
 });
-var renderAsync = (component, options) => __async(void 0, null, function* () {
+
+// src/browser/render-async.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var renderAsync = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ jsx2(Suspense2, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream2(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream2(stream);

package/dist/node/index.d.mts

@@ -15,12 +15,12 @@ type Options = {
     htmlToTextOptions?: HtmlToTextOptions;
 });
 
-declare const render: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const render: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 /**
  * @deprecated use `render`
  */
-declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const renderAsync: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 declare const plainTextSelectors: SelectorDefinition[];
 

package/dist/node/index.d.ts

@@ -15,12 +15,12 @@ type Options = {
     htmlToTextOptions?: HtmlToTextOptions;
 });
 
-declare const render: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const render: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 /**
  * @deprecated use `render`
  */
-declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+declare const renderAsync: (element: React.ReactElement, options?: Options) => Promise<string>;
 
 declare const plainTextSelectors: SelectorDefinition[];
 

package/dist/node/index.js

@@ -70,9 +70,9 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// src/node/render.ts
-var import_node_stream = require("stream");
+// src/node/render.tsx
 var import_html_to_text = require("html-to-text");
+var import_react = require("react");
 
 // src/shared/utils/pretty.ts
 var import_js_beautify = __toESM(require("js-beautify"));
@@ -97,7 +97,8 @@ var plainTextSelectors = [
   }
 ];
 
-// src/node/render.ts
+// src/node/read-stream.ts
+var import_node_stream = require("stream");
 var decoder = new TextDecoder("utf-8");
 var readStream = (stream) => __async(void 0, null, function* () {
   let result = "";
@@ -125,16 +126,20 @@ var readStream = (stream) => __async(void 0, null, function* () {
   }
   return result;
 });
-var render = (component, options) => __async(void 0, null, function* () {
+
+// src/node/render.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var render = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream(stream);
@@ -160,49 +165,24 @@ var render = (component, options) => __async(void 0, null, function* () {
   return document;
 });
 
-// src/node/render-async.ts
-var import_node_stream2 = require("stream");
+// src/node/render-async.tsx
 var import_html_to_text2 = require("html-to-text");
-var decoder2 = new TextDecoder("utf-8");
-var readStream2 = (stream) => __async(void 0, null, function* () {
-  let result = "";
-  if ("pipeTo" in stream) {
-    const writableStream = new WritableStream({
-      write(chunk) {
-        result += decoder2.decode(chunk);
-      }
-    });
-    yield stream.pipeTo(writableStream);
-  } else {
-    const writable = new import_node_stream2.Writable({
-      write(chunk, _encoding, callback) {
-        result += decoder2.decode(chunk);
-        callback();
-      }
-    });
-    stream.pipe(writable);
-    return new Promise((resolve, reject) => {
-      writable.on("error", reject);
-      writable.on("close", () => {
-        resolve(result);
-      });
-    });
-  }
-  return result;
-});
-var renderAsync = (component, options) => __async(void 0, null, function* () {
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var renderAsync = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream2(
-      yield reactDOMServer.renderToReadableStream(component)
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream2(stream);
+            html = yield readStream(stream);
             resolve();
           });
         },

package/dist/node/index.mjs

@@ -35,9 +35,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/node/render.ts
-import { Writable } from "node:stream";
+// src/node/render.tsx
 import { convert } from "html-to-text";
+import { Suspense } from "react";
 
 // src/shared/utils/pretty.ts
 import jsBeautify from "js-beautify";
@@ -62,7 +62,8 @@ var plainTextSelectors = [
   }
 ];
 
-// src/node/render.ts
+// src/node/read-stream.ts
+import { Writable } from "node:stream";
 var decoder = new TextDecoder("utf-8");
 var readStream = (stream) => __async(void 0, null, function* () {
   let result = "";
@@ -90,16 +91,20 @@ var readStream = (stream) => __async(void 0, null, function* () {
   }
   return result;
 });
-var render = (component, options) => __async(void 0, null, function* () {
+
+// src/node/render.tsx
+import { jsx } from "react/jsx-runtime";
+var render = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ jsx(Suspense, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
     html = yield readStream(
-      yield reactDOMServer.renderToReadableStream(component)
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
             html = yield readStream(stream);
@@ -125,49 +130,24 @@ var render = (component, options) => __async(void 0, null, function* () {
   return document;
 });
 
-// src/node/render-async.ts
-import { Writable as Writable2 } from "node:stream";
+// src/node/render-async.tsx
 import { convert as convert2 } from "html-to-text";
-var decoder2 = new TextDecoder("utf-8");
-var readStream2 = (stream) => __async(void 0, null, function* () {
-  let result = "";
-  if ("pipeTo" in stream) {
-    const writableStream = new WritableStream({
-      write(chunk) {
-        result += decoder2.decode(chunk);
-      }
-    });
-    yield stream.pipeTo(writableStream);
-  } else {
-    const writable = new Writable2({
-      write(chunk, _encoding, callback) {
-        result += decoder2.decode(chunk);
-        callback();
-      }
-    });
-    stream.pipe(writable);
-    return new Promise((resolve, reject) => {
-      writable.on("error", reject);
-      writable.on("close", () => {
-        resolve(result);
-      });
-    });
-  }
-  return result;
-});
-var renderAsync = (component, options) => __async(void 0, null, function* () {
+import { Suspense as Suspense2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var renderAsync = (element, options) => __async(void 0, null, function* () {
+  const suspendedElement = /* @__PURE__ */ jsx2(Suspense2, { children: element });
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream2(
-      yield reactDOMServer.renderToReadableStream(component)
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(suspendedElement)
     );
   } else {
     yield new Promise((resolve, reject) => {
-      const stream = reactDOMServer.renderToPipeableStream(component, {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream2(stream);
+            html = yield readStream(stream);
             resolve();
           });
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/render",
-  "version": "1.0.0",
+  "version": "1.0.2-canary.0",
   "description": "Transform React components into HTML email templates",
   "sideEffects": false,
   "main": "./dist/browser/index.js",
@@ -86,6 +86,8 @@
     "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@edge-runtime/vm": "3.1.8",
     "@types/html-to-text": "9.0.4",
     "@types/js-beautify": "1.14.3",

package/readme.md

@@ -35,7 +35,7 @@ Convert React components into a HTML string.
 import { MyTemplate } from "../components/MyTemplate";
 import { render } from "@react-email/render";
 
-const html = render(<MyTemplate firstName="Jim" />);
+const html = await render(<MyTemplate firstName="Jim" />);
 ```
 
 ## License