@builder.io/mitosis 0.0.79 → 0.0.81

package/dist/src/generators/helpers/context.d.ts

@@ -1,2 +1,4 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 export declare const hasContext: (component: MitosisComponent) => boolean;
+export declare const hasSetContext: (component: MitosisComponent) => boolean;
+export declare const hasGetContext: (component: MitosisComponent) => boolean;

package/dist/src/generators/helpers/context.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasContext = void 0;
+exports.hasGetContext = exports.hasSetContext = exports.hasContext = void 0;
 var hasContext = function (component) {
-    return Boolean(Object.keys(component.context.get).length || Object.keys(component.context.set).length);
+    return (0, exports.hasSetContext)(component) || (0, exports.hasGetContext)(component);
 };
 exports.hasContext = hasContext;
+var hasSetContext = function (component) {
+    return Object.keys(component.context.set).length > 0;
+};
+exports.hasSetContext = hasSetContext;
+var hasGetContext = function (component) {
+    return Object.keys(component.context.get).length > 0;
+};
+exports.hasGetContext = hasGetContext;

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

@@ -203,7 +203,7 @@ function emitUseStyles(file, component) {
 }
 function emitStyles(file, css) {
     if (css) {
-        file.exportConst('STYLES', '`' + css.replace(/`/g, '\\`') + '`');
+        file.exportConst('STYLES', '`\n' + css.replace(/`/g, '\\`') + '`\n');
     }
 }
 /**

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

@@ -244,7 +244,7 @@ var getRefsString = function (json, refs, options) {
         // domRefs must have null argument
         var argument = ((_b = json['refs'][ref]) === null || _b === void 0 ? void 0 : _b.argument) || (domRefs.has(ref) ? 'null' : '');
         hasStateArgument = /state\./.test(argument);
-        code += "\nconst ".concat(ref, " = useRef").concat(typeParameter ? "<".concat(typeParameter, ">") : '', "(").concat((0, state_2.processHookCode)({
+        code += "\nconst ".concat(ref, " = useRef").concat(typeParameter && options.typescript ? "<".concat(typeParameter, ">") : '', "(").concat((0, state_2.processHookCode)({
             str: argument,
             options: options,
         }), ");");
@@ -426,7 +426,8 @@ var _componentToReact = function (json, options, isSubComponent) {
         isRootSpecialNode(json);
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
-    var propsArgs = "props: ".concat(json.propsTypeRef || 'any');
+    var propType = json.propsTypeRef || 'any';
+    var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
     var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
@@ -437,10 +438,12 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
         : '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState
         ? "import { useLocalObservable, observer } from 'mobx-react-lite';"
-        : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        : '', json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
         component: json,
         target: options.type === 'native' ? 'reactNative' : 'react',
-    }), stateType === 'mobx' && isForwardRef ? "const ".concat(json.name || 'MyComponent', " = ") : "", isSubComponent || stateType === 'mobx' ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
+    }), stateType === 'mobx' && isForwardRef ? "const ".concat(json.name || 'MyComponent', " = ") : "", isSubComponent || stateType === 'mobx' ? '' : 'export default ', isForwardRef
+        ? "forwardRef".concat(forwardRefType && options.typescript ? "<".concat(forwardRefType, ">") : '', "(")
+        : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
         ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
         : '', hasStateArgument ? '' : refsString, hasState
         ? stateType === 'mobx'

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

@@ -66,7 +66,6 @@ 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");
@@ -80,12 +79,13 @@ var S = __importStar(require("fp-ts/string"));
 var helpers_2 = require("./state/helpers");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
+var context_1 = require("../helpers/context");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
     (0, traverse_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-            if (node.name.includes('.')) {
+            if (node.name.includes('.') && !node.name.endsWith('.Provider')) {
                 node.bindings.component = { code: node.name };
                 node.name = 'Dynamic';
                 found = true;
@@ -317,11 +317,10 @@ var componentToSolid = function (passedOptions) {
             });
         var state = (0, state_1.getState)({ json: json, options: options });
         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 solidJSImports = (0, Array_1.uniq)(S.Eq)(__spreadArray(__spreadArray([
-            componentHasContext ? 'useContext' : undefined,
+            (0, context_1.hasGetContext)(json) ? 'useContext' : undefined,
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
             ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined

package/dist/src/generators/svelte/svelte.js

@@ -106,7 +106,7 @@ var DEFAULT_OPTIONS = {
 };
 var componentToSvelte = function (userProvidedOptions) {
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var component = _a.component;
         var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userProvidedOptions);
         options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
@@ -171,14 +171,17 @@ var componentToSvelte = function (userProvidedOptions) {
         if ((_d = (_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) === null || _d === void 0 ? void 0 : _d.length) {
             svelteImports.push('onMount');
         }
-        if ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length) {
+        if ((_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (x) { return !x.deps; })) === null || _f === void 0 ? void 0 : _f.length) {
             svelteImports.push('afterUpdate');
         }
-        if ((_g = (_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code) === null || _g === void 0 ? void 0 : _g.length) {
+        if ((_h = (_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code) === null || _h === void 0 ? void 0 : _h.length) {
             svelteImports.push('onDestroy');
         }
-        if ((0, context_1.hasContext)(component)) {
-            svelteImports.push('getContext', 'setContext');
+        if ((0, context_1.hasGetContext)(component)) {
+            svelteImports.push('getContext');
+        }
+        if ((0, context_1.hasSetContext)(component)) {
+            svelteImports.push('setContext');
         }
         str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __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      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      "
             // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
@@ -207,14 +210,14 @@ var componentToSvelte = function (userProvidedOptions) {
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, (_j = (_h = json.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code) !== null && _j !== void 0 ? _j : '', !((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " });"), ((_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.map(function (_a, index) {
+            : dataString, (_k = (_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code) !== null && _k !== void 0 ? _k : '', !((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " });"), ((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.map(function (_a, index) {
             var code = _a.code, deps = _a.deps;
             if (!deps) {
                 return "afterUpdate(() => { ".concat(code, " });");
             }
             var fnName = "onUpdateFn_".concat(index);
             return "\n              function ".concat(fnName, "() {\n                ").concat(code, "\n              }\n              $: ").concat(fnName, "(...").concat(deps, ")\n            ");
-        }).join(';')) || '', !((_m = json.hooks.onUnMount) === null || _m === void 0 ? void 0 : _m.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
+        }).join(';')) || '', !((_o = json.hooks.onUnMount) === null || _o === void 0 ? void 0 : _o.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
             .map(function (item) {
             return (0, blocks_1.blockToSvelte)({
                 json: item,
@@ -245,6 +248,7 @@ var componentToSvelte = function (userProvidedOptions) {
                 console.warn({ string: str }, err);
             }
         }
+        str = str.replace(/<script>\n<\/script>/g, '').trim();
         str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         return str;
     };

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

@@ -14,6 +14,7 @@ var lodash_1 = require("lodash");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var helpers_1 = require("./helpers");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var helpers_2 = require("./helpers");
 var getCompositionPropDefinition = function (_a) {
     var options = _a.options, component = _a.component, props = _a.props;
     var str = 'const props = ';
@@ -76,7 +77,11 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         var computedCode = "const ".concat(key, " = computed(").concat(getterAsFunction, ")");
         return computedCode;
     }).join('\n')) || '', (onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map(function (hook) { return "onUpdated(() => ".concat(hook.code, ")"); }).join('\n')) || '', (onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map(function (hook) {
-        return "watch(() => ".concat(hook.deps, ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " })");
+        return "watch(() => ".concat((0, helpers_2.processBinding)({
+            code: hook.deps || '',
+            options: options,
+            json: component,
+        }), ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " }, {immediate: true})");
     }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
     return str;
 }

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

@@ -24,7 +24,7 @@ var helpers_1 = require("./helpers");
 function getContextInjectString(component, options) {
     var str = '{';
     for (var key in component.context.get) {
-        str += "\n      ".concat(key, ": \"").concat((0, helpers_1.encodeQuotes)(component.context.get[key].name), "\",\n    ");
+        str += "\n      ".concat(key, ": ").concat((0, helpers_1.encodeQuotes)(component.context.get[key].name), ",\n    ");
     }
     str += '}';
     return str;
@@ -140,7 +140,7 @@ function generateOptionsApiScript(component, options, path, template, props, onU
         : '', "\n        ").concat(onUpdateWithDeps.length
         ? "watch: {\n            ".concat(onUpdateWithDeps
             .map(function (hook, index) {
-            return "".concat((0, helpers_1.getOnUpdateHookName)(index), "() {\n                  ").concat(hook.code, "\n                  }\n                ");
+            return "".concat((0, helpers_1.getOnUpdateHookName)(index), ": { handler() { ").concat(hook.code, " }, immediate: true }");
         })
             .join(','), "\n          },")
         : '', "\n        ").concat(component.hooks.onUnMount

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

@@ -175,7 +175,9 @@ var componentToVue = function (userOptions) {
             (0, lodash_1.size)(Object.keys(component.state).filter(function (key) { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) && vueImports.push('ref');
         }
         var tsLangAttribute = options.typescript ? "lang='ts'" : '';
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template, options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (options.typescript && ((_h = component.types) === null || _h === void 0 ? void 0 : _h.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template.trim().length > 0
+            ? "<template>\n      ".concat(template, "\n    </template>")
+            : '', options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (options.typescript && ((_h = component.types) === null || _h === void 0 ? void 0 : _h.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
             component: component,
             target: 'vue',
             asyncComponentImports: options.asyncComponentImports,
@@ -205,8 +207,9 @@ var componentToVue = function (userOptions) {
         str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         for (var _i = 0, removePatterns_1 = removePatterns; _i < removePatterns_1.length; _i++) {
             var pattern = removePatterns_1[_i];
-            str = str.replace(pattern, '');
+            str = str.replace(pattern, '').trim();
         }
+        str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
         return str;
     };
 };

package/dist/src/helpers/process-http-requests.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
-    var _a, _b;
-    var httpRequests = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.httpRequests;
-    var onMount = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? json.hooks.onMount : { code: '' };
+    var _a, _b, _c;
+    var httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
+    var onMount = ((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? json.hooks.onMount : { code: '' };
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {

package/dist/src/helpers/styles/collect-css.js

@@ -71,7 +71,7 @@ var classStyleMapToCss = function (map) {
     var str = '';
     for (var key in map) {
         var styles = (0, helpers_1.getStylesOnly)(map[key]);
-        str += ".".concat(key, " { ").concat((0, helpers_1.styleMapToCss)(styles), " }");
+        str += ".".concat(key, " {\n").concat((0, helpers_1.styleMapToCss)(styles), "\n}");
         var nestedSelectors = (0, helpers_1.getNestedSelectors)(map[key]);
         for (var nestedSelector in nestedSelectors) {
             var value = nestedSelectors[nestedSelector];
@@ -82,7 +82,7 @@ var classStyleMapToCss = function (map) {
                 var useSelector = nestedSelector.includes('&')
                     ? nestedSelector.replace(/&/g, ".".concat(key))
                     : ".".concat(key, " ").concat(nestedSelector);
-                str += "".concat(useSelector, " { ").concat((0, helpers_1.styleMapToCss)(value), " }");
+                str += "".concat(useSelector, " {\n").concat((0, helpers_1.styleMapToCss)(value), "\n}");
             }
         }
     }

package/dist/src/helpers/styles/helpers.js

@@ -69,16 +69,15 @@ var parseCssObject = function (css) {
 };
 exports.parseCssObject = parseCssObject;
 var styleMapToCss = function (map) {
-    var str = '';
-    for (var key in map) {
-        var value = map[key];
-        if (typeof value === 'string') {
-            str += "\n".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
-        }
-        else {
-            // TODO: do nothing
-        }
-    }
-    return str;
+    return Object.entries(map)
+        .filter(function (_a) {
+        var key = _a[0], value = _a[1];
+        return typeof value === 'string';
+    })
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return "  ".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
+    })
+        .join('\n');
 };
 exports.styleMapToCss = styleMapToCss;

package/dist/src/parsers/svelte/helpers/post-process.d.ts

@@ -1,9 +1,14 @@
+import type { StateValue } from '../../../types/mitosis-component';
 import type { SveltosisComponent } from '../types';
-export declare function preventNameCollissions(json: SveltosisComponent, input: string, arguments_: string[], prepend?: string, append?: string): {
-    code: string;
-    arguments: string[];
-} | {
+declare type SveltosisStateValue = StateValue & {
+    arguments?: string[];
+    type: string;
+};
+export declare function preventNameCollissions(json: SveltosisComponent, item: SveltosisStateValue, prepend?: string, append?: string): {
     code: string;
-    arguments?: undefined;
+    type: "function" | "getter" | "method" | "property";
+    typeParameter?: string | undefined;
+    arguments?: string[] | undefined;
 };
 export declare function postProcess(json: SveltosisComponent): void;
+export {};

package/dist/src/parsers/svelte/helpers/post-process.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -19,14 +42,28 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.postProcess = exports.preventNameCollissions = void 0;
+var generator_1 = __importDefault(require("@babel/generator"));
+var parser = __importStar(require("@babel/parser"));
+var types = __importStar(require("@babel/types"));
 var bindings_1 = require("./bindings");
-function preventNameCollissions(json, input, arguments_, prepend, append) {
+function preventNameCollissions(json, item, prepend, append) {
     if (prepend === void 0) { prepend = ''; }
     if (append === void 0) { append = '_'; }
-    var output = input;
-    var argumentsOutput = arguments_;
+    var output = item.code;
+    var argumentsOutput = [];
+    try {
+        var parsed = parser.parse(item.code);
+        var body = parsed.program.body[0];
+        if (types.isFunctionDeclaration(body)) {
+            argumentsOutput = body.params.map(function (p) { return (0, generator_1.default)(p).code; });
+        }
+    }
+    catch (e) { }
     var keys = __spreadArray(__spreadArray(__spreadArray([], Object.keys(json.props), true), Object.keys(json.state), true), Object.keys(json.refs), true);
     var _loop_1 = function (key) {
         var regex = function () { return new RegExp("(?<!=(?:\\s))".concat(key, "\\b"), 'g'); };
@@ -37,9 +74,10 @@ function preventNameCollissions(json, input, arguments_, prepend, append) {
                 argumentsOutput.splice(index, 1, argument.replace(regex(), "".concat(prepend).concat(key).concat(append)));
             }
         });
-        var isInOutput = regex().test(output);
+        var outputRegex = function () { return new RegExp("\\b".concat(key, "\\b"), 'g'); };
+        var isInOutput = outputRegex().test(output);
         if (isInArguments && isInOutput) {
-            output = output.replace(regex(), "".concat(prepend).concat(key).concat(append));
+            output = output.replace(outputRegex(), "".concat(prepend).concat(key).concat(append));
         }
     };
     for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
@@ -47,11 +85,7 @@ function preventNameCollissions(json, input, arguments_, prepend, append) {
         _loop_1(key);
     }
     return (argumentsOutput === null || argumentsOutput === void 0 ? void 0 : argumentsOutput.length)
-        ? {
-            code: output,
-            arguments: argumentsOutput,
-        }
-        : { code: output };
+        ? __assign(__assign({}, item), { code: output, arguments: argumentsOutput }) : __assign(__assign({}, item), { code: output });
 }
 exports.preventNameCollissions = preventNameCollissions;
 function prependProperties(json, input) {
@@ -71,7 +105,7 @@ function prependState(json, input) {
     var stateKeys = Object.keys(json.state);
     for (var _i = 0, stateKeys_1 = stateKeys; _i < stateKeys_1.length; _i++) {
         var state = stateKeys_1[_i];
-        var regex = new RegExp("(?<!(\\.|'|\"|`|function ))\\b(state\\.)?".concat(state, "\\b(?!(\\s+)?\\()"), 'g');
+        var regex = new RegExp("(?<!(\\.|'|\"|`|function |get ))\\b(state\\.)?".concat(state, "\\b"), 'g');
         if (regex.test(output)) {
             output = output.replace(regex, "state.".concat(state));
         }
@@ -85,13 +119,14 @@ function addPropertiesAndState(json, input) {
     return output;
 }
 function addPropertiesAndStateToNode(json, node) {
-    var _a, _b, _c;
-    for (var _i = 0, _d = Object.keys(node.bindings); _i < _d.length; _i++) {
-        var key = _d[_i];
+    var _a, _b, _c, _d;
+    for (var _i = 0, _e = Object.keys(node.bindings); _i < _e.length; _i++) {
+        var key = _e[_i];
         if (Object.prototype.hasOwnProperty.call(node.bindings, key)) {
             node.bindings[key] = {
                 code: addPropertiesAndState(json, (_b = (_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '').trim(),
-                type: (_c = node.bindings[key]) === null || _c === void 0 ? void 0 : _c.type,
+                arguments: (_c = node.bindings[key]) === null || _c === void 0 ? void 0 : _c.arguments,
+                type: (_d = node.bindings[key]) === null || _d === void 0 ? void 0 : _d.type,
             };
         }
     }
@@ -101,7 +136,7 @@ function postProcessState(json) {
         var key = _a[_i];
         var item = json.state[key];
         if ((item === null || item === void 0 ? void 0 : item.type) !== 'property') {
-            var output = preventNameCollissions(json, item.code, (item === null || item === void 0 ? void 0 : item.arguments) || []);
+            var output = preventNameCollissions(json, item);
             output.code = addPropertiesAndState(json, output.code);
             json.state[key] = __assign(__assign({}, item), output);
         }

package/dist/src/parsers/svelte/html/element.js

@@ -21,7 +21,7 @@ var actions_1 = require("./actions");
 var SPECIAL_ELEMENTS = new Set(['svelte:component', 'svelte:element']);
 function parseElement(json, node) {
     var _a;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var mitosisNode = (0, mitosis_node_1.createMitosisNode)();
     mitosisNode.name = node.name;
     var useReference = function () {
@@ -46,8 +46,8 @@ function parseElement(json, node) {
         mitosisNode.name = "".concat(prefix, ".").concat(expression);
     }
     if ((_b = node.attributes) === null || _b === void 0 ? void 0 : _b.length) {
-        for (var _i = 0, _s = node.attributes; _i < _s.length; _i++) {
-            var attribute = _s[_i];
+        for (var _i = 0, _v = node.attributes; _i < _v.length; _i++) {
+            var attribute = _v[_i];
             switch (attribute.type) {
                 case 'Attribute': {
                     switch ((_c = attribute.value[0]) === null || _c === void 0 ? void 0 : _c.type) {
@@ -102,23 +102,41 @@ function parseElement(json, node) {
                     break;
                 }
                 case 'EventHandler': {
-                    var object = { code: '', arguments: [] };
+                    var object = {
+                        code: '',
+                        arguments: [],
+                    };
                     if (((_h = attribute.expression) === null || _h === void 0 ? void 0 : _h.type) === 'ArrowTypeFunction') {
                         var expression = attribute.expression;
+                        var code = (0, astring_1.generate)(expression.body);
                         object = {
-                            code: (0, astring_1.generate)(expression.body),
-                            arguments: (_k = (_j = expression.body) === null || _j === void 0 ? void 0 : _j.arguments) === null || _k === void 0 ? void 0 : _k.map(function (a) { return a.name; }),
+                            code: code,
+                            arguments: (_k = (_j = expression.body) === null || _j === void 0 ? void 0 : _j.arguments) === null || _k === void 0 ? void 0 : _k.map(function (a) { var _a; return (_a = a.name) !== null && _a !== void 0 ? _a : []; }),
                         };
                     }
                     else if (attribute.expression) {
                         var code = (0, astring_1.generate)(attribute.expression);
-                        if (!((_l = attribute.expression.arguments) === null || _l === void 0 ? void 0 : _l.length) &&
-                            !((_o = (_m = attribute.expression.body) === null || _m === void 0 ? void 0 : _m.arguments) === null || _o === void 0 ? void 0 : _o.length)) {
+                        if (((_l = attribute.expression.body) === null || _l === void 0 ? void 0 : _l.type) === 'CallExpression') {
+                            code = (0, astring_1.generate)(attribute.expression.body);
+                        }
+                        if (!code.startsWith(')') && !code.endsWith(')')) {
+                            code += '()';
+                        }
+                        if (!((_m = attribute.expression.arguments) === null || _m === void 0 ? void 0 : _m.length) &&
+                            !((_p = (_o = attribute.expression.body) === null || _o === void 0 ? void 0 : _o.arguments) === null || _p === void 0 ? void 0 : _p.length)) {
                             code = code.replace(/\(\)/g, '(event)');
                         }
+                        var args = undefined;
+                        if (attribute.expression.type === 'ArrowFunctionExpression') {
+                            args = (_r = (_q = attribute.expression.params) === null || _q === void 0 ? void 0 : _q.map(function (arg) { return (0, astring_1.generate)(arg); })) !== null && _r !== void 0 ? _r : [];
+                        }
+                        else if (attribute.expression.type === 'CallExpression' &&
+                            attribute.expression.arguments.length) {
+                            args = [];
+                        }
                         object = {
                             code: code,
-                            arguments: ['event'],
+                            arguments: args,
                         };
                     }
                     else {
@@ -172,7 +190,7 @@ function parseElement(json, node) {
                     // if there are existing class declarations
                     // add them here instead and remove them from properties
                     // to avoid duplicate class declarations in certain frameworks
-                    if ((_q = (_p = mitosisNode.properties) === null || _p === void 0 ? void 0 : _p.class) === null || _q === void 0 ? void 0 : _q.length) {
+                    if ((_t = (_s = mitosisNode.properties) === null || _s === void 0 ? void 0 : _s.class) === null || _t === void 0 ? void 0 : _t.length) {
                         code = "".concat(mitosisNode.properties.class, " ");
                         delete mitosisNode.properties.class;
                     }
@@ -180,7 +198,7 @@ function parseElement(json, node) {
                     // append it to the string instead of assigning it
                     if (mitosisNode.bindings.class &&
                         Object.prototype.hasOwnProperty.call(mitosisNode.bindings.class, 'code') &&
-                        ((_r = mitosisNode.bindings.class) === null || _r === void 0 ? void 0 : _r.code.length)) {
+                        ((_u = mitosisNode.bindings.class) === null || _u === void 0 ? void 0 : _u.code.length)) {
                         code = (0, string_1.insertAt)(mitosisNode.bindings.class.code, ' ${' + binding + '}', mitosisNode.bindings.class.code.length - 1);
                         mitosisNode.bindings.class = {
                             code: code,

package/dist/src/parsers/svelte/instance/reactive.js

@@ -13,12 +13,21 @@ function parseReactive(json, node) {
             type: 'getter',
         };
     }
-    else if (expression.left) {
+    else if (expression.type === 'AssignmentExpression') {
         var name_2 = expression.left.name;
         json.state[name_2] = {
             code: "get ".concat(name_2, "() {\n return ").concat((0, astring_1.generate)(expression.right), "}"),
             type: 'getter',
         };
     }
+    else if (expression.type === 'CallExpression') {
+        if (node.body.type === 'ExpressionStatement') {
+            json.hooks.onUpdate = json.hooks.onUpdate || [];
+            json.hooks.onUpdate.push({
+                code: (0, astring_1.generate)(node.body),
+                deps: "[".concat(expression.arguments.map(function (arg) { return (0, astring_1.generate)(arg); }), "]"),
+            });
+        }
+    }
 }
 exports.parseReactive = parseReactive;

package/dist/src/parsers/svelte/instance/references.js

@@ -22,7 +22,7 @@ function isPropertyOrStateReference(index) {
     return (0, lodash_1.isString)(index) && (index.includes('props.') || index.includes('state.'));
 }
 function parseReferences(json, node) {
-    var _a, _b;
+    var _a, _b, _c;
     var declaration = node.declarations[0];
     var code;
     var type = 'property';
@@ -57,7 +57,7 @@ function parseReferences(json, node) {
             break;
         }
         default: {
-            code = (_b = declaration === null || declaration === void 0 ? void 0 : declaration.init) === null || _b === void 0 ? void 0 : _b.value;
+            code = (_c = (_b = declaration === null || declaration === void 0 ? void 0 : declaration.init) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
         }
     }
     json.state[declaration.id.name] = {