@builder.io/mitosis 0.0.86 → 0.0.87

package/dist/src/generators/angular.js

@@ -381,7 +381,7 @@ var componentToAngular = function (userOptions) {
                 var _a;
                 var value = json.defaultProps.hasOwnProperty(prop)
                     ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                    : '{}';
+                    : 'undefined';
                 return "".concat(prop, ": ").concat(value);
             })
                 .join(',');

package/dist/src/generators/qwik/jsx.js

@@ -183,32 +183,30 @@ function isSlotProjection(child) {
  * @returns
  */
 function rewriteHandlers(file, handlers, bindings, symbolBindings) {
-    var _a, _b;
     var outBindings = {};
     for (var key in bindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
-            var bindingExpr = (_a = bindings === null || bindings === void 0 ? void 0 : bindings[key]) === null || _a === void 0 ? void 0 : _a.code;
+            var bindingValue = bindings[key];
+            var bindingExpr = bindingValue.code;
             var handlerBlock = void 0;
-            if (bindingExpr != null) {
-                if (key == 'css') {
-                    continue;
-                }
-                else if ((handlerBlock = handlers.get(bindingExpr))) {
-                    key = "".concat(key, "$");
-                    bindingExpr = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
-                        (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
-                        (0, src_generator_1.quote)(handlerBlock),
-                        '[state]',
-                    ]);
-                }
-                else if (symbolBindings && key.startsWith('symbol.data.')) {
-                    symbolBindings[(0, src_generator_1.lastProperty)(key)] = bindingExpr;
-                }
-                else if (key.startsWith('component.options.')) {
-                    key = (0, src_generator_1.lastProperty)(key);
-                }
-                outBindings[key] = { code: bindingExpr, type: (_b = bindings === null || bindings === void 0 ? void 0 : bindings[key]) === null || _b === void 0 ? void 0 : _b.type };
+            if (key == 'css') {
+                continue;
+            }
+            else if ((handlerBlock = handlers.get(bindingExpr))) {
+                key = "".concat(key, "$");
+                bindingExpr = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
+                    (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
+                    (0, src_generator_1.quote)(handlerBlock),
+                    '[state]',
+                ]);
+            }
+            else if (symbolBindings && key.startsWith('symbol.data.')) {
+                symbolBindings[(0, src_generator_1.lastProperty)(key)] = bindingExpr;
+            }
+            else if (key.startsWith('component.options.')) {
+                key = (0, src_generator_1.lastProperty)(key);
             }
+            outBindings[key] = __assign(__assign({}, bindingValue), { code: bindingExpr });
         }
     }
     return outBindings;

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

@@ -50,6 +50,7 @@ var state_2 = require("./state");
 var helpers_2 = require("./helpers");
 var hash_sum_1 = __importDefault(require("hash-sum"));
 var for_1 = require("../../helpers/nodes/for");
+var bindings_1 = require("../../helpers/bindings");
 exports.contextPropDrillingKey = '_context';
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
@@ -310,9 +311,9 @@ function provideContext(json, options) {
                 json.children = [
                     (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_2, ".Provider"), children: json.children }, (value && {
                         bindings: {
-                            value: {
+                            value: (0, bindings_1.createSingleBinding)({
                                 code: (0, get_state_object_string_1.stringifyContextValue)(value),
-                            },
+                            }),
                         },
                     }))),
                 ];
@@ -321,9 +322,7 @@ function provideContext(json, options) {
                 json.children = [
                     (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: 'Context.Provider', children: json.children }, (ref && {
                         bindings: {
-                            value: {
-                                code: ref,
-                            },
+                            value: (0, bindings_1.createSingleBinding)({ code: ref }),
                         },
                     }))),
                 ];
