@builder.io/mitosis 0.3.4 → 0.3.6

package/dist/src/generators/angular/helpers.d.ts

@@ -1,4 +1,4 @@
-export declare const HELPER_FUNCTIONS: {
+export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
     [key: string]: string;
 };
 export declare const getAppropriateTemplateFunctionKeys: (code: string) => string[];

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
-exports.HELPER_FUNCTIONS = {
-    useObjectWrapper: "useObjectWrapper(...args: any[]) {\n        let obj = {}\n        args.forEach((arg) => {\n          obj = { ...obj, ...arg };\n        });\n        return obj;\n      }",
-    useObjectDotValues: "useObjectDotValues(obj: any): any[] {\n        return Object.values(obj);\n      }",
-    useTypeOf: "useTypeOf(obj: any): string {\n        return typeof obj;\n      }",
-    useJsonStringify: "useJsonStringify(obj: any): string {\n        return JSON.stringify(obj);\n      }",
-};
+var HELPER_FUNCTIONS = function (isTs) { return ({
+    useObjectWrapper: "useObjectWrapper(...args".concat(isTs ? ': any[]' : '', ") {\n    let obj = {}\n    args.forEach((arg) => {\n      obj = { ...obj, ...arg };\n    });\n    return obj;\n  }"),
+    useObjectDotValues: "useObjectDotValues(obj".concat(isTs ? ': any' : '', ")").concat(isTs ? ': any[]' : '', ") {\n    return Object.values(obj);\n  }"),
+    useTypeOf: "useTypeOf(obj".concat(isTs ? ': any' : '', ")").concat(isTs ? ': string' : '', ") {\n    return typeof obj;\n  }"),
+    useJsonStringify: "useJsonStringify(...args".concat(isTs ? ': any' : '', ")").concat(isTs ? ': string' : '', ") {\n    return JSON.stringify(...args);\n  }"),
+}); };
+exports.HELPER_FUNCTIONS = HELPER_FUNCTIONS;
 var getAppropriateTemplateFunctionKeys = function (code) {
-    return Object.keys(exports.HELPER_FUNCTIONS).filter(function (key) { return code.includes(key); });
+    return Object.keys((0, exports.HELPER_FUNCTIONS)()).filter(function (key) { return code.includes(key); });
 };
 exports.getAppropriateTemplateFunctionKeys = getAppropriateTemplateFunctionKeys;

package/dist/src/generators/angular/index.d.ts

@@ -1,5 +1,11 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { TranspilerGenerator } from '../../types/transpiler';
 import { AngularBlockOptions, ToAngularOptions } from './types';
-export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
+export declare const blockToAngular: ({ root, json, options, blockOptions, }: {
+    root: MitosisComponent;
+    json: MitosisNode;
+    options?: ToAngularOptions | undefined;
+    blockOptions?: AngularBlockOptions | undefined;
+}) => string;
 export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;

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

@@ -52,7 +52,9 @@ var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var helpers_1 = require("../../helpers/styles/helpers");
+var traverse_nodes_1 = require("../../helpers/traverse-nodes");
 var plugins_1 = require("../../modules/plugins");
+var symbol_processor_1 = require("../../symbols/symbol-processor");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var function_1 = require("fp-ts/lib/function");
 var lodash_1 = require("lodash");
