@builder.io/mitosis 0.0.56-1 → 0.0.56-101

package/dist/src/generators/template.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTemplate = void 0;
 var standalone_1 = require("prettier/standalone");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var jsx_1 = require("../parsers/jsx");
 var plugins_1 = require("../modules/plugins");
@@ -17,13 +17,12 @@ var dedent_1 = __importDefault(require("dedent"));
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var mappers = {
     Fragment: function (json, options) {
-        return "<div>".concat(json.children
-            .map(function (item) { return blockToTemplate(item, options); })
-            .join('\n'), "</div>");
+        return "<div>".concat(json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n'), "</div>");
     },
 };
 // TODO: spread support
 var blockToTemplate = function (json, options) {
+    var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
@@ -32,24 +31,20 @@ var blockToTemplate = function (json, options) {
         return json.properties._text;
     }
     if (json.bindings._text) {
-        return "${".concat(json.bindings._text, "}");
+        return "${".concat((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code, "}");
     }
     var str = '';
     if (json.name === 'For') {
-        str += "${".concat(json.bindings.each, "?.map(").concat(json.properties._forName, " => `");
+        str += "${".concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, "?.map(").concat(json.properties._forName, " => `");
         if (json.children) {
-            str += json.children
-                .map(function (item) { return blockToTemplate(item, options); })
-                .join('\n');
+            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
         }
         str += '`).join("")}';
     }
     else if (json.name === 'Show') {
-        str += "${!(".concat(json.bindings.when, ") ? '' : `");
+        str += "${!(".concat((_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code, ") ? '' : `");
         if (json.children) {
-            str += json.children
-                .map(function (item) { return blockToTemplate(item, options); })
-                .join('\n');
+            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
         }
         str += '`}';
     }
@@ -71,7 +66,7 @@ var blockToTemplate = function (json, options) {
             if (key === '_spread' || key === 'ref' || key === 'css') {
                 continue;
             }
-            var value = json.bindings[key];
+            var value = (_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code;
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {
@@ -86,9 +81,7 @@ var blockToTemplate = function (json, options) {
         }
         str += '>';
         if (json.children) {
-            str += json.children
-                .map(function (item) { return blockToTemplate(item, options); })
-                .join('\n');
+            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
         }
         str += "</".concat(json.name, ">");
     }
@@ -103,7 +96,7 @@ var componentToTemplate = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json);
+        var css = (0, collect_css_1.collectCss)(json);
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }

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

@@ -1,13 +1,21 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, TranspilerArgs } from '../types/config';
-export interface ToVueOptions extends BaseTranspilerOptions {
-    vueVersion?: 2 | 3;
+import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { OmitObj } from '../helpers/typescript';
+export declare type VueVersion = 2 | 3;
+interface VueVersionOpt {
+    vueVersion: VueVersion;
+}
+export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     cssNamespace?: () => string;
     namePrefix?: (path: string) => string;
-    builderRegister?: boolean;
-    registerComponentPrepend?: string;
+    asyncComponentImports?: boolean;
+}
+declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+interface Scope {
+    isRootNode?: boolean;
 }
-export declare const blockToVue: (node: MitosisNode, options: ToVueOptions) => string;
-export declare const componentToVue: (userOptions?: ToVueOptions) => ({ component, path }: TranspilerArgs & {
-    path: string;
-}) => string;
+export declare const blockToVue: BlockRenderer;
+declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
+export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => Transpiler;
+export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => Transpiler;
+export {};

package/dist/src/generators/vue.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToVue = exports.blockToVue = void 0;
+exports.componentToVue3 = exports.componentToVue2 = exports.blockToVue = void 0;
 var dedent_1 = __importDefault(require("dedent"));
 var standalone_1 = require("prettier/standalone");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var map_refs_1 = require("../helpers/map-refs");
@@ -59,15 +59,33 @@ var get_components_used_1 = require("../helpers/get-components-used");
 var lodash_1 = require("lodash");
 var replace_idenifiers_1 = require("../helpers/replace-idenifiers");
 var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
-var json5_1 = __importDefault(require("json5"));
 var process_http_requests_1 = require("../helpers/process-http-requests");
 var patterns_1 = require("../helpers/patterns");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
+var function_1 = require("fp-ts/lib/function");
+var get_custom_imports_1 = require("../helpers/get-custom-imports");
+var slots_1 = require("../helpers/slots");
+function encodeQuotes(string) {
+    return string.replace(/"/g, '"');
+}
+var SPECIAL_PROPERTIES = {
+    V_IF: 'v-if',
+    V_FOR: 'v-for',
+    V_ELSE: 'v-else',
+    V_ELSE_IF: 'v-else-if',
+};
 function getContextNames(json) {
     return Object.keys(json.context.get);
 }
 var ON_UPDATE_HOOK_NAME = 'onUpdateHook';
 var getOnUpdateHookName = function (index) { return ON_UPDATE_HOOK_NAME + "".concat(index); };
+var invertBooleanExpression = function (expression) { return "!Boolean(".concat(expression, ")"); };
+var addPropertiesToJson = function (properties) {
+    return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
+};
+var addBindingsToJson = function (bindings) {
+    return function (json) { return (__assign(__assign({}, json), { bindings: __assign(__assign({}, json.bindings), bindings) })); };
+};
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 function processBinding(code, _options, json) {
@@ -82,42 +100,86 @@ var NODE_MAPPERS = {
         return json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
     },
     For: function (json, options) {
-        var keyValue = json.bindings.key || 'index';
-        var forValue = "(".concat(json.properties._forName, ", index) in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each));
+        var _a, _b;
+        var _c;
+        var keyValue = json.bindings.key || { code: 'index' };
+        var forValue = "(".concat(json.properties._forName, ", index) in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code));
         if (options.vueVersion >= 3) {
             // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
-            return "<template :key=\"".concat(keyValue, "\" v-for=\"").concat(forValue, "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>");
+            return "<template :key=\"".concat(encodeQuotes((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat(encodeQuotes(forValue), "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>");
         }
         // Vue 2 can only handle one root element
         var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
-        if (!firstChild) {
-            return '';
-        }
-        firstChild.bindings.key = keyValue;
-        firstChild.properties['v-for'] = forValue;
-        return (0, exports.blockToVue)(firstChild, options);
+        // Edge-case for when the parent is a `Show`, we need to pass down the `v-if` prop.
+        var jsonIf = json.properties[SPECIAL_PROPERTIES.V_IF];
+        return firstChild
+            ? (0, function_1.pipe)(firstChild, addBindingsToJson({ key: keyValue }), addPropertiesToJson(__assign((_a = {}, _a[SPECIAL_PROPERTIES.V_FOR] = forValue, _a), (jsonIf ? (_b = {}, _b[SPECIAL_PROPERTIES.V_IF] = jsonIf, _b) : {}))), function (block) { return (0, exports.blockToVue)(block, options); })
+            : '';
     },
-    Show: function (json, options) {
-        var ifValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when);
-        if (options.vueVersion >= 3) {
-            return "\n      <template v-if=\"".concat(ifValue, "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>\n      ").concat(!json.meta.else
-                ? ''
-                : "\n        <template v-else>\n          ".concat((0, exports.blockToVue)(json.meta.else, options), "\n        </template>\n      "), "\n      ");
-        }
-        var ifString = '';
-        // Vue 2 can only handle one root element
-        var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
-        if (firstChild) {
-            firstChild.properties['v-if'] = ifValue;
-            ifString = (0, exports.blockToVue)(firstChild, options);
-        }
-        var elseString = '';
-        var elseBlock = json.meta.else;
-        if ((0, is_mitosis_node_1.isMitosisNode)(elseBlock)) {
-            elseBlock.properties['v-else'] = '';
-            elseString = (0, exports.blockToVue)(elseBlock, options);
+    Show: function (json, options, scope) {
+        var _a, _b, _c, _d, _e;
+        var _f, _g;
+        var ifValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code);
+        switch (options.vueVersion) {
+            case 3:
+                return "\n        <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat(encodeQuotes(ifValue), "\">\n          ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n        </template>\n        ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
+                    ? "\n            <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n              ").concat((0, exports.blockToVue)(json.meta.else, options), "\n            </template>")
+                    : '', "\n        ");
+            case 2:
+                // Vue 2 can only handle one root element, so we just take the first one.
+                // TO-DO: warn user of multi-children Show.
+                var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
+                var elseBlock = json.meta.else;
+                var hasShowChild = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'Show';
+                var childElseBlock = firstChild === null || firstChild === void 0 ? void 0 : firstChild.meta.else;
+                /**
+                 * This is special edge logic to handle 2 nested Show elements in Vue 2.
+                 * We need to invert the logic to make it work, due to no-template-root-element limitations in Vue 2.
+                 *
+                 * <show when={foo} else={else-1}>
+                 *  <show when={bar} else={else-2}>
+                 *   <if-code>
+                 *  </show>
+                 * </show>
+                 *
+                 *
+                 * foo: true && bar: true => if-code
+                 * foo: true && bar: false => else-2
+                 * foo: false && bar: true?? => else-1
+                 *
+                 *
+                 * map to:
+                 *
+                 * <else-1 if={!foo} />
+                 * <else-2 else-if={!bar} />
+                 * <if-code v-else />
+                 *
+                 */
+                if (firstChild &&
+                    (0, is_mitosis_node_1.isMitosisNode)(elseBlock) &&
+                    hasShowChild &&
+                    (0, is_mitosis_node_1.isMitosisNode)(childElseBlock)) {
+                    var ifString = (0, function_1.pipe)(elseBlock, addPropertiesToJson((_a = {}, _a[SPECIAL_PROPERTIES.V_IF] = invertBooleanExpression(ifValue), _a)), function (block) { return (0, exports.blockToVue)(block, options); });
+                    var childIfValue = (0, function_1.pipe)((_g = firstChild.bindings.when) === null || _g === void 0 ? void 0 : _g.code, strip_state_and_props_refs_1.stripStateAndPropsRefs, invertBooleanExpression);
+                    var elseIfString = (0, function_1.pipe)(childElseBlock, addPropertiesToJson((_b = {}, _b[SPECIAL_PROPERTIES.V_ELSE_IF] = childIfValue, _b)), function (block) { return (0, exports.blockToVue)(block, options); });
+                    var firstChildOfFirstChild = firstChild.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
+                    var elseString = firstChildOfFirstChild
+                        ? (0, function_1.pipe)(firstChildOfFirstChild, addPropertiesToJson((_c = {}, _c[SPECIAL_PROPERTIES.V_ELSE] = '', _c)), function (block) { return (0, exports.blockToVue)(block, options); })
+                        : '';
+                    return "\n\n            ".concat(ifString, "\n\n            ").concat(elseIfString, "\n\n            ").concat(elseString, "\n\n          ");
+                }
+                else {
+                    var ifString = firstChild
+                        ? (0, function_1.pipe)(firstChild, addPropertiesToJson((_d = {}, _d[SPECIAL_PROPERTIES.V_IF] = ifValue, _d)), function (block) { return (0, exports.blockToVue)(block, options); })
+                        : '';
+                    var elseString = (0, is_mitosis_node_1.isMitosisNode)(elseBlock)
+                        ? (0, function_1.pipe)(elseBlock, addPropertiesToJson((_e = {}, _e[SPECIAL_PROPERTIES.V_ELSE] = '', _e)), function (block) {
+                            return (0, exports.blockToVue)(block, options);
+                        })
+                        : '';
+                    return "\n                    ".concat(ifString, "\n                    ").concat(elseString, "\n                  ");
+                }
         }
-        return "\n    ".concat(ifString, "\n    ").concat(elseString, "\n    ");
     },
 };
 // TODO: Maybe in the future allow defining `string | function` as values
@@ -129,7 +191,7 @@ function processDynamicComponents(json, _options) {
     (0, traverse_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name.includes('.')) {
-                node.bindings.is = node.name;
+                node.bindings.is = { code: node.name };
                 node.name = 'component';
             }
         }
@@ -155,68 +217,90 @@ var stringifyBinding = function (node) {
             return '';
         }
         else if (key === 'class') {
-            return " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
-                replaceWith: 'this.',
+            return " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code, {
+                replaceWith: '',
             }), ")\" ");
             // TODO: support dynamic classes as objects somehow like Vue requires
             // https://vuejs.org/v2/guide/class-and-style.html
         }
         else {
             // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code);
             if (key.startsWith('on')) {
+                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && node.name === 'input') {
                     event_1 = 'input';
                 }
+                var isAssignmentExpression = useValue.includes('=');
                 // TODO: proper babel transform to replace. Util for this
-                return " @".concat(event_1, "=\"").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue
-                    // TODO: proper reference parse and replacing
-                    .replace(/event\./g, '$event.')), "\" ");
+                if (isAssignmentExpression) {
+                    return " @".concat(event_1, "=\"").concat(encodeQuotes((0, remove_surrounding_block_1.removeSurroundingBlock)((0, replace_idenifiers_1.replaceIdentifiers)(useValue, cusArgs[0], '$event'))), "\" ");
+                }
+                else {
+                    return " @".concat(event_1, "=\"").concat(encodeQuotes((0, remove_surrounding_block_1.removeSurroundingBlock)((0, remove_surrounding_block_1.removeSurroundingBlock)((0, replace_idenifiers_1.replaceIdentifiers)(useValue, cusArgs[0], '$event')))), "\" ");
+                }
             }
             else if (key === 'ref') {
-                return " ref=\"".concat(useValue, "\" ");
+                return " ref=\"".concat(encodeQuotes(useValue), "\" ");
             }
             else if (BINDING_MAPPERS[key]) {
-                return " ".concat(BINDING_MAPPERS[key], "=\"").concat(useValue, "\" ");
+                return " ".concat(BINDING_MAPPERS[key], "=\"").concat(encodeQuotes(useValue.replace(/"/g, "\\'")), "\" ");
             }
             else {
-                return " :".concat(key, "=\"").concat(useValue, "\" ");
+                return " :".concat(key, "=\"").concat(encodeQuotes(useValue), "\" ");
             }
         }
     };
 };
-var blockToVue = function (node, options) {
+var blockToVue = function (node, options, scope) {
+    var _a, _b;
     var nodeMapper = NODE_MAPPERS[node.name];
     if (nodeMapper) {
-        return nodeMapper(node, options);
+        return nodeMapper(node, options, scope);
     }
     if ((0, is_children_1.default)(node)) {
-        return "<slot></slot>";
+        return "<slot/>";
     }
     if (node.name === 'style') {
         // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
-        // <component is="style">...</component>
+        // <component is="'style'">...</component>
         node.name = 'component';
-        node.bindings.is = 'style';
+        node.bindings.is = { code: "'style'" };
     }
     if (node.properties._text) {
         return "".concat(node.properties._text);
     }
-    if (node.bindings._text) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._text), "}}");
+    var textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(textCode);
+        if ((0, slots_1.isSlotProperty)(strippedTextCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\"/>");
+        }
+        return "{{".concat(strippedTextCode, "}}");
     }
     var str = '';
     str += "<".concat(node.name, " ");
