@faire/mjml-react
Version:
React component library to generate the HTML emails on the fly
117 lines (116 loc) • 4.5 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderToJSON = void 0;
const react_1 = __importDefault(require("react"));
const server_1 = __importDefault(require("react-dom/server"));
const react_reconciler_1 = __importDefault(require("react-reconciler"));
const render_utils_1 = require("./render-utils");
const reconciler = (0, react_reconciler_1.default)({
supportsMutation: true,
isPrimaryRenderer: true,
createTextInstance(text /* rootContainerInstance, hostContext, internalInstanceHandle,*/) {
return text;
},
createInstance(type, props /* rootContainerInstance, hostContext */) {
const { children, dangerouslySetInnerHTML } = props, rest = __rest(props, ["children", "dangerouslySetInnerHTML"]);
const res = {
tagName: type,
attributes: rest,
};
Object.keys(res.attributes).forEach((key) => {
const attrKey = res.attributes[key];
if (attrKey === undefined) {
delete res.attributes[key];
}
if (typeof attrKey === "string") {
res.attributes[key] = (0, render_utils_1.escapeTextForBrowser)(attrKey);
}
});
if (!type.startsWith("mj")) {
return {
type,
props,
children: [],
isReact: true,
};
}
if (props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html) {
// using replace to prevent issue with $ sign in MJML
// https://github.com/mjmlio/mjml2json#L145
res.content = props.dangerouslySetInnerHTML.__html.replace("$", "$");
}
return res;
},
appendChildToContainer(container, child) {
(0, render_utils_1.trimContent)(child);
container.resultObj = child;
},
appendInitialChild(parent, child) {
if (child.isReact) {
if (parent.isReact) {
parent.children.push(child);
}
else {
const reactElement = toReactElement(child);
if (!parent.content) {
parent.content = "";
}
parent.content += server_1.default.renderToStaticMarkup(reactElement);
}
}
else if (typeof child === "string") {
if (!child) {
return;
}
if (parent.isReact) {
parent.children.push(child);
}
else {
if (!parent.content) {
parent.content = "";
}
parent.content += (0, render_utils_1.escapeTextForBrowser)(child);
}
}
else {
if (!parent.children) {
parent.children = [];
}
parent.children.push(child);
}
},
prepareForCommit: render_utils_1.noop,
resetAfterCommit: render_utils_1.noop,
clearContainer: render_utils_1.noop,
appendChild: render_utils_1.noop,
finalizeInitialChildren: render_utils_1.noop,
getChildHostContext: render_utils_1.noop,
getRootHostContext: render_utils_1.noop,
shouldSetTextContent: render_utils_1.noop,
});
function renderToJSON(whatToRender) {
const container = reconciler.createContainer({}, false, false);
reconciler.updateContainer(whatToRender, container, null, null);
return container.containerInfo.resultObj;
}
exports.renderToJSON = renderToJSON;
function toReactElement(element) {
if (element.children.length === 0) {
return react_1.default.createElement(element.type, element.props);
}
return react_1.default.createElement(element.type, element.props, element.children.map((child) => typeof child === "string" ? child : toReactElement(child)));
}