@faire/mjml-react/utils/render-to-json.js

React component library to generate the HTML emails on the fly

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderToJSON = renderToJSON;
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, ...rest } = props;
        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;
}
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)));
}