@builder.io/mitosis 0.0.72-5 → 0.0.72

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/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.d.ts

@@ -1,7 +1,6 @@
 import { TranspilerGenerator } from '../../types/transpiler';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
-export declare const contextPropDrillingKey = "_context";
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
 export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
 export declare const componentToReact: TranspilerGenerator<ToReactOptions>;

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

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToReact = exports.componentToPreact = exports.blockToReact = exports.contextPropDrillingKey = void 0;
+exports.componentToReact = exports.componentToPreact = exports.blockToReact = void 0;
 var dedent_1 = __importDefault(require("dedent"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
@@ -50,7 +50,6 @@ 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");
-exports.contextPropDrillingKey = '_context';
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
 function getFragment(type, options) {
@@ -145,9 +144,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 +166,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), " } ");
         }
@@ -252,55 +248,37 @@ var getRefsString = function (json, refs, options) {
     }
     return [hasStateArgument, code];
 };
-function provideContext(json, options) {
-    if (options.contextType === 'prop-drill') {
-        var str = '';
-        for (var key in json.context.set) {
-            var _a = json.context.set[key], name_1 = _a.name, ref = _a.ref, value = _a.value;
-            if (value) {
-                str += "\n          ".concat(exports.contextPropDrillingKey, ".").concat(name_1, " = ").concat((0, get_state_object_string_1.stringifyContextValue)(value), ";\n        ");
-            }
-            // TODO: support refs. I'm not sure what those are so unclear how to support them
-        }
-        return str;
-    }
-    else {
-        for (var key in json.context.set) {
-            var _b = json.context.set[key], name_2 = _b.name, ref = _b.ref, value = _b.value;
-            if (value) {
-                json.children = [
-                    (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_2, ".Provider"), children: json.children }, (value && {
-                        bindings: {
-                            value: {
-                                code: (0, get_state_object_string_1.stringifyContextValue)(value),
-                            },
+function addProviderComponents(json, options) {
+    for (var key in json.context.set) {
+        var _a = json.context.set[key], name_1 = _a.name, ref = _a.ref, value = _a.value;
+        if (value) {
+            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),
                         },
-                    }))),
-                ];
-            }
-            else if (ref) {
-                json.children = [
-                    (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: 'Context.Provider', children: json.children }, (ref && {
-                        bindings: {
-                            value: {
-                                code: ref,
-                            },
+                    },
+                }))),
+            ];
+        }
+        else if (ref) {
+            json.children = [
+                (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: 'Context.Provider', children: json.children }, (ref && {
+                    bindings: {
+                        value: {
+                            code: ref,
                         },
-                    }))),
-                ];
-            }
+                    },
+                }))),
+            ];
         }
     }
 }
 function getContextString(component, options) {
     var str = '';
     for (var key in component.context.get) {
-        if (options.contextType === 'prop-drill') {
-            str += "\n        const ".concat(key, " = ").concat(exports.contextPropDrillingKey, "['").concat(component.context.get[key].name, "'];\n      ");
-        }
-        else {
-            str += "\n        const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n      ");
-        }
+        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
     }
     return str;
 }
@@ -363,7 +341,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
     (0, process_tag_references_1.processTagReferences)(json);
-    var contextStr = provideContext(json, options);
+    addProviderComponents(json, options);
     var componentHasStyles = (0, helpers_1.hasCss)(json);
     if (options.stateType === 'useState') {
         (0, getters_to_functions_1.gettersToFunctions)(json);
@@ -407,7 +385,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (useStateCode && useStateCode.includes('useState')) {
         reactLibImports.add('useState');
     }
-    if ((0, context_1.hasContext)(json) && options.contextType !== 'prop-drill') {
+    if ((0, context_1.hasContext)(json)) {
         reactLibImports.add('useContext');
     }
     if (allRefs.length) {
@@ -428,7 +406,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propsArgs = "props: ".concat(json.propsTypeRef || 'any');
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
             ? "import * as React from 'react';"
@@ -441,9 +419,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
         component: json,
         target: options.type === 'native' ? 'reactNative' : 'react',
-    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
-        ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
-        : '', hasStateArgument ? '' : refsString, hasState
+    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', hasStateArgument ? '' : refsString, hasState
         ? stateType === 'mobx'
             ? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
             : stateType === 'useState'
@@ -451,11 +427,9 @@ var _componentToReact = function (json, options, isSubComponent) {
                 : stateType === 'solid'
                     ? "const state = useMutable(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                     : stateType === 'builder'
-                        ? "const state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-                        : stateType === 'variables'
-                            ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
-                            : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-        : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), contextStr || '', ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
+                        ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+                        : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+        : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
         ? "\n          useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,
             options: 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/react/types.d.ts

@@ -1,15 +1,10 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
-    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
+    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
     preact?: boolean;
     forwardRef?: string;
     experimental?: any;
-    /**
-     * For RSC, normal React context is currently not supported, so provide a prop drilling
-     * option
-     */
-    contextType?: 'context' | 'prop-drill';
 }

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, "} ");
         }

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')) {