npm - @react-email/render - Versions diffs - 0.0.17 → 1.0.0-canary.1 - Mend

@react-email/render 0.0.17 → 1.0.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/browser/index.d.mts CHANGED Viewed

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

package/dist/browser/index.d.ts CHANGED Viewed

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

package/dist/browser/index.js CHANGED Viewed

@@ -70,8 +70,7 @@ __export(browser_exports, {
 });
 module.exports = __toCommonJS(browser_exports);
-// src/shared/render.ts
-var ReactDomServer = __toESM(require("react-dom/server"));
+// src/browser/render.ts
 var import_html_to_text = require("html-to-text");
 // src/shared/utils/pretty.ts
@@ -97,34 +96,73 @@ var plainTextSelectors = [
   }
 ];
-// src/shared/render.ts
-var render = (component, options) => {
+// src/browser/render.ts
+var decoder = new TextDecoder("utf-8");
+var readStream = (stream) => __async(void 0, null, function* () {
+  let result = "";
+  if ("pipeTo" in stream) {
+    const writableStream = new WritableStream({
+      write(chunk) {
+        result += decoder.decode(chunk);
+      }
+    });
+    yield stream.pipeTo(writableStream);
+  } else {
+    throw new Error(
+      "For some reason, the Node version of `react-dom/server` has been imported instead of the browser one.",
+      {
+        cause: {
+          stream
+        }
+      }
+    );
+  }
+  return result;
+});
+var render = (component, options) => __async(void 0, null, function* () {
+  const { default: reactDOMServer } = yield import("react-dom/server");
+  let html;
+  if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(component)
+    );
+  } else {
+    yield new Promise((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(component, {
+        onAllReady() {
+          return __async(this, null, function* () {
+            html = yield readStream(stream);
+            resolve();
+          });
+        },
+        onError(error) {
+          reject(error);
+        }
+      });
+    });
+  }
   if (options == null ? void 0 : options.plainText) {
-    return renderAsPlainText(component, options);
+    return (0, import_html_to_text.convert)(html, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const markup = ReactDomServer.renderToStaticMarkup(component);
-  const document = `${doctype}${markup}`;
-  if (options && options.pretty) {
+  const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, "")}`;
+  if (options == null ? void 0 : options.pretty) {
     return pretty(document);
   }
   return document;
-};
-var renderAsPlainText = (component, options) => {
-  return (0, import_html_to_text.convert)(ReactDomServer.renderToStaticMarkup(component), __spreadValues({
-    selectors: plainTextSelectors
-  }, (options == null ? void 0 : options.plainText) === true ? options.htmlToTextOptions : {}));
-};
+});
 // src/browser/render-async.ts
 var import_html_to_text2 = require("html-to-text");
-var decoder = new TextDecoder("utf-8");
-var readStream = (stream) => __async(void 0, null, function* () {
+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 += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -144,7 +182,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream(
+    html = yield readStream2(
       yield reactDOMServer.renderToReadableStream(component)
     );
   } else {
@@ -152,7 +190,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
       const stream = reactDOMServer.renderToPipeableStream(component, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream(stream);
+            html = yield readStream2(stream);
             resolve();
           });
         },

package/dist/browser/index.mjs CHANGED Viewed

@@ -35,8 +35,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
-// src/shared/render.ts
-import * as ReactDomServer from "react-dom/server";
+// src/browser/render.ts
 import { convert } from "html-to-text";
 // src/shared/utils/pretty.ts
@@ -62,34 +61,73 @@ var plainTextSelectors = [
   }
 ];
-// src/shared/render.ts
-var render = (component, options) => {
+// src/browser/render.ts
+var decoder = new TextDecoder("utf-8");
+var readStream = (stream) => __async(void 0, null, function* () {
+  let result = "";
+  if ("pipeTo" in stream) {
+    const writableStream = new WritableStream({
+      write(chunk) {
+        result += decoder.decode(chunk);
+      }
+    });
+    yield stream.pipeTo(writableStream);
+  } else {
+    throw new Error(
+      "For some reason, the Node version of `react-dom/server` has been imported instead of the browser one.",
+      {
+        cause: {
+          stream
+        }
+      }
+    );
+  }
+  return result;
+});
+var render = (component, options) => __async(void 0, null, function* () {
+  const { default: reactDOMServer } = yield import("react-dom/server");
+  let html;
+  if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(component)
+    );
+  } else {
+    yield new Promise((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(component, {
+        onAllReady() {
+          return __async(this, null, function* () {
+            html = yield readStream(stream);
+            resolve();
+          });
+        },
+        onError(error) {
+          reject(error);
+        }
+      });
+    });
+  }
   if (options == null ? void 0 : options.plainText) {
-    return renderAsPlainText(component, options);
+    return convert(html, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const markup = ReactDomServer.renderToStaticMarkup(component);
-  const document = `${doctype}${markup}`;
-  if (options && options.pretty) {
+  const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, "")}`;
+  if (options == null ? void 0 : options.pretty) {
     return pretty(document);
   }
   return document;
-};
-var renderAsPlainText = (component, options) => {
-  return convert(ReactDomServer.renderToStaticMarkup(component), __spreadValues({
-    selectors: plainTextSelectors
-  }, (options == null ? void 0 : options.plainText) === true ? options.htmlToTextOptions : {}));
-};
+});
 // src/browser/render-async.ts
 import { convert as convert2 } from "html-to-text";
