@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/src/generators/solid.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -21,6 +32,12 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var get_components_used_1 = require("../helpers/get-components-used");
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
+var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
+var context_1 = require("./helpers/context");
+var babel_transform_1 = require("../helpers/babel-transform");
+var core_1 = require("@babel/core");
+var lodash_1 = require("lodash");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -35,6 +52,13 @@ function processDynamicComponents(json, options) {
     });
     return found;
 }
+function getContextString(component, options) {
+    var str = '';
+    for (var key in component.context.get) {
+        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
+    }
+    return str;
+}
 // This should really be a preprocessor mapping the `class` attribute binding based on what other values have
 // to make this more pluggable
 var collectClassString = function (json) {
@@ -90,7 +114,9 @@ var blockToSolid = function (json, options) {
     }
     if (json.name === 'For') {
         var needsWrapper = json.children.length !== 1;
-        return "<For each={".concat(json.bindings.each, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return blockToSolid(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+        return "<For each={".concat(json.bindings.each, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (child) { return blockToSolid(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
     }
     var str = '';
     if (json.name === 'Fragment') {
@@ -120,7 +146,32 @@ var blockToSolid = function (json, options) {
             str += " ".concat(useKey, "={event => ").concat(value, "} ");
         }
         else {
-            str += " ".concat(key, "={").concat(value, "} ");
+            var useValue = value;
+            if (key === 'style') {
+                // Convert camelCase keys to kebab-case
+                // TODO: support more than top level objects, may need
+                // a runtime helper for expressions that are not a direct
+                // object literal, such as ternaries and other expression
+                // types
+                useValue = (0, babel_transform_1.babelTransformExpression)(value, {
+                    ObjectExpression: function (path) {
+                        // TODO: limit to top level objects only
+                        for (var _i = 0, _a = path.node.properties; _i < _a.length; _i++) {
+                            var property = _a[_i];
+                            if (core_1.types.isObjectProperty(property)) {
+                                if (core_1.types.isIdentifier(property.key) ||
+                                    core_1.types.isStringLiteral(property.key)) {
+                                    var key_1 = core_1.types.isIdentifier(property.key)
+                                        ? property.key.name
+                                        : property.key.value;
+                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key_1));
+                                }
+                            }
+                        }
+                    },
+                });
+            }
+            str += " ".concat(key, "={").concat(useValue, "} ");
         }
     }
     if (jsx_1.selfClosingTags.has(json.name)) {
@@ -128,7 +179,10 @@ var blockToSolid = function (json, options) {
     }
     str += '>';
     if (json.children) {
-        str += json.children.map(function (item) { return blockToSolid(item, options); }).join('\n');
+        str += json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToSolid(item, options); })
+            .join('\n');
     }
     if (json.name === 'Fragment') {
         str += '</>';
@@ -147,6 +201,18 @@ var getRefsString = function (json, refs) {
     }
     return str;
 };
+function addProviderComponents(json, options) {
+    for (var key in json.context.set) {
+        var _a = json.context.set[key], name_1 = _a.name, value = _a.value;
+        json.children = [
+            (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (value && {
+                bindings: {
+                    value: (0, get_state_object_string_1.getMemberObjectString)(value),
+                },
+            }))),
+        ];
+    }
+}
 var componentToSolid = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
@@ -156,8 +222,9 @@ var componentToSolid = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
+        addProviderComponents(json, options);
         var componentHasStyles = (0, collect_styles_1.hasStyles)(json);
-        var addWrapper = json.children.length > 1;
+        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1;
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
@@ -166,15 +233,22 @@ var componentToSolid = function (options) {
         var stateString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json);
         var hasState = Boolean(Object.keys(component.state).length);
         var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
+        var componentHasContext = (0, context_1.hasContext)(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !(hasShowComponent || hasForComponent)
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !(hasShowComponent || hasForComponent)
             ? ''
-            : "import { \n          ".concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
+            : "import { \n          ".concat(!componentHasContext ? '' : 'useContext, ', "\n          ").concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
             ? ''
-            : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)(json), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
+            : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)(json), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), getContextString(json, options), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''
-            : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return blockToSolid(item, options); }).join('\n'), addWrapper ? '</>' : '');
+            : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), addWrapper ? '<>' : '', json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToSolid(item, options); })
+            .join('\n'), addWrapper ? '</>' : '');
+        // HACK: for some reason we are generating `state.state.foo` instead of `state.foo`
+        // need a full fix, but this unblocks a lot in the short term
+        str = str.replace(/state\.state\./g, 'state.');
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

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

