@builder.io/mitosis 0.1.0 → 0.1.2

package/dist/src/generators/react/blocks.js

@@ -198,7 +198,12 @@ var blockToReact = function (json, options, component, parentSlots) {
                 str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {
-                str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
+                if (useBindingValue === 'true') {
+                    str += " ".concat(BINDING_MAPPERS[key], " ");
+                }
+                else {
+                    str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
+                }
             }
         }
         else if (key === 'style' && options.type === 'native' && json.name === 'ScrollView') {

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

@@ -527,7 +527,17 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         for (var key in block.component.options) {
             var value = block.component.options[key];
             var valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
-            if (typeof value === 'string') {
+            var transformBldrElementToBinding = function (item) {
+                var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
+                // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
+                // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
+                // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
+                return (0, __1.blockToMitosis)(node, {}, null);
+            };
+            if ((0, exports.isBuilderElement)(value)) {
+                bindings[key] = (0, bindings_1.createSingleBinding)({ code: transformBldrElementToBinding(value) });
+            }
+            else if (typeof value === 'string') {
                 properties[key] = value;
             }
             else if (valueIsArrayOfBuilderElements) {
@@ -539,13 +549,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                     }
                     return true;
                 })
-                    .map(function (item) {
-                    var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
-                    // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
-                    // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
-                    // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
-                    return (0, __1.blockToMitosis)(node, {}, null);
-                });
+                    .map(transformBldrElementToBinding);
                 var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
             }

package/dist/src/plugins/compile-away-builder-components.js

@@ -256,8 +256,8 @@ exports.components = {
         }), components);
     },
     Image: function (node, context, components) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h = node.properties, backgroundSize = _h.backgroundSize, backgroundPosition = _h.backgroundPosition;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _k = node.properties, backgroundSize = _k.backgroundSize, backgroundPosition = _k.backgroundPosition;
         var srcset = node.properties.srcset;
         var aspectRatio = ((_a = node.bindings.aspectRatio) === null || _a === void 0 ? void 0 : _a.code)
             ? parseFloat(node.bindings.aspectRatio.code)
@@ -281,12 +281,13 @@ exports.components = {
             bindings: noUndefined({
                 src: ((_c = node.bindings.image) === null || _c === void 0 ? void 0 : _c.code) && { code: (_d = node.bindings.image) === null || _d === void 0 ? void 0 : _d.code },
                 sizes: ((_e = node.bindings.sizes) === null || _e === void 0 ? void 0 : _e.code) && { code: (_f = node.bindings.sizes) === null || _f === void 0 ? void 0 : _f.code },
+                style: ((_g = node.bindings.style) === null || _g === void 0 ? void 0 : _g.code) && { code: (_h = node.bindings.style) === null || _h === void 0 ? void 0 : _h.code },
                 css: (0, bindings_1.createSingleBinding)({
                     code: JSON.stringify(__assign(__assign({ aspectRatio: aspectRatio ? String((0, lodash_1.round)(1 / aspectRatio, 2)) : undefined, objectFit: backgroundSize || 'cover', objectPosition: backgroundPosition || 'center', width: '100%' }, css), { display: undefined, flexDirection: undefined, position: css.position === 'relative' ? undefined : css.position })),
                 }),
             }),
         });
-        if (!((_g = node.children) === null || _g === void 0 ? void 0 : _g.length)) {
+        if (!((_j = node.children) === null || _j === void 0 ? void 0 : _j.length)) {
             return img;
         }
         // TODO: deal with links: anchor tag and href

package/package.json

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