@react-email/render 0.0.10 → 0.0.11

package/dist/index.d.mts

@@ -1,12 +1,24 @@
-interface Options {
+import { HtmlToTextOptions, SelectorDefinition } from 'html-to-text';
+
+type Options = {
     pretty?: boolean;
-    plainText?: boolean;
-}
+} & ({
+    plainText?: false;
+} | {
+    plainText?: true;
+    /**
+     * These are options you can pass down directly to the library we use for
+     * converting the rendered email's HTML into plain text.
+     *
+     * @see https://github.com/html-to-text/node-html-to-text
+     */
+    htmlToTextOptions?: HtmlToTextOptions;
+});
+
 declare const render: (component: React.ReactElement, options?: Options) => string;
 
-declare const renderAsync: (component: React.ReactElement, options?: {
-    pretty?: boolean;
-    plainText?: boolean;
-}) => Promise<string>;
+declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+
+declare const plainTextSelectors: SelectorDefinition[];
 
-export { Options, render, renderAsync };
+export { Options, plainTextSelectors, render, renderAsync };

package/dist/index.d.ts

@@ -1,12 +1,24 @@
-interface Options {
+import { HtmlToTextOptions, SelectorDefinition } from 'html-to-text';
+
+type Options = {
     pretty?: boolean;
-    plainText?: boolean;
-}
+} & ({
+    plainText?: false;
+} | {
+    plainText?: true;
+    /**
+     * These are options you can pass down directly to the library we use for
+     * converting the rendered email's HTML into plain text.
+     *
+     * @see https://github.com/html-to-text/node-html-to-text
+     */
+    htmlToTextOptions?: HtmlToTextOptions;
+});
+
 declare const render: (component: React.ReactElement, options?: Options) => string;
 
-declare const renderAsync: (component: React.ReactElement, options?: {
-    pretty?: boolean;
-    plainText?: boolean;
-}) => Promise<string>;
+declare const renderAsync: (component: React.ReactElement, options?: Options) => Promise<string>;
+
+declare const plainTextSelectors: SelectorDefinition[];
 
-export { Options, render, renderAsync };
+export { Options, plainTextSelectors, render, renderAsync };

package/dist/index.js

@@ -3,8 +3,27 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => {
+  if (symbol = Symbol[name])
+    return symbol;
+  throw Error("Symbol." + name + " is not defined");
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -46,10 +65,12 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+var __forAwait = (obj, it, method) => (it = obj[__knownSymbol("asyncIterator")]) ? it.call(obj) : (obj = obj[__knownSymbol("iterator")](), it = {}, method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  plainTextSelectors: () => plainTextSelectors,
   render: () => render,
   renderAsync: () => renderAsync
 });
@@ -58,7 +79,31 @@ module.exports = __toCommonJS(src_exports);
 // src/render.ts
 var ReactDomServer = __toESM(require("react-dom/server"));
 var import_html_to_text = require("html-to-text");