@@ -63,13 +65,13 @@ var on_mount_1 = require("../helpers/on-mount");
 var helpers_2 = require("./helpers");
 var types_1 = require("./types");
 var mappers = {
-    Fragment: function (json, options) {
+    Fragment: function (root, json, options) {
         return "<ng-container>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); })
             .join('\n'), "</ng-container>");
     },
-    Slot: function (json, options) {
-        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)(item, options); }).join('\n'); };
+    Slot: function (root, json, options) {
+        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); }).join('\n'); };
         return "<ng-content ".concat(Object.entries(__assign(__assign({}, json.bindings), json.properties))
             .map(function (_a) {
             var binding = _a[0], value = _a[1];
@@ -152,7 +154,7 @@ var processCodeBlockInTemplate = function (code) {
         return "useObjectDotValues".concat(stripped);
     }
     else if (code.includes('JSON.stringify')) {
-        var obj = code.match(/JSON.stringify\([^)]*\)/g);
+        var obj = code.match(/JSON.stringify\((.*)\)/);
         return "useJsonStringify(".concat(obj, ")");
     }
     else if (code.includes(' as ')) {
@@ -183,13 +185,10 @@ var processEventBinding = function (key, code, nodeName, customArg) {
 var stringifyBinding = function (node, options, blockOptions) {
     return function (_a) {
         var key = _a[0], binding = _a[1];
-        if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
+        if (options.state === 'inline-with-wrappers' && (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
             return;
         }
-        if (key.startsWith('$')) {
-            return;
-        }
-        if (key === 'key') {
+        if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
             return;
         }
         var keyToUse = BINDINGS_MAPPER[key] || key;
@@ -212,11 +211,13 @@ var stringifyBinding = function (node, options, blockOptions) {
             return " [attr.".concat(keyToUse, "]=\"").concat(code, "\" ");
         }
         else {
-            return "[".concat(keyToUse, "]=\"").concat(processCodeBlockInTemplate(code), "\"");
+            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+            return "[".concat(keyToUse, "]=\"").concat(codeToUse, "\"");
         }
     };
 };
-var handleNgOutletBindings = function (node) {
+var handleNgOutletBindings = function (node, options) {
+    var _a;
     var allProps = '';
     for (var key in node.properties) {
         if (key.startsWith('$')) {
@@ -235,21 +236,22 @@ var handleNgOutletBindings = function (node) {
         if (key.startsWith('$')) {
             continue;
         }
-        var _a = node.bindings[key], code = _a.code, _b = _a.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
-        if (key.includes('props.')) {
-            allProps += "".concat(key.replace('props.', ''), ": ").concat(code, ", ");
-        }
-        else if (key.includes('.')) {
-            // TODO: handle arbitrary spread props
-            allProps += "".concat(key.split('.')[1], ": ").concat(code, ", ");
+        var _b = node.bindings[key], code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
+        if (options.state === 'class-properties') {
+            code = "this.".concat(code);
+            if (((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread') {
+                allProps += "...".concat(code, ", ");
+                continue;
+            }
         }
-        else if (key.startsWith('on')) {
-            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, ''), ", ");
+        var keyToUse = key.includes('-') ? "'".concat(key, "'") : key;
+        keyToUse = keyToUse.replace('state.', '').replace('props.', '');
+        if (key.startsWith('on')) {
+            var _d = processEventBinding(key, code, node.name, cusArgs[0]), event_2 = _d.event, value = _d.value;
+            allProps += "on".concat(event_2.charAt(0).toUpperCase() + event_2.slice(1), ": ").concat(value.replace(/\(.*?\)/g, ''), ".bind(this), ");
         }
         else {
-            var codeToUse = processCodeBlockInTemplate(code);
-            var keyToUse = key.includes('-') ? "'".concat(key, "'") : key;
+            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
             allProps += "".concat(keyToUse, ": ").concat(codeToUse, ", ");
         }
     }
@@ -261,15 +263,14 @@ var handleNgOutletBindings = function (node) {
     }
     return allProps;
 };
-var blockToAngular = function (json, options, blockOptions) {
-    var _a, _b, _c, _d;
-    if (options === void 0) { options = {}; }
-    if (blockOptions === void 0) { blockOptions = {
+var blockToAngular = function (_a) {
+    var _b, _c, _d, _e;
+    var root = _a.root, json = _a.json, _f = _a.options, options = _f === void 0 ? {} : _f, _g = _a.blockOptions, blockOptions = _g === void 0 ? {
         nativeAttributes: [],
-    }; }
+    } : _g;
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
-        return mappers[json.name](json, options);
+        return mappers[json.name](root, json, options);
     }
     if ((0, is_children_1.default)({ node: json })) {
         return "<ng-content></ng-content>";
@@ -277,38 +278,41 @@ var blockToAngular = function (json, options, blockOptions) {
     if (json.properties._text) {
         return json.properties._text;
     }
-    var textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode)) {
             return "<ng-content select=\"[".concat((0, slots_1.toKebabSlot)(textCode), "]\"></ng-content>");
         }
         if (textCode.includes('JSON.stringify')) {
-            var obj = textCode.replace('JSON.stringify', '');
-            obj = obj.replace(/\(.*?\)/, '');
-            return "{{useJsonStringify".concat(obj, "}}");
+            var obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
+            return "{{".concat(obj, " | json}}");
         }
         return "{{".concat(textCode, "}}");
     }
     var str = '';
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var indexName = json.scope.indexName;
-        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
-        str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
+        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        str += json.children
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+            .join('\n');
         str += "</ng-container>";
     }
     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 condition = (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code;
+        if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
             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 += json.children
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: 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)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)((_e = json.meta) === null || _e === void 0 ? void 0 : _e.else)) {
             str += "<ng-container *ngIf=\"!(".concat(condition, ")\">");
-            str += (0, exports.blockToAngular)(json.meta.else, options, blockOptions);
+            str += (0, exports.blockToAngular)({ root: root, json: json.meta.else, options: options, blockOptions: blockOptions });
             str += "</ng-container>";
         }
     }
@@ -316,8 +320,38 @@ 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 allProps = handleNgOutletBindings(json);
-        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: { ").concat(allProps, " };\n      content: myContent;\n      \">  ");
+        var allProps = handleNgOutletBindings(json, options);
+        if (options.state === 'class-properties') {
+            var inputsPropsStateName = "mergedInputs_".concat((0, symbol_processor_1.hashCodeAsString)(allProps));
+            root.state[inputsPropsStateName] = {
+                code: 'null',
+                type: 'property',
+            };
+            if (!root.hooks.onMount
+                .map(function (hook) { return hook.code; })
+                .join('')
+                .includes(inputsPropsStateName)) {
+                root.hooks.onMount.push({
+                    code: "this.".concat(inputsPropsStateName, " = {").concat(allProps, "}"),
+                    onSSR: false,
+                });
+            }
+            if (root.hooks.onUpdate &&
+                root.hooks.onUpdate.length > 0 &&
+                !root.hooks.onUpdate
+                    .map(function (hook) { return hook.code; })
+                    .join('')
+                    .includes(inputsPropsStateName)) {
+                root.hooks.onUpdate.push({
+                    code: "this.".concat(inputsPropsStateName, " = {").concat(allProps, "}"),
+                });
+            }
+            allProps = "".concat(inputsPropsStateName);
+        }
+        else {
+            allProps = "{ ".concat(allProps, " }");
+        }
+        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: ").concat(allProps, ";\n      content: myContent;\n      \">  ");
         str += "</ng-container>";
     }
     else {
@@ -347,7 +381,9 @@ var blockToAngular = function (json, options, blockOptions) {
         }
         str += '>';
         if (json.children) {
-            str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
+            str += json.children
+                .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+                .join('\n');
         }
         str += "</".concat(elSelector, ">");
     }
@@ -360,7 +396,7 @@ var traverseToGetAllDynamicComponents = function (json, options, blockOptions) {
     (0, traverse_1.default)(json).forEach(function (item) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.') && item.name.split('.').length === 2) {
             var children = item.children
-                .map(function (child) { return (0, exports.blockToAngular)(child, options, blockOptions); })
+                .map(function (child) { return (0, exports.blockToAngular)({ root: json, json: child, options: options, blockOptions: blockOptions }); })
                 .join('\n');
             dynamicTemplate = "<ng-template #".concat(item.name.split('.')[1].toLowerCase() + 'Template', ">").concat(children, "</ng-template>");
             components.add(item.name);
@@ -382,6 +418,147 @@ var processAngularCode = function (_a) {
         }), function (newCode) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith: replaceWith }); });
     };
 };
