@builder.io/mitosis 0.0.56-21 → 0.0.56-24

package/dist/src/__tests__/data/blocks/classname-jsx.raw.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from '../../../jsx-types';
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
     slotTesting: JSX.Element;

package/dist/src/__tests__/data/blocks/content-slot-html.raw.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from '../../../jsx-types';
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
     slotTesting: JSX.Element;

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from '../../../jsx-types';
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
 };

package/dist/src/__tests__/data/blocks/image.raw.d.ts

@@ -1,5 +1,5 @@
 export interface ImageProps {
-    class?: string;
+    _class?: string;
     image: string;
     sizes?: string;
     lazy?: boolean;

package/dist/src/__tests__/data/blocks/image.raw.jsx

@@ -53,7 +53,7 @@ function Image(props) {
             transition: 'opacity 0.2s ease-in-out',
             objectFit: 'cover',
             objectPosition: 'center',
-        }} class={'builder-image' + (props.class ? ' ' + props.class : '')} src={props.image} onLoad={function () { return state.setLoaded(); }} 
+        }} class={'builder-image' + (props._class ? ' ' + props._class : '')} src={props.image} onLoad={function () { return state.setLoaded(); }} 
     // TODO: memoize on image on client
     srcset={props.srcset} sizes={props.sizes}/>
         </mitosis_1.Show>

package/dist/src/__tests__/data/show/nested-show.raw copy.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    conditionA: boolean;
+    conditionB: boolean;
+}
+export default function NestedShow(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/show/nested-show.raw copy.jsx

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function NestedShow(props) {
+    return (<mitosis_1.Show when={props.conditionA} else={<div>else-condition-A</div>}>
+      <mitosis_1.Show when={!props.conditionB} else={<div>else-condition-B</div>}>
+        <div>if condition A and condition B</div>
+      </mitosis_1.Show>
+    </mitosis_1.Show>);
+}
+exports.default = NestedShow;

package/dist/src/__tests__/data/show/nested-show.raw.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    conditionA: boolean;
+    conditionB: boolean;
+}
+export default function NestedShow(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/show/nested-show.raw.jsx

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function NestedShow(props) {
+    return (<mitosis_1.Show when={props.conditionA} else={<div>else-condition-A</div>}>
+      <mitosis_1.Show when={!props.conditionB} else={<div>else-condition-B</div>}>
+        <div>if condition A and condition B</div>
+      </mitosis_1.Show>
+    </mitosis_1.Show>);
+}
+exports.default = NestedShow;

package/dist/src/__tests__/data/show/show-with-for.raw.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    conditionA: boolean;
+    items: string[];
+}
+export default function NestedShow(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/show/show-with-for.raw.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function NestedShow(props) {
+    return (<mitosis_1.Show when={props.conditionA} else={<div>else-condition-A</div>}>
+      <mitosis_1.For each={props.items}>{function (item, idx) { return <div key={idx}>{item}</div>; }}</mitosis_1.For>
+    </mitosis_1.Show>);
+}
+exports.default = NestedShow;

package/dist/src/__tests__/data/styles/classState.raw.jsx

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicComponent() {
     var _a = (0, mitosis_1.useState)('testClassName'), classState = _a[0], setClassState = _a[1];
+    var _b = (0, mitosis_1.useState)({ color: 'red' }), styleState = _b[0], setStyleState = _b[1];
     return (<div class={classState} css={{
             padding: '10px',
-        }}>
+        }} style={styleState}>
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>);
 }

package/dist/src/__tests__/shared.js

@@ -4,13 +4,9 @@ exports.runTestsForTarget = void 0;
 var jsx_1 = require("../parsers/jsx");
 var basicForShow = require('./data/basic-for-show.raw');
 var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
-var sectionState = require('./data/blocks/section-state.raw');
-var imageState = require('./data/blocks/img-state.raw');
-var onInitonMount = require('./data/blocks/onInit-onMount.raw');
 var basicContext = require('./data/basic-context.raw');
 var basicOutputsMeta = require('./data/basic-outputs-meta.raw');
 var basicOutputs = require('./data/basic-outputs.raw');
-var classNameJsx = require('./data/blocks/classname-jsx.raw');
 var basic = require('./data/basic.raw');
 var basicMitosis = require('./data/basic-custom-mitosis-package.raw');
 var basicChildComponent = require('./data/basic-child-component.raw');
