@builder.io/mitosis 0.2.7 → 0.2.9

package/dist/src/generators/angular/index.js

@@ -175,7 +175,10 @@ var processEventBinding = function (key, code, nodeName, customArg) {
     var regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
     var replacer = '$1$event$2';
     var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
-    return " (".concat(event, ")=\"").concat(finalValue, "\" ");
+    return {
+        event: event,
+        value: finalValue,
+    };
 };
 var stringifyBinding = function (node, options, blockOptions) {
     return function (_a) {
@@ -193,7 +196,8 @@ var stringifyBinding = function (node, options, blockOptions) {
         var _b = binding, code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
         // TODO: proper babel transform to replace. Util for this
         if (keyToUse.startsWith('on')) {
-            return processEventBinding(keyToUse, code, node.name, cusArgs[0]);
+            var _d = processEventBinding(keyToUse, code, node.name, cusArgs[0]), event_1 = _d.event, value = _d.value;
+            return " (".concat(event_1, ")=\"").concat(value, "\"");
         }
         else if (keyToUse === 'class') {
             return " [class]=\"".concat(code, "\" ");
@@ -214,7 +218,16 @@ var stringifyBinding = function (node, options, blockOptions) {
 };
 var handleNgOutletBindings = function (node) {
     var allProps = '';
-    var events = '';
+    for (var key in node.properties) {
+        if (key.startsWith('$')) {
+            continue;
+        }
+        if (key === 'key') {
+            continue;
+        }
+        var value = node.properties[key];
+        allProps += "".concat(key, ": '").concat(value, "', ");
+    }
     for (var key in node.bindings) {
         if (key.startsWith('"')) {
             continue;
@@ -228,10 +241,11 @@ var handleNgOutletBindings = function (node) {
         }
         else if (key.includes('.')) {
             // TODO: handle arbitrary spread props
-            allProps += "".concat(key.split('.')[1], ": ").concat(code, ",");
+            allProps += "".concat(key.split('.')[1], ": ").concat(code, ", ");
         }
         else if (key.startsWith('on')) {
-            events += processEventBinding(key, code, node.name, cusArgs[0]);
+            var _c = processEventBinding(key, code, node.name, cusArgs[0]), event_2 = _c.event, value = _c.value;
+            allProps += "on".concat(event_2.charAt(0).toUpperCase() + event_2.slice(1), ": ").concat(value.replace(/\(.*?\)/g, ''), ", ");
         }
         else {
             var codeToUse = processCodeBlockInTemplate(code);
@@ -245,7 +259,7 @@ var handleNgOutletBindings = function (node) {
     if (allProps.startsWith(', ')) {
         allProps = allProps.slice(2);
     }
-    return [allProps, events];
+    return allProps;
 };
 var blockToAngular = function (json, options, blockOptions) {
     var _a, _b, _c, _d;
@@ -302,8 +316,8 @@ var blockToAngular = function (json, options, blockOptions) {
         var elSelector = childComponents.find(function (impName) { return impName === json.name; })
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
-        var _e = handleNgOutletBindings(json), allProps = _e[0], events = _e[1];
-        str += "<ng-container ".concat(events, " *ngComponentOutlet=\"\n      ").concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: { ").concat(allProps, " };\n      content: myContent;\n      \">  ");
+        var allProps = handleNgOutletBindings(json);
+        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: { ").concat(allProps, " };\n      content: myContent;\n      \">  ");
         str += "</ng-container>";
     }
     else {

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

@@ -7,4 +7,5 @@ export interface ToVueOptions extends BaseTranspilerOptions {
     defineComponent?: boolean;
     api: Api;
     convertClassStringToObject?: boolean;
+    casing?: 'pascal' | 'kebab';
 }

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

@@ -97,6 +97,7 @@ var onUpdatePlugin = function (options) { return ({
 var BASE_OPTIONS = {
     api: 'options',
     defineComponent: true,
+    casing: 'pascal',
 };
 var componentToVue = function (userOptions) {
     return function (_a) {
@@ -181,7 +182,12 @@ var componentToVue = function (userOptions) {
             prefix: (_d = (_c = options.cssNamespace) === null || _c === void 0 ? void 0 : _c.call(options)) !== null && _d !== void 0 ? _d : 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 templateStrBody = component.children
+            .map(function (item) { return (0, blocks_1.blockToVue)(item, options, { isRootNode: true }); })
+            .join('\n');
+        var template = options.casing === 'kebab'
+            ? (0, helpers_1.renameMitosisComponentsToKebabCase)(templateStrBody)
+            : templateStrBody;
         var onUpdateWithDeps = ((_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 onUpdateWithoutDeps = ((_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 getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.2.7",
+  "version": "0.2.9",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {