@builder.io/mitosis 0.0.74 → 0.0.76

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

@@ -10,10 +10,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+exports.getContextProvideString = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+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 addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };
@@ -40,23 +53,92 @@ function getContextNames(json) {
     return Object.keys(json.context.get);
 }
 exports.getContextNames = getContextNames;
+function shouldAppendValueToRef(path) {
+    var parent = path.parent, node = path.node;
+    if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
+        return false;
+    }
+    if (core_1.types.isCallExpression(parent)) {
+        return false;
+    }
+    var isMemberExpression = core_1.types.isMemberExpression(parent);
+    if (isMemberExpression &&
+        core_1.types.isThisExpression(parent.object) &&
+        core_1.types.isProgram(path.scope.block) &&
+        path.scope.hasReference(node.name)) {
+        return false;
+    }
+    if (isMemberExpression &&
+        core_1.types.isIdentifier(parent.object) &&
+        core_1.types.isIdentifier(parent.property) &&
+        parent.property.name === node.name) {
+        return false;
+    }
+    if (Object.keys(path.scope.bindings).includes(path.node.name)) {
+        return false;
+    }
+    if (path.parentPath.listKey === 'arguments' || path.parentPath.listKey === 'params') {
+        return false;
+    }
+    return true;
+}
+var getAllRefs = function (component) {
+    var refKeys = Object.keys(component.refs);
+    var stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
+    return allKeys;
+};
+function processRefs(input, component, options) {
+    var refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
+    return (0, babel_transform_1.babelTransformExpression)(input, {
+        Identifier: function (path) {
+            var name = path.node.name;
+            if (refs.includes(name) && shouldAppendValueToRef(path)) {
+                var newValue = options.api === 'options' ? "this.".concat(name) : "".concat(name, ".value");
+                path.replaceWith(core_1.types.identifier(newValue));
+            }
+        },
+    });
+}
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
-function processBinding(_a) {
+var processBinding = function (_a) {
     var code = _a.code, options = _a.options, json = _a.json, _b = _a.includeProps, includeProps = _b === void 0 ? true : _b;
-    return (0, replace_identifiers_1.replaceIdentifiers)({
-        code: (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-            includeState: true,
-            includeProps: includeProps,
-            replaceWith: function (name) {
-                if (name === 'children' || name.startsWith('children.')) {
-                    return 'this.$slots.default';
-                }
-                return 'this.' + name;
-            },
-        }),
-        from: getContextNames(json),
-        to: function (name) { return (options.api === 'options' ? "this.".concat(name) : "".concat(name, ".value")); },
-    });
-}
+    return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+        includeState: true,
+        includeProps: includeProps,
+        replaceWith: function (name) {
+            switch (options.api) {
+                case 'composition':
+                    return name;
+                case 'options':
+                    if (name === 'children' || name.startsWith('children.')) {
+                        return 'this.$slots.default';
+                    }
+                    return "this.".concat(name);
+            }
+        },
+    }), function (c) { return processRefs(c, json, options); });
+};
 exports.processBinding = processBinding;
+var getContextValue = function (_a) {
+    var options = _a.options, json = _a.json;
+    return 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 }); },
+            })
+            : ref
+                ? (0, exports.processBinding)({ code: ref, options: options, json: json })
+                : null;
+        return valueStr;
+    };
+};
+exports.getContextValue = getContextValue;
+var getContextProvideString = function (json, options) {
+    return "{\n    ".concat(Object.values(json.context.set)
+        .map(function (setVal) { return "".concat(setVal.name, ": ").concat((0, exports.getContextValue)({ options: options, json: json })(setVal)); })
+        .join(','), "\n  }");
+};
+exports.getContextProvideString = getContextProvideString;

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

@@ -22,7 +22,6 @@ 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");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 function getContextInjectString(component, options) {
     var str = '{';
     for (var key in component.context.get) {
@@ -31,21 +30,6 @@ function getContextInjectString(component, options) {
     str += '}';
     return str;
 }
-function getContextProvideString(component, options) {
-    var str = '{';
-    for (var key in component.context.set) {
-        var _a = component.context.set[key], ref = _a.ref, value = _a.value, name_1 = _a.name;
-        str += "\n      ".concat(name_1, ": ").concat(value
-            ? (0, get_state_object_string_1.stringifyContextValue)(value, {
-                valueMapper: function (code) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' }); },
-            })
-            : ref
-                ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref, { replaceWith: '_this.' })
-                : null, ",\n    ");
-    }
-    str += '}';
-    return str;
-}
 var generateComponentImport = function (options) {
     return function (componentName) {
         if (options.vueVersion >= 3 && options.asyncComponentImports) {
@@ -149,29 +133,23 @@ function generateOptionsApiScript(component, options, path, template, props, onU
         : "name: '".concat(path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : '').concat((0, lodash_1.kebabCase)(component.name), "',"), "\n        ").concat(generateComponents(componentsUsed, options), "\n        ").concat(props.length ? "props: ".concat(json5_1.default.stringify(propsDefinition), ",") : '', "\n        ").concat(dataString.length < 4
         ? ''
         : "\n        data: () => (".concat(dataString, "),\n        "), "\n\n        ").concat((0, lodash_1.size)(component.context.set)
-        ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
+        ? "provide() {\n                return ".concat((0, helpers_1.getContextProvideString)(component, options), "\n              },")
         : '', "\n        ").concat((0, lodash_1.size)(component.context.get)
         ? "inject: ".concat(getContextInjectString(component, options), ",")
         : '', "\n        ").concat(((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)
-        ? "created() {\n                ".concat((0, helpers_1.processBinding)({ code: component.hooks.onInit.code, options: options, json: component }), "\n              },")
+        ? "created() {\n                ".concat(component.hooks.onInit.code, "\n              },")
         : '', "\n        ").concat(((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
-        ? "mounted() {\n                ".concat((0, helpers_1.processBinding)({ code: component.hooks.onMount.code, options: options, json: component }), "\n              },")
+        ? "mounted() {\n                ".concat(component.hooks.onMount.code, "\n              },")
         : '', "\n        ").concat(onUpdateWithoutDeps.length
-        ? "updated() {\n            ".concat(onUpdateWithoutDeps
-            .map(function (hook) { return (0, helpers_1.processBinding)({ code: hook.code, options: options, json: component }); })
-            .join('\n'), "\n          },")
+        ? "updated() {\n            ".concat(onUpdateWithoutDeps.map(function (hook) { return hook.code; }).join('\n'), "\n          },")
         : '', "\n        ").concat(onUpdateWithDeps.length
         ? "watch: {\n            ".concat(onUpdateWithDeps
             .map(function (hook, index) {
-            return "".concat((0, helpers_1.getOnUpdateHookName)(index), "() {\n                  ").concat((0, helpers_1.processBinding)({ code: hook.code, options: options, json: component }), "\n                  }\n                ");
+            return "".concat((0, helpers_1.getOnUpdateHookName)(index), "() {\n                  ").concat(hook.code, "\n                  }\n                ");
         })
             .join(','), "\n          },")
         : '', "\n        ").concat(component.hooks.onUnMount
-        ? "unmounted() {\n                ".concat((0, helpers_1.processBinding)({
-            code: component.hooks.onUnMount.code,
-            options: options,
-            json: component,
-        }), "\n              },")
+        ? "unmounted() {\n                ".concat(component.hooks.onUnMount.code, "\n              },")
         : '', "\n\n        ").concat(getterString.length < 4
         ? ''
         : " \n          computed: ".concat(getterString, ",\n        "), "\n        ").concat(functionsString.length < 4

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

@@ -1,12 +1,15 @@
+import { OmitObj } from '../../helpers/typescript';
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare type VueVersion = 2 | 3;
 export declare type Api = 'options' | 'composition';
-export interface VueVersionOpt {
+interface VueVersionOpt {
     vueVersion: VueVersion;
 }
 export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     cssNamespace?: () => string;
     namePrefix?: (path: string) => string;
     asyncComponentImports?: boolean;
-    api?: Api;
+    api: Api;
 }
+export declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
+export {};

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

@@ -1,6 +1,3 @@
-import { OmitObj } from '../../helpers/typescript';
-import { ToVueOptions, VueVersionOpt } from './types';
-declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
+import { VueOptsWithoutVersion } from './types';
 export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
 export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
-export {};

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

@@ -14,26 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -59,6 +39,10 @@ var helpers_1 = require("./helpers");
 var optionsApi_1 = require("./optionsApi");
 var compositionApi_1 = require("./compositionApi");
 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) {
@@ -115,22 +99,66 @@ var BASE_OPTIONS = {
     vueVersion: 2,
     api: 'options',
 };
-var mergeOptions = function (_a, _b) {
-    var _c = _a.plugins, pluginsA = _c === void 0 ? [] : _c, a = __rest(_a, ["plugins"]);
-    var _d = _b.plugins, pluginsB = _d === void 0 ? [] : _d, b = __rest(_b, ["plugins"]);
-    return (__assign(__assign(__assign({}, a), b), { plugins: __spreadArray(__spreadArray([], pluginsA, true), pluginsB, true) }));
-};
 var componentToVue = function (userOptions) {
-    if (userOptions === void 0) { userOptions = BASE_OPTIONS; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component, path = _a.path;
-        var options = mergeOptions(BASE_OPTIONS, userOptions);
+        var options = (0, merge_options_1.mergeOptions)(BASE_OPTIONS, userOptions);
+        options.plugins.unshift((0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+            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,
+                            });
+                        };
+                    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,
+                                });
+                            });
+                        };
+                    case 'bindings':
+                        return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c); };
+                    case 'hooks-deps':
+                        return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c, { includeProps: false }); };
+                    case 'properties':
+                        return function (c) { return c; };
+                }
+            }
+            else {
+                switch (codeType) {
+                    case 'hooks':
+                        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 'properties':
+                    case 'hooks-deps':
+                    case 'state':
+                        return function (c) { return c; };
+                }
+            }
+        }));
         if (options.api === 'options') {
-            (_b = options.plugins) === null || _b === void 0 ? void 0 : _b.unshift(onUpdatePlugin);
+            options.plugins.unshift(onUpdatePlugin);
         }
         else if (options.api === 'composition') {
-            (_c = options.plugins) === null || _c === void 0 ? void 0 : _c.unshift(functions_1.FUNCTION_HACK_PLUGIN);
+            options.plugins.unshift(functions_1.FUNCTION_HACK_PLUGIN);
             options.asyncComponentImports = false;
         }
         // Make a copy we can safely mutate, similar to babel's toolchain can be used