-    if (node.bindings._spread) {
-        str += "v-bind=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread), "\"");
+    if ((_b = node.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
+        str += "v-bind=\"".concat(encodeQuotes((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread.code)), "\"");
     }
     for (var key in node.properties) {
         var value = node.properties[key];
-        str += " ".concat(key, "=\"").concat(value, "\" ");
+        if (key === 'className') {
+            continue;
+        }
+        else if (key === SPECIAL_PROPERTIES.V_ELSE) {
+            str += " ".concat(key, " ");
+        }
+        else if (typeof value === 'string') {
+            str += " ".concat(key, "=\"").concat(encodeQuotes(value), "\" ");
+        }
     }
     var stringifiedBindings = Object.entries(node.bindings)
-        .map(stringifyBinding(node))
+        .map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return stringifyBinding(node)([k, v]);
+    })
         .join('');
     str += stringifiedBindings;
     if (jsx_1.selfClosingTags.has(node.name)) {
@@ -232,7 +316,7 @@ exports.blockToVue = blockToVue;
 function getContextInjectString(component, options) {
     var str = '{';
     for (var key in component.context.get) {
-        str += "\n      ".concat(key, ": \"").concat(component.context.get[key].name, "\",\n    ");
+        str += "\n      ".concat(key, ": \"").concat(encodeQuotes(component.context.get[key].name), "\",\n    ");
     }
     str += '}';
     return str;
@@ -242,10 +326,8 @@ function getContextProvideString(component, options) {
     for (var key in component.context.set) {
         var _a = component.context.set[key], value = _a.value, name_1 = _a.name;
         str += "\n      ".concat(name_1, ": ").concat(value
-            ? (0, get_state_object_string_1.getMemberObjectString)(value, {
-                valueMapper: function (code) {
-                    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' });
-                },
+            ? (0, get_state_object_string_1.stringifyContextValue)(value, {
+                valueMapper: function (code) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' }); },
             })
             : null, ",\n    ");
     }
@@ -266,10 +348,14 @@ var onUpdatePlugin = function (options) { return ({
                     .filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })
                     .forEach(function (hook, index) {
                     var _a;
-                    component.state[getOnUpdateHookName(index)] = "".concat(method_literal_prefix_1.methodLiteralPrefix, "get ").concat(getOnUpdateHookName(index), " () {\n            return {\n              ").concat((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.slice(1, -1).split(',').map(function (dep, k) {
+                    var code = "".concat(method_literal_prefix_1.methodLiteralPrefix, "get ").concat(getOnUpdateHookName(index), " () {\n            return {\n              ").concat((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.slice(1, -1).split(',').map(function (dep, k) {
                         var val = dep.trim();
                         return "".concat(k, ": ").concat(val);
                     }).join(','), "\n            }\n          }");
+                    component.state[getOnUpdateHookName(index)] = {
+                        code: code,
+                        type: 'getter',
+                    };
                 });
             }
         },
@@ -277,16 +363,37 @@ var onUpdatePlugin = function (options) { return ({
 }); };
 var BASE_OPTIONS = {
     plugins: [onUpdatePlugin],
+    vueVersion: 2,
 };
 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 generateComponentImport = function (options) {
+    return function (componentName) {
+        var key = (0, lodash_1.kebabCase)(componentName);
+        if (options.vueVersion >= 3 && options.asyncComponentImports) {
+            return "'".concat(key, "': defineAsyncComponent(").concat(componentName, ")");
+        }
+        else {
+            return "'".concat(key, "': ").concat(componentName);
+        }
+    };
+};
+var generateComponents = function (componentsUsed, options) {
+    if (componentsUsed.length === 0) {
+        return '';
+    }
+    else {
+        return "components: { ".concat(componentsUsed.map(generateComponentImport(options)).join(','), " },");
+    }
+};
+var appendToDataString = function (_a) {
+    var dataString = _a.dataString, newContent = _a.newContent;
+    return dataString.replace(/}$/, "".concat(newContent, "}"));
+};
 var componentToVue = function (userOptions) {
-    if (userOptions === void 0) { userOptions = {}; }
-    // hack while we migrate all other transpilers to receive/handle path
-    // TO-DO: use `Transpiler` once possible
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j;
         var component = _a.component, path = _a.path;
@@ -303,9 +410,24 @@ var componentToVue = function (userOptions) {
         if (options.plugins) {
             component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(component, {
+        var css = (0, collect_css_1.collectCss)(component, {
             prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
         });
+        var localExports = component.exports;
+        var localVarAsData = [];
+        var localVarAsFunc = [];
+        if (localExports) {
+            Object.keys(localExports).forEach(function (key) {
+                if (localExports[key].usedInLocal) {
+                    if (localExports[key].isFunction) {
+                        localVarAsFunc.push(key);
+                    }
+                    else {
+                        localVarAsData.push(key);
+                    }
+                }
+            });
+        }
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
             data: true,
             functions: false,
@@ -315,9 +437,7 @@ var componentToVue = function (userOptions) {
             data: false,
             getters: true,
             functions: false,
-            valueMapper: function (code) {
-                return processBinding(code.replace(patterns_1.GETTER, ''), options, component);
-            },
+            valueMapper: function (code) { return processBinding(code.replace(patterns_1.GETTER, ''), options, component); },
         });
         var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
             data: false,
@@ -325,51 +445,46 @@ var componentToVue = function (userOptions) {
             functions: true,
             valueMapper: function (code) { return processBinding(code, options, component); },
         });
-        var blocksString = JSON.stringify(component.children);
         // Component references to include in `component: { YourComponent, ... }
         var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(component))
-            .filter(function (name) {
-            return name.length &&
-                !name.includes('.') &&
-                name[0].toUpperCase() === name[0];
-        })
+            .filter(function (name) { return name.length && !name.includes('.') && name[0].toUpperCase() === name[0]; })
             // Strip out components that compile away
             .filter(function (name) { return !['For', 'Show', 'Fragment', component.name].includes(name); });
         // Append refs to data as { foo, bar, etc }
-        dataString = dataString.replace(/}$/, "".concat(component.imports
-            .map(function (thisImport) { return Object.keys(thisImport.imports).join(','); })
-            // Make sure actually used in template
-            .filter(function (key) { return Boolean(key && blocksString.includes(key)); })
-            // Don't include component imports
-            .filter(function (key) { return !componentsUsed.includes(key); })
-            .join(','), "}"));
+        dataString = appendToDataString({
+            dataString: dataString,
+            newContent: (0, get_custom_imports_1.getCustomImports)(component).join(','),
+        });
+        if (localVarAsData.length) {
+            dataString = appendToDataString({ dataString: dataString, newContent: localVarAsData.join(',') });
+        }
         var elementProps = (0, get_props_1.getProps)(component);
         (0, strip_meta_properties_1.stripMetaProperties)(component);
-        var template = component.children
-            .map(function (item) { return (0, exports.blockToVue)(item, options); })
-            .join('\n');
+        var template = (0, function_1.pipe)(component.children.map(function (item) { return (0, exports.blockToVue)(item, options, { isRootNode: true }); }).join('\n'), renameMitosisComponentsToKebabCase);
         var includeClassMapHelper = template.includes('_classStringToObject');
         if (includeClassMapHelper) {
-            functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/); \n        for (const name of classNames) {\n          obj[name] = true;\n        } \n        return obj;\n      }  }");
+            functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/);\n        for (const name of classNames) {\n          obj[name] = true;\n        }\n        return obj;\n      }  }");
+        }
+        if (localVarAsFunc.length) {
+            functionsString = functionsString.replace(/}\s*$/, "".concat(localVarAsFunc.join(','), "}"));
         }
-        var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
         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 str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script>\n      ", "\n      ", "\n\n      export default ", "{\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }", "\n    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
-            ? (_f = options.registerComponentPrepend) !== null && _f !== void 0 ? _f : ''
-            : '', !builderRegister ? '' : 'registerComponent(', !component.name
-            ? ''
-            : "name: '".concat(((_g = options.namePrefix) === null || _g === void 0 ? void 0 : _g.call(options, path))
-                ? ((_h = options.namePrefix) === null || _h === void 0 ? void 0 : _h.call(options, path)) + '-'
-                : '').concat((0, lodash_1.kebabCase)(component.name), "',"), !componentsUsed.length
+        var propsDefinition = Array.from(elementProps).filter(function (prop) { return prop !== 'children' && prop !== 'class'; });
+        if (component.defaultProps) {
+            propsDefinition = propsDefinition.reduce(function (propsDefinition, curr) { return ((propsDefinition[curr] =
+                component.defaultProps && component.defaultProps.hasOwnProperty(curr)
+                    ? { default: component.defaultProps[curr] }
+                    : {}),
+                propsDefinition); }, {});
+        }
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n    <script lang=\"ts\">\n    ", "\n      ", "\n\n      ", "\n\n      export default {\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }\n    </script>\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n    <script lang=\"ts\">\n    ", "\n      ", "\n\n      ", "\n\n      export default {\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n        ", "\n\n        ", "\n        ", "\n      }\n    </script>\n    ", "\n  "])), template, options.vueVersion >= 3 ? 'import { defineAsyncComponent } from "vue"' : '', (0, render_imports_1.renderPreComponent)({
+            component: component,
+            target: 'vue',
+            asyncComponentImports: options.asyncComponentImports,
+        }), ((_f = component.types) === null || _f === void 0 ? void 0 : _f.join('\n')) || '', !component.name
             ? ''
