@builder.io/mitosis 0.3.14 → 0.3.16

package/dist/src/generators/angular/index.js

@@ -264,10 +264,10 @@ var handleNgOutletBindings = function (node, options) {
     return allProps;
 };
 var blockToAngular = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var root = _a.root, json = _a.json, _g = _a.options, options = _g === void 0 ? {} : _g, _h = _a.blockOptions, blockOptions = _h === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var root = _a.root, json = _a.json, _l = _a.options, options = _l === void 0 ? {} : _l, _m = _a.blockOptions, blockOptions = _m === void 0 ? {
         nativeAttributes: [],
-    } : _h;
+    } : _m;
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
         return mappers[json.name](root, json, options);
@@ -292,14 +292,29 @@ var blockToAngular = function (_a) {
     var str = '';
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var indexName = json.scope.indexName;
-        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        var forName = json.scope.forName;
+        // Check if "key" is present for the first child of the for loop
+        if (json.children[0].bindings && ((_c = json.children[0].bindings.key) === null || _c === void 0 ? void 0 : _c.code)) {
+            var fnIndex = ((_d = root.meta) === null || _d === void 0 ? void 0 : _d._trackByForIndex) || 0;
+            var trackByFnName = "trackBy".concat(forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : '').concat(fnIndex);
+            root.meta._trackByForIndex = fnIndex + 1;
+            var code = (_e = json.children[0].bindings.key) === null || _e === void 0 ? void 0 : _e.code;
+            root.state[trackByFnName] = {
+                code: "".concat(trackByFnName, "(").concat(indexName !== null && indexName !== void 0 ? indexName : '_', ", ").concat(forName, ") { return ").concat(code, "; }"),
+                type: 'method',
+            };
+            str += "<ng-container *ngFor=\"let ".concat(forName, " of ").concat((_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "; trackBy: ").concat(trackByFnName, "\">");
+        }
+        else {
+            str += "<ng-container *ngFor=\"let ".concat(forName, " of ").concat((_g = json.bindings.each) === null || _g === void 0 ? void 0 : _g.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        }
         str += json.children
             .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
             .join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        var condition = (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code;
+        var condition = (_h = json.bindings.when) === null || _h === void 0 ? void 0 : _h.code;
         if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
             var wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
             condition = condition.replace("typeof ".concat(wordAfterTypeof), "useTypeOf(".concat(wordAfterTypeof, ")"));
@@ -310,7 +325,7 @@ var blockToAngular = function (_a) {
             .join('\n');
         str += "</ng-container>";
         // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_e = json.meta) === null || _e === void 0 ? void 0 : _e.else)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)((_j = json.meta) === null || _j === void 0 ? void 0 : _j.else)) {
             str += "<ng-container *ngIf=\"!(".concat(condition, ")\">");
             str += (0, exports.blockToAngular)({ root: root, json: json.meta.else, options: options, blockOptions: blockOptions });
             str += "</ng-container>";
@@ -327,7 +342,7 @@ var blockToAngular = function (_a) {
                 code: 'null',
                 type: 'property',
             };
-            if (!((_f = root.hooks.onInit) === null || _f === void 0 ? void 0 : _f.code.includes(inputsPropsStateName))) {
+            if (!((_k = root.hooks.onInit) === null || _k === void 0 ? void 0 : _k.code.includes(inputsPropsStateName))) {
                 if (!root.hooks.onInit) {
                     root.hooks.onInit = { code: '' };
                 }
@@ -437,6 +452,8 @@ var handleBindings = function (json, item, index, forName, indexName) {
         if (forName) {
             if (item.name === 'For')
                 continue;
+            if (key === 'key')
+                continue;
             if (key.startsWith('on')) {
                 var _j = item.bindings[key].arguments, cusArgs = _j === void 0 ? ['event'] : _j;
                 var eventBindingName = "".concat(generateNewBindingName(index, item.name), "_event");
@@ -713,6 +730,10 @@ var componentToAngular = function (userOptions) {
             template = tryFormat(template, 'html');
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var _p = traverseToGetAllDynamicComponents(json, options, {
+            childComponents: childComponents,
+            nativeAttributes: (_e = (_d = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _d === void 0 ? void 0 : _d.nativeAttributes) !== null && _e !== void 0 ? _e : [],
+        }), dynamicComponents = _p.components, dynamicTemplate = _p.dynamicTemplate;
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
             valueMapper: processAngularCode({
@@ -723,10 +744,6 @@ var componentToAngular = function (userOptions) {
                 stateVars: stateVars,
             }),
         });
-        var _p = traverseToGetAllDynamicComponents(json, options, {
-            childComponents: childComponents,
-            nativeAttributes: (_e = (_d = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _d === void 0 ? void 0 : _d.nativeAttributes) !== null && _e !== void 0 ? _e : [],
-        }), dynamicComponents = _p.components, dynamicTemplate = _p.dynamicTemplate;
         var hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
         var styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
         // Preparing built in component metadata parameters

package/dist/src/generators/react-native/index.js

@@ -167,29 +167,44 @@ var TWRNC_STYLES_PLUGIN = function () { return ({
         post: function (json) {
             (0, legacy_1.default)(json).forEach(function (node) {
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                    var combinedClasses = [
-                        node.properties.class,
-                        node.properties.className,
-                        node.bindings.class,
-                        node.bindings.className,
-                    ]
+                    var staticClasses = [node.properties.class, node.properties.className]
                         .filter(Boolean)
                         .join(' ');
-                    if (combinedClasses) {
-                        node.properties.style = "{tw`".concat(combinedClasses, "`}");
-                    }
-                    if (node.properties.class) {
-                        delete node.properties.class;
-                    }
-                    if (node.properties.className) {
-                        delete node.properties.className;
-                    }
-                    if (node.bindings.class) {
-                        delete node.bindings.class;
-                    }
-                    if (node.bindings.className) {
-                        delete node.bindings.className;
+                    var dynamicClasses = [node.bindings.class, node.bindings.className].filter(Boolean);
+                    if (staticClasses || dynamicClasses.length) {
+                        var styleCode = '';
+                        if (staticClasses) {
+                            styleCode = "tw`".concat(staticClasses, "`");
+                        }
+                        if (dynamicClasses.length) {
+                            var dynamicCode = dynamicClasses
+                                .map(function (dc) { return (dc && dc.code ? dc.code : null); })
+                                .filter(Boolean)
+                                .join(', ');
+                            if (dynamicCode) {
+                                if (styleCode) {
+                                    // If we have both static and dynamic classes
+                                    styleCode = "tw.style(".concat(styleCode, ", ").concat(dynamicCode, ")");
+                                }
+                                else if (dynamicClasses.length > 1) {
+                                    // If we have multiple dynamic classes
+                                    styleCode = "tw.style([".concat(dynamicCode, "])");
+                                }
+                                else {
+                                    // If we have a single dynamic class
+                                    styleCode = "tw.style(".concat(dynamicCode, ")");
+                                }
+                            }
+                        }
+                        if (styleCode) {
+                            node.bindings.style = (0, bindings_1.createSingleBinding)({ code: styleCode });
+                        }
                     }
+                    // Clean up original class and className properties/bindings
+                    delete node.properties.class;
+                    delete node.properties.className;
+                    delete node.bindings.class;
+                    delete node.bindings.className;
                 }
             });
         },

package/package.json

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