@react-email/render - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/browser/index.js

@@ -115,2 +115,15 @@ //#region rolldown:runtime
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends react.default.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/shared/read-stream.browser.ts
@@ -145,3 +158,2 @@ const decoder = new TextDecoder("utf-8");
 const render = async (node, options) => {
-	const suspendedElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: node });
 	const reactDOMServer = await import("react-dom/server").then((m) => {
@@ -152,3 +164,4 @@ if ("default" in m) return m.default;
 	const html = await new Promise((resolve, reject) => {
-		reactDOMServer.renderToReadableStream(suspendedElement, {
+		const ErrorBoundary = createErrorBoundary(reject);
+		reactDOMServer.renderToReadableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: node }) }), {
 			onError(error) {
@@ -155,0 +168,0 @@ reject(error);

dist/browser/index.mjs

 import * as html from "prettier/plugins/html";
 import { format } from "prettier/standalone";
 import { convert } from "html-to-text";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -87,2 +87,15 @@
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends React.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/shared/read-stream.browser.ts
@@ -117,3 +130,2 @@ const decoder = new TextDecoder("utf-8");
 const render = async (node, options) => {
-	const suspendedElement = /* @__PURE__ */ jsx(Suspense, { children: node });
 	const reactDOMServer = await import("react-dom/server").then((m) => {
@@ -124,3 +136,4 @@ if ("default" in m) return m.default;
 	const html$1 = await new Promise((resolve, reject) => {
-		reactDOMServer.renderToReadableStream(suspendedElement, {
+		const ErrorBoundary = createErrorBoundary(reject);
+		reactDOMServer.renderToReadableStream(/* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: node }) }), {
 			onError(error) {
@@ -127,0 +140,0 @@ reject(error);

dist/edge/index.js

@@ -115,2 +115,15 @@ //#region rolldown:runtime
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends react.default.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/shared/read-stream.browser.ts
@@ -151,3 +164,2 @@ const decoder = new TextDecoder("utf-8");
 const render = async (element, options) => {
-	const suspendedElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: element });
 	const reactDOMServer = await importReactDom().then((m) => {
@@ -158,3 +170,4 @@ if ("default" in m) return m.default;
 	const html = await new Promise((resolve, reject) => {
-		reactDOMServer.renderToReadableStream(suspendedElement, {
+		const ErrorBoundary = createErrorBoundary(reject);
+		reactDOMServer.renderToReadableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: element }) }), {
 			onError(error) {
@@ -161,0 +174,0 @@ reject(error);

dist/edge/index.mjs

 import * as html from "prettier/plugins/html";
 import { format } from "prettier/standalone";
 import { convert } from "html-to-text";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -87,2 +87,15 @@
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends React.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/shared/read-stream.browser.ts
@@ -123,3 +136,2 @@ const decoder = new TextDecoder("utf-8");
 const render = async (element, options) => {
-	const suspendedElement = /* @__PURE__ */ jsx(Suspense, { children: element });
 	const reactDOMServer = await importReactDom().then((m) => {
@@ -130,3 +142,4 @@ if ("default" in m) return m.default;
 	const html$1 = await new Promise((resolve, reject) => {
-		reactDOMServer.renderToReadableStream(suspendedElement, {
+		const ErrorBoundary = createErrorBoundary(reject);
+		reactDOMServer.renderToReadableStream(/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: element }) }), {
 			onError(error) {
@@ -133,0 +146,0 @@ reject(error);

dist/node/index.js

@@ -117,2 +117,15 @@ //#region rolldown:runtime
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends react.default.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/node/read-stream.ts
@@ -162,3 +175,2 @@ const readStream = async (stream) => {
 const render = async (node, options) => {
-	const suspendedElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: node });
 	const reactDOMServer = await import("react-dom/server").then((m) => {
@@ -169,14 +181,27 @@ if ("default" in m) return m.default;
 	let html;
-	if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") html = await readStream(await reactDOMServer.renderToReadableStream(suspendedElement, { progressiveChunkSize: Number.POSITIVE_INFINITY }));
-	else await new Promise((resolve, reject) => {
-		const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
-			async onAllReady() {
-				html = await readStream(stream);
+	await new Promise((resolve, reject) => {
+		if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") {
+			const ErrorBoundary = createErrorBoundary(reject);
+			reactDOMServer.renderToReadableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: node }) }), {
+				progressiveChunkSize: Number.POSITIVE_INFINITY,
+				onError(error) {
+					throw error;
+				}
+			}).then((stream) => readStream(stream)).then((result) => {
+				html = result;
 				resolve();
-			},
-			onError(error) {
-				reject(error);
-			},
-			progressiveChunkSize: Number.POSITIVE_INFINITY
-		});
+			}).catch(reject);
+		} else {
+			const ErrorBoundary = createErrorBoundary(reject);
+			const stream = reactDOMServer.renderToPipeableStream(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: node }) }), {
+				async onAllReady() {
+					html = await readStream(stream);
+					resolve();
+				},
+				onError(error) {
+					reject(error);
+				},
+				progressiveChunkSize: Number.POSITIVE_INFINITY
+			});
+		}
 	});
@@ -183,0 +208,0 @@ if (options?.plainText) return toPlainText(html, options.htmlToTextOptions);

dist/node/index.mjs

 import * as html from "prettier/plugins/html";
 import { format } from "prettier/standalone";
 import { convert } from "html-to-text";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { Writable } from "node:stream";
@@ -88,2 +88,15 @@ import { jsx } from "react/jsx-runtime";
 //#endregion
+//#region src/shared/error-boundary.ts
+function createErrorBoundary(reject) {
+	return class ErrorBoundary extends React.Component {
+		componentDidCatch(error) {
+			reject(error);
+		}
+		render() {
+			return this.props.children;
+		}
+	};
+}
+
+//#endregion
 //#region src/node/read-stream.ts
@@ -133,3 +146,2 @@ const readStream = async (stream) => {
 const render = async (node, options) => {
-	const suspendedElement = /* @__PURE__ */ jsx(Suspense, { children: node });
 	const reactDOMServer = await import("react-dom/server").then((m) => {
@@ -140,14 +152,27 @@ if ("default" in m) return m.default;
 	let html$1;
-	if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") html$1 = await readStream(await reactDOMServer.renderToReadableStream(suspendedElement, { progressiveChunkSize: Number.POSITIVE_INFINITY }));
-	else await new Promise((resolve, reject) => {
-		const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
-			async onAllReady() {
-				html$1 = await readStream(stream);
+	await new Promise((resolve, reject) => {
+		if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") {
+			const ErrorBoundary = createErrorBoundary(reject);
+			reactDOMServer.renderToReadableStream(/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: node }) }), {
+				progressiveChunkSize: Number.POSITIVE_INFINITY,
+				onError(error) {
+					throw error;
+				}
+			}).then((stream) => readStream(stream)).then((result) => {
+				html$1 = result;
 				resolve();
-			},
-			onError(error) {
-				reject(error);
-			},
-			progressiveChunkSize: Number.POSITIVE_INFINITY
-		});
+			}).catch(reject);
+		} else {
+			const ErrorBoundary = createErrorBoundary(reject);
+			const stream = reactDOMServer.renderToPipeableStream(/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: node }) }), {
+				async onAllReady() {
+					html$1 = await readStream(stream);
+					resolve();
+				},
+				onError(error) {
+					reject(error);
+				},
+				progressiveChunkSize: Number.POSITIVE_INFINITY
+			});
+		}
 	});
@@ -154,0 +179,0 @@ if (options?.plainText) return toPlainText(html$1, options.htmlToTextOptions);

package.json

 {
   "name": "@react-email/render",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Transform React components into HTML email templates",
@@ -5,0 +5,0 @@ "sideEffects": false,

No alert changes

Improved metrics

Total package byte prevSize

75265

7.63%

Lines of code

1138

9.21%

No dependency changes