@builder.io/mitosis 0.0.45-4 → 0.0.47

package/dist/src/generators/vue.js

@@ -30,28 +30,29 @@ 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");
 function getContextNames(json) {
     return Object.keys(json.context.get);
 }
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 function processBinding(code, _options, json) {
-    return replace_idenifiers_1.replaceIdentifiers(strip_state_and_props_refs_1.stripStateAndPropsRefs(code, {
+    return (0, replace_idenifiers_1.replaceIdentifiers)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
         includeState: true,
         includeProps: true,
         replaceWith: 'this.',
-    }), getContextNames(json), function (name) { return "this." + name; });
+    }), getContextNames(json), function (name) { return "this.".concat(name); });
 }
 var NODE_MAPPERS = {
     Fragment: function (json, options) {
-        return json.children.map(function (item) { return exports.blockToVue(item, options); }).join('\n');
+        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 = "(" + json.properties._forName + ", index) in " + strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings.each);
+        var forValue = "(".concat(json.properties._forName, ", index) in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each));
         if (options.vueVersion >= 3) {
             // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
-            return "<template :key=\"" + keyValue + "\" v-for=\"" + forValue + "\">\n        " + json.children.map(function (item) { return exports.blockToVue(item, options); }).join('\n') + "\n      </template>";
+            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>");
         }
         // Vue 2 can only handle one root element
         var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
@@ -60,29 +61,29 @@ var NODE_MAPPERS = {
         }
         firstChild.bindings.key = keyValue;
         firstChild.properties['v-for'] = forValue;
-        return exports.blockToVue(firstChild, options);
+        return (0, exports.blockToVue)(firstChild, options);
     },
     Show: function (json, options) {
-        var ifValue = strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings.when);
+        var ifValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when);
         if (options.vueVersion >= 3) {
-            return "\n      <template v-if=\"" + ifValue + "\">\n        " + json.children.map(function (item) { return exports.blockToVue(item, options); }).join('\n') + "\n      </template>\n      " + (!json.meta.else
+            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          " + exports.blockToVue(json.meta.else, options) + "\n        </template>\n      ") + "\n      ";
+                : "\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 = exports.blockToVue(firstChild, options);
+            ifString = (0, exports.blockToVue)(firstChild, options);
         }
         var elseString = '';
         var elseBlock = json.meta.else;
-        if (is_mitosis_node_1.isMitosisNode(elseBlock)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(elseBlock)) {
             elseBlock.properties['v-else'] = '';
-            elseString = exports.blockToVue(elseBlock, options);
+            elseString = (0, exports.blockToVue)(elseBlock, options);
         }
-        return "\n    " + ifString + "\n    " + elseString + "\n    ";
+        return "\n    ".concat(ifString, "\n    ").concat(elseString, "\n    ");
     },
 };
 // TODO: Maybe in the future allow defining `string | function` as values