-var decoder = new TextDecoder("utf-8");
-var readStream = (stream) => __async(void 0, null, function* () {
+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 += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
@@ -109,7 +147,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream(
+    html = yield readStream2(
       yield reactDOMServer.renderToReadableStream(component)
     );
   } else {
@@ -117,7 +155,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
       const stream = reactDOMServer.renderToPipeableStream(component, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream(stream);
+            html = yield readStream2(stream);
             resolve();
           });
         },

package/dist/node/index.d.mts CHANGED Viewed

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

package/dist/node/index.d.ts CHANGED Viewed

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

package/dist/node/index.js CHANGED Viewed

@@ -70,8 +70,8 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
-// src/shared/render.ts
-var ReactDomServer = __toESM(require("react-dom/server"));
+// src/node/render.ts
+var import_node_stream = require("stream");
 var import_html_to_text = require("html-to-text");
 // src/shared/utils/pretty.ts
@@ -97,42 +97,86 @@ var plainTextSelectors = [
   }
 ];
-// src/shared/render.ts
-var render = (component, options) => {
+// src/node/render.ts
+var decoder = new TextDecoder("utf-8");
+var readStream = (stream) => __async(void 0, null, function* () {
+  let result = "";
+  if ("pipeTo" in stream) {
+    const writableStream = new WritableStream({
+      write(chunk) {
+        result += decoder.decode(chunk);
+      }
+    });
+    yield stream.pipeTo(writableStream);
+  } else {
+    const writable = new import_node_stream.Writable({
+      write(chunk, _encoding, callback) {
+        result += decoder.decode(chunk);
+        callback();
+      }
+    });
+    stream.pipe(writable);
+    return new Promise((resolve, reject) => {
+      writable.on("error", reject);
+      writable.on("close", () => {
+        resolve(result);
+      });
+    });
+  }
+  return result;
+});
+var render = (component, options) => __async(void 0, null, function* () {
+  const { default: reactDOMServer } = yield import("react-dom/server");
+  let html;
+  if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(component)
+    );
+  } else {
+    yield new Promise((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(component, {
+        onAllReady() {
+          return __async(this, null, function* () {
+            html = yield readStream(stream);
+            resolve();
+          });
+        },
+        onError(error) {
+          reject(error);
+        }
+      });
+    });
+  }
   if (options == null ? void 0 : options.plainText) {
-    return renderAsPlainText(component, options);
+    return (0, import_html_to_text.convert)(html, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const markup = ReactDomServer.renderToStaticMarkup(component);
-  const document = `${doctype}${markup}`;
-  if (options && options.pretty) {
+  const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, "")}`;
+  if (options == null ? void 0 : options.pretty) {
     return pretty(document);
   }
   return document;
-};
-var renderAsPlainText = (component, options) => {
-  return (0, import_html_to_text.convert)(ReactDomServer.renderToStaticMarkup(component), __spreadValues({
-    selectors: plainTextSelectors
-  }, (options == null ? void 0 : options.plainText) === true ? options.htmlToTextOptions : {}));
-};
+});
 // src/node/render-async.ts
-var import_node_stream = require("stream");
+var import_node_stream2 = require("stream");
 var import_html_to_text2 = require("html-to-text");
-var decoder = new TextDecoder("utf-8");
-var readStream = (stream) => __async(void 0, null, function* () {
+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 += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
   } else {
-    const writable = new import_node_stream.Writable({
+    const writable = new import_node_stream2.Writable({
       write(chunk, _encoding, callback) {
-        result += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
         callback();
       }
     });
@@ -150,7 +194,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream(
+    html = yield readStream2(
       yield reactDOMServer.renderToReadableStream(component)
     );
   } else {
@@ -158,7 +202,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
       const stream = reactDOMServer.renderToPipeableStream(component, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream(stream);
+            html = yield readStream2(stream);
             resolve();
           });
         },

package/dist/node/index.mjs CHANGED Viewed

@@ -35,8 +35,8 @@ var __async = (__this, __arguments, generator) => {
   });
 };
-// src/shared/render.ts
-import * as ReactDomServer from "react-dom/server";
+// src/node/render.ts
+import { Writable } from "node:stream";
 import { convert } from "html-to-text";
 // src/shared/utils/pretty.ts
@@ -62,42 +62,86 @@ var plainTextSelectors = [
   }
 ];
-// src/shared/render.ts
-var render = (component, options) => {
+// src/node/render.ts
+var decoder = new TextDecoder("utf-8");
+var readStream = (stream) => __async(void 0, null, function* () {
+  let result = "";
+  if ("pipeTo" in stream) {
+    const writableStream = new WritableStream({
+      write(chunk) {
+        result += decoder.decode(chunk);
+      }
+    });
+    yield stream.pipeTo(writableStream);
+  } else {
+    const writable = new Writable({
+      write(chunk, _encoding, callback) {
+        result += decoder.decode(chunk);
+        callback();
+      }
+    });
+    stream.pipe(writable);
+    return new Promise((resolve, reject) => {
+      writable.on("error", reject);
+      writable.on("close", () => {
+        resolve(result);
+      });
+    });
+  }
+  return result;
+});
+var render = (component, options) => __async(void 0, null, function* () {
+  const { default: reactDOMServer } = yield import("react-dom/server");
+  let html;
+  if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
+    html = yield readStream(
+      yield reactDOMServer.renderToReadableStream(component)
+    );
+  } else {
+    yield new Promise((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(component, {
+        onAllReady() {
+          return __async(this, null, function* () {
+            html = yield readStream(stream);
+            resolve();
+          });
+        },
+        onError(error) {
+          reject(error);
+        }
+      });
+    });
+  }
   if (options == null ? void 0 : options.plainText) {
-    return renderAsPlainText(component, options);
+    return convert(html, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const markup = ReactDomServer.renderToStaticMarkup(component);
-  const document = `${doctype}${markup}`;
-  if (options && options.pretty) {
+  const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, "")}`;
+  if (options == null ? void 0 : options.pretty) {
     return pretty(document);
   }
   return document;
-};
-var renderAsPlainText = (component, options) => {
-  return convert(ReactDomServer.renderToStaticMarkup(component), __spreadValues({
-    selectors: plainTextSelectors
-  }, (options == null ? void 0 : options.plainText) === true ? options.htmlToTextOptions : {}));
-};
+});
 // src/node/render-async.ts