+var isASimpleProperty = function (code) {
+    var expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
+    var invalidChars = ['{', '}', '(', ')', 'typeof'];
+    return !invalidChars.some(function (char) { return code.includes(char); }) && !expressions.includes(code);
+};
+var generateNewBindingName = function (index, name) {
+    return "node_".concat(index, "_").concat(name.replaceAll('.', '_').replaceAll('-', '_'));
+};
+var handleBindings = function (json, item, index, forName, indexName) {
+    var _a, _b, _c, _d, _e, _f;
+    for (var key in item.bindings) {
+        if (key.startsWith('"') ||
+            key.startsWith('$') ||
+            key === 'css' ||
+            key === 'ref' ||
+            isASimpleProperty(item.bindings[key].code)) {
+            continue;
+        }
+        var newBindingName = generateNewBindingName(index, item.name);
+        if (forName) {
+            if (item.name === 'For')
+                continue;
+            if (key.startsWith('on')) {
+                var _g = item.bindings[key].arguments, cusArgs = _g === void 0 ? ['event'] : _g;
+                var eventBindingName = "".concat(generateNewBindingName(index, item.name), "_event");
+                if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
+                    ((_b = item.bindings[key]) === null || _b === void 0 ? void 0 : _b.code.trim().endsWith('}'))) {
+                    var forAndIndex = "".concat(forName ? ", ".concat(forName) : '').concat(indexName ? ", ".concat(indexName) : '');
+                    var eventArgs = "".concat(cusArgs.join(', ')).concat(forAndIndex);
+                    json.state[eventBindingName] = {
+                        code: "(".concat(eventArgs, ") => ").concat(item.bindings[key].code),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(eventBindingName, "(").concat(eventArgs, ")");
+                    json.state[newBindingName] = {
+                        code: "(".concat(eventArgs, ") => (").concat(item.bindings[key].code, ")"),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(newBindingName, "($").concat(eventArgs, ")");
+                }
+            }
+            else {
+                json.state[newBindingName] = {
+                    code: "(".concat(forName).concat(indexName ? ", ".concat(indexName) : '', ") => (").concat(item.bindings[key].code, ")"),
+                    type: 'function',
+                };
+                item.bindings[key].code = "state.".concat(newBindingName, "(").concat(forName).concat(indexName ? ", ".concat(indexName) : '', ")");
+            }
+        }
+        else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
+            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !key.startsWith('on')) {
+                json.state[newBindingName] = { code: 'null', type: 'property' };
+                json.hooks['onMount'].push({
+                    code: "state.".concat(newBindingName, " = ").concat(item.bindings[key].code),
+                    onSSR: false,
+                });
+                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
+                json.hooks['onUpdate'].push({
+                    code: "state.".concat(newBindingName, " = ").concat(item.bindings[key].code),
+                });
+                item.bindings[key].code = "state.".concat(newBindingName);
+            }
+            else if (key.startsWith('on')) {
+                var _h = item.bindings[key].arguments, cusArgs = _h === void 0 ? ['event'] : _h;
+                if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
+                    ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
+                    json.state[newBindingName] = {
+                        code: "(".concat(cusArgs.join(', '), ") => ").concat(item.bindings[key].code),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(newBindingName, "(").concat(cusArgs.join(', '), ")");
+                }
+            }
+            else {
+                json.state[newBindingName] = { code: "null", type: 'property' };
+                json.hooks['onMount'].push({
+                    code: "state.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")}"),
+                    onSSR: false,
+                });
+                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
+                json.hooks['onUpdate'].push({
+                    code: "state.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")}"),
+                });
+                item.bindings[newBindingName] = item.bindings[key];
+                item.bindings[key].code = "state.".concat(newBindingName);
+                delete item.bindings[key];
+            }
+        }
+        index++;
+    }
+    return index;
+};
+var handleProperties = function (json, item, index) {
+    for (var key in item.properties) {
+        if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
+            continue;
+        }
+        var newBindingName = generateNewBindingName(index, item.name);
+        json.state[newBindingName] = { code: '`' + "".concat(item.properties[key]) + '`', type: 'property' };
+        item.bindings[key] = { code: "state.".concat(newBindingName), type: 'single' };
+        delete item.properties[key];
+        index++;
+    }
+    return index;
+};
+var handleAngularBindings = function (json, item, index, _a) {
+    var _b = _a === void 0 ? {} : _a, forName = _b.forName, indexName = _b.indexName;
+    if ((0, is_children_1.default)({ node: item }))
+        return index;
+    index = handleBindings(json, item, index, forName, indexName);
+    index = handleProperties(json, item, index);
+    return index;
+};
+var classPropertiesPlugin = function () { return ({
+    json: {
+        pre: function (json) {
+            var lastId = 0;
+            (0, traverse_nodes_1.traverseNodes)(json, function (item) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+                    if (item.name === 'For') {
+                        var forName_1 = item.scope.forName;
+                        var indexName_1 = item.scope.indexName;
+                        (0, traverse_nodes_1.traverseNodes)(item, function (child) {
+                            if ((0, is_mitosis_node_1.isMitosisNode)(child)) {
+                                child._traversed = true;
+                                lastId = handleAngularBindings(json, child, lastId, {
+                                    forName: forName_1,
+                                    indexName: indexName_1,
+                                });
+                            }
+                        });
+                    }
+                    else if (!item._traversed) {
+                        lastId = handleAngularBindings(json, item, lastId);
+                    }
+                }
+            });
+            return json;
+        },
+    },
+}); };
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
@@ -446,6 +623,9 @@ var componentToAngular = function (userOptions) {
                 }
             }),
         ], false);
