@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,62 +22,56 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
-var symbol_processor_1 = require("../../symbols/symbol-processor");
-var babel = __importStar(require("@babel/core"));
-var generator_1 = __importDefault(require("@babel/generator"));
-var json5_1 = __importDefault(require("json5"));
-var lodash_1 = require("lodash");
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var media_sizes_1 = require("../../constants/media-sizes");
-var bindings_1 = require("../../helpers/bindings");
-var capitalize_1 = require("../../helpers/capitalize");
-var create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
-var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
-var fast_clone_1 = require("../../helpers/fast-clone");
-var parsers_1 = require("../../helpers/parsers");
-var jsx_1 = require("../jsx");
-var state_1 = require("../jsx/state");
-var helpers_1 = require("./helpers");
+const symbol_processor_1 = require("../../symbols/symbol-processor");
+const babel = __importStar(require("@babel/core"));
+const generator_1 = __importDefault(require("@babel/generator"));
+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
-var styleOmitList = [
+const styleOmitList = [
     'backgroundRepeatX',
     'backgroundRepeatY',
     'backgroundPositionX',
     'backgroundPositionY',
 ];
-var getCssFromBlock = function (block) {
+const getCssFromBlock = (block) => {
     var _a;
-    var blockSizes = Object.keys(block.responsiveStyles || {}).filter(function (size) {
-        return media_sizes_1.sizeNames.includes(size);
-    });
-    var css = {};
-    for (var _i = 0, blockSizes_1 = blockSizes; _i < blockSizes_1.length; _i++) {
-        var size = blockSizes_1[_i];
+    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)(__assign(__assign({}, css), (_a = block.responsiveStyles) === null || _a === void 0 ? void 0 : _a.large), styleOmitList);
+            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]) {
-            var mediaQueryKey = "@media (max-width: ".concat(media_sizes_1.sizes[size].max, "px)");
-            css[mediaQueryKey] = (0, lodash_1.omit)(__assign(__assign({}, css[mediaQueryKey]), block.responsiveStyles[size]), styleOmitList);
+            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;
 };
-var verifyIsValid = function (code) {
+const verifyIsValid = (code) => {
     try {
         if (babel.parse(code)) {
             return { valid: true, error: null };
@@ -99,71 +82,73 @@ var verifyIsValid = function (code) {
     }
     return { valid: false, error: null };
 };
-var getActionBindingsFromBlock = function (block, options) {
+const getActionBindingsFromBlock = (block, options) => {
     var _a;
-    var actions = __assign(__assign({}, block.actions), (_a = block.code) === null || _a === void 0 ? void 0 : _a.actions);
-    var bindings = {};
-    var actionKeys = Object.keys(actions);
+    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 (var _i = 0, actionKeys_1 = actionKeys; _i < actionKeys_1.length; _i++) {
-            var key = actionKeys_1[_i];
-            var value = actions[key];
+        for (const key of actionKeys) {
+            const value = actions[key];
             // Skip empty values
             if (!value.trim()) {
                 continue;
             }
-            var _b = verifyIsValid(value), error = _b.error, valid = _b.valid;
+            const { error, valid } = verifyIsValid(value);
             if (!valid) {
                 console.warn('Skipping invalid binding', error);
                 continue;
             }
-            var useKey = "on".concat((0, lodash_1.upperFirst)(key));
-            bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: "".concat(wrapBindingIfNeeded(value, options)) });
+            const useKey = `on${(0, lodash_1.upperFirst)(key)}`;
+            bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: `${wrapBindingIfNeeded(value, options)}` });
         }
     }
     return bindings;
 };
-var getStyleStringFromBlock = function (block, options) {
+const getStyleStringFromBlock = (block, options) => {
     var _a, _b;
-    var styleBindings = {};
-    var styleString = '';
+    const styleBindings = {};
+    let styleString = '';
     if (block.bindings) {
-        for (var key in block.bindings) {
+        for (const key in block.bindings) {
             if (key.includes('style') && key.includes('.')) {
-                var styleProperty = key.split('.')[1];
+                const styleProperty = key.split('.')[1];
                 styleBindings[styleProperty] = convertExportDefaultToReturn(((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key]);
             }
         }
     }
-    var styleKeys = Object.keys(styleBindings);
+    const styleKeys = Object.keys(styleBindings);
     if (styleKeys.length) {
         styleString = '{';
-        styleKeys.forEach(function (key) {
+        styleKeys.forEach((key) => {
             // TODO: figure out how to have multiline style bindings here
             // I tried (function{binding code})() and that did not work
-            styleString += " ".concat(key, ": ").concat((options.includeBuilderExtras
+            styleString += ` ${key}: ${(options.includeBuilderExtras
                 ? wrapBinding(styleBindings[key])
                 : styleBindings[key]
                     .replace(/var _virtual_index\s*=\s*/g, '')
-                    .replace(/;*\s*return _virtual_index;*/, '')).replace(/;$/, ''), ",");
+                    .replace(/;*\s*return _virtual_index;*/, '')).replace(/;$/, '')},`;
         });
         styleString += ' }';
     }
     return styleString;
 };
-var hasComponent = function (block) {
+const hasComponent = (block) => {
     var _a;
     return Boolean((_a = block.component) === null || _a === void 0 ? void 0 : _a.name);
 };
-var hasProperties = function (block) {
+const hasProperties = (block) => {
     return Boolean(block.properties && Object.keys(block.properties).length);
 };
-var hasBindings = function (block) {
+const hasBindings = (block) => {
     return Boolean(block.bindings && Object.keys(block.bindings).length);
 };
-var hasStyles = function (block) {
+const hasStyles = (block) => {
     if (block.responsiveStyles) {
-        for (var key in block.responsiveStyles) {
+        for (const key in block.responsiveStyles) {
             if (Object.keys(block.responsiveStyles[key]).length) {
                 return true;
             }
@@ -171,48 +156,53 @@ var hasStyles = function (block) {
     }
     return false;
 };
-var wrapBindingIfNeeded = function (value, options) {
+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 "{ ".concat(value, " }");
+        return `{ ${value} }`;
     }
     return value;
 };
-var getBlockActions = function (block, options) {
+const getBlockActions = (block, options) => {
     var _a;
-    var obj = __assign(__assign({}, block.actions), (_a = block.code) === null || _a === void 0 ? void 0 : _a.actions);
+    const obj = {
+        ...block.actions,
+        ...(_a = block.code) === null || _a === void 0 ? void 0 : _a.actions,
+    };
     if (options.includeBuilderExtras) {
-        for (var key in obj) {
-            var value = obj[key];
+        for (const key in obj) {
+            const value = obj[key];
             // TODO: plugin/option for for this
             obj[key] = wrapBinding(value);
         }
     }
     return obj;
 };
-var getBlockActionsAsBindings = function (block, options) {
-    return (0, lodash_1.mapKeys)(getBlockActions(block, options), function (value, key) { return "on".concat((0, capitalize_1.capitalize)(key)); });
+const getBlockActionsAsBindings = (block, options) => {
+    return (0, lodash_1.mapKeys)(getBlockActions(block, options), (value, key) => `on${(0, capitalize_1.capitalize)(key)}`);
 };
-var isValidBindingKey = function (str) {
+const isValidBindingKey = (str) => {
     return Boolean(str && /^[a-z0-9_\.]$/i.test(str));
 };
-var getBlockNonActionBindings = function (block, options) {
+const getBlockNonActionBindings = (block, options) => {
     var _a;
-    var _b;
-    var obj = __assign(__assign({}, block.bindings), (_b = block.code) === null || _b === void 0 ? void 0 : _b.bindings);
+    const obj = {
+        ...block.bindings,
+        ...(_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings,
+    };
     if (options.includeBuilderExtras) {
-        for (var key in obj) {
+        for (const key in obj) {
             if (!isValidBindingKey(key)) {
                 console.warn('Skipping invalid binding key:', key);
                 continue;
             }
-            var value = obj[key];
+            const value = obj[key];
             // TODO: verify the bindings are valid
-            var _c = verifyIsValid(value), valid = _c.valid, error = _c.error;
+            let { valid, error } = verifyIsValid(value);
             if (!valid) {
-                (_a = verifyIsValid("function () {  ".concat(value, " }")), valid = _a.valid, error = _a.error);
+                ({ valid, error } = verifyIsValid(`function () {  ${value} }`));
             }
             if (valid) {
                 obj[key] = wrapBinding(value);
@@ -232,128 +222,162 @@ function wrapBinding(value) {
     if (!(value.includes(';') || value.match(/(^|\s|;)return[^a-z0-9A-Z]/))) {
         return value;
     }
-    return "(() => {\n    try { ".concat((0, parsers_1.isExpression)(value) ? 'return ' : '').concat(value, " }\n    catch (err) {\n      console.warn('Builder code error', err);\n    }\n  })()");
+    return `(() => {
+    try { ${(0, parsers_1.isExpression)(value) ? 'return ' : ''}${value} }
+    catch (err) {
+      console.warn('Builder code error', err);
+    }
+  })()`;
 }
-var getBlockBindings = function (block, options) {
-    var obj = __assign(__assign({}, getBlockNonActionBindings(block, options)), getBlockActionsAsBindings(block, options));
+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;
-var componentMappers = __assign(__assign({ Symbol: function (block, options) {
+const componentMappers = {
+    Symbol(block, options) {
         var _a, _b;
-        var css = getCssFromBlock(block);
-        var styleString = getStyleStringFromBlock(block, options);
-        var actionBindings = getActionBindingsFromBlock(block, options);
-        var bindings = __assign(__assign(__assign({ symbol: (0, bindings_1.createSingleBinding)({
+        let css = getCssFromBlock(block);
+        const styleString = getStyleStringFromBlock(block, options);
+        const actionBindings = getActionBindingsFromBlock(block, options);
+        const bindings = {
+            symbol: (0, bindings_1.createSingleBinding)({
                 code: JSON.stringify({
                     data: (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.data,
                     content: (_b = block.component) === null || _b === void 0 ? void 0 : _b.options.symbol.content,
                 }),
-            }) }, actionBindings), (styleString && {
-            style: (0, bindings_1.createSingleBinding)({ code: styleString }),
-        })), (Object.keys(css).length && {
-            css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
-        }));
+            }),
+            ...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: 'Symbol',
             bindings: bindings,
             meta: (0, exports.getMetaFromBlock)(block, options),
         });
-    } }, (!exports.symbolBlocksAsChildren
-    ? {}
-    : {
-        Symbol: function (block, options) {
-            var _a, _b, _c;
-            var css = getCssFromBlock(block);
-            var styleString = getStyleStringFromBlock(block, options);
-            var actionBindings = getActionBindingsFromBlock(block, options);
-            var content = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.content;
-            var 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: __assign(__assign(__assign({ 
-                    // 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
+    },
+    ...(!exports.symbolBlocksAsChildren
+        ? {}
+        : {
+            Symbol(block, options) {
+                var _a, _b, _c;
+                let css = getCssFromBlock(block);
+                const styleString = 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(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); }),
+                        ...actionBindings,
+                        ...(styleString && {
+                            style: (0, bindings_1.createSingleBinding)({ code: styleString }),
                         }),
-                    ],
-            });
-        },
-    })), { Columns: function (block, options) {
+                        ...(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;
-        var node = (0, exports.builderElementToMitosisNode)(block, options, {
+        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(function (col, index) {
+            ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map((col, index) => {
                 var _a;
-                return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({ name: 'Column', bindings: {
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'Column',
+                    bindings: {
                         width: { code: (_a = col.width) === null || _a === void 0 ? void 0 : _a.toString() },
-                    } }, (col.link && {
-                    properties: {
-                        link: col.link,
                     },
-                })), { meta: (0, exports.getMetaFromBlock)(block, options), children: col.blocks.map(function (col) { return (0, exports.builderElementToMitosisNode)(col, options); }) }));
+                    ...(col.link && {
+                        properties: {
+                            link: col.link,
+                        },
+                    }),
+                    meta: (0, exports.getMetaFromBlock)(block, options),
+                    children: col.blocks.map((col) => (0, exports.builderElementToMitosisNode)(col, options)),
+                });
             })) || [];
         return node;
-    }, 'Shopify:For': function (block, options) {
+    },
+    'Shopify:For': (block, options) => {
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'For',
             bindings: {
                 each: (0, bindings_1.createSingleBinding)({
-                    code: "state.".concat(block.component.options.repeat.collection),
+                    code: `state.${block.component.options.repeat.collection}`,
                 }),
             },
             scope: {
                 forName: block.component.options.repeat.itemName,
-                indexName: '$index',
             },
             meta: (0, exports.getMetaFromBlock)(block, options),
-            children: (block.children || []).map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); }),
+            children: (block.children || []).map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options)),
         });
-    }, Text: function (block, options) {
+    },
+    Text: (block, options) => {
         var _a;
-        var _b;
-        var css = getCssFromBlock(block);
-        var styleString = getStyleStringFromBlock(block, options);
-        var actionBindings = getActionBindingsFromBlock(block, options);
-        var blockBindings = __assign(__assign({}, mapBuilderBindingsToMitosisBindingWithCode(block.bindings)), mapBuilderBindingsToMitosisBindingWithCode((_b = block.code) === null || _b === void 0 ? void 0 : _b.bindings));
-        var bindings = __assign(__assign(__assign(__assign({}, (0, lodash_1.omitBy)(blockBindings, function (value, key) {
-            if (key === 'component.options.text') {
-                return true;
-            }
-            if (key && key.includes('style')) {
-                return true;
-            }
-            return false;
-        })), actionBindings), (styleString && {
-            style: { code: styleString },
-        })), (Object.keys(css).length && {
-            css: { code: JSON.stringify(css) },
-        }));
-        var properties = __assign({}, block.properties);
+        let css = getCssFromBlock(block);
+        const styleString = getStyleStringFromBlock(block, options);
+        const actionBindings = getActionBindingsFromBlock(block, options);
+        const blockBindings = {
+            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings),
+            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings),
+        };
+        const bindings = {
+            ...(0, lodash_1.omitBy)(blockBindings, (value, key) => {
+                if (key === 'component.options.text') {
+                    return true;
+                }
+                if (key && key.includes('style')) {
+                    return true;
+                }
+                return false;
+            }),
+            ...actionBindings,
+            ...(styleString && {
+                style: { code: styleString },
+            }),
+            ...(Object.keys(css).length && {
+                css: { code: JSON.stringify(css) },
+            }),
+        };
+        const properties = { ...block.properties };
         if (options.includeBuilderExtras && block.id)
             properties['builder-id'] = block.id;
         if (block.class)
@@ -361,41 +385,47 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         if (block.layerName) {
             properties.$name = block.layerName;
         }
-        var innerBindings = {};
-        var componentOptionsText = blockBindings['component.options.text'];
+        const innerBindings = {};
+        const componentOptionsText = blockBindings['component.options.text'];
         if (componentOptionsText) {
             innerBindings[options.preserveTextBlocks ? 'innerHTML' : '_text'] = (0, bindings_1.createSingleBinding)({
                 code: wrapBindingIfNeeded(componentOptionsText.code, options),
             });
         }
-        var text = block.component.options.text;
-        var innerProperties = innerBindings._text
+        const text = block.component.options.text;
+        const innerProperties = innerBindings._text
             ? {}
-            : (_a = {},
-                _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = text,
-                _a);
+            : {
+                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text,
+            };
         if (options.preserveTextBlocks) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: block.tagName || 'div',
-                bindings: bindings,
-                properties: properties,
+                bindings,
+                properties,
                 meta: (0, exports.getMetaFromBlock)(block, options),
                 children: [
                     (0, create_mitosis_node_1.createMitosisNode)({
                         bindings: innerBindings,
-                        properties: __assign(__assign({}, innerProperties), { class: 'builder-text' }),
+                        properties: {
+                            ...innerProperties,
+                            class: 'builder-text',
+                        },
                     }),
                 ],
             });
         }
         // Disabling for now
-        var assumeLink = false;
-        var finalProperties = __assign(__assign({}, (assumeLink
-            ? {
-                href: '...',
-            }
-            : {})), properties);
-        var finalTagname = block.tagName || (assumeLink ? 'a' : 'div');
+        const assumeLink = false;
+        const finalProperties = {
+            ...(assumeLink
+                ? {
+                    href: '...',
+                }
+                : {}),
+            ...properties,
+        };
+        const finalTagname = block.tagName || (assumeLink ? 'a' : 'div');
         if ((block.tagName && block.tagName !== 'div') ||
             hasStyles(block) ||
             hasComponent(block) ||
@@ -403,7 +433,7 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             hasProperties(block)) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: finalTagname,
-                bindings: bindings,
+                bindings,
                 properties: finalProperties,
                 meta: (0, exports.getMetaFromBlock)(block, options),
                 children: [
@@ -416,52 +446,57 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         }
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: finalTagname,
-            properties: __assign(__assign(__assign({}, finalProperties), properties), innerProperties),
-            bindings: __assign(__assign({}, bindings), innerBindings),
+            properties: {
+                ...finalProperties,
+                ...properties,
+                ...innerProperties,
+            },
+            bindings: {
+                ...bindings,
+                ...innerBindings,
+            },
             meta: (0, exports.getMetaFromBlock)(block, options),
         });
-    } });
-var builderElementToMitosisNode = function (block, options, _internalOptions) {
-    var _a;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    if (_internalOptions === void 0) { _internalOptions = {}; }
-    var _x = options.includeSpecialBindings, includeSpecialBindings = _x === void 0 ? true : _x;
-    if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
+    },
+};
+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;
+    const { includeSpecialBindings = true } = options;
+    if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
     }
-    var forBinding = (_c = block.repeat) === null || _c === void 0 ? void 0 : _c.collection;
+    const forBinding = (_b = block.repeat) === null || _b === void 0 ? void 0 : _b.collection;
     if (forBinding) {
-        var isFragment = ((_d = block.component) === null || _d === void 0 ? void 0 : _d.name) === 'Fragment';
+        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((_e = block.repeat) === null || _e === void 0 ? void 0 : _e.collection, options),
+                        code: wrapBindingIfNeeded((_d = block.repeat) === null || _d === void 0 ? void 0 : _d.collection, options),
                     }),
                 },
                 scope: {
-                    forName: ((_f = block.repeat) === null || _f === void 0 ? void 0 : _f.itemName) || 'item',
-                    indexName: '$index',
+                    forName: ((_e = block.repeat) === null || _e === void 0 ? void 0 : _e.itemName) || 'item',
                 },
                 meta: (0, exports.getMetaFromBlock)(block, options),
-                children: ((_g = block.children) === null || _g === void 0 ? void 0 : _g.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); })) || [],
+                children: ((_f = block.children) === null || _f === void 0 ? void 0 : _f.map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options))) || [],
             });
         }
         else {
-            var useBlock = ((_h = block.component) === null || _h === void 0 ? void 0 : _h.name) === 'Core:Fragment' && ((_j = block.children) === null || _j === void 0 ? void 0 : _j.length) === 1
+            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((_k = block.repeat) === null || _k === void 0 ? void 0 : _k.collection, options),
+                        code: wrapBindingIfNeeded((_j = block.repeat) === null || _j === void 0 ? void 0 : _j.collection, options),
                     }),
                 },
                 scope: {
-                    forName: ((_l = block.repeat) === null || _l === void 0 ? void 0 : _l.itemName) || 'item',
+                    forName: ((_k = block.repeat) === null || _k === void 0 ? void 0 : _k.itemName) || 'item',
                     indexName: '$index',
                 },
                 meta: (0, exports.getMetaFromBlock)(block, options),
@@ -471,77 +506,92 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     }
     // Special builder properties
     // TODO: support hide and repeat
-    var blockBindings = getBlockBindings(block, options);
-    var code = undefined;
+    const blockBindings = getBlockBindings(block, options);
+    let code = undefined;
     if (blockBindings.show) {
         code = wrapBindingIfNeeded(blockBindings.show, options);
     }
     else if (blockBindings.hide) {
-        code = "!(".concat(wrapBindingIfNeeded(blockBindings.hide, options), ")");
+        code = `!(${wrapBindingIfNeeded(blockBindings.hide, options)})`;
     }
     if (code) {
-        var isFragment = ((_m = block.component) === null || _m === void 0 ? void 0 : _m.name) === 'Fragment';
+        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: code }) },
+                bindings: { when: (0, bindings_1.createSingleBinding)({ code }) },
                 meta: (0, exports.getMetaFromBlock)(block, options),
