@builder.io/mitosis/dist/src/generators/template/generator.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.componentToTemplate = void 0;
const event_handlers_1 = require("../../helpers/event-handlers");
const standalone_1 = require("prettier/standalone");
const html_tags_1 = require("../../constants/html_tags");
const dedent_1 = require("../../helpers/dedent");
const fast_clone_1 = require("../../helpers/fast-clone");
const get_state_object_string_1 = require("../../helpers/get-state-object-string");
const collect_css_1 = require("../../helpers/styles/collect-css");
const plugins_1 = require("../../modules/plugins");
const mitosis_node_1 = require("../../types/mitosis-node");
const mappers = {
    Fragment: (json, options) => {
        return `<div>${json.children.map((item) => blockToTemplate(item, options)).join('\n')}</div>`;
    },
};
// TODO: spread support
const blockToTemplate = (json, options = {}) => {
    var _a, _b, _c, _d, _e;
    if (mappers[json.name]) {
        return mappers[json.name](json, options);
    }
    if (json.properties._text) {
        return json.properties._text;
    }
    if (json.bindings._text) {
        return `\${${(_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code}}`;
    }
    let str = '';
    if ((0, mitosis_node_1.checkIsForNode)(json)) {
        str += `\${${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}?.map(${json.scope.forName} => \``;
        if (json.children) {
            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
        }
        str += '`).join("")}';
    }
    else if (json.name === 'Show') {
        str += `\${!(${(_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code}) ? '' : \``;
        if (json.children) {
            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
        }
        str += '`}';
    }
    else {
        str += `<${json.name} `;
        // TODO: JS iteration or with helper
        // if (json.bindings._spread === '_spread') {
        //   str += `
        //       {% for _attr in ${json.bindings._spread} %}
        //         {{ _attr[0] }}="{{ _attr[1] }}"
        //       {% endfor %}
        //     `;
        // }
        for (const key in json.properties) {
            const value = json.properties[key];
            str += ` ${key}="${value}" `;
        }
        for (const key in json.bindings) {
            if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread' || key === 'ref' || key === 'css') {
                continue;
            }
            const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
            // TODO: proper babel transform to replace. Util for this
            const useValue = value;
            if ((0, event_handlers_1.checkIsEvent)(key)) {
                // Do nothing
            }
            else {
                str += ` ${key}="\${${useValue}}" `;
            }
        }
        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
            return str + ' />';
        }
        str += '>';
        if (json.children) {
            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
        }
        str += `</${json.name}>`;
    }
    return str;
};
// TODO: add JS support similar to componentToHtml()
const componentToTemplate = (options = {}) => ({ component }) => {
    let json = (0, fast_clone_1.fastClone)(component);
    if (options.plugins) {
        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
    }
    const css = (0, collect_css_1.collectCss)(json);
    if (options.plugins) {
        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
    }
    let str = json.children.map((item) => blockToTemplate(item)).join('\n');
    if (css.trim().length) {
        str += `<style>${css}</style>`;
    }
    str = (0, dedent_1.dedent) `
    export default function template(props) {
      let state = ${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}

      return \`${str.replace(/\s+/g, ' ')}\`
    }
  
  `;
    if (options.plugins) {
        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
    }
    if (options.prettier !== false) {
        try {
            str = (0, standalone_1.format)(str, {
                parser: 'typescript',
                htmlWhitespaceSensitivity: 'ignore',
                plugins: [
                    // To support running in browsers
                    require('prettier/parser-typescript'),
                    require('prettier/parser-postcss'),
                    require('prettier/parser-babel'),
                ],
            });
        }
        catch (err) {
            console.warn('Could not prettify', { string: str }, err);
        }
    }
    if (options.plugins) {
        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
    }
    return str;
};
exports.componentToTemplate = componentToTemplate;