+        if (options.state === 'class-properties') {
+            options.plugins.push(classPropertiesPlugin);
+        }
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
@@ -515,13 +695,20 @@ var componentToAngular = function (userOptions) {
         var template = json.children
             .map(function (item) {
             var _a, _b;
-            var tmpl = (0, exports.blockToAngular)(item, options, {
-                childComponents: childComponents,
-                nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
-            });
-            (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach(function (key) {
-                return helperFunctions.add(helpers_2.HELPER_FUNCTIONS[key]);
+            var tmpl = (0, exports.blockToAngular)({
+                root: json,
+                json: item,
+                options: options,
+                blockOptions: {
+                    childComponents: childComponents,
+                    nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
+                },
             });
+            if (options.state === 'inline-with-wrappers') {
+                (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach(function (key) {
+                    return helperFunctions.add((0, helpers_2.HELPER_FUNCTIONS)(options.typescript)[key]);
+                });
+            }
             return tmpl;
         })
             .join('\n');
@@ -594,23 +781,25 @@ var componentToAngular = function (userOptions) {
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
-            var propDeclaration = "@Input() ".concat(item, "!: ").concat(propType);
+            var propDeclaration = "@Input() ".concat(item).concat(options.typescript ? "!: ".concat(propType) : '');
             if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
                 propDeclaration += " = defaultProps[\"".concat(item, "\"]");
             }
             return propDeclaration;
         })
             .join('\n'), outputs.join('\n'), Array.from(domRefs)
-            .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, "!: ElementRef"); })
+            .map(function (refName) {
+            return "@ViewChild('".concat(refName, "') ").concat(refName).concat(options.typescript ? '!: ElementRef' : '');
+        })
             .join('\n'), Array.from(dynamicComponents)
             .map(function (component) {
             return "@ViewChild('".concat(component
                 .split('.')[1]
                 .toLowerCase(), "Template', { static: true }) ").concat(component
                 .split('.')[1]
-                .toLowerCase(), "TemplateRef!: TemplateRef<any>");
+                .toLowerCase(), "TemplateRef").concat(options.typescript ? '!: TemplateRef<any>' : '');
         })