@@ -163,7 +163,7 @@ var componentToStencil = function (options) {
          *
          *    export default function ...
          */
-        ((_b = json.meta.metadataHook) === null || _b === void 0 ? void 0 : _b.tagName) || (0, dash_case_1.dashCase)(json.name), css.length
+        ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || (0, dash_case_1.dashCase)(json.name), css.length
             ? "styles: `\n        ".concat((0, indent_1.indent)(css, 8), "`,")
             : '', json.name, Array.from(props)
             .map(function (item) { return "@Prop() ".concat(item, ": any"); })
@@ -171,9 +171,11 @@ var componentToStencil = function (options) {
             ? ''
             : "componentDidLoad() { ".concat(processBinding(json.hooks.onMount.code), " }"), !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
             ? ''
-            : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.code)
+            : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
             ? ''
-            : "componentDidUpdate() { ".concat(processBinding(json.hooks.onUpdate.code), " }"), wrap ? '<>' : '', json.children
+            : json.hooks.onUpdate.map(function (hook) {
+                return "componentDidUpdate() { ".concat(processBinding(hook.code), " }");
+            }), wrap ? '<>' : '', json.children
             .map(function (item) { return blockToStencil(item, options); })
             .join('\n'), wrap ? '</>' : '');
         if (options.plugins) {

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -1,7 +1,15 @@
+import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
 import { BaseTranspilerOptions, Transpiler } from '../types/config';
 export interface ToSvelteOptions extends BaseTranspilerOptions {
     stateType?: 'proxies' | 'variables';
 }
-export declare const blockToSvelte: (json: MitosisNode, options: ToSvelteOptions) => string;
+interface BlockToSvelteProps {
+    json: MitosisNode;
+    options: ToSvelteOptions;
+    parentComponent: MitosisComponent;
+}
+declare type BlockToSvelte = (props: BlockToSvelteProps) => string;
+export declare const blockToSvelte: BlockToSvelte;
 export declare const componentToSvelte: (options?: ToSvelteOptions) => Transpiler;
+export {};

package/dist/src/generators/svelte.js

@@ -35,17 +35,94 @@ var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
+var getters_to_functions_1 = require("../helpers/getters-to-functions");
+var babel_transform_1 = require("../helpers/babel-transform");
+var function_1 = require("fp-ts/lib/function");
+var context_1 = require("./helpers/context");
+var html_tags_1 = require("../constants/html_tags");
 var mappers = {
-    Fragment: function (json, options) {
-        return "".concat(json.children
-            .map(function (item) { return (0, exports.blockToSvelte)(item, options); })
-            .join('\n'));
+    Fragment: function (_a) {
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        if (json.bindings.innerHTML) {
+            return BINDINGS_MAPPER.innerHTML(json, options);
+        }
+        else if (json.children.length > 0) {
+            return "".concat(json.children
+                .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+                .join('\n'));
+        }
+        else {
+            return '';
+        }
+    },
+    For: function (_a) {
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        return "\n{#each ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each, {
+            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");
+    },
+    Show: function (_a) {
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        return "\n{#if ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when, {
+            includeState: options.stateType === 'variables',
+        }), " }\n").concat(json.children
+            .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+            .join('\n'), "\n{/if}");
+    },
+};
+var getContextCode = function (json) {
+    var contextGetters = json.context.get;
+    return Object.keys(contextGetters)
+        .map(function (key) { return "let ".concat(key, " = getContext(").concat(contextGetters[key].name, ".key);"); })
+        .join('\n');
+};
+var setContextCode = function (json) {
+    var contextSetters = json.context.set;
+    return Object.keys(contextSetters)
+        .map(function (key) {
+        var _a = contextSetters[key], value = _a.value, name = _a.name;
+        return "setContext(".concat(name, ".key, ").concat(value ? (0, get_state_object_string_1.getMemberObjectString)(value) : 'undefined', ");");
+    })
+        .join('\n');
+};
+var BINDINGS_MAPPER = {
+    innerHTML: function (json, options) {
+        return "{@html ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.innerHTML), "}");
     },
 };
