@builder.io/mitosis/dist/src/plugins/compile-away-components.js

Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.compileAwayComponents = exports.getRenderOptions = void 0;
const lodash_1 = require("lodash");
const legacy_1 = __importDefault(require("neotraverse/legacy"));
const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
const getRenderOptions = (node) => {
    return {
        ...(0, lodash_1.mapValues)(node.properties, (value) => `"${value}"`),
        ...(0, lodash_1.mapValues)(node.bindings, (value) => `{${value}}`),
    };
};
exports.getRenderOptions = getRenderOptions;
/**
 * @example
 *    componentToReact(mitosisJson, {
 *      plugins: [
 *        compileAwayComponents({
 *          Image: (node) => {
 *             return jsx(`
 *               <div>
 *                 <img src="${node.properties.image}" />
 *               </div>
 *             `);
 *          }
 *        })
 *      ]
 *    })
 */
const compileAwayComponents = (pluginOptions) => (options) => ({
    json: {
        pre: (json) => {
            (0, legacy_1.default)(json).forEach(function (item) {
                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
                    const mapper = pluginOptions.components[item.name];
                    if (mapper) {
                        const result = mapper(item, this);
                        if (result) {
                            this.update(result);
                        }
                    }
                }
            });
        },
    },
});
exports.compileAwayComponents = compileAwayComponents;