-            .join('\n'), dynamicComponents.size ? 'myContent?: any[][];' : '', dataString, helperFunctions.size ? Array.from(helperFunctions).join('\n') : '', jsRefs
+            .join('\n'), dynamicComponents.size ? "myContent".concat(options.typescript ? '?: any[][];' : '') : '', dataString, helperFunctions.size ? Array.from(helperFunctions).join('\n') : '', jsRefs
             .map(function (ref) {
             var argument = json.refs[ref].argument;
             var typeParameter = json.refs[ref].typeParameter;
@@ -626,7 +815,9 @@ var componentToAngular = function (userOptions) {
         })
             .join('\n'), !hasConstructor && !dynamicComponents.size
             ? ''
-            : "constructor(\n".concat(injectables.join(',\n')).concat(dynamicComponents.size ? '\nprivate vcRef: ViewContainerRef,\n' : '', ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            : "constructor(\n".concat(injectables.join(',\n')).concat(dynamicComponents.size
+                ? "\nprivate vcRef".concat(options.typescript ? ': ViewContainerRef' : '', ",\n")
+                : '', ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
                 : "\n              ".concat((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, "\n              "), "\n          }\n          "), !json.hooks.onMount.length && !dynamicComponents.size
             ? ''
@@ -640,7 +831,7 @@ var componentToAngular = function (userOptions) {
                     .join(', '), "];\n              ")
                 : '', "\n            }"), !((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
+            : "ngOnChanges() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
                 code += hook.code;
                 return code + '\n';
             }, ''), "\n            }"), !json.hooks.onUnMount

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

@@ -1,6 +1,7 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare const BUILT_IN_COMPONENTS: Set<string>;
 export interface ToAngularOptions extends BaseTranspilerOptions {
+    state?: 'class-properties' | 'inline-with-wrappers';
     standalone?: boolean;
     preserveImports?: boolean;
     preserveFileExtensions?: boolean;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_ANGULAR_OPTIONS = exports.BUILT_IN_COMPONENTS = void 0;
 exports.BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 exports.DEFAULT_ANGULAR_OPTIONS = {
+    state: 'inline-with-wrappers',
     preserveImports: false,
     preserveFileExtensions: false,
     visuallyIgnoreHostElement: true,

package/dist/src/generators/mitosis.js

@@ -60,7 +60,7 @@ var blockToMitosis = function (json, toMitosisOptions, component) {
             stylesType: 'emotion',
             type: 'dom',
             prettier: options.prettier,
-        }, component);
+        }, component, true);
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var needsWrapper = json.children.length !== 1;

package/dist/src/generators/qwik/component-generator.js

@@ -149,7 +149,7 @@ var componentToQwik = function (userOptions) {
         }
         catch (e) {
             console.error(e);
-            return e.stack || String(e);
+            throw e;
         }
     };
 };

package/dist/src/generators/react/blocks.d.ts

@@ -1,4 +1,4 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
-export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, component: MitosisComponent, parentSlots?: any[]) => string;
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, component: MitosisComponent, insideJsx: boolean, parentSlots?: any[]) => string;

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