-var blockToSvelte = function (json, options) {
+var SVELTE_SPECIAL_TAGS = {
+    COMPONENT: 'svelte:component',
+    ELEMENT: 'svelte:element',
+    SELF: 'svelte:self',
+};
+var getTagName = function (_a) {
+    var json = _a.json, parentComponent = _a.parentComponent;
+    if (parentComponent && json.name === parentComponent.name) {
+        return SVELTE_SPECIAL_TAGS.SELF;
+    }
+    var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
+    var isSpecialSvelteTag = json.name.startsWith('svelte:');
+    // Check if any import matches `json.name`
+    var hasMatchingImport = parentComponent.imports.some(function (_a) {
+        var imports = _a.imports;
+        return Object.keys(imports).some(function (name) { return name === json.name; });
+    });
+    // TO-DO: no way to decide between <svelte:component> and <svelte:element>...need to do that through metadata
+    // overrides for now
+    if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
+        json.bindings.this = json.name;
+        return SVELTE_SPECIAL_TAGS.COMPONENT;
+    }
+    return json.name;
+};
+var blockToSvelte = function (_a) {
+    var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
     if (mappers[json.name]) {
-        return mappers[json.name](json, options);
+        return mappers[json.name]({ json: json, options: options, parentComponent: parentComponent });
     }
+    var tagName = getTagName({ json: json, parentComponent: parentComponent });
     if ((0, is_children_1.default)(json)) {
         return "<slot></slot>";
     }
@@ -58,63 +135,58 @@ var blockToSvelte = function (json, options) {
         }), "}");
     }
     var str = '';
-    if (json.name === 'For') {
-        str += "{#each ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each, {
+    str += "<".concat(tagName, " ");
+    if (json.bindings._spread) {
+        str += "{...".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._spread, {
             includeState: options.stateType === 'variables',
-        }), " as ").concat(json.properties._forName, " }");
-        str += json.children.map(function (item) { return (0, exports.blockToSvelte)(item, options); }).join('\n');
-        str += "{/each}";
+        }), "}");
     }
-    else if (json.name === 'Show') {
-        str += "{#if ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when, {
-            includeState: options.stateType === 'variables',
-        }), " }");
-        str += json.children.map(function (item) { return (0, exports.blockToSvelte)(item, options); }).join('\n');
-        str += "{/if}";
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        str += " ".concat(key, "=\"").concat(value, "\" ");
     }
-    else {
-        str += "<".concat(json.name, " ");
-        if (json.bindings._spread) {
-            str += "{...".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._spread, {
-                includeState: options.stateType === 'variables',
-            }), "}");
+    for (var key in json.bindings) {
+        if (key === 'innerHTML') {
+            continue;
         }
-        for (var key in json.properties) {
-            var value = json.properties[key];
-            str += " ".concat(key, "=\"").concat(value, "\" ");
+        if (key === '_spread') {
+            continue;
         }
-        for (var key in json.bindings) {
-            if (key === '_spread') {
-                continue;
-            }
-            var value = json.bindings[key];
-            // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
-                includeState: options.stateType === 'variables',
-            });
-            if (key.startsWith('on')) {
-                var event_1 = key.replace('on', '').toLowerCase();
-                // TODO: handle quotes in event handler values
-                str += " on:".concat(event_1, "=\"{event => ").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue), "}\" ");
-            }
-            else if (key === 'ref') {
-                str += " bind:this={".concat(useValue, "} ");
-            }
-            else {
-                str += " ".concat(key, "={").concat(useValue, "} ");
-            }
+        var value = json.bindings[key];
+        // TODO: proper babel transform to replace. Util for this
+        var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
+            includeState: options.stateType === 'variables',
+        });
+        if (key.startsWith('on')) {
+            var event_1 = key.replace('on', '').toLowerCase();
+            // TODO: handle quotes in event handler values
+            str += " on:".concat(event_1, "=\"{event => ").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue), "}\" ");
         }