@@ -477,7 +476,7 @@ var _componentToReact = function (json, options, isSubComponent) {
             var _a;
             var value = json.defaultProps.hasOwnProperty(prop)
                 ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                : '{}';
+                : 'undefined';
             return "".concat(prop, ": ").concat(value);
         })
             .join(',');

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -76,11 +87,7 @@ var updateStateSetters = function (json, options) {
                 var values = item.bindings[key];
                 var newValue = (0, exports.updateStateSettersInCode)(values === null || values === void 0 ? void 0 : values.code, options);
                 if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
-                    item.bindings[key] = {
-                        code: newValue,
-                        arguments: values === null || values === void 0 ? void 0 : values.arguments,
-                        type: values === null || values === void 0 ? void 0 : values.type,
-                    };
+                    item.bindings[key] = __assign(__assign({}, values), { code: newValue });
                 }
             }
         }

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

@@ -30,6 +30,7 @@ var fast_clone_1 = require("../helpers/fast-clone");
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
+var bindings_1 = require("../helpers/bindings");
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
 var collectReactNativeStyles = function (json) {
@@ -69,7 +70,7 @@ var collectReactNativeStyles = function (json) {
         var componentName = (0, lodash_1.camelCase)(item.name || 'view');
         var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
         var className = "".concat(componentName).concat(index);
-        item.bindings.style = { code: "styles.".concat(className) };
+        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: "styles.".concat(className) });
         styleMap[className] = value;
     });
     return styleMap;

package/dist/src/generators/rsc.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToRsc = void 0;
+var bindings_1 = require("../helpers/bindings");
 var traverse_1 = __importDefault(require("traverse"));
 var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