@@ -26,13 +26,13 @@ var html_tags_1 = require("../../constants/html_tags");
 var helpers_1 = require("./helpers");
 var state_1 = require("./state");
 var NODE_MAPPERS = {
-    Slot: function (json, options, component, parentSlots) {
+    Slot: function (json, options, component, _insideJsx, parentSlots) {
         var _a, _b;
         var slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
         var hasChildren = json.children.length;
         var renderChildren = function () {
             var _a;
-            var childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToReact)(item, options, component); }).join('\n').trim();
+            var childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToReact)(item, options, component, true); }).join('\n').trim();
             /**
              * Ad-hoc way of figuring out if the children defaultProp is:
              * - a JSX element, e.g. `<div>foo</div>`
@@ -70,20 +70,26 @@ var NODE_MAPPERS = {
     Fragment: function (json, options, component) {
         var wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
         return "".concat(wrap ? (0, helpers_1.getFragment)('open', options) : '').concat(json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
             .join('\n')).concat(wrap ? (0, helpers_1.getFragment)('close', options) : '');
     },
-    For: function (_json, options, component) {
+    For: function (_json, options, component, insideJsx) {
         var _a;
         var json = _json;
         var wrap = (0, helpers_1.wrapInFragment)(json);
         var forArguments = (0, for_1.getForArguments)(json).join(', ');
-        return "{".concat((0, helpers_1.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
+        var expression = "".concat((0, helpers_1.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
-            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ))}");
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
+            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ))");
+        if (insideJsx) {
+            return "{".concat(expression, "}");
+        }
+        else {
+            return expression;
+        }
     },
-    Show: function (json, options, component) {
+    Show: function (json, options, component, insideJsx) {
         var _a;
         var wrap = (0, helpers_1.wrapInFragment)(json) ||
             (0, is_root_text_node_1.isRootTextNode)(json) ||
@@ -91,16 +97,22 @@ var NODE_MAPPERS = {
             // when `<Show><For>...</For></Show>`, we need to wrap the For generated code in a fragment
             // since it's a `.map()` call
             (json.children.length === 1 && ['For', 'Show'].includes(json.children[0].name));
-        var wrapElse = json.meta.else &&
-            ((0, helpers_1.wrapInFragment)(json.meta.else) || (0, mitosis_node_1.checkIsForNode)(json.meta.else));
-        return "{".concat((0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
+        var wrapElse = !!(json.meta.else &&
+            ((0, helpers_1.wrapInFragment)(json.meta.else) || (0, mitosis_node_1.checkIsForNode)(json.meta.else)));
+        var expression = "".concat((0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, wrap); })
             .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ) : ").concat(!json.meta.else
             ? 'null'
             : (wrapElse ? (0, helpers_1.openFrag)(options) : '') +
-                (0, exports.blockToReact)(json.meta.else, options, component) +
-                (wrapElse ? (0, helpers_1.closeFrag)(options) : ''), "}");
+                (0, exports.blockToReact)(json.meta.else, options, component, wrapElse) +
+                (wrapElse ? (0, helpers_1.closeFrag)(options) : ''));
+        if (insideJsx) {
+            return "{".concat(expression, "}");
+        }
+        else {
+            return expression;
+        }
     },
 };
 var ATTTRIBUTE_MAPPERS = {
@@ -129,11 +141,11 @@ var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
 var NATIVE_EVENT_MAPPER = {
     onClick: 'onPress',
 };
-var blockToReact = function (json, options, component, parentSlots) {
+var blockToReact = function (json, options, component, insideJsx, parentSlots) {
     var _a, _b, _c, _d;
     if (parentSlots === void 0) { parentSlots = []; }
     if (NODE_MAPPERS[json.name]) {
-        return NODE_MAPPERS[json.name](json, options, component, parentSlots);
+        return NODE_MAPPERS[json.name](json, options, component, insideJsx, parentSlots);
     }
     if (json.properties._text) {
         var text = json.properties._text;
@@ -235,7 +247,7 @@ var blockToReact = function (json, options, component, parentSlots) {
             if (!(value === null || value === void 0 ? void 0 : value.length)) {
                 continue;
             }
-            var reactComponents = value.map(function (node) { return (0, exports.blockToReact)(node, options, component); });
+            var reactComponents = value.map(function (node) { return (0, exports.blockToReact)(node, options, component, true); });
             var slotStringValue = reactComponents.length === 1 ? reactComponents[0] : "<>".concat(reactComponents.join('\n'), "</>");
             str += " ".concat(key, "={").concat(slotStringValue, "} ");
         }
@@ -253,7 +265,7 @@ var blockToReact = function (json, options, component, parentSlots) {
     var childrenNodes = '';
     if (json.children) {
         childrenNodes = json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, component, needsToRenderSlots); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, true, needsToRenderSlots); })
             .join('');
     }
     if (needsToRenderSlots.length) {

package/dist/src/generators/react/generator.js

@@ -363,7 +363,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var componentArgs = ["props".concat(options.typescript ? ":".concat(propType) : ''), options.forwardRef]
         .filter(Boolean)
         .join(',');
-    var componentBody = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n      \n    ", "\n\n    ", "\n\n    ", "\n\n    return (\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n      \n    ", "\n\n    ", "\n\n    ", "\n\n    return (\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "])), options.contextType === 'prop-drill'
+    var componentBody = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    return (\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    return (\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "])), options.contextType === 'prop-drill'
         ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
         : '', hasStateArgument ? '' : refsString, hasState
         ? options.stateType === 'mobx'
@@ -410,7 +410,7 @@ var _componentToReact = function (json, options, isSubComponent) {
             str: json.hooks.onUnMount.code,
             options: options,
         }), "\n          }\n        }, [])")
-        : '', wrap ? (0, helpers_2.openFrag)(options) : '', json.children.map(function (item) { return (0, blocks_1.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && options.stylesType === 'styled-jsx'
+        : '', wrap ? (0, helpers_2.openFrag)(options) : '', json.children.map(function (item) { return (0, blocks_1.blockToReact)(item, options, json, wrap, []); }).join('\n'), componentHasStyles && options.stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : '', componentHasStyles && options.stylesType === 'style-tag'
         ? "<style>{`".concat(css, "`}</style>")

package/dist/src/generators/stencil/generate.js

@@ -25,29 +25,44 @@ var html_tags_1 = require("../../constants/html_tags");
 var plugins_1 = require("../../modules/plugins");
 var on_mount_1 = require("../helpers/on-mount");
 var collect_class_string_1 = require("./collect-class-string");
-var blockToStencil = function (json, options) {
+var blockToStencil = function (json, options, insideJsx) {
     var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }
     if (json.properties._text) {
         return json.properties._text;
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        return "{".concat(processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
+        if (insideJsx) {
+            return "{".concat(processBinding(json.bindings._text.code), "}");
+        }
+        return processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code);
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        var wrap = json.children.length !== 1;
+        var wrap_1 = json.children.length !== 1;
         var forArgs = (0, for_1.getForArguments)(json).join(', ');
-        return "{".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(forArgs, ") => (\n      ").concat(wrap ? '<>' : '').concat(json.children
+        var expression = "".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(forArgs, ") => (\n      ").concat(wrap_1 ? '<>' : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToStencil(item, options); })
-            .join('\n')).concat(wrap ? '</>' : '', "\n    ))}");
+            .map(function (item) { return blockToStencil(item, options, wrap_1); })
+            .join('\n')).concat(wrap_1 ? '</>' : '', "\n    ))");
+        if (insideJsx) {
+            return "{".concat(expression, "}");
+        }
+        else {
+            return expression;
+        }
     }
     else if (json.name === 'Show') {
-        var wrap = json.children.length !== 1;
-        return "{".concat(processBinding((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), " ? (\n      ").concat(wrap ? '<>' : '').concat(json.children
+        var wrap_2 = json.children.length !== 1;
+        var expression = "".concat(processBinding((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), " ? (\n      ").concat(wrap_2 ? '<>' : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToStencil(item, options); })
-            .join('\n')).concat(wrap ? '</>' : '', "\n    ) : ").concat(!json.meta.else ? 'null' : blockToStencil(json.meta.else, options), "}");
+            .map(function (item) { return blockToStencil(item, options, wrap_2); })
+            .join('\n')).concat(wrap_2 ? '</>' : '', "\n    ) : ").concat(!json.meta.else ? 'null' : blockToStencil(json.meta.else, options, false));
+        if (insideJsx) {
+            return "{".concat(expression, "}");
+        }
+        else {
+            return expression;
+        }
     }
     var str = '';
     str += "<".concat(json.name, " ");
@@ -80,7 +95,7 @@ var blockToStencil = function (json, options) {
     }
     str += '>';
     if (json.children) {
-        str += json.children.map(function (item) { return blockToStencil(item, options); }).join('\n');
+        str += json.children.map(function (item) { return blockToStencil(item, options, true); }).join('\n');
     }
     str += "</".concat(json.name, ">");
     return str;
@@ -132,7 +147,7 @@ var componentToStencil = function (_options) {
                 console.warn('Could not format css', err);
             }
         }
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    import { Component, Prop, h, State, Fragment } from '@stencil/core';\n\n    @Component({\n      tag: '", "',\n      ", "\n    })\n    export default class ", " {\n    \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return (", "\n        \n          ", "\n\n        ", ")\n      }\n    }\n  "], ["\n    ", "\n\n    import { Component, Prop, h, State, Fragment } from '@stencil/core';\n\n    @Component({\n      tag: '"
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    import { Component, Prop, h, State, Fragment } from '@stencil/core';\n\n    @Component({\n      tag: '", "',\n      ", "\n    })\n    export default class ", " {\n\n      ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n      render() {\n        return (", "\n\n          ", "\n\n        ", ")\n      }\n    }\n  "], ["\n    ", "\n\n    import { Component, Prop, h, State, Fragment } from '@stencil/core';\n\n    @Component({\n      tag: '"
             /**
              * You can set the tagName in your Mitosis component as
              *
@@ -142,7 +157,7 @@ var componentToStencil = function (_options) {
              *
              *    export default function ...
              */