-import { Writable } from "node:stream";
+import { Writable as Writable2 } from "node:stream";
 import { convert as convert2 } from "html-to-text";
-var decoder = new TextDecoder("utf-8");
-var readStream = (stream) => __async(void 0, null, function* () {
+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 += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
       }
     });
     yield stream.pipeTo(writableStream);
   } else {
-    const writable = new Writable({
+    const writable = new Writable2({
       write(chunk, _encoding, callback) {
-        result += decoder.decode(chunk);
+        result += decoder2.decode(chunk);
         callback();
       }
     });
@@ -115,7 +159,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
   const { default: reactDOMServer } = yield import("react-dom/server");
   let html;
   if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
-    html = yield readStream(
+    html = yield readStream2(
       yield reactDOMServer.renderToReadableStream(component)
     );
   } else {
@@ -123,7 +167,7 @@ var renderAsync = (component, options) => __async(void 0, null, function* () {
       const stream = reactDOMServer.renderToPipeableStream(component, {
         onAllReady() {
           return __async(this, null, function* () {
-            html = yield readStream(stream);
+            html = yield readStream2(stream);
             resolve();
           });
         },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/render",
-  "version": "0.0.17",
+  "version": "1.0.0-canary.1",
   "description": "Transform React components into HTML email templates",
   "sideEffects": false,
   "main": "./dist/browser/index.js",
@@ -82,11 +82,10 @@
     "react-promise-suspense": "0.3.4"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.23.3",
     "@edge-runtime/vm": "3.1.8",
     "@types/html-to-text": "9.0.4",
     "@types/js-beautify": "1.14.3",