@builder.io/mitosis 0.2.5 → 0.2.7

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

@@ -189,10 +189,6 @@ var stringifyBinding = function (node, options, blockOptions) {
         if (key === 'key') {
             return;
         }
-        if (key === 'attributes') {
-            // TODO: contains ternary operator which needs to be handled
-            return;
-        }
         var keyToUse = BINDINGS_MAPPER[key] || key;
         var _b = binding, code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
         // TODO: proper babel transform to replace. Util for this
@@ -227,11 +223,7 @@ var handleNgOutletBindings = function (node) {
             continue;
         }
         var _a = node.bindings[key], code = _a.code, _b = _a.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
-        if (code.includes('?')) {
-            // TODO handle ternary
-            continue;
-        }
-        else if (key.includes('props.')) {
+        if (key.includes('props.')) {
             allProps += "".concat(key.replace('props.', ''), ": ").concat(code, ", ");
         }
         else if (key.includes('.')) {
@@ -256,7 +248,7 @@ var handleNgOutletBindings = function (node) {
     return [allProps, events];
 };
 var blockToAngular = function (json, options, blockOptions) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (blockOptions === void 0) { blockOptions = {
         nativeAttributes: [],
@@ -274,8 +266,7 @@ var blockToAngular = function (json, options, blockOptions) {
     var textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode)) {
-            var selector = (0, function_1.pipe)(textCode, slots_1.stripSlotPrefix, lodash_1.kebabCase);
-            return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
+            return "<ng-content select=\"[".concat((0, slots_1.toKebabSlot)(textCode), "]\"></ng-content>");
         }
         if (textCode.includes('JSON.stringify')) {
             var obj = textCode.replace('JSON.stringify', '');
@@ -294,18 +285,24 @@ var blockToAngular = function (json, options, blockOptions) {
     else if (json.name === 'Show') {
         var condition = (_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code;
         if (condition === null || condition === void 0 ? void 0 : condition.includes('typeof')) {
-            var wordAfterTypeof = condition.split('typeof')[1].trim();
+            var wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
             condition = condition.replace("typeof ".concat(wordAfterTypeof), "useTypeOf(".concat(wordAfterTypeof, ")"));
         }
         str += "<ng-container *ngIf=\"".concat(condition, "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
+        // else condition
+        if ((0, is_mitosis_node_1.isMitosisNode)((_d = json.meta) === null || _d === void 0 ? void 0 : _d.else)) {
+            str += "<ng-container *ngIf=\"!(".concat(condition, ")\">");
+            str += (0, exports.blockToAngular)(json.meta.else, options, blockOptions);
+            str += "</ng-container>";
+        }
     }
     else if (json.name.includes('.')) {
         var elSelector = childComponents.find(function (impName) { return impName === json.name; })
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
-        var _d = handleNgOutletBindings(json), allProps = _d[0], events = _d[1];
+        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      \">  ");
         str += "</ng-container>";
     }

package/dist/src/generators/qwik/jsx.js

@@ -90,19 +90,24 @@ function renderJSXNodes(file, directives, handlers, children, styles, key, paren
                     includedHelperDirectives(directive.toString(), directives);
                 }
                 else {
-                    if (typeof directive == 'string') {
-                        directives.set(childName, directive);
-                        includedHelperDirectives(directive, directives);
-                        if (file.module !== 'med' && file.imports.hasImport(childName)) {
-                            file.import('./med.js', childName);
-                        }
+                    if (childName === 'Slot') {
+                        _this.file.import(_this.file.qwikModule, 'Slot');
                     }
-                    if (isSymbol(childName)) {
-                        // TODO(misko): We are hard coding './med.js' which is not right.
-                        !file.imports.hasImport(childName) && file.import('./med.js', childName);
-                        var exportedChildName = file.exports.get(childName);
-                        if (exportedChildName) {
-                            childName = exportedChildName;
+                    else {
+                        if (typeof directive == 'string') {
+                            directives.set(childName, directive);
+                            includedHelperDirectives(directive, directives);
+                            if (file.module !== 'med' && file.imports.hasImport(childName)) {
+                                file.import('./med.js', childName);
+                            }
+                        }
+                        if (isSymbol(childName)) {
+                            // TODO(misko): We are hard coding './med.js' which is not right.
+                            !file.imports.hasImport(childName) && file.import('./med.js', childName);
+                            var exportedChildName = file.exports.get(childName);
+                            if (exportedChildName) {
+                                childName = exportedChildName;
+                            }
                         }
                     }
                     var props = child.properties;

package/dist/src/generators/svelte/blocks.js

@@ -114,7 +114,7 @@ var mappers = {
             }
             return "\n        <span #".concat(key, ">\n        ").concat((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code, "\n        </span>\n      ");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName, SLOT_PREFIX).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.toKebabSlot)(slotName, SLOT_PREFIX), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var BINDINGS_MAPPER = {

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

@@ -72,7 +72,7 @@ var NODE_MAPPERS = {
         if (slotName === 'default') {
             return "<slot>".concat(renderChildren(), "</slot>");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName, SLOT_PREFIX).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.toKebabSlot)(slotName, SLOT_PREFIX), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var SPECIAL_HTML_TAGS = ['style', 'script'];

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

@@ -1,4 +1,5 @@
 export type SlotMapper = (slotName: string) => string;
 export declare const isSlotProperty: (key: string, slotPrefix?: string) => boolean;
 export declare const stripSlotPrefix: (key: string, slotPrefix?: string) => string;
+export declare const toKebabSlot: (key: string, slotPrefix?: string) => string;
 export declare function replaceSlotsInString(code: string, mapper: SlotMapper): string;

package/dist/src/helpers/slots.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceSlotsInString = exports.stripSlotPrefix = exports.isSlotProperty = void 0;
+exports.replaceSlotsInString = exports.toKebabSlot = exports.stripSlotPrefix = exports.isSlotProperty = void 0;
 var core_1 = require("@babel/core");
+var function_1 = require("fp-ts/function");
+var lodash_1 = require("lodash");
 var babel_transform_1 = require("./babel-transform");
 var SLOT_PREFIX = 'slot';
 var isSlotProperty = function (key, slotPrefix) {
@@ -14,6 +16,11 @@ var stripSlotPrefix = function (key, slotPrefix) {
     return (0, exports.isSlotProperty)(key, slotPrefix) ? key.substring(slotPrefix.length) : key;
 };
 exports.stripSlotPrefix = stripSlotPrefix;
+var toKebabSlot = function (key, slotPrefix) {
+    if (slotPrefix === void 0) { slotPrefix = SLOT_PREFIX; }
+    return (0, function_1.pipe)((0, exports.stripSlotPrefix)(key, slotPrefix), lodash_1.kebabCase);
+};
+exports.toKebabSlot = toKebabSlot;
 function replaceSlotsInString(code, mapper) {
     return (0, babel_transform_1.babelTransformExpression)(code, {
         Identifier: function (path) {

package/dist/src/parsers/builder/builder.d.ts

@@ -12,6 +12,7 @@ type BuilderToMitosisOptions = {
     includeBuilderExtras?: boolean;
     preserveTextBlocks?: boolean;
     includeSpecialBindings?: boolean;
+    includeMeta?: boolean;
 };
 export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
 /**

package/dist/src/parsers/builder/builder.js

@@ -417,7 +417,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     var _a;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (_internalOptions === void 0) { _internalOptions = {}; }
-    var _x = options.includeSpecialBindings, includeSpecialBindings = _x === void 0 ? true : _x;
+    var _x = options.includeSpecialBindings, includeSpecialBindings = _x === void 0 ? true : _x, _y = options.includeMeta, includeMeta = _y === void 0 ? false : _y;
     if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
     }
@@ -580,6 +580,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
         })),
         slots: __assign({}, slots),
+        meta: includeMeta
+            ? __assign({ 'builder-id': block.id }, block.meta) : {},
     });
     // Has single text node child
     var firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];

package/package.json

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