@@ -57,9 +58,9 @@ var RSC_TRANSFORM_PLUGIN = function () { return ({
                         // Drill context down, aka
                         // function (props) { return <Component _context{props._context} /> }
                         if (!node.bindings[react_1.contextPropDrillingKey]) {
-                            node.bindings[react_1.contextPropDrillingKey] = {
+                            node.bindings[react_1.contextPropDrillingKey] = (0, bindings_1.createSingleBinding)({
                                 code: react_1.contextPropDrillingKey,
-                            };
+                            });
                         }
                     }
                     if (node.bindings.ref) {

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

@@ -76,13 +76,14 @@ var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var context_1 = require("../helpers/context");
 var blocks_1 = require("./blocks");
+var bindings_1 = require("../../helpers/bindings");
 // Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json, options) {
     var found = false;
     (0, traverse_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name.includes('.') && !node.name.endsWith('.Provider')) {
-                node.bindings.component = { code: node.name };
+                node.bindings.component = (0, bindings_1.createSingleBinding)({ code: node.name });
                 node.name = 'Dynamic';
                 found = true;
             }
@@ -112,7 +113,7 @@ function addProviderComponents(json, options) {
         json.children = [
             (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (value && {
                 bindings: {
-                    value: { code: (0, get_state_object_string_1.stringifyContextValue)(value) },
+                    value: (0, bindings_1.createSingleBinding)({ code: (0, get_state_object_string_1.stringifyContextValue)(value) }),
                 },
             }))),
         ];

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

@@ -12,6 +12,7 @@ var html_tags_1 = require("../../constants/html_tags");
 var is_upper_case_1 = require("../../helpers/is-upper-case");
 var for_1 = require("../../helpers/nodes/for");
 var helpers_1 = require("./helpers");
+var bindings_1 = require("../../helpers/bindings");
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -96,9 +97,9 @@ var getTagName = function (_a) {
     // TO-DO: no way to decide between <svelte:component> and <svelte:element>...need to do that through metadata
     // overrides for now
     if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
-        json.bindings.this = {
+        json.bindings.this = (0, bindings_1.createSingleBinding)({
             code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options: options })(json.name),
-        };
+        });
         return SVELTE_SPECIAL_TAGS.COMPONENT;
     }
     return json.name;

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

@@ -16,7 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
 var function_1 = require("fp-ts/lib/function");
-var lodash_1 = require("lodash");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -25,11 +24,15 @@ var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var slots_1 = require("../../helpers/slots");
 var jsx_1 = require("../../parsers/jsx");
 var helpers_1 = require("./helpers");
+var nullable_1 = require("../../helpers/nullable");
 var SPECIAL_PROPERTIES = {
     V_IF: 'v-if',
     V_FOR: 'v-for',
     V_ELSE: 'v-else',
     V_ELSE_IF: 'v-else-if',
+    V_ON: 'v-on',
+    V_ON_AT: '@',
+    V_BIND: 'v-bind',
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDING_MAPPERS = {
@@ -37,16 +40,17 @@ var BINDING_MAPPERS = {
 };
 var NODE_MAPPERS = {
     Fragment: function (json, options, scope) {
-        if (options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
+        var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+        if (options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode) && children.length > 1) {
             throw new Error('Vue 2 template should have a single root element');
         }
-        return json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
+        return children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
     },
     For: function (_json, options) {
         var _a, _b;
         var _c;
         var json = _json;
-        var keyValue = json.bindings.key || { code: 'index' };
+        var keyValue = json.bindings.key || { code: 'index', type: 'single' };
         var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code);
         if (options.vueVersion >= 3) {
             // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
@@ -191,13 +195,12 @@ var NODE_MAPPERS = {
 };
 var stringifyBinding = function (node) {
     return function (_a) {
-        var _b;
         var key = _a[0], value = _a[1];
-        if (((_b = node.bindings[key]) === null || _b === void 0 ? void 0 : _b.type) === 'spread') {
+        if (value.type === 'spread') {
             return ''; // we handle this after
         }
         else if (key === 'class') {
-            return " :class=\"_classStringToObject(".concat(value === null || value === void 0 ? void 0 : value.code, ")\" ");
+            return ":class=\"_classStringToObject(".concat(value === null || value === void 0 ? void 0 : value.code, ")\"");
             // TODO: support dynamic classes as objects somehow like Vue requires
             // https://vuejs.org/v2/guide/class-and-style.html
         }
@@ -205,37 +208,70 @@ var stringifyBinding = function (node) {
             // TODO: proper babel transform to replace. Util for this
             var useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
             if (key.startsWith('on')) {
-                var _c = value.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
+                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && node.name === 'input') {
                     event_1 = 'input';
                 }
                 var isAssignmentExpression = useValue.includes('=');
-                var valueWRenamedEvent = (0, replace_identifiers_1.replaceIdentifiers)({
+                var eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
                     code: useValue,
                     from: cusArgs[0],
                     to: '$event',
-                });
-                // TODO: proper babel transform to replace. Util for this
-                if (isAssignmentExpression) {
-                    return " @".concat(event_1, "=\"").concat((0, helpers_1.encodeQuotes)((0, remove_surrounding_block_1.removeSurroundingBlock)(valueWRenamedEvent)), "\" ");
-                }
-                else {
-                    return " @".concat(event_1, "=\"").concat((0, helpers_1.encodeQuotes)((0, remove_surrounding_block_1.removeSurroundingBlock)((0, remove_surrounding_block_1.removeSurroundingBlock)(valueWRenamedEvent))), "\" ");
-                }
+                }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
+                var eventHandlerKey = "".concat(SPECIAL_PROPERTIES.V_ON_AT).concat(event_1);
+                return "".concat(eventHandlerKey, "=\"").concat(eventHandlerValue, "\"");
             }
             else if (key === 'ref') {
-                return " ref=\"".concat((0, helpers_1.encodeQuotes)(useValue), "\" ");
+                return "ref=\"".concat((0, helpers_1.encodeQuotes)(useValue), "\"");
             }
             else if (BINDING_MAPPERS[key]) {
-                return " ".concat(BINDING_MAPPERS[key], "=\"").concat((0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'")), "\" ");
+                return "".concat(BINDING_MAPPERS[key], "=\"").concat((0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'")), "\"");
             }
             else {
-                return " :".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(useValue), "\" ");
+                return ":".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(useValue), "\"");
             }
         }
     };
 };
+var stringifySpreads = function (_a) {
+    var node = _a.node, spreadType = _a.spreadType;
+    var spreads = Object.values(node.bindings)
+        .filter(nullable_1.checkIsDefined)
+        .filter(function (binding) { return binding.type === 'spread' && binding.spreadType === spreadType; })
+        .map(function (value) { return (value.code === 'props' ? '$props' : value.code); });
+    if (spreads.length === 0) {
+        return '';
+    }
+    var stringifiedValue = spreads.length > 1 ? "{".concat(spreads.map(function (spread) { return "...".concat(spread); }).join(', '), "}") : spreads[0];
+    var key = spreadType === 'normal' ? SPECIAL_PROPERTIES.V_BIND : SPECIAL_PROPERTIES.V_ON;
+    return " ".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(stringifiedValue), "\" ");
+};
+var getBlockBindings = function (node) {
+    var stringifiedProperties = Object.entries(node.properties)
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (key === 'className') {
+            return '';
+        }
+        else if (key === SPECIAL_PROPERTIES.V_ELSE) {
+            return "".concat(key);
+        }
+        else if (typeof value === 'string') {
+            return "".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(value), "\"");
+        }
+    })
+        .join(' ');
+    var stringifiedBindings = Object.entries(node.bindings)
+        .map(stringifyBinding(node))
+        .join(' ');
+    return [
+        stringifiedProperties,
+        stringifiedBindings,
+        stringifySpreads({ node: node, spreadType: 'normal' }),
+        stringifySpreads({ node: node, spreadType: 'event-handlers' }),
+    ].join(' ');
+};
 var blockToVue = function (node, options, scope) {
     var _a;
     var nodeMapper = NODE_MAPPERS[node.name];
@@ -249,7 +285,7 @@ var blockToVue = function (node, options, scope) {
         // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
         // <component is="'style'">...</component>
         node.name = 'component';
-        node.bindings.is = { code: "'style'" };
+        node.bindings.is = { code: "'style'", type: 'single' };
     }
     if (node.properties._text) {
         return "".concat(node.properties._text);
@@ -261,35 +297,8 @@ var blockToVue = function (node, options, scope) {
         }
         return "{{".concat(textCode, "}}");
     }
-    var str = '';
-    str += "<".concat(node.name, " ");
-    for (var key in node.properties) {
-        var value = node.properties[key];
-        if (key === 'className') {
-            continue;
-        }
-        else if (key === SPECIAL_PROPERTIES.V_ELSE) {
-            str += " ".concat(key, " ");
-        }
-        else if (typeof value === 'string') {
-            str += " ".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(value), "\" ");
-        }
-    }
-    var stringifiedBindings = Object.entries(node.bindings).map(stringifyBinding(node)).join('');
-    str += stringifiedBindings;
-    // spreads
-    var spreads = (0, lodash_1.filter)(node.bindings, function (binding) { return (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread'; }).map(function (value) {
-        return (value === null || value === void 0 ? void 0 : value.code) === 'props' ? '$props' : value === null || value === void 0 ? void 0 : value.code;
-    });
-    if (spreads === null || spreads === void 0 ? void 0 : spreads.length) {
-        if (spreads.length > 1) {
-            var spreadsString = "{...".concat(spreads.join(', ...'), "}");
-            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)(spreadsString), "\"");
-        }
-        else {
-            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)(spreads.join('')), "\"");
-        }
-    }
+    var str = "<".concat(node.name, " ");
+    str += getBlockBindings(node);
     if (jsx_1.selfClosingTags.has(node.name)) {
         return str + ' />';
     }