@@ -90,9 +91,9 @@ var BINDING_MAPPERS = {
     innerHTML: 'v-html',
 };
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
-function processDynamicComponents(json, options) {
-    traverse_1.default(json).forEach(function (node) {
-        if (is_mitosis_node_1.isMitosisNode(node)) {
+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.name = 'component';
@@ -100,9 +101,9 @@ function processDynamicComponents(json, options) {
         }
     });
 }
-function processForKeys(json, options) {
-    traverse_1.default(json).forEach(function (node) {
-        if (is_mitosis_node_1.isMitosisNode(node)) {
+function processForKeys(json, _options) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.name === 'For') {
                 var firstChild = node.children[0];
                 if (firstChild && firstChild.bindings.key) {
@@ -118,7 +119,7 @@ var blockToVue = function (node, options) {
     if (nodeMapper) {
         return nodeMapper(node, options);
     }
-    if (is_children_1.default(node)) {
+    if ((0, is_children_1.default)(node)) {
         return "<slot></slot>";
     }
     if (node.name === 'style') {
@@ -128,19 +129,19 @@ var blockToVue = function (node, options) {
         node.properties.is = 'style';
     }
     if (node.properties._text) {
-        return "" + node.properties._text;
+        return "".concat(node.properties._text);
     }
     if (node.bindings._text) {
-        return "{{" + strip_state_and_props_refs_1.stripStateAndPropsRefs(node.bindings._text) + "}}";
+        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._text), "}}");
     }
     var str = '';
-    str += "<" + node.name + " ";
+    str += "<".concat(node.name, " ");
     if (node.bindings._spread) {
-        str += "v-bind=\"" + strip_state_and_props_refs_1.stripStateAndPropsRefs(node.bindings._spread) + "\"";
+        str += "v-bind=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread), "\"");
     }
     for (var key in node.properties) {
         var value = node.properties[key];
-        str += " " + key + "=\"" + value + "\" ";
+        str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in node.bindings) {
         if (key === '_spread') {
@@ -148,33 +149,33 @@ var blockToVue = function (node, options) {
         }
         var value = node.bindings[key];
         if (key === 'class') {
-            str += " :class=\"_classStringToObject(" + strip_state_and_props_refs_1.stripStateAndPropsRefs(value, {
+            str += " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
                 replaceWith: 'this.',
-            }) + ")\" ";
+            }), ")\" ");
             // TODO: support dynamic classes as objects somehow like Vue requires
             // https://vuejs.org/v2/guide/class-and-style.html
             continue;
         }
         // TODO: proper babel transform to replace. Util for this
-        var useValue = strip_state_and_props_refs_1.stripStateAndPropsRefs(value);
+        var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
         if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             if (event_1 === 'change' && node.name === 'input') {
                 event_1 = 'input';
             }
             // TODO: proper babel transform to replace. Util for this
-            str += " @" + event_1 + "=\"" + remove_surrounding_block_1.removeSurroundingBlock(useValue
+            str += " @".concat(event_1, "=\"").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue
                 // TODO: proper reference parse and replacing
-                .replace(/event\./g, '$event.')) + "\" ";
+                .replace(/event\./g, '$event.')), "\" ");
         }
         else if (key === 'ref') {
-            str += " ref=\"" + useValue + "\" ";
+            str += " ref=\"".concat(useValue, "\" ");
         }
         else if (BINDING_MAPPERS[key]) {
-            str += " " + BINDING_MAPPERS[key] + "=\"" + useValue + "\" ";
+            str += " ".concat(BINDING_MAPPERS[key], "=\"").concat(useValue, "\" ");
         }
         else {
-            str += " :" + key + "=\"" + useValue + "\" ";
+            str += " :".concat(key, "=\"").concat(useValue, "\" ");
         }
     }
     if (jsx_1.selfClosingTags.has(node.name)) {
@@ -182,15 +183,15 @@ var blockToVue = function (node, options) {
     }
     str += '>';
     if (node.children) {
-        str += node.children.map(function (item) { return exports.blockToVue(item, options); }).join('');
+        str += node.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('');
     }
-    return str + ("</" + node.name + ">");
+    return str + "</".concat(node.name, ">");
 };
 exports.blockToVue = blockToVue;
 function getContextInjectString(component, options) {
     var str = '{';
     for (var key in component.context.get) {
-        str += "\n      " + key + ": \"" + component.context.get[key].name + "\",\n    ";
+        str += "\n      ".concat(key, ": \"").concat(component.context.get[key].name, "\",\n    ");
     }
     str += '}';
     return str;
@@ -199,150 +200,150 @@ function getContextProvideString(component, options) {
     var str = '{';
     for (var key in component.context.set) {
         var _a = component.context.set[key], value = _a.value, name_1 = _a.name;
-        str += "\n      " + name_1 + ": " + (value
-            ? get_state_object_string_1.getMemberObjectString(value, {
+        str += "\n      ".concat(name_1, ": ").concat(value
+            ? (0, get_state_object_string_1.getMemberObjectString)(value, {
                 valueMapper: function (code) {
-                    return strip_state_and_props_refs_1.stripStateAndPropsRefs(code, { replaceWith: '_this.' });
+                    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' });
                 },
             })
-            : null) + ",\n    ";
+            : null, ",\n    ");
     }
     str += '}';
     return str;
 }
-var componentToVue = function (component, options) {
+var componentToVue = function (options) {
     if (options === void 0) { options = {}; }
-    // Make a copy we can safely mutate, similar to babel's toolchain can be used
-    component = fast_clone_1.fastClone(component);
-    process_http_requests_1.processHttpRequests(component);
-    processDynamicComponents(component, options);
-    processForKeys(component, options);
-    if (options.plugins) {
-        component = plugins_1.runPreJsonPlugins(component, options.plugins);
-    }
-    map_refs_1.mapRefs(component, function (refName) { return "this.$refs." + refName; });
-    if (options.plugins) {
-        component = plugins_1.runPostJsonPlugins(component, options.plugins);
-    }
-    var css = collect_styles_1.collectCss(component, {
-        prefix: options.cssNamespace,
-    });
-    var dataString = get_state_object_string_1.getStateObjectStringFromComponent(component, {
-        data: true,
-        functions: false,
-        getters: false,
-    });
-    var getterString = get_state_object_string_1.getStateObjectStringFromComponent(component, {
-        data: false,
-        getters: true,
-        functions: false,
-        valueMapper: function (code) {
-            return processBinding(code.replace(/^get /, ''), options, component);
-        },
-    });
-    var functionsString = get_state_object_string_1.getStateObjectStringFromComponent(component, {
-        data: false,
-        getters: false,
-        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(get_components_used_1.getComponentsUsed(component))
-        .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(/}$/, 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(',') + "}");
-    var elementProps = get_props_1.getProps(component);
-    strip_meta_properties_1.stripMetaProperties(component);
-    var template = component.children
-        .map(function (item) { return exports.blockToVue(item, options); })
-        .join('\n');
-    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      }  }");
-    }
-    var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
-    var str = 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    </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    </script>\n    ",
-        "\n  "])), template, render_imports_1.renderPreComponent(component), !builderRegister
-        ? ''
-        : "import { registerComponent } from '@builder.io/sdk-vue'", !builderRegister ? '' : 'registerComponent(', !component.name
-        ? ''
-        : "name: '" + (options.namePrefix ? options.namePrefix + '-' : '') + lodash_1.kebabCase(component.name) + "',", !componentsUsed.length
-        ? ''
-        : "components: { " + componentsUsed
-            .map(function (componentName) {
-            return "'" + lodash_1.kebabCase(componentName) + "': async () => " + componentName;
+    // 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;
+        var component = _a.component, path = _a.path;
+        // Make a copy we can safely mutate, similar to babel's toolchain can be used
+        component = (0, fast_clone_1.fastClone)(component);
+        (0, process_http_requests_1.processHttpRequests)(component);
+        processDynamicComponents(component, options);
+        processForKeys(component, options);
+        if (options.plugins) {
+            component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
+        }
+        (0, map_refs_1.mapRefs)(component, function (refName) { return "this.$refs.".concat(refName); });
+        if (options.plugins) {
+            component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
+        }
+        var css = (0, collect_styles_1.collectCss)(component, {
+            prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
+        });
+        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+            data: true,
+            functions: false,
+            getters: false,
+        });
+        var getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+            data: false,
+            getters: true,
+            functions: false,
+            valueMapper: function (code) {
+                return processBinding(code.replace(patterns_1.GETTER, ''), options, component);
+            },
+        });
+        var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+            data: false,
+            getters: false,
+            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];
         })
