@builder.io/mitosis 0.11.3 → 0.11.5

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

@@ -4,6 +4,7 @@ import { TranspilerArgs } from '../../types/transpiler';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 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

@@ -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,6 +28,91 @@ 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) => {
@@ -137,8 +223,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 +290,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
@@ -611,9 +700,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 +745,19 @@ const componentToBuilder = (options = {}) => ({ component }) => {
               })`}
       `),
             cssCode: component === null || component === void 0 ? void 0 : component.style,
+            ...(() => {
+                const stateData = findStateWithinMitosisComponent(component, options, { ...convertMitosisStateToBuilderState(component.state) }, options.stateMap);
+                console.log('stateData', stateData);
+                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 +766,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 +809,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

@@ -1,6 +1,7 @@
 import { MitosisComponent, MitosisState } from '../../types/mitosis-component';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 import { MitosisNode } from '../../types/mitosis-node';
+export declare const getStyleStringFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => string;
 type InternalOptions = {
     skipMapper?: boolean;
 };
@@ -38,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,7 +26,7 @@ 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;
+exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractMitosisStateFromBuilderState = exports.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = exports.getStyleStringFromBlock = void 0;
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
@@ -154,7 +154,9 @@ const getStyleStringFromBlock = (block, options) => {
                  */
             }
             else if (key.includes('responsiveStyles')) {
-                const [_, size, prop] = key.split('.');
+                const parts = key.split('.');
+                const size = parts[parts.length - 2];
+                const prop = parts[parts.length - 1];
                 const mediaKey = `@media (max-width: ${media_sizes_1.sizes[size].max}px)`;
                 /**
                  * The media query key has spaces/special characters so we need to ensure
@@ -195,6 +197,7 @@ const getStyleStringFromBlock = (block, options) => {
     }
     return styleString;
 };
+exports.getStyleStringFromBlock = getStyleStringFromBlock;
 const hasComponent = (block) => {
     var _a;
     return Boolean((_a = block.component) === null || _a === void 0 ? void 0 : _a.name);
@@ -301,7 +304,7 @@ const componentMappers = {
     Symbol(block, options) {
         var _a;
         let css = getCssFromBlock(block);
-        const styleString = getStyleStringFromBlock(block, options);
+        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
         const bindings = {
             symbol: (0, bindings_1.createSingleBinding)({
@@ -329,7 +332,7 @@ const componentMappers = {
             Symbol(block, options) {
                 var _a, _b, _c;
                 let css = getCssFromBlock(block);
-                const styleString = getStyleStringFromBlock(block, options);
+                const styleString = (0, exports.getStyleStringFromBlock)(block, options);
                 const actionBindings = getActionBindingsFromBlock(block, options);
                 const content = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.content;
                 const blocks = (_b = content === null || content === void 0 ? void 0 : content.data) === null || _b === void 0 ? void 0 : _b.blocks;
@@ -456,7 +459,7 @@ const componentMappers = {
     Text: (block, options) => {
         var _a, _b, _c;
         let css = getCssFromBlock(block);
-        const styleString = getStyleStringFromBlock(block, options);
+        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
         const localizedValues = {};
         const blockBindings = {
@@ -820,7 +823,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         }
     }
     const css = getCssFromBlock(block);
-    let styleString = getStyleStringFromBlock(block, options);
+    let styleString = (0, exports.getStyleStringFromBlock)(block, options);
     const actionBindings = getActionBindingsFromBlock(block, options);
     for (const binding in blockBindings) {
         if (binding.startsWith('component.options') || binding.startsWith('options')) {
@@ -978,6 +981,34 @@ function extractStateHook(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;
@@ -1079,7 +1110,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;
@@ -1123,16 +1154,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,
         })),
@@ -1146,7 +1178,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')) {

package/package.json

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