@@ -20,46 +16,48 @@ var basicForwardRef = require('./data/basic-forwardRef.raw');
 var basicForwardRefMetadata = require('./data/basic-forwardRef-metadata.raw');
 var basicRefPrevious = require('./data/basic-ref-usePrevious.raw');
 var basicRefAssignment = require('./data/basic-ref-assignment.raw');
-var submitButtonBlock = require('./data/blocks/submit-button.raw');
-var inputBlock = require('./data/blocks/input.raw');
-var selectBlock = require('./data/blocks/select.raw');
-var formBlock = require('./data/blocks/form.raw');
+var propsDestructure = require('./data/basic-props-destructure.raw');
+var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-local-statement.raw');
+var propsType = require('./data/types/component-props-type.raw');
+var propsInterface = require('./data/types/component-props-interface.raw');
+var preserveTyping = require('./data/types/preserve-typing.raw');
+var classRaw = require('./data/styles/class.raw');
+var className = require('./data/styles/className.raw');
+var classAndClassName = require('./data/styles/class-and-className.raw');
+var classState = require('./data/styles/classState.raw');
 var button = require('./data/blocks/button.raw');
-var textarea = require('./data/blocks/textarea.raw');
-var img = require('./data/blocks/img.raw');
-var video = require('./data/blocks/video.raw');
-var section = require('./data/blocks/section.raw');
-var text = require('./data/blocks/text.raw');
-var rawText = require('./data/blocks/raw-text.raw');
-var stamped = require('./data/blocks/stamped-io.raw');
+var classNameJsx = require('./data/blocks/classname-jsx.raw');
+var columns = require('./data/blocks/columns.raw');
+var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
+var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
 var customCode = require('./data/blocks/custom-code.raw');
+var formBlock = require('./data/blocks/form.raw');
 var image = require('./data/blocks/image.raw');
-var columns = require('./data/blocks/columns.raw');
-var onUpdate = require('./data/blocks/onUpdate.raw');
-var onInit = require('./data/blocks/onInit.raw');
-var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
+var imageState = require('./data/blocks/img-state.raw');
+var img = require('./data/blocks/img.raw');
+var inputBlock = require('./data/blocks/input.raw');
 var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
+var onInit = require('./data/blocks/onInit.raw');
+var onInitonMount = require('./data/blocks/onInit-onMount.raw');
 var onMount = require('./data/blocks/onMount.raw');
-var rootShow = require('./data/blocks/rootShow.raw');
-var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
-var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
-var slotJsx = require('./data/blocks/slot-jsx.raw');
+var onUpdate = require('./data/blocks/onUpdate.raw');
+var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
+var rawText = require('./data/blocks/raw-text.raw');
+var section = require('./data/blocks/section.raw');
+var sectionState = require('./data/blocks/section-state.raw');
+var selectBlock = require('./data/blocks/select.raw');
+var selfRefCompWChildren = require('./data/blocks/self-referencing-component-with-children.raw');
+var selfRefComp = require('./data/blocks/self-referencing-component.raw');
 var slotHtml = require('./data/blocks/slot-html.raw');
-var propsType = require('./data/types/component-props-type.raw');
-var propsInterface = require('./data/types/component-props-interface.raw');
-var preserveTyping = require('./data/types/preserve-typing.raw');
-var propsDestructure = require('./data/basic-props-destructure.raw');
-var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-local-statement.raw');
-var classRaw = require('./data/styles/class.raw');
-var className = require('./data/styles/className.raw');
-var classAndClassName = require('./data/styles/class-and-className.raw');
+var slotJsx = require('./data/blocks/slot-jsx.raw');
+var stamped = require('./data/blocks/stamped-io.raw');
+var submitButtonBlock = require('./data/blocks/submit-button.raw');
+var text = require('./data/blocks/text.raw');
+var textarea = require('./data/blocks/textarea.raw');
+var video = require('./data/blocks/video.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
-    ContentSlotJSX: contentSlotJsx,
-    ContentSlotHtml: contentSlotHtml,
-    SlotJsx: slotJsx,
-    SlotHtml: slotHtml,
     Basic: basic,
     BasicRef: basicRef,
     BasicRefPrevious: basicRefPrevious,
@@ -100,6 +98,15 @@ var BASIC_TESTS = {
     'class + css': classRaw,
     'className + css': className,
     'class + ClassName + css': classAndClassName,
+    'self-referencing component with children': selfRefCompWChildren,
+    'self-referencing component': selfRefComp,
+};
+var SLOTS_TESTS = {
+    ContentSlotJSX: contentSlotJsx,
+    ContentSlotHtml: contentSlotHtml,
+    SlotJsx: slotJsx,
+    SlotHtml: slotHtml,
+    classState: classState,
 };
 var MULTI_ON_UPDATE_TESTS = {
     multipleOnUpdate: multipleOnUpdate,
@@ -116,13 +123,16 @@ var FORWARD_REF_TESTS = {
     basicForwardRef: basicForwardRef,
     basicForwardRefMetadata: basicForwardRefMetadata,
 };
-var ROOT_SHOW_TESTS = {
-    rootShow: rootShow,
+var SHOW_TESTS = {
+    rootShow: require('./data/blocks/rootShow.raw'),
+    nestedShow: require('./data/show/nested-show.raw'),
+    showWithFor: require('./data/show/show-with-for.raw'),
 };
 var TESTS_FOR_TARGET = {
     react: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -130,7 +140,8 @@ var TESTS_FOR_TARGET = {
     ],
     angular: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -138,7 +149,8 @@ var TESTS_FOR_TARGET = {
     ],
     webcomponent: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
@@ -146,7 +158,8 @@ var TESTS_FOR_TARGET = {
     ],
     vue: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -154,7 +167,7 @@ var TESTS_FOR_TARGET = {
     ],
     svelte: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -162,7 +175,8 @@ var TESTS_FOR_TARGET = {
     ],
     html: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
@@ -170,6 +184,7 @@ var TESTS_FOR_TARGET = {
     ],
     stencil: [
         BASIC_TESTS,
+        SLOTS_TESTS,
         // ROOT_SHOW_TESTS,
         FORWARD_REF_TESTS,
         // MULTI_ON_UPDATE_TESTS,
@@ -178,7 +193,8 @@ var TESTS_FOR_TARGET = {
     ],
     solid: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         // FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -186,7 +202,8 @@ var TESTS_FOR_TARGET = {
     ],
     reactNative: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
@@ -194,14 +211,16 @@ var TESTS_FOR_TARGET = {
     ],
     liquid: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
     ],
     qwik: [
         BASIC_TESTS,
-        ROOT_SHOW_TESTS,
+        SLOTS_TESTS,
+        SHOW_TESTS,
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,

package/dist/src/flow.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from './jsx-types';
+import { JSX } from '../jsx-runtime';
 /**
  * Flow control based on Solid
  *

package/dist/src/generators/angular.js

@@ -36,6 +36,7 @@ var lodash_1 = require("lodash");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var indent_1 = require("../helpers/indent");
+var slots_1 = require("../helpers/slots");
 var mappers = {
     Fragment: function (json, options, blockOptions) {
         return "<div>".concat(json.children
@@ -58,6 +59,7 @@ var mappers = {
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDINGS_MAPPER = {
     innerHTML: 'innerHTML',
+    style: 'ngStyle',
 };
 var blockToAngular = function (json, options, blockOptions) {
     var _a, _b, _c, _d, _e, _f;
@@ -153,7 +155,7 @@ var blockToAngular = function (json, options, blockOptions) {
             else if (key === 'ref') {
                 str += " #".concat(useValue, " ");
             }
-            else if (key.startsWith('slot')) {
+            else if ((0, slots_1.isSlotProperty)(key)) {
                 var lowercaseKey = key.replace('slot', '')[0].toLowerCase() + key.replace('slot', '').substring(1);
                 needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
             }
@@ -276,7 +278,7 @@ var componentToAngular = function (options) {
         var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', json.types ? json.types.join('\n') : '', json.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'angular' }), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
             : '', component.name, localExportVars.join('\n'), Array.from(props)
-            .filter(function (item) { return !item.startsWith('slot') && item !== 'children'; })
+            .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
             return "@Input() ".concat(item, ": ").concat(propType);

package/dist/src/generators/react.js

@@ -53,6 +53,7 @@ var context_1 = require("./helpers/context");
 var react_native_1 = require("./react-native");
 var collect_styled_components_1 = require("../helpers/styles/collect-styled-components");
 var helpers_1 = require("../helpers/styles/helpers");
+var slots_1 = require("../helpers/slots");
 /**
  * If the root Mitosis component only has 1 child, and it is a `Show` node, then we need to wrap it in a fragment.
  * Otherwise, we end up with invalid React render code.
@@ -257,7 +258,7 @@ var processBinding = function (str, options) {
     if (options.stateType !== 'useState') {
         return str;
     }
-    if (str.startsWith('slot')) {
+    if ((0, slots_1.isSlotProperty)(str)) {
         return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
             includeState: true,
             includeProps: false,

package/dist/src/generators/svelte.js

@@ -81,11 +81,18 @@ var mappers = {
         }
     },
     For: function (_a) {
-        var _b;
+        var _b, _c;
         var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        return "\n{#each ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, {
+        var firstChild = json.children[0];
+        var keyValue = firstChild.properties.key || ((_b = firstChild.bindings.key) === null || _b === void 0 ? void 0 : _b.code);
+        if (keyValue) {
+            // we remove extraneous prop which Svelte does not use
+            delete firstChild.properties.key;
+            delete firstChild.bindings.key;
+        }
+        return "\n{#each ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, {
             includeState: options.stateType === 'variables',
-        }), " as ").concat(json.properties._forName, ", index }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n{/each}\n");
+        }), " as ").concat(json.scope.For[0], ", ").concat(json.scope.For[1], " ").concat(keyValue ? "(".concat(keyValue, ")") : '', "}\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n{/each}\n");
     },
     Show: function (_a) {
         var _b;
@@ -145,7 +152,7 @@ var getTagName = function (_a) {
     return json.name;
 };
 var blockToSvelte = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f;
     var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
     if (mappers[json.name]) {
         return mappers[json.name]({ json: json, options: options, parentComponent: parentComponent });
@@ -169,6 +176,14 @@ var blockToSvelte = function (_a) {
             includeState: options.stateType === 'variables',
         }), "}");
     }
+    if (((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style) {
+        var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(((_e = json.bindings.style) === null || _e === void 0 ? void 0 : _e.code) || json.properties.style, {
+            includeState: options.stateType === 'variables',
+        });
+        str += "use:mitosis_styling={".concat(useValue, "}");
+        delete json.bindings.style;
+        delete json.properties.style;
+    }
     for (var key in json.properties) {
         var value = json.properties[key];
         str += " ".concat(key, "=\"").concat(value, "\" ");
@@ -180,7 +195,7 @@ var blockToSvelte = function (_a) {
         if (key === '_spread') {
             continue;
         }
-        var _e = json.bindings[key], value = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f;
+        var _g = json.bindings[key], value = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
         // TODO: proper babel transform to replace. Util for this
         var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
             includeState: options.stateType === 'variables',
@@ -188,7 +203,7 @@ var blockToSvelte = function (_a) {
         if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             // TODO: handle quotes in event handler values
-            str += " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => ").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue), "}\" ");
+            str += " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => {").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue), "}}\" ");
         }
         else if (key === 'ref') {
             str += " bind:this={".concat(useValue, "} ");
@@ -199,7 +214,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 ((_d = json.bindings.innerHTML) === null || _d === void 0 ? void 0 : _d.code) {
+    if ((_f = json.bindings.innerHTML) === null || _f === void 0 ? void 0 : _f.code) {
         str += '>';
         str += BINDINGS_MAPPER.innerHTML(json, options);
         str += "</".concat(tagName, ">");
@@ -271,6 +286,18 @@ var FUNCTION_HACK_PLUGIN = function () { return ({
         },
     },
 }); };
+var hasStyleObject = function (children) {
+    for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (child.bindings.style || child.properties.style) {
+            return true;
+        }
+        else if (child.children.length) {
+            return hasStyleObject(child.children);
+        }
+    }
+    return false;
+};
 var componentToSvelte = function (_a) {
     if (_a === void 0) { _a = {}; }
     var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, options = __rest(_a, ["plugins"]);
@@ -334,14 +361,16 @@ var componentToSvelte = function (_a) {
                 includeState: useOptions.stateType === 'variables',
             }), babel_transform_1.babelTransformCode);
         };
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || useOptions.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || useOptions.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
             .map(function (name) {
             if (name === 'children') {
                 return '';
             }
             return "export let ".concat(name, ";");
         })
-            .join('\n'), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, getContextCode(json), setContextCode(json), useOptions.stateType === 'proxies'
+            .join('\n'), hasStyleObject(json.children)
+            ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars).forEach(([ p, v ]) => { node.style[p] = v })\n        }\n      "
+            : '', functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, getContextCode(json), setContextCode(json), useOptions.stateType === 'proxies'
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")

package/dist/src/generators/vue.d.ts

@@ -10,7 +10,11 @@ export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     namePrefix?: (path: string) => string;
     asyncComponentImports?: boolean;
 }
-export declare const blockToVue: (node: MitosisNode, options: ToVueOptions) => string;
+declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+interface Scope {
+    isRootNode?: boolean;
+}
+export declare const blockToVue: BlockRenderer;
 declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
 export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => Transpiler;
 export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => Transpiler;