package/dist/src/generators/vue/compositionApi.js

@@ -25,7 +25,7 @@ var getCompositionPropDefinition = function (_a) {
             var _a;
             var value = component.defaultProps.hasOwnProperty(prop)
                 ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                : '{}';
+                : 'undefined';
             return "".concat(prop, ": ").concat(value);
         })
             .join(',');

package/dist/src/generators/vue/optionsApi.js

@@ -132,7 +132,7 @@ function generateOptionsApiScript(component, options, path, template, props, onU
                 var _a;
                 var value = component.defaultProps.hasOwnProperty(prop)
                     ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                    : '{}';
+                    : 'undefined';
                 return "".concat(prop, ": { default: ").concat(value, " }");
             })
                 .join(',');

package/dist/src/generators/vue/vue.js

@@ -42,12 +42,13 @@ var blocks_1 = require("./blocks");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var bindings_1 = require("../../helpers/bindings");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, _options) {
     (0, traverse_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name.includes('.')) {
-                node.bindings.is = { code: node.name };
+                node.bindings.is = (0, bindings_1.createSingleBinding)({ code: node.name });
                 node.name = 'component';
             }
         }

package/dist/src/helpers/bindings.d.ts

@@ -0,0 +1,2 @@
+import { Binding } from '../types/mitosis-node';
+export declare const createSingleBinding: (args: Omit<Binding, 'type'>) => Binding;