-        if (jsx_1.selfClosingTags.has(json.name)) {
-            return str + ' />';
+        else if (key === 'ref') {
+            str += " bind:this={".concat(useValue, "} ");
         }
-        str += '>';
-        if (json.children) {
-            str += json.children
-                .map(function (item) { return (0, exports.blockToSvelte)(item, options); })
-                .join('\n');
+        else {
+            str += " ".concat(key, "={").concat(useValue, "} ");
         }
-        str += "</".concat(json.name, ">");
     }
+    // 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 (json.bindings.innerHTML) {
+        str += '>';
+        str += BINDINGS_MAPPER.innerHTML(json, options);
+        str += "</".concat(tagName, ">");
+        return str;
+    }
+    if (jsx_1.selfClosingTags.has(tagName)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+            .join('\n');
+    }
+    str += "</".concat(tagName, ">");
     return str;
 };
 exports.blockToSvelte = blockToSvelte;
@@ -140,6 +212,12 @@ var useBindValue = function (json, options) {
         }
     });
 };
+/**
+ * Removes all `this.` references.
+ */
+var stripThisRefs = function (str) {
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
 var componentToSvelte = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
@@ -153,12 +231,13 @@ var componentToSvelte = function (options) {
         }
         var refs = Array.from((0, get_refs_1.getRefs)(json));
         useBindValue(json, useOptions);
+        (0, getters_to_functions_1.gettersToFunctions)(json);
         if (useOptions.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, useOptions.plugins);
         }
         var css = (0, collect_styles_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        var dataString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: true,
             functions: false,
             getters: false,
@@ -169,57 +248,77 @@ var componentToSvelte = function (options) {
                     includeState: useOptions.stateType === 'variables',
                 });
             },
-        });
-        var getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        }), babel_transform_1.babelTransformCode);
+        var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: false,
             getters: true,
             functions: false,
             format: 'variables',
             keyPrefix: '$: ',
             valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(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);
             },
-        });
-        var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        }), babel_transform_1.babelTransformCode);
+        var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: false,
             getters: false,
             functions: true,
             format: 'variables',
             keyPrefix: 'function ',
             valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                     includeState: useOptions.stateType === 'variables',
-                });
+                }), stripThisRefs);
             },
-        });
+        }), babel_transform_1.babelTransformCode);
         var hasData = dataString.length > 4;
         var props = Array.from((0, get_props_1.getProps)(json));
-        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    </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    </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.code) ? '' : "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)(json), !hasData || useOptions.stateType === 'variables'
+        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);
+        };
+        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)(json, 'svelte'), (0, context_1.hasContext)(component)
+            ? 'import { getContext, setContext } from "svelte";'
+            : '', !hasData || useOptions.stateType === 'variables'
             ? ''
             : "import onChange from 'on-change'", refs
             .concat(props)
-            .map(function (name) { return "export let ".concat(name, ";"); })
-            .join('\n'), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, useOptions.stateType === 'proxies'
+            .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'
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
             : dataString, !((_e = json.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
             ? ''
-            : "onMount(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onMount.code, {
-                includeState: useOptions.stateType === 'variables',
-            }), " });"), !((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.code)
+            : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.length)
             ? ''
-            : "afterUpdate(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUpdate.code, {
-                includeState: useOptions.stateType === 'variables',
-            }), " });"), !((_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
+            : json.hooks.onUpdate
+                .map(function (hook) {
+                return "afterUpdate(() => { ".concat(transformHookCode(hook.code), " })");
+            })
+                .join(';'), !((_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
             ? ''
-            : "onDestroy(() => { ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount.code, {
-                includeState: useOptions.stateType === 'variables',
-            }), " });"), json.children.map(function (item) { return (0, exports.blockToSvelte)(item, useOptions); }).join('\n'), !css.trim().length
+            : "onDestroy(() => { ".concat(transformHookCode(json.hooks.onUnMount.code), " });"), json.children
+            .map(function (item) {
+            return (0, exports.blockToSvelte)({
+                json: item,
+                options: useOptions,
+                parentComponent: json,
+            });
+        })
+            .join('\n'), !css.trim().length
             ? ''
             : "<style>\n      ".concat(css, "\n    </style>"));
         if (useOptions.plugins) {

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

@@ -8,6 +8,6 @@ export interface ToVueOptions extends BaseTranspilerOptions {
     registerComponentPrepend?: string;
 }
 export declare const blockToVue: (node: MitosisNode, options: ToVueOptions) => string;
-export declare const componentToVue: (options?: ToVueOptions) => ({ component, path }: TranspilerArgs & {
+export declare const componentToVue: (userOptions?: ToVueOptions) => ({ component, path }: TranspilerArgs & {
     path: string;
 }) => string;