@builder.io/mitosis 0.0.76 → 0.0.77

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FUNCTION_HACK_PLUGIN = void 0;
+var patterns_1 = require("../../helpers/patterns");
 var FUNCTION_HACK_PLUGIN = function () { return ({
     json: {
         pre: function (json) {
@@ -9,7 +10,7 @@ var FUNCTION_HACK_PLUGIN = function () { return ({
                 var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
                 var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
                 if (typeof value === 'string' && type === 'method') {
-                    var newValue = "function ".concat(value);
+                    var newValue = (0, patterns_1.prefixWithFunction)(value);
                     json.state[key] = {
                         code: newValue,
                         type: 'method',

package/dist/src/generators/html.js

@@ -209,7 +209,7 @@ var blockToHtml = function (json, options, blockOptions) {
     if (mappers[json.name]) {
         return mappers[json.name](json, options, blockOptions);
     }
-    if ((0, is_children_1.default)(json)) {
+    if ((0, is_children_1.default)({ node: json })) {
         return "<slot></slot>";
     }
     if (json.properties._text) {

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

@@ -70,6 +70,7 @@ var componentToQwik = function (userOptions) {
                     emitUseRef(file, component);
                     hasState_1 && emitUseStore(file, state_2);
                     emitUseContextProvider(file, component);
+                    emitUseClientEffect(file, component);
                     emitUseMount(file, component);
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
@@ -110,7 +111,7 @@ function emitTagNameHack(file, component, metadataValue) {
         file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
     }
 }
-function emitUseMount(file, component) {
+function emitUseClientEffect(file, component) {
     if (component.hooks.onMount) {
         // This is called useMount, but in practice it is used as
         // useClientEffect. Not sure if this is correct, but for now.
@@ -118,6 +119,12 @@ function emitUseMount(file, component) {
         file.src.emit(file.import(file.qwikModule, 'useClientEffect$').localName, '(()=>{', code, '});');
     }
 }
+function emitUseMount(file, component) {
+    if (component.hooks.onInit) {
+        var code = component.hooks.onInit.code;
+        file.src.emit(file.import(file.qwikModule, 'useMount$').localName, '(()=>{', code, '});');
+    }
+}
 function emitUseWatch(file, component) {
     if (component.hooks.onUpdate) {
         component.hooks.onUpdate.forEach(function (onUpdate) {

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

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../../parsers/jsx");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
@@ -40,12 +39,12 @@ var mappers = {
             delete firstChild.bindings.key;
         }
         var args = (0, for_1.getForArguments)(json, { excludeCollectionName: true }).join(', ');
-        return "\n{#each ".concat((0, helpers_1.stripStateAndProps)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " as ").concat(args, " ").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");
+        return "\n{#each ".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, " as ").concat(args, " ").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, helpers_1.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
+        return "\n{#if ".concat((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, " }\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,
@@ -60,14 +59,13 @@ var mappers = {
             var key = Object.keys(json.bindings).find(Boolean);
             if (!key)
                 return '<slot />';
-            return "\n        <span #".concat(key, ">\n        ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code), "\n        </span>\n      ");
+            return "\n        <span #".concat(key, ">\n        ").concat((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code, "\n        </span>\n      ");
         }
-        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.name.code);
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\">").concat((_c = json.children) === null || _c === void 0 ? void 0 : _c.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(json.bindings.name.code).toLowerCase(), "\">").concat((_c = json.children) === null || _c === void 0 ? void 0 : _c.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "</slot>");
     },
 };
 var BINDINGS_MAPPER = {
-    innerHTML: function (json, options) { var _a; return "{@html ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code), "}"); },
+    innerHTML: function (json, options) { var _a; return "{@html ".concat((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code, "}"); },
 };
 var SVELTE_SPECIAL_TAGS = {
     COMPONENT: 'svelte:component',
@@ -75,7 +73,7 @@ var SVELTE_SPECIAL_TAGS = {
     SELF: 'svelte:self',
 };
 var getTagName = function (_a) {
-    var json = _a.json, parentComponent = _a.parentComponent;
+    var json = _a.json, parentComponent = _a.parentComponent, options = _a.options;
     if (parentComponent && json.name === parentComponent.name) {
         return SVELTE_SPECIAL_TAGS.SELF;
     }
@@ -89,7 +87,9 @@ var getTagName = function (_a) {
     // 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 = { code: json.name };
+        json.bindings.this = {
+            code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options: options })(json.name),
+        };
         return SVELTE_SPECIAL_TAGS.COMPONENT;
     }
     return json.name;
@@ -101,15 +101,14 @@ var stringifyBinding = function (options) {
             return '';
         }
         var code = binding.code, _b = binding.arguments, cusArgs = _b === void 0 ? ['event'] : _b, type = binding.type;
-        var useValue = (0, helpers_1.stripStateAndProps)(code, options);
         if (type === 'spread') {
-            var spreadValue = key === 'props' ? '$$props' : useValue;
+            var spreadValue = key === 'props' ? '$$props' : code;
             return " {...".concat(spreadValue, "} ");
         }
         else if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             // TODO: handle quotes in event handler values
-            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue);
+            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
             if (valueWithoutBlock === key) {
                 return " on:".concat(event_1, "={").concat(valueWithoutBlock, "} ");
             }
@@ -118,10 +117,10 @@ var stringifyBinding = function (options) {
             }
         }
         else if (key === 'ref') {
-            return " bind:this={".concat(useValue, "} ");
+            return " bind:this={".concat(code, "} ");
         }
         else {
-            return " ".concat(key, "={").concat(useValue, "} ");
+            return " ".concat(key, "={").concat(code, "} ");
         }
     };
 };
@@ -135,8 +134,8 @@ var blockToSvelte = function (_a) {
             parentComponent: parentComponent,
         });
     }
-    var tagName = getTagName({ json: json, parentComponent: parentComponent });
-    if ((0, is_children_1.default)(json)) {
+    var tagName = getTagName({ json: json, parentComponent: parentComponent, options: options });
+    if ((0, is_children_1.default)({ node: json, extraMatches: ['$$slots.default'] })) {
         return "<slot></slot>";
     }
     if (json.properties._text) {
@@ -144,17 +143,16 @@ var blockToSvelte = function (_a) {
     }
     var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
     if (textCode) {
-        var strippedTextCode = (0, helpers_1.stripStateAndProps)(textCode, options);
-        if ((0, slots_1.isSlotProperty)(strippedTextCode)) {
-            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\"/>");
+        if ((0, slots_1.isSlotProperty)(textCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode).toLowerCase(), "\"/>");
         }
-        return "{".concat(strippedTextCode, "}");
+        return "{".concat(textCode, "}");
     }
     var str = '';
     str += "<".concat(tagName, " ");
     var isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
     if ((((_c = json.bindings.style) === null || _c === void 0 ? void 0 : _c.code) || json.properties.style) && !isComponent) {
-        var useValue = (0, helpers_1.stripStateAndProps)(((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style, options);
+        var useValue = ((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style;
         str += "use:mitosis_styling={".concat(useValue, "}");
         delete json.bindings.style;
         delete json.properties.style;

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

@@ -1,2 +1,6 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { ToSvelteOptions } from './types';
-export declare const stripStateAndProps: (code: string | undefined, options: ToSvelteOptions) => string;
+export declare const stripStateAndProps: ({ options, json }: {
+    options: ToSvelteOptions;
+    json: MitosisComponent;
+}) => (code: string) => string;

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

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripStateAndProps = void 0;
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var stripStateAndProps = function (code, options) {
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-        includeState: options.stateType === 'variables',
-        replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
-    });
+var stripStateAndProps = function (_a) {
+    var options = _a.options, json = _a.json;
+    return function (code) {
+        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+            includeState: options.stateType === 'variables',
+            replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
+        });
+    };
 };
 exports.stripStateAndProps = stripStateAndProps;

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

@@ -28,7 +28,6 @@ var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var render_imports_1 = require("../../helpers/render-imports");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var plugins_1 = require("../../modules/plugins");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var getters_to_functions_1 = require("../../helpers/getters-to-functions");
@@ -42,22 +41,30 @@ var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var helpers_2 = require("./helpers");
 var blocks_1 = require("./blocks");
+var patterns_1 = require("../../helpers/patterns");
 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);"); })
+    return Object.entries(contextGetters)
+        .map(function (_a) {
+        var key = _a[0], context = _a[1];
+        var name = context.name;
+        return "let ".concat(key, " = getContext(").concat(name, ".key);");
+    })
         .join('\n');
 };
-var setContextCode = function (json) {
-    var contextSetters = json.context.set;
-    return Object.keys(contextSetters)
-        .map(function (key) {
-        var _a = contextSetters[key], ref = _a.ref, value = _a.value, name = _a.name;
-        return "setContext(".concat(value ? "".concat(name, ".key") : name, ", ").concat(value
-            ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, get_state_object_string_1.stringifyContextValue)(value))
+var setContextCode = function (_a) {
+    var json = _a.json, options = _a.options;
+    var processCode = (0, helpers_2.stripStateAndProps)({ json: json, options: options });
+    return Object.values(json.context.set)
+        .map(function (context) {
+        var value = context.value, name = context.name, ref = context.ref;
+        var key = value ? "".concat(name, ".key") : name;
+        var valueStr = value
+            ? processCode((0, get_state_object_string_1.stringifyContextValue)(value))
             : ref
-                ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)
-                : 'undefined', ");");
+                ? processCode(ref)
+                : 'undefined';
+        return "setContext(".concat(key, ", ").concat(valueStr, ");");
     })
         .join('\n');
 };
@@ -92,20 +99,11 @@ 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 DEFAULT_OPTIONS = {
     stateType: 'variables',
     prettier: true,
     plugins: [functions_1.FUNCTION_HACK_PLUGIN],
 };
-var transformHookCode = function (options) { return function (hookCode) {
-    return (0, function_1.pipe)((0, helpers_2.stripStateAndProps)(hookCode, options), babel_transform_1.babelTransformCode);
-}; };
 var componentToSvelte = function (userProvidedOptions) {
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -115,12 +113,13 @@ var componentToSvelte = function (userProvidedOptions) {
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
                     case 'hooks':
-                        return transformHookCode(options);
+                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), babel_transform_1.babelTransformCode);
                     case 'bindings':
                     case 'hooks-deps':
                     case 'state':
+                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), patterns_1.stripGetter);
                     case 'properties':
-                        return function (c) { return c; };
+                        return (0, helpers_2.stripStateAndProps)({ json: json, options: options });
                 }
             }),
         ], false);
@@ -140,7 +139,6 @@ var componentToSvelte = function (userProvidedOptions) {
             getters: false,
             format: options.stateType === 'proxies' ? 'object' : 'variables',
             keyPrefix: options.stateType === 'variables' ? 'let ' : '',
-            valueMapper: function (code) { return (0, helpers_2.stripStateAndProps)(code, options); },
         }), babel_transform_1.babelTransformCode);
         var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: false,
@@ -149,7 +147,10 @@ var componentToSvelte = function (userProvidedOptions) {
             format: 'variables',
             keyPrefix: '$: ',
             valueMapper: function (code) {
-                return (0, function_1.pipe)(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), function (str) { return (0, helpers_2.stripStateAndProps)(str, options); }, stripThisRefs);
+                return code
+                    .trim()
+                    .replace(/^([a-zA-Z_\$0-9]+)/, '$1 = ')
+                    .replace(/\)/, ') => ');
             },
         }), babel_transform_1.babelTransformCode);
         var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -157,7 +158,6 @@ var componentToSvelte = function (userProvidedOptions) {
             getters: false,
             functions: true,
             format: 'variables',
-            valueMapper: function (code) { return (0, function_1.pipe)((0, helpers_2.stripStateAndProps)(code, options), stripThisRefs); },
         }), babel_transform_1.babelTransformCode);
         var hasData = dataString.length > 4;
         var str = '';
@@ -167,6 +167,7 @@ var componentToSvelte = function (userProvidedOptions) {
         }
         // prepare svelte imports
         var svelteImports = [];
+        var svelteStoreImports = [];
         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');
         }
@@ -179,9 +180,11 @@ var componentToSvelte = function (userProvidedOptions) {
         if ((0, context_1.hasContext)(component)) {
             svelteImports.push('getContext', '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    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      "
+        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
-            , "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
+            , "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), !svelteStoreImports.length
+            ? ''
+            : "import { ".concat(svelteStoreImports.sort().join(', '), " } from 'svelte/store'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
             .map(function (name) {
             if (name === 'children') {
                 return '';
@@ -200,17 +203,17 @@ var componentToSvelte = function (userProvidedOptions) {
         // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
         (0, helpers_1.hasStyle)(json)
             ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars || {}).forEach(([ p, v ]) => {\n            if (p.startsWith('--')) {\n              node.style.setProperty(p, v);\n            } else {\n              node.style[p] = v;\n            }\n          })\n        }\n      "
-            : '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)); }).join('\n'), options.stateType === 'proxies'
+            : '', getContextCode(json), setContextCode({ json: json, options: options }), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, helpers_2.stripStateAndProps)({ json: json, options: options })(ref)); }).join('\n'), options.stateType === 'proxies'
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_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, (_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) {
             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((0, helpers_2.stripStateAndProps)(deps, options), ")\n            ");
+            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
             .map(function (item) {
             return (0, blocks_1.blockToSvelte)({

package/dist/src/generators/swift-ui.js

@@ -59,7 +59,7 @@ var blockToSwift = function (json, options) {
     // TODO: Add support for `{props.children}` bindings
     // Right now we return an empty string because the generated code
     // is very likely wrong.
-    if ((0, is_children_1.default)(json)) {
+    if ((0, is_children_1.default)({ node: json })) {
         return '/* `props.children` is not supported yet for SwiftUI */';
     }
     if (json.properties._text) {

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

@@ -236,7 +236,7 @@ var blockToVue = function (node, options, scope) {
     if (nodeMapper) {
         return nodeMapper(node, options, scope);
     }
-    if ((0, is_children_1.default)(node)) {
+    if ((0, is_children_1.default)({ node: node })) {
         return "<slot/>";
     }
     if (node.name === 'style') {
@@ -272,7 +272,9 @@ var blockToVue = function (node, options, scope) {
     var stringifiedBindings = Object.entries(node.bindings).map(stringifyBinding(node)).join('');
     str += stringifiedBindings;
     // spreads
-    var spreads = (0, lodash_1.filter)(node.bindings, function (binding) { return (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread'; }).map(function (value) { return value === null || value === void 0 ? void 0 : value.code; });
+    var spreads = (0, lodash_1.filter)(node.bindings, function (binding) { return (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread'; }).map(function (value) {
+        return (value === null || value === void 0 ? void 0 : value.code) === 'props' ? '$props' : value === null || value === void 0 ? void 0 : value.code;
+    });
     if (spreads === null || spreads === void 0 ? void 0 : spreads.length) {
         if (spreads.length > 1) {
             var spreadsString = "{...".concat(spreads.join(', ...'), "}");

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

@@ -36,7 +36,9 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         functions: false,
         getters: false,
         format: 'variables',
-        valueMapper: function (code) { return "ref(".concat(code, ")"); },
+        valueMapper: function (code, _, typeParameter) {
+            return options.typescript && typeParameter ? "ref<".concat(typeParameter, ">(").concat(code, ")") : "ref(".concat(code, ")");
+        },
         keyPrefix: 'const',
     });
     var methods = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {

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

@@ -9,11 +9,11 @@ export declare const invertBooleanExpression: (expression: string) => string;
 export declare function encodeQuotes(string: string): string;
 export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
 export declare function getContextNames(json: MitosisComponent): string[];
-export declare const processBinding: ({ code, options, json, includeProps, }: {
+export declare const processBinding: ({ code, options, json, preserveGetter, }: {
     code: string;
     options: ToVueOptions;
     json: MitosisComponent;
-    includeProps?: boolean | undefined;
+    preserveGetter?: boolean | undefined;
 }) => string;
 export declare const getContextValue: ({ options, json }: {
     options: ToVueOptions;

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

@@ -27,6 +27,7 @@ var function_1 = require("fp-ts/lib/function");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
+var patterns_1 = require("../../helpers/patterns");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };
@@ -103,10 +104,12 @@ function processRefs(input, component, options) {
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 var processBinding = function (_a) {
-    var code = _a.code, options = _a.options, json = _a.json, _b = _a.includeProps, includeProps = _b === void 0 ? true : _b;
+    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b;
     return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
         includeState: true,
-        includeProps: includeProps,
+        // we don't want to process `props` in the Composition API because it has a `props` ref,
+        // therefore we can keep pointing to `props.${value}`
+        includeProps: options.api === 'options',
         replaceWith: function (name) {
             switch (options.api) {
                 case 'composition':
@@ -118,7 +121,12 @@ var processBinding = function (_a) {
                     return "this.".concat(name);
             }
         },
-    }), function (c) { return processRefs(c, json, options); });
+    }), function (x) {
+        var wasGetter = x.match(patterns_1.GETTER);
+        return (0, function_1.pipe)(x, 
+        // workaround so that getter code is valid and parseable by babel.
+        patterns_1.stripGetter, function (code) { return processRefs(code, json, options); }, function (code) { return (preserveGetter && wasGetter ? "get ".concat(code) : code); });
+    });
 };
 exports.processBinding = processBinding;
 var getContextValue = function (_a) {
@@ -127,10 +135,10 @@ var getContextValue = function (_a) {
         var name = _a.name, ref = _a.ref, value = _a.value;
         var valueStr = value
             ? (0, get_state_object_string_1.stringifyContextValue)(value, {
-                valueMapper: function (code) { return (0, exports.processBinding)({ code: code, options: options, json: json }); },
+                valueMapper: function (code) { return (0, exports.processBinding)({ code: code, options: options, json: json, preserveGetter: true }); },
             })
             : ref
-                ? (0, exports.processBinding)({ code: ref, options: options, json: json })
+                ? (0, exports.processBinding)({ code: ref, options: options, json: json, preserveGetter: true })
                 : null;
         return valueStr;
     };

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

@@ -19,7 +19,6 @@ var get_components_used_1 = require("../../helpers/get-components-used");
 var get_custom_imports_1 = require("../../helpers/get-custom-imports");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var nullable_1 = require("../../helpers/nullable");
-var patterns_1 = require("../../helpers/patterns");
 var render_imports_1 = require("../../helpers/render-imports");
 var helpers_1 = require("./helpers");
 function getContextInjectString(component, options) {
@@ -86,15 +85,11 @@ function generateOptionsApiScript(component, options, path, template, props, onU
         data: false,
         getters: true,
         functions: false,
-        valueMapper: function (code) {
-            return (0, helpers_1.processBinding)({ code: code.replace(patterns_1.GETTER, ''), options: options, json: component });
-        },
     });
     var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: false,
         getters: false,
         functions: true,
-        valueMapper: function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); },
     });
     var includeClassMapHelper = template.includes('_classStringToObject');
     if (includeClassMapHelper) {

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

@@ -42,7 +42,6 @@ var blocks_1 = require("./blocks");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var patterns_1 = require("../../helpers/patterns");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, _options) {
     (0, traverse_1.default)(json).forEach(function (node) {
@@ -108,31 +107,9 @@ var componentToVue = function (userOptions) {
             if (options.api === 'composition') {
                 switch (codeType) {
                     case 'hooks':
-                        return function (code) {
-                            return (0, helpers_1.processBinding)({
-                                code: code,
-                                options: options,
-                                json: component,
-                                // we don't want to process `props`, because Vue 3 code has a `props` ref, and
-                                // therefore we can keep pointing to `props.${value}`
-                                includeProps: false,
-                            });
-                        };
+                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'state':
-                        return function (code) {
-                            return (0, function_1.pipe)(
-                            // workaround so that getter code is valid and parseable by babel.
-                            code.replace(patterns_1.GETTER, ''), function (c) {
-                                return (0, helpers_1.processBinding)({
-                                    code: c,
-                                    options: options,
-                                    json: component,
-                                    // we don't want to process `props`, because Vue 3 code has a `props` ref, and
-                                    // therefore we can keep pointing to `props.${value}`
-                                    includeProps: false,
-                                });
-                            });
-                        };
+                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'bindings':
                         return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c); };
                     case 'hooks-deps':
@@ -149,8 +126,9 @@ var componentToVue = function (userOptions) {
                         return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c); };
                     case 'properties':
                     case 'hooks-deps':
-                    case 'state':
                         return function (c) { return c; };
+                    case 'state':
+                        return function (c) { return (0, helpers_1.processBinding)({ code: c, options: options, json: component }); };
                 }
             }
         }));

package/dist/src/helpers/babel-transform.d.ts

@@ -3,5 +3,6 @@ import type { Visitor } from '@babel/traverse';
 export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
 export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => string;
 declare type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
-export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, type?: ExpressionType) => string;
+export declare const getType: (code: string, initialType: ExpressionType) => ExpressionType;
+export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType) => string;
 export {};