-            , "',\n      ", "\n    })\n    export default class ", " {\n    \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return (", "\n        \n          ", "\n\n        ", ")\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
+            , "',\n      ", "\n    })\n    export default class ", " {\n\n      ", "\n\n        ", "\n        ", "\n\n        ", "\n        ", "\n        ", "\n\n      render() {\n        return (", "\n\n          ", "\n\n        ", ")\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
             explicitImportFileExtension: options.explicitImportFileExtension,
             component: json,
             target: 'stencil',
@@ -166,7 +181,7 @@ var componentToStencil = function (_options) {
             ? ''
             : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
             ? ''
-            : json.hooks.onUpdate.map(function (hook) { return "componentDidUpdate() { ".concat(processBinding(hook.code), " }"); }), wrap ? '<>' : '', json.children.map(function (item) { return blockToStencil(item, options); }).join('\n'), wrap ? '</>' : '');
+            : json.hooks.onUpdate.map(function (hook) { return "componentDidUpdate() { ".concat(processBinding(hook.code), " }"); }), wrap ? '<>' : '', json.children.map(function (item) { return blockToStencil(item, options, true); }).join('\n'), wrap ? '</>' : '');
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }

package/dist/src/parsers/jsx/element-parser.d.ts

@@ -4,5 +4,5 @@ declare const types: typeof babel.types;
 /**
  * Parses a JSX element into a MitosisNode.
  */
-export declare const jsxElementToJson: (node: babel.types.JSXElement | babel.types.JSXText | babel.types.JSXFragment | babel.types.JSXExpressionContainer | babel.types.JSXSpreadChild) => MitosisNode | null;
+export declare const jsxElementToJson: (node: babel.types.Expression | babel.types.JSX) => MitosisNode | null;
 export {};

package/dist/src/parsers/jsx/element-parser.js

@@ -68,77 +68,95 @@ var jsxElementToJson = function (node) {
             },
         });
     }