-            .join(',') + " },", elementProps.size
-        ? "props: " + JSON.stringify(Array.from(elementProps).filter(function (prop) { return prop !== 'children' && prop !== 'class'; })) + ","
-        : '', dataString.length < 4
-        ? ''
-        : "\n        data: () => (" + dataString + "),\n        ", lodash_1.size(component.context.set)
-        ? "provide() {\n                const _this = this;\n                return " + getContextProvideString(component, options) + "\n              },"
-        : '', lodash_1.size(component.context.get)
-        ? "inject: " + getContextInjectString(component, options) + ","
-        : '', component.hooks.onMount
-        ? "mounted() {\n                " + processBinding(component.hooks.onMount, options, component) + "\n              },"
-        : '', component.hooks.onUnMount
-        ? "unmounted() {\n                " + processBinding(component.hooks.onUnMount, options, component) + "\n              },"
-        : '', getterString.length < 4
-        ? ''
-        : "\n          computed: " + getterString + ",\n        ", functionsString.length < 4
-        ? ''
-        : "\n          methods: " + functionsString + ",\n        ", !builderRegister
-        ? ''
-        : ", " + json5_1.default.stringify(component.meta.registerComponent || {}) + ")", !css.trim().length
-        ? ''
-        : "<style scoped>\n      " + css + "\n    </style>");
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (true || options.prettier !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'vue',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-html'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-babel'),
-                ],
-            });
+            // 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(','), "}"));
+        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 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      }  }");
         }
