@builder.io/mitosis 0.4.1 → 0.4.2

package/dist/src/generators/builder.js

@@ -4,6 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToBuilder = exports.blockToBuilder = void 0;
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const replace_identifiers_1 = require("../helpers/replace-identifiers");
+const core_1 = require("@babel/core");
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -70,6 +73,27 @@ const componentMappers = {
     },
     For(_node, options) {
         var _a;
+        // rename `index` var to `state.$index`
+        const replaceIndex = (node) => {
+            (0, legacy_1.default)(node).forEach(function (thing) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(thing)) {
+                    for (const [key, value] of Object.entries(thing.bindings)) {
+                        if (value === null || value === void 0 ? void 0 : value.code.includes('index')) {
+                            thing.bindings[key].code = (0, replace_identifiers_1.replaceNodes)({
+                                code: value.code,
+                                nodeMaps: [
+                                    {
+                                        from: core_1.types.identifier('index'),
+                                        to: core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier('$index')),
+                                    },
+                                ],
+                            });
+                        }
+                    }
+                }
+            });
+            return node;
+        };
         const node = _node;
         return el({
             component: {
@@ -81,7 +105,7 @@ const componentMappers = {
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-                .map((node) => (0, exports.blockToBuilder)(node, options)),
+                .map((node) => (0, exports.blockToBuilder)(replaceIndex(node), options)),
         }, options);
     },
     Show(node, options) {

package/dist/src/generators/mitosis.js

@@ -43,7 +43,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         const needsWrapper = json.children.length !== 1;
         return `<For each={${(_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code}}>
-    {(${json.scope.forName}, index) =>
+    {(${json.scope.forName}, ${json.scope.indexName || 'index'}) =>
       ${needsWrapper ? '<>' : ''}
         ${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component))}}
       ${needsWrapper ? '</>' : ''}

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

@@ -345,10 +345,9 @@ const componentMappers = {
             },
             scope: {
                 forName: block.component.options.repeat.itemName,
-                indexName: '$index',
             },
             meta: (0, exports.getMetaFromBlock)(block, options),
-            children: (block.children || []).map((child) => (0, exports.builderElementToMitosisNode)(child, options)),
+            children: (block.children || []).map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options)),
         });
     },
     Text: (block, options) => {
@@ -480,10 +479,9 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
                 },
                 scope: {
                     forName: ((_e = block.repeat) === null || _e === void 0 ? void 0 : _e.itemName) || 'item',
-                    indexName: '$index',
                 },
                 meta: (0, exports.getMetaFromBlock)(block, options),
-                children: ((_f = block.children) === null || _f === void 0 ? void 0 : _f.map((child) => (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 {
@@ -797,6 +795,27 @@ 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;

package/package.json

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