@builder.io/mitosis 0.0.75 → 0.0.77-0

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 {};

package/dist/src/helpers/babel-transform.js

@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
+exports.babelTransformExpression = exports.getType = exports.babelTransformCode = exports.babelTransform = void 0;
 var babel = __importStar(require("@babel/core"));
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
@@ -63,12 +63,7 @@ var handleErrorOrExpression = function (_a) {
     }
     catch (err) {
         console.error('Error parsing code:\n', code, '\n', result);
-        try {
-            return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
-        }
-        catch (err) {
-            throw err;
-        }
+        throw err;
     }
 };
 var babelTransform = function (code, visitor) {
@@ -96,25 +91,27 @@ var trimExpression = function (type) { return function (code) {
             return trimSemicolons(code);
     }
 }; };
-var babelTransformExpression = function (code, visitor, type) {
-    if (type === void 0) { type = 'unknown'; }
-    if (!code) {
-        return '';
-    }
+var getType = function (code, initialType) {
     // match for object literal like { foo: ... }
-    if (type === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
-        type = 'expression';
+    if (initialType === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
+        return 'expression';
     }
     // For Builder content
-    if (type === 'unknown' &&
+    if (initialType === 'unknown' &&
         (code.includes('return _virtual_index') || code.trim().startsWith('return ')) &&
         !code.trim().startsWith('function')) {
-        type = 'functionBody';
+        return 'functionBody';
     }
-    var useCode = code;
-    if (type === 'functionBody') {
-        useCode = "function(){".concat(useCode, "}");
+    return initialType;
+};
+exports.getType = getType;
+var babelTransformExpression = function (code, visitor, initialType) {
+    if (initialType === void 0) { initialType = 'unknown'; }
+    if (!code) {
+        return '';
     }
+    var type = (0, exports.getType)(code, initialType);
+    var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
     if (type !== 'expression') {
         try {
             return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimExpression(type));

package/dist/src/helpers/get-state-object-string.d.ts

@@ -4,7 +4,7 @@ interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;
     getters?: boolean;
-    valueMapper?: (code: string, type: 'data' | 'function' | 'getter') => string;
+    valueMapper?: (code: string, type: 'data' | 'function' | 'getter', typeParameter?: string) => string;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
 }

package/dist/src/helpers/get-state-object-string.js

@@ -32,31 +32,31 @@ var convertStateMemberToString = function (_a) {
         if (!state) {
             return undefined;
         }
-        var code = state.code;
+        var code = state.code, typeParameter = state.typeParameter;
         switch (state.type) {
             case 'function': {
                 if (functions === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(code, 'function'));
+                return "".concat(keyPrefix, " ").concat(key, " ").concat(keyValueDelimiter, " ").concat(valueMapper(code, 'function', typeParameter));
             }
             case 'method': {
                 if (functions === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'function'));
+                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'function', typeParameter));
             }
             case 'getter': {
                 if (getters === false || typeof code !== 'string') {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'getter'));
+                return "".concat(keyPrefix, " ").concat(valueMapper(code, 'getter', typeParameter));
             }
             case 'property': {
                 if (data === false) {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(code), 'data'));
+                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(code), 'data', typeParameter));
             }
             default:
                 break;

package/dist/src/helpers/has-bindings-text.js

@@ -11,7 +11,7 @@ var hasBindingsText = function (json) {
     var has = false;
     (0, traverse_1.default)(json).forEach(function (node) {
         var _a;
-        if ((0, is_mitosis_node_1.isMitosisNode)(node) && !(0, is_children_1.default)(node) && ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node) && !(0, is_children_1.default)({ node: node }) && ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
             has = true;
             this.stop();
         }

package/dist/src/helpers/is-children.d.ts

@@ -1,2 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
-export default function isChildren(node: MitosisNode): boolean;
+export default function isChildren({ node, extraMatches, }: {
+    node: MitosisNode;
+    extraMatches?: string[];
+}): boolean;

package/dist/src/helpers/is-children.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function isChildren(node) {
-    var _a;
-    var textValue = ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code) || node.properties.__text || '';
+function isChildren(_a) {
+    var _b;
+    var node = _a.node, _c = _a.extraMatches, extraMatches = _c === void 0 ? [] : _c;
+    var textValue = ((_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) || node.properties.__text || '';
     var trimmedTextValue = textValue.replace(/\s+/g, '');
-    return ['props.children', 'children'].includes(trimmedTextValue);
+    return ['props.children', 'children'].concat(extraMatches).includes(trimmedTextValue);
 }
 exports.default = isChildren;

package/dist/src/helpers/patterns.d.ts

@@ -1,4 +1,5 @@
 export declare const GETTER: RegExp;
 export declare const SETTER: RegExp;
+export declare const stripGetter: (str: string) => string;
 export declare const replaceGetterWithFunction: (str: string) => string;
 export declare const prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.SETTER = exports.GETTER = void 0;
+exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.stripGetter = exports.SETTER = exports.GETTER = void 0;
 exports.GETTER = /^get /;
 exports.SETTER = /^set /;
+var stripGetter = function (str) { return str.replace(exports.GETTER, ''); };
+exports.stripGetter = stripGetter;
 var replaceGetterWithFunction = function (str) { return str.replace(/^(get )?/, 'function '); };
 exports.replaceGetterWithFunction = replaceGetterWithFunction;
 var prefixWithFunction = function (str) { return "function ".concat(str); };

package/dist/src/helpers/plugins/process-code.js

@@ -59,7 +59,7 @@ var CODE_PROCESSOR_PLUGIN = function (codeProcessor) {
                         state.code = codeProcessor('state')(state.code);
                     }
                 }
-                (0, traverse_nodes_1.tarverseNodes)(json, function (node) {
+                (0, traverse_nodes_1.traverseNodes)(json, function (node) {
                     preProcessBlockCode({ json: node, codeProcessor: codeProcessor });
                 });
             },

package/dist/src/helpers/render-imports.d.ts

@@ -1,24 +1,32 @@
 import { Target } from '../types/config';
 import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
 export declare const checkIsComponentImport: (theImport: MitosisImport) => boolean;
-export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, }: {
+export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, }: {
     theImport: MitosisImport;
     target: Target;
     asyncComponentImports: boolean;
     preserveFileExtensions?: boolean | undefined;
+    component?: MitosisComponent | null | undefined;
+    componentsUsed?: string[] | undefined;
+    importMapper?: Function | null | undefined;
 }) => string;
-export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, preserveFileExtensions, }: {
+export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, preserveFileExtensions, component, componentsUsed, importMapper, }: {
     imports: MitosisImport[];
     target: Target;
     asyncComponentImports: boolean;
     excludeMitosisComponents?: boolean | undefined;
     preserveFileExtensions?: boolean | undefined;
+    component: MitosisComponent;
+    componentsUsed?: string[] | undefined;
+    importMapper?: Function | null | undefined;
 }) => string;
-export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, }: {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, }: {
     component: MitosisComponent;
     target: Target;
     asyncComponentImports?: boolean | undefined;
     excludeMitosisComponents?: boolean | undefined;
     preserveFileExtensions?: boolean | undefined;
+    componentsUsed?: string[] | undefined;
+    importMapper?: Function | null | undefined;
 }) => string;
 export declare const renderExportAndLocal: (component: MitosisComponent) => string;