@@ -138,24 +166,21 @@ var componentToVue = function (userOptions) {
         (0, process_http_requests_1.processHttpRequests)(component);
         processDynamicComponents(component, options);
         processForKeys(component, options);
-        if (options.plugins) {
-            component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
-        }
+        component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
         if (options.api === 'options') {
             (0, map_refs_1.mapRefs)(component, function (refName) { return "this.$refs.".concat(refName); });
         }
-        if (options.plugins) {
-            component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
-        }
+        // need to run this before we process the component's code
+        var elementProps = Array.from((0, get_props_1.getProps)(component)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
         var css = (0, collect_css_1.collectCss)(component, {
-            prefix: (_e = (_d = options.cssNamespace) === null || _d === void 0 ? void 0 : _d.call(options)) !== null && _e !== void 0 ? _e : undefined,
+            prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
         });
         (0, strip_meta_properties_1.stripMetaProperties)(component);
         var template = (0, function_1.pipe)(component.children.map(function (item) { return (0, blocks_1.blockToVue)(item, options, { isRootNode: true }); }).join('\n'), helpers_1.renameMitosisComponentsToKebabCase);
-        var onUpdateWithDeps = ((_f = component.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
-        var onUpdateWithoutDeps = ((_g = component.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
+        var onUpdateWithDeps = ((_d = component.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
+        var onUpdateWithoutDeps = ((_e = component.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
         var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
-        var elementProps = Array.from((0, get_props_1.getProps)(component)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
         // import from vue
         var vueImports = [];
         if (options.vueVersion >= 3 && options.asyncComponentImports) {
@@ -163,8 +188,8 @@ var componentToVue = function (userOptions) {
         }
         if (options.api === 'composition') {
             onUpdateWithDeps.length && vueImports.push('watch');
-            ((_h = component.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code) && vueImports.push('onMounted');
-            ((_j = component.hooks.onUnMount) === null || _j === void 0 ? void 0 : _j.code) && vueImports.push('onUnMounted');
+            ((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code) && vueImports.push('onMounted');
+            ((_g = component.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code) && vueImports.push('onUnmounted');
             onUpdateWithoutDeps.length && vueImports.push('onUpdated');
             (0, lodash_1.size)(getterKeys) && vueImports.push('computed');
             (0, lodash_1.size)(component.context.set) && vueImports.push('provide');
@@ -172,7 +197,7 @@ 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 && ((_k = component.types) === null || _k === void 0 ? void 0 : _k.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
+        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)({
             component: component,
             target: 'vue',
             asyncComponentImports: options.asyncComponentImports,
@@ -181,9 +206,7 @@ var componentToVue = function (userOptions) {
             : (0, optionsApi_1.generateOptionsApiScript)(component, options, path, template, elementProps, onUpdateWithDeps, onUpdateWithoutDeps), !css.trim().length
             ? ''
             : "<style scoped>\n      ".concat(css, "\n    </style>"));
-        if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
-        }
+        str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         if (true || options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
@@ -201,9 +224,7 @@ var componentToVue = function (userOptions) {
                 console.warn('Could not prettify', { string: str }, err);
             }
         }
-        if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
-        }
+        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, '');

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

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

package/dist/src/helpers/merge-options.d.ts

@@ -0,0 +1,7 @@
+import { BaseTranspilerOptions } from '..';
+/**
+ * Merges options while combining the `plugins` array.
+ */
+export declare const mergeOptions: <T extends BaseTranspilerOptions>(a: T, b?: Partial<T>) => T & {
+    plugins: NonNullable<T["plugins"]>;
+};

package/dist/src/helpers/merge-options.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOptions = void 0;
+/**
+ * Merges options while combining the `plugins` array.
+ */
+var mergeOptions = function (a, b) {
+    if (b === void 0) { b = {}; }
+    return __assign(__assign(__assign({}, a), b), { plugins: __spreadArray(__spreadArray([], (a.plugins || []), true), (b.plugins || []), true) });
+};
+exports.mergeOptions = mergeOptions;

package/dist/src/helpers/plugins/process-code.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from '../../types/plugins';
+declare type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state';
+declare type CodeProcessor = (codeType: CodeType) => (code: string) => string;
+/**
+ * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
+ */
+export declare const CODE_PROCESSOR_PLUGIN: (codeProcessor: CodeProcessor) => Plugin;
+export {};

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CODE_PROCESSOR_PLUGIN = void 0;
+var nullable_1 = require("../nullable");
+var traverse_nodes_1 = require("../traverse-nodes");
+/**
+ * Process code in bindings and properties of a node
+ */
+var preProcessBlockCode = function (_a) {
+    var json = _a.json, codeProcessor = _a.codeProcessor;
+    var propertiesProcessor = codeProcessor('properties');
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        if (value) {
+            json.properties[key] = propertiesProcessor(value);
+        }
+    }
+    var bindingsProcessor = codeProcessor('bindings');
+    for (var key in json.bindings) {
+        var value = json.bindings[key];
+        if (value === null || value === void 0 ? void 0 : value.code) {
+            value.code = bindingsProcessor(value.code);
+        }
+    }
+};
+/**
+ * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
+ */
+var CODE_PROCESSOR_PLUGIN = function (codeProcessor) {
+    return function () { return ({
+        json: {
+            post: function (json) {
+                var processHookCode = codeProcessor('hooks');
+                /**
+                 * process code in hooks
+                 */
+                for (var key in json.hooks) {
+                    var typedKey = key;
+                    var hooks = json.hooks[typedKey];
+                    if ((0, nullable_1.checkIsDefined)(hooks) && Array.isArray(hooks)) {
+                        for (var _i = 0, hooks_1 = hooks; _i < hooks_1.length; _i++) {
+                            var hook = hooks_1[_i];
+                            hook.code = processHookCode(hook.code);
+                            if (hook.deps) {
+                                hook.deps = codeProcessor('hooks-deps')(hook.deps);
+                            }
+                        }
+                    }
+                    else if ((0, nullable_1.checkIsDefined)(hooks)) {
+                        hooks.code = processHookCode(hooks.code);
+                        if (hooks.deps) {
+                            hooks.deps = codeProcessor('hooks-deps')(hooks.deps);
+                        }
+                    }
+                }
+                for (var key in json.state) {
+                    var state = json.state[key];
+                    if (state && state.type !== 'property') {
+                        state.code = codeProcessor('state')(state.code);
+                    }
+                }
+                (0, traverse_nodes_1.tarverseNodes)(json, function (node) {
+                    preProcessBlockCode({ json: node, codeProcessor: codeProcessor });
+                });
+            },
+        },
+    }); };
+};
+exports.CODE_PROCESSOR_PLUGIN = CODE_PROCESSOR_PLUGIN;

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;