-                children: ((_o = block.children) === null || _o === void 0 ? void 0 : _o.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, 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: code }) },
+                bindings: { when: (0, bindings_1.createSingleBinding)({ code }) },
                 meta: (0, exports.getMetaFromBlock)(block, options),
                 children: [
-                    (0, exports.builderElementToMitosisNode)(__assign(__assign({}, block), { code: __assign(__assign({}, block.code), { bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide') }), bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide') }), options),
+                    (0, exports.builderElementToMitosisNode)({
+                        ...block,
+                        code: {
+                            ...block.code,
+                            bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide'),
+                        },
+                        bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide'),
+                    }, options),
                 ],
             });
         }
     }
-    var mapper = !_internalOptions.skipMapper && block.component && componentMappers[block.component.name];
+    const mapper = !_internalOptions.skipMapper && block.component && componentMappers[block.component.name];
     if (mapper) {
         return mapper(block, options);
     }
-    var bindings = {};
-    var children = [];
-    var slots = {};
+    const bindings = {};
+    const children = [];
+    const slots = {};
     if (blockBindings) {
-        for (var key in blockBindings) {
+        for (const key in blockBindings) {
             if (key === 'css') {
                 continue;
             }
-            var useKey = key.replace(/^(component\.)?options\./, '');
+            const useKey = key.replace(/^(component\.)?options\./, '');
             if (!useKey.includes('.')) {
                 bindings[useKey] = (0, bindings_1.createSingleBinding)({
                     code: blockBindings[key].code || blockBindings[key],
                 });
             }
             else if (useKey.includes('style') && useKey.includes('.')) {
-                var styleProperty = useKey.split('.')[1];
+                const styleProperty = useKey.split('.')[1];
                 // TODO: add me in
                 // styleBindings[styleProperty] =
                 //   block.code?.bindings?.[key] || blockBindings[key];
             }
         }
     }
-    var properties = __assign(__assign(__assign({}, block.properties), (options.includeBuilderExtras && (_a = {},
-        _a['builder-id'] = block.id,
-        _a))), (options.includeBuilderExtras && getBuilderPropsForSymbol(block)));
+    const properties = {
+        ...block.properties,
+        ...(options.includeBuilderExtras && {
+            ['builder-id']: block.id,
+            // class: `builder-block ${block.id} ${block.properties?.class || ''}`,
+        }),
+        ...(options.includeBuilderExtras && getBuilderPropsForSymbol(block)),
+    };
     if (block.layerName) {
         properties.$name = block.layerName;
     }
     if (block.linkUrl) {
         properties.href = block.linkUrl;
     }
-    if ((_p = block.component) === null || _p === void 0 ? void 0 : _p.options) {
-        for (var key in block.component.options) {
-            var value = block.component.options[key];
-            var valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
-            var transformBldrElementToMitosisNode = function (item) {
-                var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
+    if ((_o = block.component) === null || _o === void 0 ? void 0 : _o.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)) {
@@ -551,8 +601,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                 properties[key] = value;
             }
             else if (valueIsArrayOfBuilderElements) {
-                var childrenElements = value
-                    .filter(function (item) {
+                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;
@@ -570,41 +620,52 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     if (block.component && block.tagName && block.tagName !== 'div') {
         properties.builderTag = block.tagName;
     }
-    var css = getCssFromBlock(block);
-    var styleString = getStyleStringFromBlock(block, options);
-    var actionBindings = getActionBindingsFromBlock(block, options);
-    for (var binding in blockBindings) {
+    const css = getCssFromBlock(block);
+    let styleString = getStyleStringFromBlock(block, options);
+    const actionBindings = getActionBindingsFromBlock(block, options);
+    for (const binding in blockBindings) {
         if (binding.startsWith('component.options') || binding.startsWith('options')) {
-            var value = blockBindings[binding];
-            var useKey = binding.replace(/^(component\.options\.|options\.)/, '');
+            const value = blockBindings[binding];
+            const useKey = binding.replace(/^(component\.options\.|options\.)/, '');
             bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: value });
         }
     }
-    var node = (0, create_mitosis_node_1.createMitosisNode)({
-        name: ((_r = (_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === null || _r === void 0 ? void 0 : _r.replace(/[^a-z0-9]/gi, '')) ||
+    const node = (0, create_mitosis_node_1.createMitosisNode)({
+        name: ((_q = (_p = block.component) === null || _p === void 0 ? void 0 : _p.name) === null || _q === void 0 ? void 0 : _q.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
-        properties: __assign(__assign(__assign({}, (block.component && includeSpecialBindings && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
-        bindings: __assign(__assign(__assign(__assign({}, 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: __assign({}, slots),
+        properties: {
+            ...(block.component && includeSpecialBindings && { $tagName: block.tagName }),
+            ...(block.class && { class: block.class }),
+            ...properties,
+        },
+        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,
+        },
         meta: (0, exports.getMetaFromBlock)(block, options),
     });
     // Has single text node child
-    var firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];
-    if (((_t = block.children) === null || _t === void 0 ? void 0 : _t.length) === 1 &&
-        ((_u = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _u === void 0 ? void 0 : _u.name) === 'Text' &&
+    const firstChild = (_r = block.children) === null || _r === void 0 ? void 0 : _r[0];
+    if (((_s = block.children) === null || _s === void 0 ? void 0 : _s.length) === 1 &&
+        ((_t = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _t === void 0 ? void 0 : _t.name) === 'Text' &&
         !options.preserveTextBlocks) {
-        var textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
-        var parsedNodeCss = json5_1.default.parse(((_v = node.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
-        var parsedTextCss = json5_1.default.parse(((_w = textProperties.bindings.css) === null || _w === void 0 ? void 0 : _w.code) || '{}');
-        var mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
+        const textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
+        const parsedNodeCss = json5_1.default.parse(((_u = node.bindings.css) === null || _u === void 0 ? void 0 : _u.code) || '{}');
+        const parsedTextCss = json5_1.default.parse(((_v = textProperties.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
+        const mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
         // Don't merge if text has styling that matters
-        var doNotMerge = 
+        const doNotMerge = 
         // Text has flex alignment
         ['end', 'right', 'center'].includes(parsedTextCss.alignSelf) ||
             // Text has specific styling
@@ -613,42 +674,51 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             parsedTextCss.background;
         if (!doNotMerge) {
             return (0, lodash_1.merge)({}, textProperties, node, {
-                bindings: __assign({}, (Object.keys(mergedCss).length && {
-                    css: { code: json5_1.default.stringify(mergedCss) },
-                })),
+                bindings: {
+                    ...(Object.keys(mergedCss).length && {
+                        css: { code: json5_1.default.stringify(mergedCss) },
+                    }),
+                },
             });
         }
     }
-    node.children = children.concat((block.children || []).map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); }));
+    node.children = children.concat((block.children || []).map((item) => (0, exports.builderElementToMitosisNode)(item, options)));
     return node;
 };
 exports.builderElementToMitosisNode = builderElementToMitosisNode;
-var getBuilderPropsForSymbol = function (block) {
+const getBuilderPropsForSymbol = (block) => {
     var _a, _b;
     if (((_a = block.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-        var child = block.children[0];
-        var builderContentId = (_b = child.properties) === null || _b === void 0 ? void 0 : _b['builder-content-id'];
+        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;
 };
-var getMetaFromBlock = function (block, options) {
-    var _a = options.includeMeta, includeMeta = _a === void 0 ? false : _a;
+const getMetaFromBlock = (block, options) => {
+    const { includeMeta = false } = options;
     return includeMeta
-        ? __assign({ 'builder-id': block.id }, block.meta) : {};
+        ? {
+            'builder-id': block.id,
+            ...block.meta,
+        }
+        : {};
 };
 exports.getMetaFromBlock = getMetaFromBlock;
-var getHooks = function (content) {
+const getHooks = (content) => {
     var _a, _b;
-    var code = convertExportDefaultToReturn(((_a = content.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = content.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '');
+    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)("\n    export default function TemporaryComponent() {\n      ".concat(
+        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("), "\n    }"));
+        code.replace(`useStore(`, `var state = useStore(`)}
+    }`);
     }
     catch (err) {
         console.warn('Could not parse js code as a Mitosis component body', err, code);
@@ -661,18 +731,18 @@ var getHooks = function (content) {
  * code extracted
  */
 function extractStateHook(code) {
-    var types = babel.types;
-    var state = {};
-    var body = (0, parsers_1.parseCode)(code);
-    var newBody = body.slice();
-    for (var i = 0; i < body.length; i++) {
-        var statement = body[i];
+    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)) {
-            var expression = statement.expression;
+            const { expression } = statement;
             // Check for useStore
             if (types.isCallExpression(expression)) {
                 if (types.isIdentifier(expression.callee) && expression.callee.name === 'useStore') {
-                    var arg = expression.arguments[0];
+                    const arg = expression.arguments[0];
                     if (types.isObjectExpression(arg)) {
                         state = (0, state_1.parseStateObjectToMitosisState)(arg);
                         newBody.splice(i, 1);
@@ -683,7 +753,7 @@ function extractStateHook(code) {
                         expression.callee.object.name === 'Object') {
                         if (types.isIdentifier(expression.callee.property) &&
                             expression.callee.property.name === 'assign') {
-                            var arg = expression.arguments[1];
+                            const arg = expression.arguments[1];
                             if (types.isObjectExpression(arg)) {
                                 state = (0, state_1.parseStateObjectToMitosisState)(arg);
                                 newBody.splice(i, 1);
@@ -694,17 +764,17 @@ function extractStateHook(code) {
             }
         }
     }
-    var newCode = (0, generator_1.default)(types.program(newBody)).code || '';
-    return { code: newCode, state: state };
+    const newCode = (0, generator_1.default)(types.program(newBody)).code || '';
+    return { code: newCode, state };
 }
 exports.extractStateHook = extractStateHook;
 function convertExportDefaultToReturn(code) {
     try {
-        var types = babel.types;
-        var body = (0, parsers_1.parseCode)(code);
-        var newBody = body.slice();
-        for (var i = 0; i < body.length; i++) {
-            var statement = body[i];
+        const { types } = babel;
+        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.isExportDefaultDeclaration(statement)) {
                 if (types.isCallExpression(statement.declaration) ||
                     types.isExpression(statement.declaration)) {
@@ -715,7 +785,7 @@ function convertExportDefaultToReturn(code) {
         return (0, generator_1.default)(types.program(newBody)).code || '';
     }
     catch (e) {
-        var error = e;
+        const error = e;
         if (error.code === 'BABEL_PARSE_ERROR') {
             return code;
         }
@@ -725,11 +795,32 @@ function convertExportDefaultToReturn(code) {
     }
 }
 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;
-    var subComponents = [];
-    var symbols = [];
+    const subComponents = [];
+    const symbols = [];
     (0, legacy_1.default)(json).forEach(function (item) {
         var _a;
         if ((0, exports.isBuilderElement)(item)) {
@@ -738,14 +829,13 @@ function extractSymbols(json) {
             }
         }
     });
-    var symbolsSortedDeepestFirst = (0, lodash_1.sortBy)(symbols, function (info) { return info.depth; })
+    const symbolsSortedDeepestFirst = (0, lodash_1.sortBy)(symbols, (info) => info.depth)
         .reverse()
-        .map(function (el) { return el.element; });
-    var symbolsFound = 0;
-    for (var _i = 0, symbolsSortedDeepestFirst_1 = symbolsSortedDeepestFirst; _i < symbolsSortedDeepestFirst_1.length; _i++) {
-        var el = symbolsSortedDeepestFirst_1[_i];
-        var symbolValue = (_b = (_a = el.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol;
-        var elContent = symbolValue === null || symbolValue === void 0 ? void 0 : symbolValue.content;
+        .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) {
@@ -753,7 +843,7 @@ function extractSymbols(json) {
             }
             continue;
         }
-        var componentName = 'Symbol' + ++symbolsFound;
+        const componentName = 'Symbol' + ++symbolsFound;
         el.component.name = componentName;
         if ((_d = el.component) === null || _d === void 0 ? void 0 : _d.options.symbol.content) {
             delete el.component.options.symbol.content;
@@ -765,18 +855,19 @@ function extractSymbols(json) {
     }
     return {
         content: json,
-        subComponents: subComponents,
+        subComponents,
     };
 }
-var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options) }, options)); };
+const createBuilderElement = (options) => ({
+    '@type': '@builder.io/sdk:Element',
+    id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options),
+    ...options,
+});
 exports.createBuilderElement = createBuilderElement;
-var isBuilderElement = function (el) {
-    return (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
-};
+const isBuilderElement = (el) => (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
 exports.isBuilderElement = isBuilderElement;
-var builderContentPartToMitosisComponent = function (builderContent, options) {
+const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (options === void 0) { options = {}; }
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, legacy_1.default)(builderContent).forEach(function (elem) {
         var _a, _b;
@@ -785,7 +876,7 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             // 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
-            var voidElemRegex = /(<area|base|br|col|embed|hr|img|input|keygen|link|meta|param|source|track|wbr[^>]+)>/gm;
+            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') {
                     elem.component.options.text = elem.component.options.text.replace(voidElemRegex, '$1 />');
@@ -804,54 +895,67 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             }
         }
     });
-    var _j = 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) || ''), state = _j.state, code = _j.code;
-    var customCode = convertExportDefaultToReturn(code);
-    var parsed = getHooks(builderContent);
-    var parsedState = (parsed === null || parsed === void 0 ? void 0 : parsed.state) || {};
-    var mitosisState = Object.keys(parsedState).length > 0
+    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
-        : __assign(__assign({}, state), (0, helpers_1.mapBuilderContentStateToMitosisState)(((_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.state) || {}));
-    var componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
-        meta: __assign({ useMetadata: {
+        : {
+            ...state,
+            ...(0, helpers_1.mapBuilderContentStateToMitosisState)(((_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.state) || {}),
+        };
+    const componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
+        meta: {
+            useMetadata: {
                 httpRequests: (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.httpRequests,
-            } }, (((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode })),
-        inputs: (_g = (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.inputs) === null || _g === void 0 ? void 0 : _g.map(function (input) { return ({
+            },
+            ...(((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode }),
+        },
+        inputs: (_g = (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.inputs) === null || _g === void 0 ? void 0 : _g.map((input) => ({
             name: input.name,
             defaultValue: input.defaultValue,
-        }); }),
+        })),
         state: mitosisState,
         hooks: {
-            onMount: __spreadArray([], ((parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount.length)
-                ? parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount
-                : customCode
-                    ? [{ code: customCode }]
-                    : []), true),
+            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: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
-            .filter(function (item) {
+            .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(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); }),
+            .map((item) => (0, exports.builderElementToMitosisNode)(item, options)),
     });
     return componentJson;
 };
-var builderContentToMitosisComponent = function (builderContent, options) {
-    if (options === void 0) { options = {}; }
+const builderContentToMitosisComponent = (builderContent, options = {}) => {
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
-    var separated = extractSymbols(builderContent);
-    var componentJson = __assign(__assign({}, builderContentPartToMitosisComponent(separated.content, options)), { subComponents: separated.subComponents.map(function (item) { return (__assign(__assign({}, builderContentPartToMitosisComponent(item.content, options)), { name: item.name })); }) });
+    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) {
-    var result = {};
+    const result = {};
     bindings &&
-        Object.keys(bindings).forEach(function (key) {
-            var value = bindings[key];
+        Object.keys(bindings).forEach((key) => {
+            const value = bindings[key];
             if (typeof value === 'string') {
                 result[key] = (0, bindings_1.createSingleBinding)({ code: value });
             }
@@ -865,29 +969,30 @@ function mapBuilderBindingsToMitosisBindingWithCode(bindings) {
     return result;
 }
 function removeFalsey(obj) {
-    return (0, lodash_1.omitBy)(obj, function (value) { return !value || value === '0' || value === '0px' || value === 'none' || value === '0%'; });
+    return (0, lodash_1.omitBy)(obj, (value) => !value || value === '0' || value === '0px' || value === 'none' || value === '0%');
 }
 function combineStyles(parent, child) {
-    var marginStyles = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
-    var paddingStyles = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
-    var distanceStylesToCombine = __spreadArray(__spreadArray([], paddingStyles, true), marginStyles, true);
-    var merged = __assign(__assign({}, (0, lodash_1.omit)(removeFalsey(child), distanceStylesToCombine)), removeFalsey(parent));
-    for (var _i = 0, distanceStylesToCombine_1 = distanceStylesToCombine; _i < distanceStylesToCombine_1.length; _i++) {
-        var key = distanceStylesToCombine_1[_i];
+    const marginStyles = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+    const paddingStyles = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
+    const distanceStylesToCombine = [...paddingStyles, ...marginStyles];
+    const merged = {
+        ...(0, lodash_1.omit)(removeFalsey(child), distanceStylesToCombine),
+        ...removeFalsey(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;
         }
-        var childNum = parseFloat(child[key]) || 0;
-        var parentKeyToUse = key.replace(/margin/, 'padding');
-        var parentNum = parseFloat(parent[parentKeyToUse]) || 0;
+        const childNum = parseFloat(child[key]) || 0;
+        const parentKeyToUse = key.replace(/margin/, 'padding');
+        const parentNum = parseFloat(parent[parentKeyToUse]) || 0;
         if (childNum || parentNum) {
-            merged[parentKeyToUse] = "".concat(childNum + parentNum, "px");
+            merged[parentKeyToUse] = `${childNum + parentNum}px`;
         }
     }
-    for (var _a = 0, _b = Object.entries(merged); _a < _b.length; _a++) {
-        var _c = _b[_a], key = _c[0], value = _c[1];
+    for (const [key, value] of Object.entries(merged)) {
         if (value && typeof value === 'object') {
             merged[key] = combineStyles(parent[key] || {}, child[key] || {});
         }