@builder.io/mitosis 0.3.5 → 0.3.6

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.5",
+  "version": "0.3.6",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {