@builder.io/mitosis 0.0.72-5 → 0.0.73

package/dist/src/generators/angular.js

@@ -85,7 +85,7 @@ var BINDINGS_MAPPER = {
     style: 'ngStyle',
 };
 var blockToAngular = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (options === void 0) { options = {}; }
     if (blockOptions === void 0) { blockOptions = {}; }
     var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
@@ -153,13 +153,13 @@ var blockToAngular = function (json, options, blockOptions) {
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
-            if (key === '_spread') {
+            if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
                 continue;
             }
             if (key.startsWith('$')) {
                 continue;
             }
-            var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
+            var _h = json.bindings[key], code = _h.code, _j = _h.arguments, cusArgs = _j === void 0 ? ['event'] : _j;
             // TODO: proper babel transform to replace. Util for this
             var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                 contextVars: contextVars,

package/dist/src/generators/html.js

@@ -191,7 +191,7 @@ var addOnChangeJs = function (id, options, code) {
 };
 // TODO: spread support
 var blockToHtml = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (blockOptions === void 0) { blockOptions = {}; }
     var ComponentName = blockOptions.ComponentName;
     var scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
@@ -280,11 +280,11 @@ var blockToHtml = function (json, options, blockOptions) {
         var injectOnce = false;
         var startInjectVar = '%%START_VARS%%';
         for (var key in json.bindings) {
-            if (key === '_spread' || key === 'css') {
+            if (((_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.type) === 'spread' || key === 'css') {
                 continue;
             }
-            var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
-            var cusArg = ((_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.arguments) || ['event'];
+            var value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
+            var cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {

package/dist/src/generators/lit/generate.js

@@ -41,7 +41,7 @@ var getCustomTagName = function (name, options) {
     return kebabCaseName;
 };
 var blockToLit = function (json, options) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (json.properties._text) {
         return json.properties._text;
@@ -68,19 +68,19 @@ var blockToLit = function (json, options) {
     if (classString) {
         str += " class=".concat(classString, " ");
     }
-    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
-        str += " ${spread(".concat(json.bindings._spread.code, ")} ");
-    }
     for (var key in json.properties) {
         var value = json.properties[key];
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g;
-        if (key === '_spread' || key === '_forName') {
+        var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f, type = _e.type;
+        if (key === '_forName') {
             continue;
         }
-        if (key === 'ref') {
+        if (type === 'spread') {
+            str += " ${spread(".concat(code, ")} ");
+        }
+        else if (key === 'ref') {
             // TODO: maybe use ref directive instead
             // https://lit.dev/docs/templates/directives/#ref
             str += " ref=\"".concat(code, "\" ");
@@ -160,7 +160,7 @@ var componentToLit = function (options) {
             }
         }
         var html = json.children.map(function (item) { return blockToLit(item, options); }).join('\n');
-        var hasSpread = (0, has_1.has)(json, function (node) { return Boolean(node.bindings._spread); });
+        var hasSpread = (0, has_1.has)(json, function (node) { return (0, lodash_1.some)(node.bindings, { type: 'spread' }); });
         if (options.prettier !== false) {
             try {
                 css = (0, standalone_1.format)(css, {

package/dist/src/generators/marko/generate.js

@@ -48,7 +48,7 @@ function getStatePropertyNames(json) {
     return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
 }
 var blockToMarko = function (json, options) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -73,19 +73,19 @@ var blockToMarko = function (json, options) {
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
-        str += " ...(".concat(json.bindings._spread.code, ") ");
-    }
     for (var key in json.properties) {
         var value = json.properties[key];
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
-        if (key === '_spread' || key === '_forName') {
+        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g, type = _f.type;
+        if (key === '_forName') {
             continue;
         }
-        if (key === 'ref') {
+        if (type === 'spread') {
+            str += " ...(".concat(code, ") ");
+        }
+        else if (key === 'ref') {
             str += " key=\"".concat((0, lodash_1.camelCase)(code), "\" ");
         }
         else if (key.startsWith('on')) {
@@ -100,7 +100,7 @@ var blockToMarko = function (json, options) {
         return str + ' />';
     }
     str += '>';
-    if ((_f = json.bindings.innerHTML) === null || _f === void 0 ? void 0 : _f.code) {
+    if ((_e = json.bindings.innerHTML) === null || _e === void 0 ? void 0 : _e.code) {
         str += "$!{".concat(processBinding(options.component, json.bindings.innerHTML.code), "}");
     }
     if (json.children) {

package/dist/src/generators/mitosis.js

@@ -47,7 +47,7 @@ var isValidAttributeName = function (str) {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
 var blockToMitosis = function (json, toMitosisOptions) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
     var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
     if (options.format === 'react') {
@@ -70,9 +70,6 @@ var blockToMitosis = function (json, toMitosisOptions) {
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_d = json.bindings._spread) === null || _d === void 0 ? void 0 : _d.code) {
-        str += " {...(".concat(json.bindings._spread.code, ")} ");
-    }
     for (var key in json.properties) {
         var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (!isValidAttributeName(key)) {
@@ -83,11 +80,11 @@ var blockToMitosis = function (json, toMitosisOptions) {
         }
     }
     for (var key in json.bindings) {
-        var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
-        if (key === '_spread') {
-            continue;
+        var value = (_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code;
+        if (((_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.type) === 'spread') {
+            str += " {...(".concat((_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code, ")} ");
         }
-        if (key.startsWith('on')) {
+        else if (key.startsWith('on')) {
             str += " ".concat(key, "={event => ").concat(value.replace(/\s*;$/, ''), "} ");
         }
         else {

package/dist/src/generators/qwik/component-generator.js

@@ -76,7 +76,7 @@ var componentToQwik = function (userOptions) {
                     emitTagNameHack(file, component, (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.componentElementTag);
                     emitJSX(file, component, mutable_1);
                 },
-            ], [component.propsTypeRef + (isLightComponent ? '&{key?:any}' : '') || 'any']);
+            ], [(component.propsTypeRef || 'any') + (isLightComponent ? '&{key?:any}' : '')]);
             file.src.const(component.name, isLightComponent
                 ? componentFn
                 : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentFn]), true, true);

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

@@ -183,7 +183,7 @@ function isSlotProjection(child) {
  * @returns
  */
 function rewriteHandlers(file, handlers, bindings, symbolBindings, mutablePredicate) {
-    var _a;
+    var _a, _b;
     var outBindings = {};
     for (var key in bindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
@@ -211,7 +211,7 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings, mutablePredic
                     file.import(file.qwikModule, 'mutable');
                     bindingExpr = "mutable(".concat(bindingExpr, ")");
                 }
-                outBindings[key] = { code: bindingExpr };
+                outBindings[key] = { code: bindingExpr, type: (_b = bindings === null || bindings === void 0 ? void 0 : bindings[key]) === null || _b === void 0 ? void 0 : _b.type };
             }
         }
     }

package/dist/src/generators/qwik/src-generator.js

@@ -301,7 +301,7 @@ var SrcBuilder = /** @class */ (function () {
             }
         }
         var _loop_1 = function (rawKey) {
-            if (rawKey === '_spread') {
+            if (bindings[rawKey].type === 'spread') {
                 if (this_1.isJSX) {
                     this_1.emit('{...', bindings[rawKey].code, '}');
                 }

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

@@ -145,9 +145,6 @@ var blockToReact = function (json, options, parentSlots) {
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_b = json.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
-        str += " {...(".concat((0, helpers_2.processBinding)(json.bindings._spread.code, options), ")} ");
-    }
     for (var key in json.properties) {
         var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (key === 'class') {
@@ -170,15 +167,15 @@ var blockToReact = function (json, options, parentSlots) {
         }
     }
     for (var key in json.bindings) {
-        var value = String((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code);
-        if (key === '_spread') {
-            continue;
-        }
+        var value = String((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code);
         if (key === 'css' && value.trim() === '{}') {
             continue;
         }
         var useBindingValue = (0, helpers_2.processBinding)(value, options);
-        if (key.startsWith('on')) {
+        if (((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.type) === 'spread') {
+            str += " {...(".concat(value, ")} ");
+        }
+        else if (key.startsWith('on')) {
             var _e = json.bindings[key].arguments, cusArgs = _e === void 0 ? ['event'] : _e;
             str += " ".concat(key, "={(").concat(cusArgs.join(','), ") => ").concat((0, state_2.updateStateSettersInCode)(useBindingValue, options), " } ");
         }

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

@@ -77,6 +77,7 @@ var updateStateSetters = function (json, options) {
                     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,
                     };
                 }
             }

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

@@ -160,12 +160,13 @@ var preProcessBlockCode = function (_a) {
             json.bindings[key] = {
                 arguments: value.arguments,
                 code: (0, helpers_2.updateStateCode)({ options: options, component: component, updateSetters: true })(value.code),
+                type: value === null || value === void 0 ? void 0 : value.type,
             };
         }
     }
 };
 var blockToSolid = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var json = _a.json, options = _a.options, component = _a.component;
     preProcessBlockCode({ json: json, options: options, component: component });
     if (json.properties._text) {
@@ -196,21 +197,21 @@ var blockToSolid = function (_a) {
     if (classString) {
         str += " class=".concat(classString, " ");
     }
-    if ((_d = json.bindings._spread) === null || _d === void 0 ? void 0 : _d.code) {
-        str += " {...(".concat(json.bindings._spread.code, ")} ");
-    }
     for (var key in json.properties) {
         var value = json.properties[key];
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArg = _f === void 0 ? ['event'] : _f;
-        if (key === '_spread' || key === '_forName') {
+        var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
+        if (key === '_forName') {
             continue;
         }
         if (!code)
             continue;
-        if (key.startsWith('on')) {
+        if (type === 'spread') {
+            str += " {...(".concat(code, ")} ");
+        }
+        else if (key.startsWith('on')) {
             var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
             str += " ".concat(useKey, "={(").concat(cusArg.join(','), ") => ").concat(code, "} ");
         }
@@ -350,9 +351,6 @@ var componentToSolid = function (passedOptions) {
             ? // We add the jsx attribute so prettier formats this nicely
                 "<style jsx>{`".concat(css, "`}</style>")
             : '', addWrapper ? '</>' : '', json.name);
-        // HACK: for some reason we are generating `state.state.foo` instead of `state.foo`
-        // need a full fix, but this unblocks a lot in the short term
-        str = str.replace(/state\.state\./g, 'state.');
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/stencil/generate.js

@@ -27,7 +27,7 @@ var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
 var for_1 = require("../../helpers/nodes/for");
 var blockToStencil = function (json, options) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (json.properties._text) {
         return json.properties._text;
@@ -56,19 +56,19 @@ var blockToStencil = function (json, options) {
     if (classString) {
         str += " class=".concat(classString, " ");
     }
-    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
-        str += " {...(".concat(json.bindings._spread.code, ")} ");
-    }
     for (var key in json.properties) {
         var value = json.properties[key];
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g;
-        if (key === '_spread' || key === '_forName') {
+        var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f, type = _e.type;
+        if (key === '_forName') {
             continue;
         }
-        if (key === 'ref') {
+        if (type === 'spread') {
+            str += " {...(".concat(code, ")} ");
+        }
+        else if (key === 'ref') {
             str += " ref={(el) => this.".concat(code, " = el} ");
         }
         else if (key.startsWith('on')) {

package/dist/src/generators/svelte.js

@@ -173,7 +173,7 @@ var stripStateAndProps = function (code, options) {
     });
 };
 var blockToSvelte = function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e;
     var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
     if (mappers[json.name]) {
         return mappers[json.name]({
@@ -199,12 +199,9 @@ var blockToSvelte = function (_a) {
     }
     var str = '';
     str += "<".concat(tagName, " ");
-    if ((_c = json.bindings._spread) === null || _c === void 0 ? void 0 : _c.code) {
-        str += "{...".concat(stripStateAndProps(json.bindings._spread.code, options), "}");
-    }
     var isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
-    if ((((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style) && !isComponent) {
-        var useValue = stripStateAndProps(((_e = json.bindings.style) === null || _e === void 0 ? void 0 : _e.code) || json.properties.style, options);
+    if ((((_c = json.bindings.style) === null || _c === void 0 ? void 0 : _c.code) || json.properties.style) && !isComponent) {
+        var useValue = stripStateAndProps(((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style, options);
         str += "use:mitosis_styling={".concat(useValue, "}");
         delete json.bindings.style;
         delete json.properties.style;
@@ -217,13 +214,17 @@ var blockToSvelte = function (_a) {
         if (key === 'innerHTML') {
             continue;
         }
-        if (key === '_spread') {
-            continue;
-        }
-        var _g = json.bindings[key], value = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
+        var _f = json.bindings[key], value = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g, type = _f.type;
         // TODO: proper babel transform to replace. Util for this
         var useValue = stripStateAndProps(value, options);
-        if (key.startsWith('on')) {
+        if (type === 'spread') {
+            str += ' {...';
+            if (key === 'props') {
+                str += "$$";
+            }
+            str += "".concat(useValue, "}");
+        }
+        else if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             // TODO: handle quotes in event handler values
             var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue);
@@ -243,7 +244,7 @@ var blockToSvelte = function (_a) {
     }
     // if we have innerHTML, it doesn't matter whether we have closing tags or not, or children or not.
     // we use the innerHTML content as children and don't render the self-closing tag.
-    if ((_f = json.bindings.innerHTML) === null || _f === void 0 ? void 0 : _f.code) {
+    if ((_e = json.bindings.innerHTML) === null || _e === void 0 ? void 0 : _e.code) {
         str += '>';
         str += BINDINGS_MAPPER.innerHTML(json, options);
         str += "</".concat(tagName, ">");

package/dist/src/generators/template.js

@@ -23,7 +23,7 @@ var mappers = {
 };
 // TODO: spread support
 var blockToTemplate = function (json, options) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (options === void 0) { options = {}; }
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
@@ -64,10 +64,10 @@ var blockToTemplate = function (json, options) {
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
-            if (key === '_spread' || key === 'ref' || key === 'css') {
+            if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread' || key === 'ref' || key === 'css') {
                 continue;
             }
-            var value = (_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code;
+            var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {

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

@@ -16,6 +16,7 @@ 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");
@@ -186,9 +187,10 @@ var NODE_MAPPERS = {
 };
 var stringifyBinding = function (node) {
     return function (_a) {
+        var _b;
         var key = _a[0], value = _a[1];
-        if (key === '_spread') {
-            return '';
+        if (((_b = node.bindings[key]) === null || _b === void 0 ? void 0 : _b.type) === 'spread') {
+            return ''; // we handle this after
         }
         else if (key === 'class') {
             return " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code, {
@@ -201,7 +203,7 @@ var stringifyBinding = function (node) {
             // TODO: proper babel transform to replace. Util for this
             var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code);
             if (key.startsWith('on')) {
-                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
+                var _c = value.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && node.name === 'input') {
                     event_1 = 'input';
@@ -233,7 +235,7 @@ var stringifyBinding = function (node) {
     };
 };
 var blockToVue = function (node, options, scope) {
-    var _a, _b;
+    var _a;
     var nodeMapper = NODE_MAPPERS[node.name];
     if (nodeMapper) {
         return nodeMapper(node, options, scope);
@@ -260,9 +262,6 @@ var blockToVue = function (node, options, scope) {
     }
     var str = '';
     str += "<".concat(node.name, " ");
-    if ((_b = node.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
-        str += "v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread.code)), "\"");
-    }
     for (var key in node.properties) {
         var value = node.properties[key];
         if (key === 'className') {
@@ -282,6 +281,17 @@ var blockToVue = function (node, options, scope) {
     })
         .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; });
+    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)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreadsString)), "\"");
+        }
+        else {
+            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreads.join(''))), "\"");
+        }
+    }
     if (jsx_1.selfClosingTags.has(node.name)) {
         return str + ' />';
     }

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

@@ -3,6 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,17 +40,43 @@ var getCompositionPropDefinition = function (_a) {
     }
     return str;
 };
+function shouldAppendValueToRef(path) {
+    var parent = path.parent, node = path.node;
+    if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
+        return false;
+    }
+    if (core_1.types.isCallExpression(parent)) {
+        return false;
+    }
+    var isMemberExpression = core_1.types.isMemberExpression(parent);
+    if (isMemberExpression &&
+        core_1.types.isThisExpression(parent.object) &&
+        core_1.types.isProgram(path.scope.block) &&
+        path.scope.hasReference(node.name)) {
+        return false;
+    }
+    if (isMemberExpression &&
+        core_1.types.isIdentifier(parent.object) &&
+        core_1.types.isIdentifier(parent.property) &&
+        parent.property.name === node.name) {
+        return false;
+    }
+    if (Object.keys(path.scope.bindings).includes(path.node.name)) {
+        return false;
+    }
+    if (path.parentPath.listKey === 'arguments' || path.parentPath.listKey === 'params') {
+        return false;
+    }
+    return true;
+}
 function appendValueToRefs(input, component, options) {
-    var refKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var refKeys = Object.keys(component.refs);
+    var stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
     var output = (0, helpers_1.processBinding)({ code: input, options: options, json: component, includeProps: false });
     return (0, babel_transform_1.babelTransformExpression)(output, {
         Identifier: function (path) {
-            if (!(core_1.types.isFunctionDeclaration(path.parent) && path.parent.id === path.node) &&
-                !core_1.types.isCallExpression(path.parent) &&
-                (!core_1.types.isMemberExpression(path.parent) || core_1.types.isThisExpression(path.parent.object)) &&
-                path.parentPath.listKey !== 'arguments' &&
-                path.parentPath.listKey !== 'params' &&
-                refKeys.includes(path.node.name)) {
+            if (allKeys.includes(path.node.name) && shouldAppendValueToRef(path)) {
                 path.replaceWith(core_1.types.identifier("".concat(path.node.name, ".value")));
             }
         },

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

@@ -12,7 +12,12 @@ var allPropsMatchesRegex = new RegExp(propsRegex, 'g');
 var prohibitedKeywordRE = new RegExp('\\b' +
     ('do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
         'super,throw,while,yield,delete,export,import,return,switch,default,' +
-        'extends,finally,continue,debugger,function,arguments,typeof,void')
+        'extends,finally,continue,debugger,function,arguments,typeof,void,' +
+        // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
+        // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
+        'key,ref,slot,slot-scope,is,' +
+        // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
+        'style')
         .split(',')
         .join('\\b|\\b') +
     '\\b');

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

@@ -4,6 +4,6 @@ import { MitosisNode } from '../types/mitosis-node';
  * Test if the component has something
  *
  * e.g.
- *    const hasSpread = has(component, node => Boolean(node.bindings._spread));
+ *    const hasSpread = has(component, node => some(node.bindings, { type: 'spread' }));
  */
 export declare function has(json: MitosisComponent, test: (node: MitosisNode) => boolean): boolean;

package/dist/src/helpers/has.js

@@ -10,7 +10,7 @@ var is_mitosis_node_1 = require("./is-mitosis-node");
  * Test if the component has something
  *
  * e.g.
- *    const hasSpread = has(component, node => Boolean(node.bindings._spread));
+ *    const hasSpread = has(component, node => some(node.bindings, { type: 'spread' }));
  */
 function has(json, test) {
     var found = false;

package/dist/src/parsers/jsx/element-parser.js

@@ -238,8 +238,10 @@ var jsxElementToJson = function (node) {
                 // TODO: potentially like Vue store bindings and properties as array of key value pairs
                 // too so can do this accurately when order matters. Also tempting to not support spread,
                 // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
-                memo._spread = {
+                var key = (0, generator_1.default)(item.argument).code;
+                memo[key] = {
                     code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
+                    type: 'spread',
                 };
             }
             return memo;

package/dist/src/parsers/jsx/function-parser.d.ts

@@ -1,6 +1,9 @@
 import * as babel from '@babel/core';
 import { JSONOrNode } from '../../types/json';
+import { MitosisComponent } from '../../types/mitosis-component';
 import { Context } from './types';
+export declare function generateUseStyleCode(expression: babel.types.CallExpression): string;
+export declare function parseDefaultPropsHook(component: MitosisComponent, expression: babel.types.CallExpression): void;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */