@builder.io/mitosis 0.0.56-23 → 0.0.56-26

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/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,
@@ -420,7 +421,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     (0, handle_missing_state_1.handleMissingState)(json);
     (0, process_tag_references_1.processTagReferences)(json);
     addProviderComponents(json, options);
-    var componentHasStyles = (0, helpers_1.hasStyles)(json);
+    var componentHasStyles = (0, helpers_1.hasCss)(json);
     if (options.stateType === 'useState') {
         (0, getters_to_functions_1.gettersToFunctions)(json);
         updateStateSetters(json, options);

package/dist/src/generators/solid.js

@@ -226,7 +226,7 @@ var componentToSolid = function (options) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
         addProviderComponents(json, options);
-        var componentHasStyles = (0, helpers_1.hasStyles)(json);
+        var componentHasStyles = (0, helpers_1.hasCss)(json);
         var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1;
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);

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

@@ -11,5 +11,5 @@ interface BlockToSvelteProps {
 }
 declare type BlockToSvelte = (props: BlockToSvelteProps) => string;
 export declare const blockToSvelte: BlockToSvelte;
-export declare const componentToSvelte: ({ plugins, ...options }?: ToSvelteOptions) => Transpiler;
+export declare const componentToSvelte: ({ plugins, ...userProvidedOptions }?: ToSvelteOptions) => Transpiler;
 export {};

package/dist/src/generators/svelte.js

@@ -43,6 +43,7 @@ var dedent_1 = __importDefault(require("dedent"));
 var standalone_1 = require("prettier/standalone");
 var traverse_1 = __importDefault(require("traverse"));
 var collect_css_1 = require("../helpers/styles/collect-css");
+var helpers_1 = require("../helpers/styles/helpers");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_props_1 = require("../helpers/get-props");
 var get_refs_1 = require("../helpers/get-refs");
@@ -81,18 +82,21 @@ 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, {
-            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");
+        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(stripStateAndProps((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " 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;
         var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        return "\n{#if ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, {
-            includeState: options.stateType === 'variables',
-        }), " }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n\n  ").concat(json.meta.else
+        return "\n{#if ".concat(stripStateAndProps((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, options), " }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n\n  ").concat(json.meta.else
             ? "\n  {:else}\n  ".concat((0, exports.blockToSvelte)({
                 json: json.meta.else,
                 options: options,
@@ -144,8 +148,13 @@ var getTagName = function (_a) {
     }
     return json.name;
 };
+var stripStateAndProps = function (code, options) {
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+        includeState: options.stateType === 'variables',
+    });
+};
 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 });
@@ -158,16 +167,18 @@ var blockToSvelte = function (_a) {
         return json.properties._text;
     }
     if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
-        return "{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code, {
-            includeState: options.stateType === 'variables',
-        }), "}");
+        return "{".concat(stripStateAndProps(json.bindings._text.code, options), "}");
     }
     var str = '';
     str += "<".concat(tagName, " ");
     if ((_c = json.bindings._spread) === null || _c === void 0 ? void 0 : _c.code) {
-        str += "{...".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._spread.code, {
-            includeState: options.stateType === 'variables',
-        }), "}");
+        str += "{...".concat(stripStateAndProps(json.bindings._spread.code, options), "}");
+    }
+    if (((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style) {
+        var useValue = stripStateAndProps(((_e = json.bindings.style) === null || _e === void 0 ? void 0 : _e.code) || json.properties.style, options);
+        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];
@@ -180,15 +191,13 @@ 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',
-        });
+        var useValue = stripStateAndProps(value, options);
         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 +208,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, ">");
@@ -273,21 +282,21 @@ var FUNCTION_HACK_PLUGIN = function () { return ({
 }); };
 var componentToSvelte = function (_a) {
     if (_a === void 0) { _a = {}; }
-    var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, options = __rest(_a, ["plugins"]);
+    var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, userProvidedOptions = __rest(_a, ["plugins"]);
     return function (_a) {
         var _b, _c, _d, _e, _f, _g;
         var component = _a.component;
-        var useOptions = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, options);
+        var options = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, userProvidedOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
-        if (useOptions.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, useOptions.plugins);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
         var refs = Array.from((0, get_refs_1.getRefs)(json));
-        useBindValue(json, useOptions);
+        useBindValue(json, options);
         (0, getters_to_functions_1.gettersToFunctions)(json);
-        if (useOptions.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, useOptions.plugins);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
@@ -295,13 +304,9 @@ var componentToSvelte = function (_a) {
             data: true,
             functions: false,
             getters: false,
-            format: useOptions.stateType === 'proxies' ? 'object' : 'variables',
-            keyPrefix: useOptions.stateType === 'variables' ? 'let ' : '',
-            valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-                    includeState: useOptions.stateType === 'variables',
-                });
-            },
+            format: options.stateType === 'proxies' ? 'object' : 'variables',
+            keyPrefix: options.stateType === 'variables' ? 'let ' : '',
+            valueMapper: function (code) { return stripStateAndProps(code, options); },
         }), babel_transform_1.babelTransformCode);
         var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: false,
@@ -310,9 +315,7 @@ var componentToSvelte = function (_a) {
             format: 'variables',
             keyPrefix: '$: ',
             valueMapper: function (code) {
-                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), {
-                    includeState: useOptions.stateType === 'variables',
-                }), stripThisRefs);
+                return (0, function_1.pipe)(stripStateAndProps(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), options), stripThisRefs);
             },
         }), babel_transform_1.babelTransformCode);
         var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -321,27 +324,23 @@ var componentToSvelte = function (_a) {
             functions: true,
             format: 'variables',
             keyPrefix: 'const ',
-            valueMapper: function (code) {
-                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-                    includeState: useOptions.stateType === 'variables',
-                }), stripThisRefs);
-            },
+            valueMapper: function (code) { return (0, function_1.pipe)(stripStateAndProps(code, options), stripThisRefs); },
         }), babel_transform_1.babelTransformCode);
         var hasData = dataString.length > 4;
         var props = Array.from((0, get_props_1.getProps)(json));
         var transformHookCode = function (hookCode) {
-            return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hookCode, {
-                includeState: useOptions.stateType === 'variables',
-            }), babel_transform_1.babelTransformCode);
+            return (0, function_1.pipe)(stripStateAndProps(hookCode, options), 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 || options.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'), (0, helpers_1.hasStyle)(json)
+            ? "\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), options.stateType === 'proxies'
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
@@ -355,7 +354,7 @@ var componentToSvelte = function (_a) {
                 var hookCode = transformHookCode(code);
                 if (deps) {
                     var fnName = "onUpdateFn_".concat(index);
-                    return "\n                    function ".concat(fnName, "() {\n                      ").concat(hookCode, "\n                    }\n                    $: ").concat(fnName, "(...").concat(deps, ")\n                    ");
+                    return "\n                    function ".concat(fnName, "() {\n                      ").concat(hookCode, "\n                    }\n                    $: ").concat(fnName, "(...").concat(stripStateAndProps(deps, options), ")\n                    ");
                 }
                 else {
                     return "afterUpdate(() => { ".concat(hookCode, " })");
@@ -367,17 +366,17 @@ var componentToSvelte = function (_a) {
             .map(function (item) {
             return (0, exports.blockToSvelte)({
                 json: item,
-                options: useOptions,
+                options: options,
                 parentComponent: json,
             });
         })
             .join('\n'), !css.trim().length
             ? ''
             : "<style>\n      ".concat(css, "\n    </style>"));
-        if (useOptions.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, useOptions.plugins);
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }
-        if (useOptions.prettier !== false) {
+        if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
                     parser: 'svelte',
@@ -396,8 +395,8 @@ var componentToSvelte = function (_a) {
                 console.warn({ string: str }, err);
             }
         }
-        if (useOptions.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, useOptions.plugins);
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         }
         return str;
     };