package/dist/src/helpers/bindings.js

@@ -0,0 +1,16 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSingleBinding = void 0;
+var createSingleBinding = function (args) { return (__assign(__assign({}, args), { type: 'single' })); };
+exports.createSingleBinding = createSingleBinding;

package/dist/src/helpers/get-styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setStyles = exports.getStyles = void 0;
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
+var bindings_1 = require("./bindings");
 var getStyles = function (json) {
     var _a;
     if (!json.bindings.css) {
@@ -27,7 +28,7 @@ var setStyles = function (json, styles) {
         delete json.bindings.css;
     }
     else {
-        json.bindings.css = { code: json5_1.default.stringify(styles) };
+        json.bindings.css = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(styles) });
     }
 };
 exports.setStyles = setStyles;

package/dist/src/parsers/angular.js

@@ -12,6 +12,7 @@ var lodash_1 = require("lodash");
 var babel_transform_1 = require("../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var capitalize_1 = require("../helpers/capitalize");
+var bindings_1 = require("../helpers/bindings");
 var getTsAST = function (code) {
     return typescript_1.default.createSourceFile('code.ts', code, typescript_1.default.ScriptTarget.Latest, true);
 };
@@ -46,9 +47,9 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 bindings: {
-                    when: {
+                    when: (0, bindings_1.createSingleBinding)({
                         code: transformBinding(ngIf.value.source, options),
-                    },
+                    }),
                 },
                 children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
             });
@@ -61,7 +62,7 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'For',
                 bindings: {
-                    each: { code: transformBinding(expression, options) },
+                    each: (0, bindings_1.createSingleBinding)({ code: transformBinding(expression, options) }),
                 },
                 scope: {
                     forName: itemName,
@@ -75,17 +76,17 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
         var bindings = {};
         for (var _i = 0, _a = node.inputs; _i < _a.length; _i++) {
             var input = _a[_i];
-            bindings[input.name] = {
+            bindings[input.name] = (0, bindings_1.createSingleBinding)({
                 code: transformBinding(input.value.source, options),
-            };
+            });
         }
         for (var _b = 0, _c = node.outputs; _b < _c.length; _b++) {
             var output = _c[_b];
-            bindings['on' + (0, capitalize_1.capitalize)(output.name)] = {
+            bindings['on' + (0, capitalize_1.capitalize)(output.name)] = (0, bindings_1.createSingleBinding)({
                 code: transformBinding(output.handler
                     .source // TODO: proper reference replace
                     .replace(/\$event/g, 'event'), options),
-            };
+            });
         }
         for (var _d = 0, _e = node.attributes; _d < _e.length; _d++) {
             var attribute = _e[_d];