@builder.io/mitosis 0.11.4 → 0.11.6

package/dist/src/generators/builder/generator.d.ts

@@ -2,8 +2,10 @@ import { ToBuilderOptions } from '../../generators/builder/types';
 import { MitosisNode } from '../../types/mitosis-node';
 import { TranspilerArgs } from '../../types/transpiler';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+export declare const builderBlockPrefixes: string[];
 type InternalOptions = {
     skipMapper?: boolean;
+    includeStateMap?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
 export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => BuilderContent;

package/dist/src/generators/builder/generator.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToBuilder = exports.blockToBuilder = void 0;
+exports.componentToBuilder = exports.blockToBuilder = exports.builderBlockPrefixes = void 0;
 const media_sizes_1 = require("../../constants/media-sizes");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
@@ -19,6 +19,7 @@ const replace_identifiers_1 = require("../../helpers/replace-identifiers");
 const state_1 = require("../../helpers/state");
 const builder_1 = require("../../parsers/builder");
 const symbol_processor_1 = require("../../symbols/symbol-processor");
+const mitosis_node_1 = require("../../types/mitosis-node");
 const core_1 = require("@babel/core");
 const generator_1 = __importDefault(require("@babel/generator"));
 const parser_1 = require("@babel/parser");
@@ -27,13 +28,101 @@ const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const standalone_1 = require("prettier/standalone");
 const on_mount_1 = require("../helpers/on-mount");
+const isValidCollection = (code) => {
+    if (!code || typeof code !== 'string') {
+        return false;
+    }
+    // Pattern: Array.from({ length: number })
+    // Examples: "Array.from({ length: 10 })", "Array.from({ length: 5 })"
+    const arrayFromPattern = /^Array\.from\(\{\s*length\s*:\s*\d+\s*\}\)$/;
+    if (arrayFromPattern.test(code)) {
+        return false;
+    }
+    // Pattern: alphanumeric strings separated by dots
+    // Examples: "abc.def", "state.list1", "data.items"
+    const dotPattern = /^[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)*$/;
+    return dotPattern.test(code);
+};
+const replaceWithStateVariable = (code, stateMap) => {
+    if (!code) {
+        return '';
+    }
+    if (stateMap === null || stateMap === void 0 ? void 0 : stateMap.has(code)) {
+        return 'state.' + (stateMap.get(code) || '');
+    }
+    return code;
+};
+const generateUniqueKey = (state) => {
+    let newKeyPrefix = 'dataBuilderList';
+    let counter = 1;
+    while (state[newKeyPrefix + counter]) {
+        counter++;
+    }
+    return newKeyPrefix + counter;
+};
+const convertMitosisStateToBuilderState = (state) => {
+    return Object.entries(state).reduce((acc, [key, value]) => {
+        if ((value === null || value === void 0 ? void 0 : value.type) === 'property' && (value === null || value === void 0 ? void 0 : value.code)) {
+            if (value.code === 'true' || value.code === 'false') {
+                acc[key] = value.code === 'true';
+            }
+            else if (value.code === 'null') {
+                acc[key] = null;
+            }
+            else if (value.code === 'undefined') {
+                acc[key] = undefined;
+            }
+            else if (!Number.isNaN(Number(value.code))) {
+                acc[key] = Number(value.code);
+            }
+            else {
+                try {
+                    acc[key] = JSON.parse(value.code);
+                }
+                catch (e) {
+                    acc[key] = value.code;
+                }
+            }
+        }
+        return acc;
+    }, {});
+};
+const findStateWithinMitosisNode = (node, options, state, stateMap) => {
+    var _a, _b, _c;
+    if ((0, mitosis_node_1.checkIsForNode)(node)) {
+        if (!isValidCollection((_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code) &&
+            !stateMap.has((_b = node.bindings.each) === null || _b === void 0 ? void 0 : _b.code)) {
+            const newKey = generateUniqueKey(state);
+            const code = (_c = node.bindings.each) === null || _c === void 0 ? void 0 : _c.code;
+            try {
+                state[newKey] = JSON.parse(code);
+                stateMap.set(code, newKey);
+            }
+            catch (parseError) {
+                // The parsing error happens when `code` is a function or expression
+                // We would need `eval` to parse the code and then set the state. But because
+                // of security concerns we are not handling this case right now.
+                // Will revisit this if we need to support this.
+                console.log('Failed to parse:', code, parseError);
+            }
+        }
+    }
+    node.children.forEach((child) => findStateWithinMitosisNode(child, options, state, stateMap));
+};
+const findStateWithinMitosisComponent = (component, options, state, stateMap) => {
+    component.children.forEach((child) => findStateWithinMitosisNode(child, options, state, stateMap));
+    return state;
+};
 const omitMetaProperties = (obj) => (0, lodash_1.omitBy)(obj, (_value, key) => key.startsWith('$'));
-const builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
-const mapComponentName = (name) => {
+exports.builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
+const mapComponentName = (name, properties) => {
+    if (properties === null || properties === void 0 ? void 0 : properties['data-builder-originalName']) {
+        return properties['data-builder-originalName'];
+    }
     if (name === 'CustomCode') {
         return 'Custom Code';
     }
-    for (const prefix of builderBlockPrefixes) {
+    for (const prefix of exports.builderBlockPrefixes) {
         if (name.startsWith(prefix)) {
             const suffix = name.replace(prefix, '');
             const restOfName = suffix[0];
@@ -137,8 +226,9 @@ const componentMappers = {
         return block;
     },
     For(_node, options) {
-        var _a;
+        var _a, _b, _c;
         const node = _node;
+        const stateMap = options.stateMap;
         const replaceIndexNode = (str) => (0, replace_identifiers_1.replaceNodes)({
             code: str,
             nodeMaps: [
@@ -203,7 +293,9 @@ const componentMappers = {
                 name: 'Core:Fragment',
             },
             repeat: {
-                collection: (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code,
+                collection: isValidCollection((_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code)
+                    ? ((_b = node.bindings.each) === null || _b === void 0 ? void 0 : _b.code) || ''
+                    : replaceWithStateVariable((_c = node.bindings.each) === null || _c === void 0 ? void 0 : _c.code, stateMap),
                 itemName: node.scope.forName,
             },
             children: node.children
@@ -591,8 +683,8 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         }),
         ...(thisIsComponent && {
             component: {
-                name: mapComponentName(json.name),
-                options: componentOptions,
+                name: mapComponentName(json.name, json.properties),
+                options: (0, lodash_1.omit)(componentOptions, ['data-builder-originalName']),
             },
         }),
         code: {
@@ -611,9 +703,29 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     return processLocalizedValues(element, json);
 };
 exports.blockToBuilder = blockToBuilder;
+const recursivelyCheckForChildrenWithSameComponent = (elementOrContent, componentName, path = '') => {
+    var _a, _b, _c, _d, _e;
+    if ((0, builder_1.isBuilderElement)(elementOrContent)) {
+        if (((_a = elementOrContent.component) === null || _a === void 0 ? void 0 : _a.name) === componentName) {
+            return path;
+        }
+        return (((_b = elementOrContent.children) === null || _b === void 0 ? void 0 : _b.map((child, index) => recursivelyCheckForChildrenWithSameComponent(child, componentName, `${path}.children[${index}]`)).find(Boolean)) || '');
+    }
+    if ((_c = elementOrContent.data) === null || _c === void 0 ? void 0 : _c.blocks) {
+        return (((_e = (_d = elementOrContent.data) === null || _d === void 0 ? void 0 : _d.blocks) === null || _e === void 0 ? void 0 : _e.map((block, index) => recursivelyCheckForChildrenWithSameComponent(block, componentName, `${path ? `${path}.` : ''}data.blocks[${index}]`)).find(Boolean)) || '');
+    }
+    return '';
+};
+function removeItem(obj, path, indexToRemove) {
+    return (0, lodash_1.set)((0, lodash_1.cloneDeep)(obj), // Clone to ensure immutability
+    path, (0, lodash_1.filter)((0, lodash_1.get)(obj, path), (item, index) => index !== indexToRemove));
+}
 const componentToBuilder = (options = {}) => ({ component }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const hasState = (0, state_1.checkHasState)(component);
+    if (!options.stateMap) {
+        options.stateMap = new Map();
+    }
     const result = (0, fast_clone_1.fastClone)({
         data: {
             httpRequests: (_b = (_a = component === null || component === void 0 ? void 0 : component.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests,
@@ -636,11 +748,18 @@ const componentToBuilder = (options = {}) => ({ component }) => {
               })`}
       `),
             cssCode: component === null || component === void 0 ? void 0 : component.style,
+            ...(() => {
+                const stateData = findStateWithinMitosisComponent(component, options, { ...convertMitosisStateToBuilderState(component.state) }, options.stateMap);
+                return { state: stateData };
+            })(),
             blocks: component.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
                 .map((child) => (0, exports.blockToBuilder)(child, options)),
         },
     });
+    if (((_c = result.data) === null || _c === void 0 ? void 0 : _c.state) && Object.keys(result.data.state).length === 0) {
+        delete result.data.state;
+    }
     const subComponentMap = {};
     for (const subComponent of component.subComponents) {
         const name = subComponent.name;
@@ -649,11 +768,33 @@ const componentToBuilder = (options = {}) => ({ component }) => {
         });
     }
     (0, legacy_1.default)([result, subComponentMap]).forEach(function (el) {
-        var _a;
-        if ((0, builder_1.isBuilderElement)(el)) {
-            const value = subComponentMap[(_a = el.component) === null || _a === void 0 ? void 0 : _a.name];
+        var _a, _b, _c, _d, _e;
+        if ((0, builder_1.isBuilderElement)(el) && !((_a = el.meta) === null || _a === void 0 ? void 0 : _a.preventRecursion)) {
+            const value = subComponentMap[(_b = el.component) === null || _b === void 0 ? void 0 : _b.name];
             if (value) {
-                (0, lodash_1.set)(el, 'component.options.symbol.content', value);
+                // Recursive Components are handled in the following steps :
+                // 1. Find out the path in which the component is self-referenced ( where that component reoccurs within it’s tree ).
+                // 2. We populate that component recursively for 4 times in a row.
+                // 3. Finally remove the recursive part from the last component which was populated.
+                // Also note that it doesn’t mean that component will render that many times, the rendering logic depends on the logic in it's parent. (Eg. show property binding)
+                const path = recursivelyCheckForChildrenWithSameComponent(value, (_c = el.component) === null || _c === void 0 ? void 0 : _c.name);
+                if (path) {
+                    let tempElement = el;
+                    for (let i = 0; i < 4; i++) {
+                        const tempValue = (0, lodash_1.cloneDeep)(value);
+                        (0, lodash_1.set)(tempElement, 'component.options.symbol.content', tempValue);
+                        (0, lodash_1.set)(tempElement, 'meta.preventRecursion', true);
+                        tempElement = (0, lodash_1.get)(tempValue, path);
+                    }
+                    // Finally remove the recursive part.
+                    const arrayPath = path.replace(/\[\d+\]$/, '');
+                    const newValue = removeItem(value, arrayPath, Number((_d = path.match(/\[(\d+)\]$/)) === null || _d === void 0 ? void 0 : _d[1]));
+                    (0, lodash_1.set)(tempElement, 'component.options.symbol.content', newValue);
+                    (0, lodash_1.set)(tempElement, 'meta.preventRecursion', true);
+                }
+                else {
+                    (0, lodash_1.set)(el, 'component.options.symbol.content', value);
+                }
             }
             if (el.bindings) {
                 for (const [key, value] of Object.entries(el.bindings)) {
@@ -670,6 +811,12 @@ const componentToBuilder = (options = {}) => ({ component }) => {
                 }
             }
         }
+        if ((0, builder_1.isBuilderElement)(el) && ((_e = el.meta) === null || _e === void 0 ? void 0 : _e.preventRecursion)) {
+            delete el.meta.preventRecursion;
+            if (el.meta && Object.keys(el.meta).length === 0) {
+                delete el.meta;
+            }
+        }
     });
     return result;
 };

package/dist/src/generators/builder/types.d.ts

@@ -1,5 +1,6 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;
+    stateMap?: Map<string, string>;
 }
 export type BuilderMetadata = {};

package/dist/src/parsers/builder/builder.d.ts

@@ -39,6 +39,15 @@ export declare function extractStateHook(code: string): {
     code: string;
     state: MitosisState;
 };
+/**
+ * Extracts Mitosis state from Builder state.
+ * @param mitosisState Mitosis state to update
+ * @param builderState Builder state to extract from
+ * @returns
+ */
+export declare function extractMitosisStateFromBuilderState(mitosisState: MitosisState, builderState?: {
+    [key: string]: any;
+}): void;
 export declare function convertExportDefaultToReturn(code: string): string;
 export declare const createBuilderElement: (options?: Partial<BuilderElement>) => BuilderElement;
 export declare const isBuilderElement: (el: unknown) => el is BuilderElement;

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

@@ -26,10 +26,13 @@ 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 = exports.getStyleStringFromBlock = void 0;
+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_1 = __importDefault(require("@babel/generator"));
+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"));
@@ -129,7 +132,10 @@ const getStyleStringFromBlock = (block, options) => {
             }
             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) {
+            if (verifyCode.valid) {
+                code = processBoundLogic(code);
+            }
+            else {
                 if (options.escapeInvalidCode) {
                     code = '`' + code + ' [INVALID CODE]`';
                 }
@@ -463,8 +469,8 @@ const componentMappers = {
         const actionBindings = getActionBindingsFromBlock(block, options);
         const localizedValues = {};
         const blockBindings = {
-            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings),
-            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings),
+            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings, options),
+            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings, options),
         };
         const bindings = {
             ...(0, lodash_1.omitBy)(blockBindings, (value, key) => {
@@ -598,8 +604,28 @@ const componentMappers = {
         });
     },
 };
+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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const { includeSpecialBindings = true } = options;
     const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
@@ -700,7 +726,10 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             if (!useKey.includes('.')) {
                 let code = blockBindings[key].code || blockBindings[key];
                 const verifyCode = verifyIsValid(code);
-                if (!verifyCode.valid) {
+                if (verifyCode.valid) {
+                    code = processBoundLogic(code);
+                }
+                else {
                     if (options.escapeInvalidCode) {
                         code = '`' + code + ' [INVALID CODE]`';
                     }
@@ -840,8 +869,13 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
     if (block.groupLocked !== undefined) {
         dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
     }
+    if (((_q = block.component) === null || _q === void 0 ? void 0 : _q.name) &&
+        /:/.test((_r = block.component) === null || _r === void 0 ? void 0 : _r.name) &&
+        !generator_1.builderBlockPrefixes.includes((_s = block.component) === null || _s === void 0 ? void 0 : _s.name.split(':')[0])) {
+        dataAttributes['data-builder-originalName'] = (_t = block.component) === null || _t === void 0 ? void 0 : _t.name;
+    }
     const 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, '')) ||
+        name: ((_v = (_u = block.component) === null || _u === void 0 ? void 0 : _u.name) === null || _v === void 0 ? void 0 : _v.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
         properties: {
@@ -865,17 +899,19 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             ...slots,
         },
         ...(Object.keys(blocksSlots).length > 0 && { blocksSlots }),
-        meta: (0, exports.getMetaFromBlock)(block, options),
+        meta: {
+            ...(0, exports.getMetaFromBlock)(block, options),
+        },
         ...(Object.keys(localizedValues).length && { localizedValues }),
     });
     // Has single text node child
-    const 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 = (_w = block.children) === null || _w === void 0 ? void 0 : _w[0];
+    if (((_x = block.children) === null || _x === void 0 ? void 0 : _x.length) === 1 &&
+        ((_y = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _y === void 0 ? void 0 : _y.name) === 'Text' &&
         !options.preserveTextBlocks) {
         const textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
-        const parsedNodeCss = json5_1.default.parse(((_v = node.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
-        const parsedTextCss = json5_1.default.parse(((_w = textProperties.bindings.css) === null || _w === void 0 ? void 0 : _w.code) || '{}');
+        const parsedNodeCss = json5_1.default.parse(((_z = node.bindings.css) === null || _z === void 0 ? void 0 : _z.code) || '{}');
+        const parsedTextCss = json5_1.default.parse(((_0 = textProperties.bindings.css) === null || _0 === void 0 ? void 0 : _0.code) || '{}');
         const mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
         // Don't merge if text has styling that matters
         const doNotMerge = 
@@ -977,10 +1013,38 @@ function extractStateHook(code) {
             }
         }
     }
-    const newCode = (0, generator_1.default)(types.program(newBody)).code || '';
+    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;
@@ -997,7 +1061,7 @@ function convertExportDefaultToReturn(code) {
                 }
             }
         }
-        return (0, generator_1.default)(types.program(newBody)).code || '';
+        return (0, generator_2.default)(types.program(newBody)).code || '';
     }
     catch (e) {
         const error = e;
@@ -1082,7 +1146,7 @@ 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;
+    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;
@@ -1126,16 +1190,17 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
             ...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: (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.httpRequests,
+                httpRequests: (_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.httpRequests,
             },
             // cmp.meta.cssCode exists for backwards compatibility, prefer cmp.style
-            ...(((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode }),
+            ...(((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.cssCode) && { cssCode: builderContent.data.cssCode }),
         },
-        ...(((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.cssCode) && { style: (_g = builderContent.data) === null || _g === void 0 ? void 0 : _g.cssCode }),
-        inputs: (_j = (_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.inputs) === null || _j === void 0 ? void 0 : _j.map((input) => ({
+        ...(((_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,
         })),
@@ -1149,7 +1214,7 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
                         : []),
             ],
         },
-        children: (((_k = builderContent.data) === null || _k === void 0 ? void 0 : _k.blocks) || [])
+        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')) {
@@ -1174,20 +1239,35 @@ const builderContentToMitosisComponent = (builderContent, options = {}) => {
     return componentJson;
 };
 exports.builderContentToMitosisComponent = builderContentToMitosisComponent;
-function mapBuilderBindingsToMitosisBindingWithCode(bindings) {
+function mapBuilderBindingsToMitosisBindingWithCode(bindings, options) {
     const result = {};
     bindings &&
         Object.keys(bindings).forEach((key) => {
             const value = bindings[key];
+            let code = '';
             if (typeof value === 'string') {
-                result[key] = (0, bindings_1.createSingleBinding)({ code: value });
+                code = value;
             }
             else if (value && typeof value === 'object' && value.code) {
-                result[key] = (0, bindings_1.createSingleBinding)({ code: 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;
 }

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.11.4",
+  "version": "0.11.6",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {