@react-email/render
Version:
Transform React components into HTML email templates
240 lines (233 loc) • 7.96 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
// src/browser/index.ts
var index_exports = {};
__export(index_exports, {
plainTextSelectors: () => plainTextSelectors,
pretty: () => pretty,
render: () => render,
renderAsync: () => renderAsync
});
module.exports = __toCommonJS(index_exports);
// src/browser/render.tsx
var import_html_to_text = require("html-to-text");
var import_react = require("react");
// src/shared/plain-text-selectors.ts
var plainTextSelectors = [
{ selector: "img", format: "skip" },
{ selector: "[data-skip-in-text=true]", format: "skip" },
{
selector: "a",
options: { linkBrackets: false }
}
];
// src/shared/utils/pretty.ts
var html = __toESM(require("prettier/plugins/html"));
var import_standalone = require("prettier/standalone");
function recursivelyMapDoc(doc, callback) {
if (Array.isArray(doc)) {
return doc.map((innerDoc) => recursivelyMapDoc(innerDoc, callback));
}
if (typeof doc === "object") {
if (doc.type === "group") {
return __spreadProps(__spreadValues({}, doc), {
contents: recursivelyMapDoc(doc.contents, callback),
expandedStates: recursivelyMapDoc(
doc.expandedStates,
callback
)
});
}
if ("contents" in doc) {
return __spreadProps(__spreadValues({}, doc), {
contents: recursivelyMapDoc(doc.contents, callback)
});
}
if ("parts" in doc) {
return __spreadProps(__spreadValues({}, doc), {
parts: recursivelyMapDoc(doc.parts, callback)
});
}
if (doc.type === "if-break") {
return __spreadProps(__spreadValues({}, doc), {
breakContents: recursivelyMapDoc(doc.breakContents, callback),
flatContents: recursivelyMapDoc(doc.flatContents, callback)
});
}
}
return callback(doc);
}
var modifiedHtml = __spreadValues({}, html);
if (modifiedHtml.printers) {
const previousPrint = modifiedHtml.printers.html.print;
modifiedHtml.printers.html.print = (path, options, print, args) => {
const node = path.getNode();
const rawPrintingResult = previousPrint(path, options, print, args);
if (node.type === "ieConditionalComment") {
const printingResult = recursivelyMapDoc(rawPrintingResult, (doc) => {
if (typeof doc === "object" && doc.type === "line") {
return doc.soft ? "" : " ";
}
return doc;
});
return printingResult;
}
return rawPrintingResult;
};
}
var defaults = {
endOfLine: "lf",
tabWidth: 2,
plugins: [modifiedHtml],
bracketSameLine: true,
parser: "html"
};
var pretty = (str, options = {}) => {
return (0, import_standalone.format)(str.replaceAll("\0", ""), __spreadValues(__spreadValues({}, defaults), options));
};
// 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* () {
const chunks = [];
if ("pipeTo" in stream) {
const writableStream = new WritableStream({
write(chunk) {
chunks.push(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
}
}
);
}
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 = (node, options) => __async(void 0, null, function* () {
const suspendedElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: node });
const reactDOMServer = yield import("react-dom/server").then(
// This is beacuse react-dom/server is CJS
(m) => m.default
);
let html2;
if (Object.hasOwn(reactDOMServer, "renderToReadableStream")) {
html2 = yield readStream(
yield reactDOMServer.renderToReadableStream(suspendedElement)
);
} else {
yield new Promise((resolve, reject) => {
const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
onAllReady() {
return __async(this, null, function* () {
html2 = yield readStream(stream);
resolve();
});
},
onError(error) {
reject(error);
}
});
});
}
if (options == null ? void 0 : options.plainText) {
return (0, import_html_to_text.convert)(html2, __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 document = `${doctype}${html2.replace(/<!DOCTYPE.*?>/, "")}`;
if (options == null ? void 0 : options.pretty) {
return pretty(document);
}
return document;
});
// src/browser/index.ts
var renderAsync = (element, options) => {
return render(element, options);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
plainTextSelectors,
pretty,
render,
renderAsync
});