@builder.io/mitosis 0.3.15 → 0.3.17

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");
@@ -556,6 +573,24 @@ var classPropertiesPlugin = function () { return ({
         },
     },
 }); };
+// if any state "property" is trying to access state.* or props.*
+// then we need to move them to onInit where they can be accessed
+var transformState = function (json) {
+    Object.entries(json.state).forEach(function (_a) {
+        var _b;
+        var key = _a[0], value = _a[1];
+        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
+            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
+                var code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
+                json.state[key].code = 'null';
+                if (!((_b = json.hooks.onInit) === null || _b === void 0 ? void 0 : _b.code)) {
+                    json.hooks.onInit = { code: '' };
+                }
+                json.hooks.onInit.code += "\nthis.".concat(key, " = ").concat(code, ";\n");
+            }
+        }
+    });
+};
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
@@ -713,6 +748,11 @@ 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;
+        transformState(json);
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
             valueMapper: processAngularCode({
@@ -723,10 +763,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/package.json

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