@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/parsers/builder/builder.js

@@ -0,0 +1,1198 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractMitosisStateFromBuilderState = exports.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = exports.getStyleStringFromBlock = void 0;
+const generator_1 = require("../../generators/builder/generator");
+const symbol_processor_1 = require("../../symbols/symbol-processor");
+const babel = __importStar(require("@babel/core"));
+const generator_2 = __importDefault(require("@babel/generator"));
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const t = __importStar(require("@babel/types"));
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const media_sizes_1 = require("../../constants/media-sizes");
+const bindings_1 = require("../../helpers/bindings");
+const capitalize_1 = require("../../helpers/capitalize");
+const create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
+const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const parsers_1 = require("../../helpers/parsers");
+const jsx_1 = require("../jsx");
+const state_1 = require("../jsx/state");
+const helpers_1 = require("./helpers");
+// Omit some superflous styles that can come from Builder's web importer
+const styleOmitList = [
+    'backgroundRepeatX',
+    'backgroundRepeatY',
+    'backgroundPositionX',
+    'backgroundPositionY',
+];
+const getCssFromBlock = (block) => {
+    var _a;
+    const blockSizes = Object.keys(block.responsiveStyles || {}).filter((size) => media_sizes_1.sizeNames.includes(size));
+    let css = {};
+    for (const size of blockSizes) {
+        if (size === 'large') {
+            css = (0, lodash_1.omit)({
+                ...css,
+                ...(_a = block.responsiveStyles) === null || _a === void 0 ? void 0 : _a.large,
+            }, styleOmitList);
+        }
+        else if (block.responsiveStyles && block.responsiveStyles[size]) {
+            const mediaQueryKey = `@media (max-width: ${media_sizes_1.sizes[size].max}px)`;
+            css[mediaQueryKey] = (0, lodash_1.omit)({
+                ...css[mediaQueryKey],
+                ...block.responsiveStyles[size],
+            }, styleOmitList);
+        }
+    }
+    return css;
+};
+const verifyIsValid = (code) => {
+    try {
+        if (babel.parse(code)) {
+            return { valid: true, error: null };
+        }
+    }
+    catch (err) {
+        return { valid: false, error: null };
+    }
+    return { valid: false, error: null };
+};
+const getActionBindingsFromBlock = (block, options) => {
+    var _a;
+    const actions = {
+        ...block.actions,
+        ...(_a = block.code) === null || _a === void 0 ? void 0 : _a.actions,
+    };
+    const bindings = {};
+    const actionKeys = Object.keys(actions);
+    if (actionKeys.length) {
+        for (const key of actionKeys) {
+            let value = actions[key];
+            // Skip empty values
+            if (!value.trim()) {
+                continue;
+            }
+            const { error, valid } = verifyIsValid(value);
+            if (!valid) {
+                console.warn('Skipping invalid binding', error);
+                continue;
+            }
+            const useKey = `on${(0, lodash_1.upperFirst)(key)}`;
+            const asyncPrefix = `(async () =>`;
+            const asyncSuffix = ')()';
+            const isAsync = value.startsWith(asyncPrefix) && value.endsWith(asyncSuffix);
+            if (isAsync) {
+                value = value.slice(asyncPrefix.length, -asyncSuffix.length);
+            }
+            bindings[useKey] = (0, bindings_1.createSingleBinding)({
+                code: `${wrapBindingIfNeeded(value, options)}`,
+                async: isAsync ? true : undefined,
+            });
+        }
+    }
+    return bindings;
+};
+const getStyleStringFromBlock = (block, options) => {
+    var _a, _b;
+    const styleBindings = {};
+    const responsiveStyles = {};
+    let styleString = '';
+    if (block.bindings) {
+        for (const key in block.bindings) {
+            if (!key.includes('.')) {
+                continue;
+            }
+            let code = ((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key];
+            const verifyCode = verifyIsValid(code);
+            if (verifyCode.valid) {
+                code = processBoundLogic(code);
+            }
+            else {
+                if (options.escapeInvalidCode) {
+                    code = '`' + code + ' [INVALID CODE]`';
+                }
+                else {
+                    console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                    continue;
+                }
+            }
+            if (key.includes('style')) {
+                const styleProperty = key.split('.')[1];
+                styleBindings[styleProperty] = convertExportDefaultToReturn(code);
+                /**
+                 * responsiveStyles that are bound need to be merged into media queries.
+                 * Example:
+                 * responsiveStyles.large.color: "state.color"
+                 * responsiveStyles.large.background: "state.background"
+                 * Should get mapped to:
+                 * @media (max-width: 1200px): {
+                 *   color: state.color,
+                 *   background: state.background
+                 * }
+                 */
+            }
+            else if (key.includes('responsiveStyles')) {
+                const parts = key.split('.');
+                const size = parts[parts.length - 2];
+                const prop = parts[parts.length - 1];
+                const mediaKey = `@media (max-width: ${media_sizes_1.sizes[size].max}px)`;
+                /**
+                 * The media query key has spaces/special characters so we need to ensure
+                 * that the key is always a string otherwise there will be runtime errors.
+                 */
+                const objKey = `"${mediaKey}"`;
+                responsiveStyles[objKey] = {
+                    ...responsiveStyles[objKey],
+                    [prop]: code,
+                };
+            }
+        }
+        /**
+         * All binding values are strings, but we don't want to stringify the values
+         * within the style object otherwise the bindings will be evaluated as strings.
+         * As a result, do not use JSON.stringify here.
+         */
+        for (const key in responsiveStyles) {
+            const styles = Object.keys(responsiveStyles[key]);
+            const keyValues = styles.map((prop) => `${prop}: ${responsiveStyles[key][prop]}`);
+            const stringifiedObject = `{ ${keyValues.join(', ')} }`;
+            styleBindings[key] = stringifiedObject;
+        }
+    }
+    const styleKeys = Object.keys(styleBindings);
+    if (styleKeys.length) {
+        styleString = '{';
+        styleKeys.forEach((key) => {
+            // TODO: figure out how to have multiline style bindings here
+            // I tried (function{binding code})() and that did not work
+            styleString += ` ${key}: ${(options.includeBuilderExtras
+                ? wrapBinding(styleBindings[key])
+                : styleBindings[key]
+                    .replace(/var _virtual_index\s*=\s*/g, '')
+                    .replace(/;*\s*return _virtual_index;*/, '')).replace(/;$/, '')},`;
+        });
+        styleString += ' }';
+    }
+    return styleString;
+};
+exports.getStyleStringFromBlock = getStyleStringFromBlock;
+const hasComponent = (block) => {
+    var _a;
+    return Boolean((_a = block.component) === null || _a === void 0 ? void 0 : _a.name);
+};
+const hasProperties = (block) => {
+    return Boolean(block.properties && Object.keys(block.properties).length);
+};
+const hasBindings = (block) => {
+    return Boolean(block.bindings && Object.keys(block.bindings).length);
+};
+const hasStyles = (block) => {
+    if (block.responsiveStyles) {
+        for (const key in block.responsiveStyles) {
+            if (Object.keys(block.responsiveStyles[key]).length) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const wrapBindingIfNeeded = (value, options) => {
+    if (options.includeBuilderExtras) {
+        return wrapBinding(value);
+    }
+    if ((value === null || value === void 0 ? void 0 : value.includes(';')) && !(value === null || value === void 0 ? void 0 : value.trim().startsWith('{'))) {
+        return `{ ${value} }`;
+    }
+    return value;
+};
+/**
+ * Sanitizes a symbol name to be a valid JSX component name.
+ * - Converts to PascalCase
+ * - Removes invalid characters
+ * - Adds "Symbol" prefix to avoid collisions
+ * - Returns "Symbol" if no valid name can be generated
+ */
+const sanitizeSymbolName = (name) => {
+    if (!name || typeof name !== 'string') {
+        return 'Symbol';
+    }
+    // Remove special characters and split into words
+    const words = name
+        .replace(/[^a-zA-Z0-9\s]/g, ' ')
+        .split(/\s+/)
+        .filter(Boolean);
+    if (words.length === 0) {
+        return 'Symbol';
+    }
+    // Convert to PascalCase
+    const pascalCase = words
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+    // Add Symbol prefix to avoid collisions with other components
+    return `Symbol${pascalCase}`;
+};
+const getBlockActions = (block, options) => {
+    var _a;
+    const obj = {
+        ...block.actions,
+        ...(_a = block.code) === null || _a === void 0 ? void 0 : _a.actions,
+    };
+    if (options.includeBuilderExtras) {
+        for (const key in obj) {
+            const value = obj[key];
+            // TODO: plugin/option for for this
+            obj[key] = wrapBinding(value);
+        }
+    }
+    return obj;
+};
+const getBlockActionsAsBindings = (block, options) => {
+    return (0, lodash_1.mapKeys)(getBlockActions(block, options), (value, key) => `on${(0, capitalize_1.capitalize)(key)}`);
+};
+const isValidBindingKey = (str) => {
+    return Boolean(str && /^[a-z0-9_\.]$/i.test(str));
+};
+const getBlockNonActionBindings = (block, options) => {
+    var _a;
+    const obj = {
+        ...block.bindings,
+        ...(_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings,
+    };
+    if (options.includeBuilderExtras) {
+        for (const key in obj) {
+            if (!isValidBindingKey(key)) {
+                console.warn('Skipping invalid binding key:', key);
+                continue;
+            }
+            const value = obj[key];
+            // TODO: verify the bindings are valid
+            let { valid, error } = verifyIsValid(value);
+            if (!valid) {
+                ({ valid, error } = verifyIsValid(`function () {  ${value} }`));
+            }
+            if (valid) {
+                obj[key] = wrapBinding(value);
+            }
+            else {
+                console.warn('Skipping invalid code:', error);
+                delete obj[key];
+            }
+        }
+    }
+    return obj;
+};
+function wrapBinding(value) {
+    if (!value) {
+        return value;
+    }
+    if (!(value.includes(';') || value.match(/(^|\s|;)return[^a-z0-9A-Z]/))) {
+        return value;
+    }
+    return `(() => {
+    try { ${(0, parsers_1.isExpression)(value) ? 'return ' : ''}${value} }
+    catch (err) {
+      console.warn('Builder code error', err);
+    }
+  })()`;
+}
+const getBlockBindings = (block, options) => {
+    const obj = {
+        ...getBlockNonActionBindings(block, options),
+        ...getBlockActionsAsBindings(block, options),
+    };
+    return obj;
+};
+// add back if this direction (blocks as children not prop) is desired
+exports.symbolBlocksAsChildren = false;
+const componentMappers = {
+    Symbol(block, options) {
+        var _a, _b, _c, _d, _e;
+        let css = getCssFromBlock(block);
+        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
+        const actionBindings = getActionBindingsFromBlock(block, options);
+        const symbolOptions = (_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol;
+        const symbolName = ((_c = symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.content) === null || _c === void 0 ? void 0 : _c.name) || (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.name);
+        const componentName = ((_d = block.component) === null || _d === void 0 ? void 0 : _d.name) !== 'Symbol'
+            ? (_e = block.component) === null || _e === void 0 ? void 0 : _e.name // Use name already set by extractSymbols
+            : sanitizeSymbolName(symbolName);
+        // Extract inputs from symbol.data to make them visible as top-level JSX props
+        //
+        // In Builder.io, Symbol components can receive inputs through symbol.options.data,
+        // which contains key-value pairs for props passed to the symbol instance.
+        //
+        // We extract these from the nested data structure and create individual bindings
+        // for each input so they become first-class props in the generated code
+        // (e.g., <MySymbol title="Hello" count={5} />) instead of being buried in metadata
+        // (e.g., <MySymbol symbol={{ data: { title: "Hello", count: 5 } }} />).
+        //
+        // This transformation enables proper prop passing and makes the component usage
+        // more idiomatic in the target framework.
+        const symbolData = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.data) || {};
+        const inputBindings = {};
+        const hasInputs = Object.keys(symbolData).length > 0;
+        // Only extract inputs if there are any to avoid data loss
+        if (hasInputs) {
+            // Create individual bindings for each input
+            for (const key in symbolData) {
+                inputBindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: json5_1.default.stringify(symbolData[key]),
+                });
+            }
+        }
+        // Keep symbol metadata - only omit data if we extracted inputs
+        const symbolMetadata = hasInputs ? (0, lodash_1.omit)(symbolOptions, 'data') : symbolOptions;
+        const bindings = {
+            symbol: (0, bindings_1.createSingleBinding)({
+                code: JSON.stringify(symbolMetadata),
+            }),
+            ...inputBindings,
+            ...actionBindings,
+            ...(styleString && {
+                style: (0, bindings_1.createSingleBinding)({ code: styleString }),
+            }),
+            ...(Object.keys(css).length && {
+                css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
+            }),
+        };
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            name: componentName,
+            type: 'user-symbol',
+            bindings: bindings,
+            meta: (0, exports.getMetaFromBlock)(block, options),
+        });
+    },
+    ...(!exports.symbolBlocksAsChildren
+        ? {}
+        : {
+            Symbol(block, options) {
+                var _a, _b, _c;
+                let css = getCssFromBlock(block);
+                const styleString = (0, exports.getStyleStringFromBlock)(block, options);
+                const actionBindings = getActionBindingsFromBlock(block, options);
+                const content = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.content;
+                const blocks = (_b = content === null || content === void 0 ? void 0 : content.data) === null || _b === void 0 ? void 0 : _b.blocks;
+                if (blocks) {
+                    content.data.blocks = null;
+                }
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'Symbol',
+                    bindings: {
+                        // TODO: this doesn't use all attrs
+                        symbol: (0, bindings_1.createSingleBinding)({
+                            code: JSON.stringify({
+                                data: (_c = block.component) === null || _c === void 0 ? void 0 : _c.options.symbol.content.data,
+                                content: content, // TODO: convert to <SymbolInternal>...</SymbolInternal> so can be parsed
+                            }),
+                        }),
+                        ...actionBindings,
+                        ...(styleString && {
+                            style: (0, bindings_1.createSingleBinding)({ code: styleString }),
+                        }),
+                        ...(Object.keys(css).length && {
+                            css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
+                        }),
+                    },
+                    meta: (0, exports.getMetaFromBlock)(block, options),
+                    children: !blocks
+                        ? []
+                        : [
+                            (0, create_mitosis_node_1.createMitosisNode)({
+                                // TODO: the Builder generator side of this converting to blocks
+                                name: 'BuilderSymbolContents',
+                                children: blocks.map((item) => (0, exports.builderElementToMitosisNode)(item, options)),
+                            }),
+                        ],
+                });
+            },
+        }),
+    Columns(block, options) {
+        var _a, _b;
+        const node = (0, exports.builderElementToMitosisNode)(block, options, {
+            skipMapper: true,
+        });
+        delete node.bindings.columns;
+        delete node.properties.columns;
+        node.children =
+            ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map((col, index) => (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Column',
+                /**
+                 * If width if undefined, do not create a binding otherwise its JSX will
+                 * be <Column width={} /> which is not valid due to the empty expression.
+                 */
+                ...(col.width != null && {
+                    bindings: {
+                        width: { code: col.width.toString() },
+                    },
+                }),
+                ...(col.link && {
+                    properties: {
+                        link: col.link,
+                    },
+                }),
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: col.blocks.map((col) => (0, exports.builderElementToMitosisNode)(col, options)),
+            }))) || [];
+        return node;
+    },
+    PersonalizationContainer(block, options) {
+        var _a, _b;
+        const node = (0, exports.builderElementToMitosisNode)(block, options, {
+            skipMapper: true,
+        });
+        delete node.bindings.variants;
+        delete node.properties.variants;
+        const newChildren = ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.variants) === null || _b === void 0 ? void 0 : _b.map((variant) => {
+            const variantNode = (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Variant',
+                properties: {
+                    name: variant.name,
+                    startDate: variant.startDate,
+                    endDate: variant.endDate,
+                },
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: variant.blocks.map((col) => (0, exports.builderElementToMitosisNode)(col, options)),
+            });
+            const queryOptions = variant.query;
+            if (Array.isArray(queryOptions)) {
+                variantNode.bindings.query = (0, bindings_1.createSingleBinding)({
+                    code: JSON.stringify(queryOptions.map((q) => (0, lodash_1.omit)(q, '@type'))),
+                });
+            }
+            else if (queryOptions) {
+                variantNode.bindings.query = (0, bindings_1.createSingleBinding)({
+                    code: JSON.stringify((0, lodash_1.omit)(queryOptions, '@type')),
+                });
+            }
+            return variantNode;
+        })) || [];
+        const defaultVariant = (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'Variant',
+            properties: {
+                default: '',
+            },
+            children: node.children,
+        });
+        newChildren.push(defaultVariant);
+        node.children = newChildren;
+        return node;
+    },
+    'Shopify:For': (block, options) => {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'For',
+            bindings: {
+                each: (0, bindings_1.createSingleBinding)({
+                    code: `state.${block.component.options.repeat.collection}`,
+                }),
+            },
+            scope: {
+                forName: block.component.options.repeat.itemName,
+            },
+            meta: (0, exports.getMetaFromBlock)(block, options),
+            children: (block.children || []).map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options)),
+        });
+    },
+};
+const processBoundLogic = (code) => {
+    const ast = babel.parse(code);
+    if (!ast)
+        return code;
+    let replacedWithReturn = false;
+    (0, traverse_1.default)(ast, {
+        ExportDefaultDeclaration(path) {
+            const exportedNode = path.node.declaration;
+            if (t.isExpression(exportedNode)) {
+                const returnStatement = t.returnStatement(exportedNode);
+                path.replaceWith(returnStatement);
+                replacedWithReturn = true;
+            }
+        },
+    });
+    if (replacedWithReturn) {
+        return (0, generator_2.default)(ast).code;
+    }
+    return code;
+};
+const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const { includeSpecialBindings = true } = options;
+    const localizedValues = {};
+    if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
+        block.component.name = 'Fragment';
+    }
+    const forBinding = (_b = block.repeat) === null || _b === void 0 ? void 0 : _b.collection;
+    if (forBinding) {
+        const isFragment = ((_c = block.component) === null || _c === void 0 ? void 0 : _c.name) === 'Fragment';
+        // TODO: handle having other things, like a repeat too
+        if (isFragment) {
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'For',
+                bindings: {
+                    each: (0, bindings_1.createSingleBinding)({
+                        code: wrapBindingIfNeeded((_d = block.repeat) === null || _d === void 0 ? void 0 : _d.collection, options),
+                    }),
+                },
+                scope: {
+                    forName: ((_e = block.repeat) === null || _e === void 0 ? void 0 : _e.itemName) || 'item',
+                },
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: ((_f = block.children) === null || _f === void 0 ? void 0 : _f.map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options))) || [],
+            });
+        }
+        else {
+            const useBlock = ((_g = block.component) === null || _g === void 0 ? void 0 : _g.name) === 'Core:Fragment' && ((_h = block.children) === null || _h === void 0 ? void 0 : _h.length) === 1
+                ? block.children[0]
+                : block;
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'For',
+                bindings: {
+                    each: (0, bindings_1.createSingleBinding)({
+                        code: wrapBindingIfNeeded((_j = block.repeat) === null || _j === void 0 ? void 0 : _j.collection, options),
+                    }),
+                },
+                scope: {
+                    forName: ((_k = block.repeat) === null || _k === void 0 ? void 0 : _k.itemName) || 'item',
+                    indexName: '$index',
+                },
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: [(0, exports.builderElementToMitosisNode)((0, lodash_1.omit)(useBlock, 'repeat'), options)],
+            });
+        }
+    }
+    // Special builder properties
+    // TODO: support hide and repeat
+    const blockBindings = getBlockBindings(block, options);
+    let code = undefined;
+    if (blockBindings.show) {
+        code = wrapBindingIfNeeded(blockBindings.show, options);
+    }
+    else if (blockBindings.hide) {
+        code = `!(${wrapBindingIfNeeded(blockBindings.hide, options)})`;
+    }
+    if (code) {
+        const isFragment = ((_l = block.component) === null || _l === void 0 ? void 0 : _l.name) === 'Fragment';
+        // TODO: handle having other things, like a repeat too
+        if (isFragment) {
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Show',
+                bindings: { when: (0, bindings_1.createSingleBinding)({ code }) },
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: ((_m = block.children) === null || _m === void 0 ? void 0 : _m.map((child) => (0, exports.builderElementToMitosisNode)(child, options))) || [],
+            });
+        }
+        else {
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Show',
+                bindings: { when: (0, bindings_1.createSingleBinding)({ code }) },
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: [
+                    (0, exports.builderElementToMitosisNode)({
+                        ...block,
+                        code: {
+                            ...block.code,
+                            bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide'),
+                        },
+                        bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide'),
+                    }, options),
+                ],
+            });
+        }
+    }
+    const mapper = !_internalOptions.skipMapper &&
+        block.component &&
+        (componentMappers[block.component.name] ||
+            // Handle symbols that were renamed by extractSymbols (e.g., "SymbolButtonComponent")
+            // Check for symbol options or exact 'Symbol' name instead of name pattern
+            (((_p = (_o = block.component) === null || _o === void 0 ? void 0 : _o.options) === null || _p === void 0 ? void 0 : _p.symbol) || ((_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === 'Symbol'
+                ? componentMappers['Symbol']
+                : undefined));
+    if (mapper) {
+        return mapper(block, options);
+    }
+    const bindings = {};
+    const children = [];
+    const slots = {};
+    const blocksSlots = {};
+    if (blockBindings) {
+        for (const key in blockBindings) {
+            if (key === 'css') {
+                continue;
+            }
+            const useKey = key.replace(/^(component\.)?options\./, '');
+            if (!useKey.includes('.')) {
+                let code = blockBindings[key].code || blockBindings[key];
+                const verifyCode = verifyIsValid(code);
+                if (verifyCode.valid) {
+                    code = processBoundLogic(code);
+                }
+                else {
+                    if (options.escapeInvalidCode) {
+                        code = '`' + code + ' [INVALID CODE]`';
+                    }
+                    else {
+                        console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                        continue;
+                    }
+                }
+                bindings[useKey] = (0, bindings_1.createSingleBinding)({
+                    code,
+                });
+            }
+            else if (useKey.includes('style') && useKey.includes('.')) {
+                const styleProperty = useKey.split('.')[1];
+                // TODO: add me in
+                // styleBindings[styleProperty] =
+                //   block.code?.bindings?.[key] || blockBindings[key];
+            }
+        }
+    }
+    const properties = {
+        ...block.properties,
+        ...(options.includeBuilderExtras && {
+            ['builder-id']: block.id,
+            // class: `builder-block ${block.id} ${block.properties?.class || ''}`,
+        }),
+        ...(options.includeBuilderExtras && getBuilderPropsForSymbol(block)),
+    };
+    for (const key in properties) {
+        if (typeof properties[key] === 'object' &&
+            properties[key] !== null &&
+            properties[key]['@type'] === '@builder.io/core:LocalizedValue') {
+            const localizedValue = properties[key];
+            localizedValues[`properties.${key}`] = localizedValue;
+            properties[key] = localizedValue.Default;
+        }
+    }
+    if (block.layerName) {
+        properties.$name = block.layerName;
+    }
+    const linkUrl = block.linkUrl;
+    if (linkUrl) {
+        if (typeof linkUrl === 'object' &&
+            linkUrl !== null &&
+            linkUrl['@type'] === '@builder.io/core:LocalizedValue') {
+            properties.href = linkUrl.Default;
+            localizedValues['linkUrl'] = linkUrl;
+        }
+        else {
+            properties.href = linkUrl;
+        }
+    }
+    if ((_r = block.component) === null || _r === void 0 ? void 0 : _r.options) {
+        for (const key in block.component.options) {
+            const value = block.component.options[key];
+            const valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
+            const transformBldrElementToMitosisNode = (item) => {
+                const node = (0, exports.builderElementToMitosisNode)(item, {
+                    ...options,
+                    includeSpecialBindings: false,
+                });
+                return node;
+            };
+            if ((0, exports.isBuilderElement)(value)) {
+                slots[key] = [transformBldrElementToMitosisNode(value)];
+            }
+            else if (typeof value === 'string') {
+                properties[key] = value;
+            }
+            else if (typeof value === 'object' &&
+                value !== null &&
+                value['@type'] === '@builder.io/core:LocalizedValue') {
+                properties[key] = value.Default;
+                localizedValues[`component.options.${key}`] = value;
+            }
+            else if (valueIsArrayOfBuilderElements) {
+                const childrenElements = value
+                    .filter((item) => {
+                    var _a, _b;
+                    if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {
+                        return false;
+                    }
+                    return true;
+                })
+                    .map(transformBldrElementToMitosisNode);
+                slots[key] = childrenElements;
+            }
+            else if (options.enableBlocksSlots &&
+                !componentMappers[(_s = block.component) === null || _s === void 0 ? void 0 : _s.name] &&
+                (Array.isArray(value) || (typeof value === 'object' && value !== null))) {
+                /**
+                 * Builder Elements that have their own mappers should not use blocksSlots
+                 * even if the mapper is disabled via _internalOptions as it will cause
+                 * problems when trying to use the mapper in the future.
+                 */
+                const data = Array.isArray(value) ? [...value] : { ...value };
+                let hasElement = false;
+                (0, legacy_1.default)(data).forEach(function (d) {
+                    if ((0, exports.isBuilderElement)(d)) {
+                        /**
+                         * Replacing the Builder element with a Mitosis node in-place
+                         * allows us to assign to blockSlots while preserving the structure
+                         * of this deeply nested data.
+                         */
+                        this.update((0, exports.builderElementToMitosisNode)(d, options, _internalOptions));
+                        hasElement = true;
+                    }
+                });
+                // If no elements were updated then this is just a regular binding
+                if (hasElement) {
+                    blocksSlots[key] = data;
+                }
+                else {
+                    bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
+                }
+            }
+            else {
+                bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
+            }
+        }
+    }
+    const css = getCssFromBlock(block);
+    let styleString = (0, exports.getStyleStringFromBlock)(block, options);
+    const actionBindings = getActionBindingsFromBlock(block, options);
+    for (const binding in blockBindings) {
+        if (binding.startsWith('component.options') || binding.startsWith('options')) {
+            const value = blockBindings[binding];
+            const useKey = binding.replace(/^(component\.options\.|options\.)/, '');
+            bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: value });
+        }
+    }
+    // Add data attributes for Builder layer properties
+    const dataAttributes = {};
+    if (block.layerLocked !== undefined) {
+        dataAttributes['data-builder-layerLocked'] = String(block.layerLocked);
+    }
+    if (block.groupLocked !== undefined) {
+        dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
+    }
+    if (((_t = block.component) === null || _t === void 0 ? void 0 : _t.name) &&
+        /:/.test((_u = block.component) === null || _u === void 0 ? void 0 : _u.name) &&
+        !generator_1.builderBlockPrefixes.includes((_v = block.component) === null || _v === void 0 ? void 0 : _v.name.split(':')[0])) {
+        dataAttributes['data-builder-originalName'] = (_w = block.component) === null || _w === void 0 ? void 0 : _w.name;
+    }
+    const node = (0, create_mitosis_node_1.createMitosisNode)({
+        name: ((_y = (_x = block.component) === null || _x === void 0 ? void 0 : _x.name) === null || _y === void 0 ? void 0 : _y.replace(/[^a-z0-9]/gi, '')) ||
+            block.tagName ||
+            (block.linkUrl ? 'a' : 'div'),
+        properties: {
+            ...(block.component && includeSpecialBindings && { $tagName: block.tagName }),
+            ...(block.class && { class: block.class }),
+            ...properties,
+            ...dataAttributes,
+        },
+        bindings: {
+            ...bindings,
+            ...actionBindings,
+            ...(styleString && {
+                style: (0, bindings_1.createSingleBinding)({ code: styleString }),
+            }),
+            ...(css &&
+                Object.keys(css).length && {
+                css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
+            }),
+        },
+        slots: {
+            ...slots,
+        },
+        ...(Object.keys(blocksSlots).length > 0 && { blocksSlots }),
+        meta: {
+            ...(0, exports.getMetaFromBlock)(block, options),
+        },
+        ...(Object.keys(localizedValues).length && { localizedValues }),
+    });
+    node.children = children.concat((block.children || []).map((item) => (0, exports.builderElementToMitosisNode)(item, options)));
+    return node;
+};
+exports.builderElementToMitosisNode = builderElementToMitosisNode;
+const getBuilderPropsForSymbol = (block) => {
+    var _a, _b;
+    if (((_a = block.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+        const child = block.children[0];
+        const builderContentId = (_b = child.properties) === null || _b === void 0 ? void 0 : _b['builder-content-id'];
+        if (builderContentId) {
+            return { 'builder-content-id': builderContentId };
+        }
+    }
+    return undefined;
+};
+const getMetaFromBlock = (block, options) => {
+    const { includeMeta = false } = options;
+    return includeMeta
+        ? {
+            'builder-id': block.id,
+            ...block.meta,
+        }
+        : {};
+};
+exports.getMetaFromBlock = getMetaFromBlock;
+const getHooks = (content) => {
+    var _a, _b;
+    const code = convertExportDefaultToReturn(((_a = content.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = content.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '');
+    try {
+        return (0, jsx_1.parseJsx)(`
+    export default function TemporaryComponent() {
+      ${
+        // Mitosis parser looks for useStore to be a variable assignment,
+        // but in Builder that's not how it works. For now do a replace to
+        // easily resuse the same parsing code as this is the only difference
+        code.replace(`useStore(`, `var state = useStore(`)}
+    }`);
+    }
+    catch (err) {
+        console.warn('Could not parse js code as a Mitosis component body', err, code);
+        return null;
+    }
+};
+/**
+ * Take Builder custom jsCode and extract the contents of the useStore hook
+ * and return it as a JS object along with the inputted code with the hook
+ * code extracted
+ */
+function extractStateHook(code) {
+    const { types } = babel;
+    let state = {};
+    const body = (0, parsers_1.parseCode)(code);
+    const newBody = body.slice();
+    for (let i = 0; i < body.length; i++) {
+        const statement = body[i];
+        if (types.isExpressionStatement(statement)) {
+            const { expression } = statement;
+            // Check for useStore
+            if (types.isCallExpression(expression)) {
+                if (types.isIdentifier(expression.callee) && expression.callee.name === 'useStore') {
+                    const arg = expression.arguments[0];
+                    if (types.isObjectExpression(arg)) {
+                        state = (0, state_1.parseStateObjectToMitosisState)(arg);
+                        newBody.splice(i, 1);
+                    }
+                }
+                if (types.isMemberExpression(expression.callee)) {
+                    if (types.isIdentifier(expression.callee.object) &&
+                        expression.callee.object.name === 'Object') {
+                        if (types.isIdentifier(expression.callee.property) &&
+                            expression.callee.property.name === 'assign') {
+                            const arg = expression.arguments[1];
+                            if (types.isObjectExpression(arg)) {
+                                state = (0, state_1.parseStateObjectToMitosisState)(arg);
+                                newBody.splice(i, 1);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    const newCode = (0, generator_2.default)(types.program(newBody)).code || '';
+    return { code: newCode, state };
+}
+exports.extractStateHook = extractStateHook;
+/**
+ * Extracts Mitosis state from Builder state.
+ * @param mitosisState Mitosis state to update
+ * @param builderState Builder state to extract from
+ * @returns
+ */
+function extractMitosisStateFromBuilderState(mitosisState, builderState) {
+    if (!builderState)
+        return;
+    for (const key in builderState) {
+        let value = builderState[key];
+        if (typeof value === 'function' && !mitosisState[key]) {
+            mitosisState[key] = {
+                type: 'function',
+                code: value.toString(),
+            };
+            continue;
+        }
+        if (!mitosisState[key]) {
+            mitosisState[key] = {
+                type: 'property',
+                propertyType: 'normal',
+                code: JSON.stringify(value),
+            };
+        }
+    }
+}
+exports.extractMitosisStateFromBuilderState = extractMitosisStateFromBuilderState;
+function convertExportDefaultToReturn(code) {
+    try {
+        const { types } = babel;
+        const body = (0, parsers_1.parseCode)(code);
+        if (body.length === 0)
+            return code;
+        const newBody = body.slice();
+        for (let i = 0; i < body.length; i++) {
+            const statement = body[i];
+            if (types.isExportDefaultDeclaration(statement)) {
+                if (types.isCallExpression(statement.declaration) ||
+                    types.isExpression(statement.declaration)) {
+                    newBody[i] = types.returnStatement(statement.declaration);
+                }
+            }
+        }
+        return (0, generator_2.default)(types.program(newBody)).code || '';
+    }
+    catch (e) {
+        const error = e;
+        if (error.code === 'BABEL_PARSE_ERROR') {
+            return code;
+        }
+        else {
+            throw e;
+        }
+    }
+}
+exports.convertExportDefaultToReturn = convertExportDefaultToReturn;
+const updateBindings = (node, from, to) => {
+    (0, legacy_1.default)(node).forEach(function (item) {
+        if ((0, exports.isBuilderElement)(item)) {
+            if (item.bindings) {
+                for (const [key, value] of Object.entries(item.bindings)) {
+                    if (value === null || value === void 0 ? void 0 : value.includes(from)) {
+                        item.bindings[key] = value.replaceAll(from, to);
+                    }
+                }
+            }
+            if (item.actions) {
+                for (const [key, value] of Object.entries(item.actions)) {
+                    if (value === null || value === void 0 ? void 0 : value.includes(from)) {
+                        item.actions[key] = value.replaceAll(from, to);
+                    }
+                }
+            }
+        }
+    });
+    return node;
+};
+// TODO: maybe this should be part of the builder -> Mitosis part
+function extractSymbols(json) {
+    var _a, _b, _c, _d;
+    const subComponents = [];
+    const symbols = [];
+    (0, legacy_1.default)(json).forEach(function (item) {
+        var _a;
+        if ((0, exports.isBuilderElement)(item)) {
+            if (((_a = item.component) === null || _a === void 0 ? void 0 : _a.name) === 'Symbol') {
+                symbols.push({ element: item, depth: this.path.length, id: item.id });
+            }
+        }
+    });
+    const symbolsSortedDeepestFirst = (0, lodash_1.sortBy)(symbols, (info) => info.depth)
+        .reverse()
+        .map((el) => el.element);
+    let symbolsFound = 0;
+    for (const el of symbolsSortedDeepestFirst) {
+        const symbolValue = (_b = (_a = el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol;
+        const elContent = symbolValue === null || symbolValue === void 0 ? void 0 : symbolValue.content;
+        if (!elContent) {
+            console.warn('Symbol missing content', el.id);
+            if ((_c = el.component) === null || _c === void 0 ? void 0 : _c.options.symbol.content) {
+                delete el.component.options.symbol.content;
+            }
+            continue;
+        }
+        const symbolName = elContent.name || (symbolValue === null || symbolValue === void 0 ? void 0 : symbolValue.name);
+        const componentName = sanitizeSymbolName(symbolName);
+        el.component.name = componentName;
+        if ((_d = el.component) === null || _d === void 0 ? void 0 : _d.options.symbol.content) {
+            delete el.component.options.symbol.content;
+        }
+        subComponents.push({
+            content: elContent,
+            name: componentName,
+        });
+    }
+    return {
+        content: json,
+        subComponents,
+    };
+}
+const createBuilderElement = (options) => ({
+    '@type': '@builder.io/sdk:Element',
+    id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options),
+    ...options,
+});
+exports.createBuilderElement = createBuilderElement;
+const isBuilderElement = (el) => (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
+exports.isBuilderElement = isBuilderElement;
+const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    builderContent = (0, fast_clone_1.fastClone)(builderContent);
+    (0, legacy_1.default)(builderContent).forEach(function (elem) {
+        var _a, _b;
+        if ((0, exports.isBuilderElement)(elem)) {
+            // Try adding self-closing tags to void elements, since Builder Text
+            // blocks can contain arbitrary HTML
+            // List taken from https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+            // TODO: Maybe this should be using something more robust than a regular expression
+            const voidElemRegex = /(<area|base|br|col|embed|hr|img|input|keygen|link|meta|param|source|track|wbr[^>]+)>/gm;
+            try {
+                if (((_a = elem.component) === null || _a === void 0 ? void 0 : _a.name) === 'Text') {
+                    const text = elem.component.options.text;
+                    elem.component.options.text = text.replace(voidElemRegex, '$1 />');
+                    // Remove broken emojis
+                    const hasUnpairedSurrogate = /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/g;
+                    if (hasUnpairedSurrogate.test(text)) {
+                        elem.component.options.text = text.replace(hasUnpairedSurrogate, '');
+                    }
+                }
+            }
+            catch (_error) {
+                // pass
+            }
+            try {
+                if (((_b = elem.component) === null || _b === void 0 ? void 0 : _b.name) === 'Custom Code') {
+                    elem.component.options.code = elem.component.options.code.replace(voidElemRegex, '$1 />');
+                }
+            }
+            catch (_error) {
+                // pass
+            }
+        }
+    });
+    const { state, code } = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '');
+    const customCode = convertExportDefaultToReturn(code);
+    const parsed = getHooks(builderContent);
+    const parsedState = (parsed === null || parsed === void 0 ? void 0 : parsed.state) || {};
+    const mitosisState = Object.keys(parsedState).length > 0
+        ? parsedState
+        : {
+            ...state,
+            ...(0, helpers_1.mapBuilderContentStateToMitosisState)(((_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.state) || {}),
+        };
+    extractMitosisStateFromBuilderState(mitosisState, (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.state);
+    const componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
+        meta: {
+            useMetadata: {
+                httpRequests: (_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.httpRequests,
+            },
+            // cmp.meta.cssCode exists for backwards compatibility, prefer cmp.style
+            ...(((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.cssCode) && { cssCode: builderContent.data.cssCode }),
+        },
+        ...(((_g = builderContent.data) === null || _g === void 0 ? void 0 : _g.cssCode) && { style: (_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.cssCode }),
+        inputs: (_k = (_j = builderContent.data) === null || _j === void 0 ? void 0 : _j.inputs) === null || _k === void 0 ? void 0 : _k.map((input) => ({
+            name: input.name,
+            defaultValue: input.defaultValue,
+        })),
+        state: mitosisState,
+        hooks: {
+            onMount: [
+                ...((parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount.length)
+                    ? parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount
+                    : customCode
+                        ? [{ code: customCode }]
+                        : []),
+            ],
+        },
+        children: (((_l = builderContent.data) === null || _l === void 0 ? void 0 : _l.blocks) || [])
+            .filter((item) => {
+            var _a, _b;
+            if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {
+                return false;
+            }
+            return true;
+        })
+            .map((item) => (0, exports.builderElementToMitosisNode)(item, options)),
+    });
+    return componentJson;
+};
+const builderContentToMitosisComponent = (builderContent, options = {}) => {
+    builderContent = (0, fast_clone_1.fastClone)(builderContent);
+    const separated = extractSymbols(builderContent);
+    const componentJson = {
+        ...builderContentPartToMitosisComponent(separated.content, options),
+        subComponents: separated.subComponents.map((item) => ({
+            ...builderContentPartToMitosisComponent(item.content, options),
+            name: item.name,
+        })),
+    };
+    return componentJson;
+};
+exports.builderContentToMitosisComponent = builderContentToMitosisComponent;
+function mapBuilderBindingsToMitosisBindingWithCode(bindings, options) {
+    const result = {};
+    bindings &&
+        Object.keys(bindings).forEach((key) => {
+            const value = bindings[key];
+            let code = '';
+            if (typeof value === 'string') {
+                code = value;
+            }
+            else if (value && typeof value === 'object' && value.code) {
+                code = value.code;
+            }
+            else {
+                throw new Error('Unexpected binding value: ' + JSON.stringify(value));
+            }
+            const verifyCode = verifyIsValid(code);
+            if (verifyCode.valid) {
+                code = processBoundLogic(code);
+            }
+            else {
+                if (options === null || options === void 0 ? void 0 : options.escapeInvalidCode) {
+                    code = '`' + code + ' [INVALID CODE]`';
+                }
+                else {
+                    console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                    return;
+                }
+            }
+            result[key] = (0, bindings_1.createSingleBinding)({ code });
+        });
+    return result;
+}
+function combineStyles(parent, child) {
+    const marginStyles = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+    const paddingStyles = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
+    const distanceStylesToCombine = [...paddingStyles, ...marginStyles];
+    const merged = {
+        ...(0, lodash_1.omit)(child, distanceStylesToCombine),
+        ...parent,
+    };
+    for (const key of distanceStylesToCombine) {
+        // Funky things happen if different alignment
+        if (parent.alignSelf !== child.alignSelf && (key === 'marginLeft' || key === 'marginRight')) {
+            merged[key] = parent[key];
+            continue;
+        }
+        const childNum = parseFloat(child[key]) || 0;
+        const parentKeyToUse = key.replace(/margin/, 'padding');
+        const parentNum = parseFloat(parent[parentKeyToUse]) || 0;
+        if (childNum || parentNum) {
+            merged[parentKeyToUse] = `${childNum + parentNum}px`;
+        }
+    }
+    for (const [key, value] of Object.entries(merged)) {
+        if (value && typeof value === 'object') {
+            merged[key] = combineStyles(parent[key] || {}, child[key] || {});
+        }
+    }
+    return merged;
+}