+    if (types.isJSXEmptyExpression(node)) {
+        return null;
+    }
     if (types.isJSXExpressionContainer(node)) {
-        if (types.isJSXEmptyExpression(node.expression)) {
-            return null;
-        }
-        // foo.map -> <For each={foo}>...</For>
-        if (types.isCallExpression(node.expression) ||
-            types.isOptionalCallExpression(node.expression)) {
-            var callback = node.expression.arguments[0];
-            if (types.isArrowFunctionExpression(callback)) {
-                if (types.isIdentifier(callback.params[0])) {
-                    var forArguments = getForArguments(callback.params);
-                    return (0, create_mitosis_node_1.createMitosisNode)({
-                        name: 'For',
-                        bindings: {
-                            each: (0, bindings_1.createSingleBinding)({
-                                code: (0, generator_1.default)(node.expression.callee)
-                                    .code // Remove .map or potentially ?.map
-                                    .replace(/\??\.map$/, ''),
-                            }),
-                        },
-                        scope: forArguments,
-                        children: [(0, exports.jsxElementToJson)(callback.body)],
-                    });
-                }
-            }
-        }
-        // {foo && <div />} -> <Show when={foo}>...</Show>
-        if (types.isLogicalExpression(node.expression)) {
-            if (node.expression.operator === '&&') {
+        return (0, exports.jsxElementToJson)(node.expression);
+    }
+    if (types.isCallExpression(node) || types.isOptionalCallExpression(node)) {
+        var callback = node.arguments[0];
+        if (types.isArrowFunctionExpression(callback)) {
+            if (types.isIdentifier(callback.params[0])) {
+                var forArguments = getForArguments(callback.params);
                 return (0, create_mitosis_node_1.createMitosisNode)({
-                    name: 'Show',
+                    name: 'For',
                     bindings: {
-                        when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.expression.left).code }),
+                        each: (0, bindings_1.createSingleBinding)({
+                            code: (0, generator_1.default)(node.callee)
+                                .code // Remove .map or potentially ?.map
+                                .replace(/\??\.map$/, ''),
+                        }),
                     },
-                    children: [(0, exports.jsxElementToJson)(node.expression.right)],
+                    scope: forArguments,
+                    children: [(0, exports.jsxElementToJson)(callback.body)],
                 });
             }
-            else {
-                // TODO: good warning system for unsupported operators
-            }
         }
-        // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
-        if (types.isConditionalExpression(node.expression)) {
+    }
+    else if (types.isLogicalExpression(node)) {
+        // {foo && <div />} -> <Show when={foo}>...</Show>
+        if (node.operator === '&&') {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
-                meta: {
-                    else: (0, exports.jsxElementToJson)(node.expression.alternate),
-                },
                 bindings: {
-                    when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.expression.test).code }),
+                    when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.left).code }),
                 },
-                children: [(0, exports.jsxElementToJson)(node.expression.consequent)],
+                children: [(0, exports.jsxElementToJson)(node.right)],
             });
         }
-        // TODO: support {foo ? bar : baz}
+        else {
+            // TODO: good warning system for unsupported operators
+        }
+    }
+    else if (types.isConditionalExpression(node)) {
+        // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
+        var child = (0, exports.jsxElementToJson)(node.consequent);
         return (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'Show',
+            meta: {
+                else: (0, exports.jsxElementToJson)(node.alternate),
+            },
             bindings: {
-                _text: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.expression).code }),
+                when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.test).code }),
             },
+            children: child === null ? [] : [child],
         });
     }
-    if (types.isJSXFragment(node)) {
+    else if (types.isJSXFragment(node)) {
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Fragment',
             children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
         });
     }
-    // TODO: support spread attributes
-    if (types.isJSXSpreadChild(node)) {
+    else if (types.isJSXSpreadChild(node)) {
+        // TODO: support spread attributes
         return null;
     }
+    else if (types.isNullLiteral(node) || types.isBooleanLiteral(node)) {
+        return null;
+    }
+    else if (types.isNumericLiteral(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            properties: {
+                _text: String(node.value),
+            },
+        });
+    }
+    else if (types.isStringLiteral(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            properties: {
+                _text: node.value,
+            },
+        });
+    }
+    if (!types.isJSXElement(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            bindings: {
+                _text: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node).code }),
+            },
+        });
+    }
     var nodeName = (0, generator_1.default)(node.openingElement.name).code;
     if (nodeName === 'Show') {
         var whenAttr = node.openingElement.attributes.find(function (item) { return types.isJSXAttribute(item) && item.name.name === 'when'; });

package/dist/src/parsers/jsx/function-parser.js

@@ -322,7 +322,10 @@ var componentFunctionToJson = function (node, context) {
     if (theReturn) {
         var value = theReturn.argument;
         if (types.isJSXElement(value) || types.isJSXFragment(value)) {
-            children.push((0, element_parser_1.jsxElementToJson)(value));
+            var jsxElement = (0, element_parser_1.jsxElementToJson)(value);
+            if (jsxElement) {
+                children.push(jsxElement);
+            }
         }
     }
     var localExports = context.builder.component.exports;

package/package.json

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