-        catch (err) {
-            console.warn('Could not prettify', { string: str }, err);
+        var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
+        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    </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    </script>\n    ", "\n  "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
+            ? (_d = options.registerComponentPrepend) !== null && _d !== void 0 ? _d : ''
+            : '', !builderRegister ? '' : 'registerComponent(', !component.name
+            ? ''
+            : "name: '".concat(((_e = options.namePrefix) === null || _e === void 0 ? void 0 : _e.call(options, path))
+                ? ((_f = options.namePrefix) === null || _f === void 0 ? void 0 : _f.call(options, path)) + '-'
+                : '').concat((0, lodash_1.kebabCase)(component.name), "',"), !componentsUsed.length
+            ? ''
+            : "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
+            ? ''
+            : "\n        data: () => (".concat(dataString, "),\n        "), (0, lodash_1.size)(component.context.set)
+            ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
+            : '', (0, lodash_1.size)(component.context.get)
+            ? "inject: ".concat(getContextInjectString(component, options), ",")
+            : '', component.hooks.onMount
+            ? "mounted() {\n                ".concat(processBinding(component.hooks.onMount, options, component), "\n              },")
+            : '', component.hooks.onUnMount
+            ? "unmounted() {\n                ".concat(processBinding(component.hooks.onUnMount, options, component), "\n              },")
+            : '', getterString.length < 4
+            ? ''
+            : "\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
+            ? ''
+            : "<style scoped>\n      ".concat(css, "\n    </style>"));
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }
-    }
-    if (options.plugins) {
-        str = 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, '');
-    }
-    return str;
+        if (true || options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'vue',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
+        }
+        if (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, '');
+        }
+        // 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();
+        });
+    };
 };
 exports.componentToVue = componentToVue;
 // Remove unused artifacts like empty script or style tags

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

@@ -37,7 +37,7 @@ var babelTransform = function (code, visitor) {
 exports.babelTransform = babelTransform;
 var babelTransformCode = function (code, visitor) {
     var _a;
-    return ((_a = exports.babelTransform(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
+    return ((_a = (0, exports.babelTransform)(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
 };
 exports.babelTransformCode = babelTransformCode;
 var babelTransformExpression = function (code, visitor, type) {
@@ -59,13 +59,13 @@ var babelTransformExpression = function (code, visitor, type) {
     }
     var useCode = code;
     if (type === 'functionBody') {
-        useCode = "function(){" + useCode + "}";
+        useCode = "function(){".concat(useCode, "}");
     }
     var result = type === 'expression'
         ? null
-        : lodash_1.attempt(function () {
+        : (0, lodash_1.attempt)(function () {
             var _a;
-            var result = ((_a = exports.babelTransform(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
+            var result = ((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
             if (type === 'functionBody') {
                 return result.replace(/^function\(\)\{/, '').replace(/\};$/, '');
             }
@@ -76,7 +76,7 @@ var babelTransformExpression = function (code, visitor, type) {
                 return result.replace(/;$/, '');
             }
         });
-    if (lodash_1.isError(result) || type === 'expression') {
+    if ((0, lodash_1.isError)(result) || type === 'expression') {
         try {
             // If it can't, e.g. this is an expression or code fragment, modify the code below and try again
             // Detect method fragments. These get passed sometimes and otherwise
@@ -84,13 +84,13 @@ var babelTransformExpression = function (code, visitor, type) {
             var isMethod = Boolean(!code.startsWith('function') &&
                 code.match(/^[a-z0-9]+\s*\([^\)]*\)\s*[\{:]/i));
             if (isMethod) {
-                useCode = "function " + useCode;
+                useCode = "function ".concat(useCode);
             }
             // Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
             // e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
             // that is an object
-            useCode = "let _ = " + useCode;
-            result = (((_a = exports.babelTransform(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
+            useCode = "let _ = ".concat(useCode);
+            result = (((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
                 // Babel addes trailing semicolons, but for expressions we need those gone
                 .replace(/;$/, '')
                 // Remove our fake variable assignment
@@ -102,7 +102,7 @@ var babelTransformExpression = function (code, visitor, type) {
         catch (err) {
             console.error('Error parsing code:\n', code, '\n', result);
             try {
-                return exports.babelTransformExpression(code, visitor, 'functionBody');
+                return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
             }
             catch (err) {
                 throw err;

package/dist/src/helpers/camel-case.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+export declare function camelCase(text?: string): string;

package/dist/src/helpers/camel-case.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelCase = void 0;
+var capitalize_1 = require("./capitalize");
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+function camelCase(text) {
+    if (text === void 0) { text = ''; }
+    var parts = text.split('-');
+    var first = parts.shift();
+    return first + parts.map(capitalize_1.capitalize).join('');
+}
+exports.camelCase = camelCase;