-            : "components: { ".concat(componentsUsed
-                .map(function (componentName) {
-                return "'".concat((0, lodash_1.kebabCase)(componentName), "': async () => ").concat(componentName);
-            })
-                .join(','), " },"), elementProps.size
-            ? "props: ".concat(JSON.stringify(Array.from(elementProps).filter(function (prop) { return prop !== 'children' && prop !== 'class'; })), ",")
-            : '', dataString.length < 4
+            : "name: '".concat(path && ((_g = options.namePrefix) === null || _g === void 0 ? void 0 : _g.call(options, path)) ? ((_h = options.namePrefix) === null || _h === void 0 ? void 0 : _h.call(options, path)) + '-' : '').concat((0, lodash_1.kebabCase)(component.name), "',"), generateComponents(componentsUsed, options), elementProps.size ? "props: ".concat(JSON.stringify(propsDefinition), ",") : '', dataString.length < 4
             ? ''
             : "\n        data: () => (".concat(dataString, "),\n        "), (0, lodash_1.size)(component.context.set)
             ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
@@ -393,9 +508,7 @@ var componentToVue = function (userOptions) {
             ? ''
             : "\n          computed: ".concat(getterString, ",\n        "), functionsString.length < 4
             ? ''
-            : "\n          methods: ".concat(functionsString, ",\n        "), !builderRegister
-            ? ''
-            : ", ".concat(json5_1.default.stringify(component.meta.registerComponent || {}), ")"), !css.trim().length
+            : "\n          methods: ".concat(functionsString, ",\n        "), !css.trim().length
             ? ''
             : "<style scoped>\n      ".concat(css, "\n    </style>"));
         if (options.plugins) {
@@ -424,13 +537,21 @@ var componentToVue = function (userOptions) {
             var pattern = removePatterns_1[_i];
             str = str.replace(pattern, '');
         }
-        // Transform <FooBar> to <foo-bar> as Vue2 needs
-        return str.replace(/<\/?\w+/g, function (match) {
-            return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        });
+        return str;
     };
 };
-exports.componentToVue = componentToVue;
+var componentToVue2 = function (vueOptions) {
+    return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 2 }));
+};
+exports.componentToVue2 = componentToVue2;
+var componentToVue3 = function (vueOptions) {
+    return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 3 }));
+};
+exports.componentToVue3 = componentToVue3;
+// Transform <FooBar> to <foo-bar> as Vue2 needs
+var renameMitosisComponentsToKebabCase = function (str) {
+    return str.replace(/<\/?\w+/g, function (match) { return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); });
+};
 // Remove unused artifacts like empty script or style tags
 var removePatterns = [
     "<script>\nexport default {};\n</script>",