-var import_pretty = __toESM(require("pretty"));
+
+// src/utils/pretty.ts
+var import_js_beautify = require("js-beautify");
+var defaults = {
+  unformatted: ["code", "pre", "em", "strong", "span"],
+  indent_inner_html: true,
+  indent_char: " ",
+  indent_size: 2,
+  sep: "\n"
+};
+var pretty = (str, options = {}) => {
+  return (0, import_js_beautify.html)(str, __spreadValues(__spreadValues({}, defaults), options));
+};
+
+// src/plain-text-selectors.ts
+var plainTextSelectors = [
+  { selector: "img", format: "skip" },
+  { selector: "#__react-email-preview", format: "skip" },
+  {
+    selector: "a",
+    options: { linkBrackets: false }
+  }
+];
+
+// src/render.ts
 var render = (component, options) => {
   if (options == null ? void 0 : options.plainText) {
     return renderAsPlainText(component, options);
@@ -67,56 +112,70 @@ var render = (component, options) => {
   const markup = ReactDomServer.renderToStaticMarkup(component);
   const document = `${doctype}${markup}`;
   if (options && options.pretty) {
-    return (0, import_pretty.default)(document);
+    return pretty(document);
   }
   return document;
 };
-var renderAsPlainText = (component, _options) => {
-  return (0, import_html_to_text.convert)(ReactDomServer.renderToStaticMarkup(component), {
-    selectors: [
-      { selector: "img", format: "skip" },
-      { selector: "#__react-email-preview", format: "skip" }
-    ]
-  });
+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/render-async.ts
 var import_html_to_text2 = require("html-to-text");
-var import_pretty2 = __toESM(require("pretty"));
+var decoder = new TextDecoder("utf-8");
 var readStream = (readableStream) => __async(void 0, null, function* () {
-  const reader = readableStream.getReader();
-  const chunks = [];
-  while (true) {
-    const { value, done } = yield reader.read();
-    if (done) {
-      break;
+  let result = "";
+  if ("allReady" in readableStream) {
+    const reader = readableStream.getReader();
+    while (true) {
+      const { value, done } = yield reader.read();
+      if (done) {
+        break;
+      }
+      result += decoder.decode(value);
+    }
+  } else {
+    try {
+      for (var iter = __forAwait(readableStream), more, temp, error; more = !(temp = yield iter.next()).done; more = false) {
+        const chunk = temp.value;
+        result += decoder.decode(Buffer.from(chunk));
+      }
+    } catch (temp) {
+      error = [temp];
+    } finally {
+      try {
+        more && (temp = iter.return) && (yield temp.call(iter));
+      } finally {
+        if (error)
+          throw error[0];
+      }
     }
-    chunks.push(value);
   }
-  return chunks.map((chunk) => new TextDecoder("utf-8").decode(chunk)).join("");
+  return result;
 });
 var renderAsync = (component, options) => __async(void 0, null, function* () {
+  var _a;
   const reactDOMServer = (yield import("react-dom/server")).default;
-  const renderToStream = reactDOMServer.renderToReadableStream || reactDOMServer.renderToString || reactDOMServer.renderToPipeableStream;
+  const renderToStream = (_a = reactDOMServer.renderToReadableStream) != null ? _a : reactDOMServer.renderToStaticNodeStream;
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const readableStream = yield renderToStream(component);
-  const html = typeof readableStream === "string" ? readableStream : yield readStream(readableStream);
+  const htmlOrReadableStream = yield renderToStream(component);
+  const html2 = typeof htmlOrReadableStream === "string" ? htmlOrReadableStream : yield readStream(htmlOrReadableStream);
   if (options == null ? void 0 : options.plainText) {
-    return (0, import_html_to_text2.convert)(html, {
-      selectors: [
-        { selector: "img", format: "skip" },
-        { selector: "#__react-email-preview", format: "skip" }
-      ]
-    });
+    return (0, import_html_to_text2.convert)(html2, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
-  const document = `${doctype}${html}`;
+  const document = `${doctype}${html2}`;
   if (options == null ? void 0 : options.pretty) {
-    return (0, import_pretty2.default)(document);
+    return pretty(document);
   }
   return document;
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  plainTextSelectors,
   render,
   renderAsync
 });

package/dist/index.mjs

@@ -1,3 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => {
+  if (symbol = Symbol[name])
+    return symbol;
+  throw Error("Symbol." + name + " is not defined");
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -18,11 +39,36 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+var __forAwait = (obj, it, method) => (it = obj[__knownSymbol("asyncIterator")]) ? it.call(obj) : (obj = obj[__knownSymbol("iterator")](), it = {}, method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it);
 
 // src/render.ts
 import * as ReactDomServer from "react-dom/server";
 import { convert } from "html-to-text";
-import pretty from "pretty";
+
+// src/utils/pretty.ts
+import { html } from "js-beautify";
+var defaults = {
+  unformatted: ["code", "pre", "em", "strong", "span"],
+  indent_inner_html: true,
+  indent_char: " ",
+  indent_size: 2,
+  sep: "\n"
+};
+var pretty = (str, options = {}) => {
+  return html(str, __spreadValues(__spreadValues({}, defaults), options));
+};
+
+// src/plain-text-selectors.ts
+var plainTextSelectors = [
+  { selector: "img", format: "skip" },
+  { selector: "#__react-email-preview", format: "skip" },
+  {
+    selector: "a",
+    options: { linkBrackets: false }
+  }
+];
+
+// src/render.ts
 var render = (component, options) => {
   if (options == null ? void 0 : options.plainText) {
     return renderAsPlainText(component, options);
@@ -35,51 +81,65 @@ var render = (component, options) => {
   }
   return document;
 };
-var renderAsPlainText = (component, _options) => {
-  return convert(ReactDomServer.renderToStaticMarkup(component), {
-    selectors: [
-      { selector: "img", format: "skip" },
-      { selector: "#__react-email-preview", format: "skip" }
-    ]
-  });
+var renderAsPlainText = (component, options) => {
+  return convert(ReactDomServer.renderToStaticMarkup(component), __spreadValues({
+    selectors: plainTextSelectors
+  }, (options == null ? void 0 : options.plainText) === true ? options.htmlToTextOptions : {}));
 };
 
 // src/render-async.ts
 import { convert as convert2 } from "html-to-text";
-import pretty2 from "pretty";
+var decoder = new TextDecoder("utf-8");
 var readStream = (readableStream) => __async(void 0, null, function* () {
-  const reader = readableStream.getReader();
-  const chunks = [];
-  while (true) {
-    const { value, done } = yield reader.read();
-    if (done) {
-      break;
+  let result = "";
+  if ("allReady" in readableStream) {
+    const reader = readableStream.getReader();
+    while (true) {
+      const { value, done } = yield reader.read();
+      if (done) {
+        break;
+      }
+      result += decoder.decode(value);
+    }
+  } else {
+    try {
+      for (var iter = __forAwait(readableStream), more, temp, error; more = !(temp = yield iter.next()).done; more = false) {
+        const chunk = temp.value;
+        result += decoder.decode(Buffer.from(chunk));
+      }
+    } catch (temp) {
+      error = [temp];
+    } finally {
+      try {
+        more && (temp = iter.return) && (yield temp.call(iter));
+      } finally {
+        if (error)
+          throw error[0];
+      }
     }
-    chunks.push(value);
   }
-  return chunks.map((chunk) => new TextDecoder("utf-8").decode(chunk)).join("");
+  return result;
 });
 var renderAsync = (component, options) => __async(void 0, null, function* () {
+  var _a;
   const reactDOMServer = (yield import("react-dom/server")).default;
-  const renderToStream = reactDOMServer.renderToReadableStream || reactDOMServer.renderToString || reactDOMServer.renderToPipeableStream;
+  const renderToStream = (_a = reactDOMServer.renderToReadableStream) != null ? _a : reactDOMServer.renderToStaticNodeStream;
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-  const readableStream = yield renderToStream(component);
-  const html = typeof readableStream === "string" ? readableStream : yield readStream(readableStream);
+  const htmlOrReadableStream = yield renderToStream(component);
+  const html2 = typeof htmlOrReadableStream === "string" ? htmlOrReadableStream : yield readStream(htmlOrReadableStream);
   if (options == null ? void 0 : options.plainText) {
-    return convert2(html, {
-      selectors: [
-        { selector: "img", format: "skip" },
-        { selector: "#__react-email-preview", format: "skip" }
-      ]
-    });
+    return convert2(html2, __spreadValues({
+      selectors: plainTextSelectors
+    }, options.htmlToTextOptions));
   }
-  const document = `${doctype}${html}`;
+  const document = `${doctype}${html2}`;
   if (options == null ? void 0 : options.pretty) {
-    return pretty2(document);
+    return pretty(document);
   }
   return document;
 });
 export {
+  plainTextSelectors,
   render,
   renderAsync
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/render",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Transform React components into HTML email templates",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -24,7 +24,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/resendlabs/react-email.git",
+    "url": "https://github.com/resend/react-email.git",
     "directory": "packages/render"
   },
   "keywords": [
@@ -36,15 +36,18 @@
   },
   "dependencies": {
     "html-to-text": "9.0.5",
-    "pretty": "2.0.0",
+    "js-beautify": "^1.14.11",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/preset-react": "7.22.5",
+    "@edge-runtime/vm": "3.1.7",
     "@types/html-to-text": "9.0.1",
-    "@types/pretty": "2.0.1",
+    "@types/js-beautify": "1.14.3",
+    "jsdom": "23.0.1",
     "typescript": "5.1.6",
+    "vitest": "0.34.6",
     "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"
   },

package/readme.md

@@ -6,7 +6,7 @@
 <div align="center">
 <a href="https://react.email">Website</a> 
 <span> · </span>
-<a href="https://github.com/resendlabs/react-email">GitHub</a> 
+<a href="https://github.com/resend/react-email">GitHub</a> 
 <span> · </span>
 <a href="https://react.email/discord">Discord</a>
 </div>