@builder.io/mitosis 0.6.7 → 0.7.0

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

@@ -461,7 +461,7 @@ function isGlobalStyle(key) {
         key.startsWith('@'));
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         const element = mapper(json, options);
@@ -562,13 +562,6 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         }
         delete json.bindings.css;
     }
-    if (thisIsComponent) {
-        for (const key in json.bindings) {
-            if (!((_o = json.slots) === null || _o === void 0 ? void 0 : _o[key])) {
-                builderBindings[`component.options.${key}`] = json.bindings[key].code;
-            }
-        }
-    }
     const element = el({
         tagName: thisIsComponent ? undefined : json.name,
         ...(hasCss && {

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

@@ -6,6 +6,7 @@ const helpers_1 = require("../../generators/stencil/helpers");
 const collect_class_string_1 = require("../../generators/stencil/helpers/collect-class-string");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const for_1 = require("../../helpers/nodes/for");
+const transform_to_jsx_1 = require("../../helpers/transform-to-jsx");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const blockToStencil = ({ json, options = {}, insideJsx, rootRef, childComponents, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -78,7 +79,8 @@ const blockToStencil = ({ json, options = {}, insideJsx, rootRef, childComponent
     }
     for (const key in json.properties) {
         const value = json.properties[key];
-        str += ` ${key}="${value}" `;
+        // Stencil uses ´htmlFor´ (JSX) instead of ´for´ (HTML)
+        str += ` ${(0, transform_to_jsx_1.transformAttributeToJSX)(key)}="${value}" `;
     }
     for (const key in json.bindings) {
         const { code, arguments: cusArgs = [], type } = json.bindings[key];

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

@@ -7,6 +7,7 @@ const helpers_1 = require("../../generators/stencil/helpers");
 const get_code_processor_plugins_1 = require("../../generators/stencil/plugins/get-code-processor-plugins");
 const dash_case_1 = require("../../helpers/dash-case");
 const dedent_1 = require("../../helpers/dedent");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
 const get_props_1 = require("../../helpers/get-props");
@@ -21,168 +22,187 @@ const plugins_1 = require("../../modules/plugins");
 const standalone_1 = require("prettier/standalone");
 const componentToStencil = (_options = {
     typescript: true, // Stencil is uses .tsx always
-}) => ({ component }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    let json = (0, fast_clone_1.fastClone)(component);
-    const options = (0, merge_options_1.initializeOptions)({
-        target: 'stencil',
-        component,
-        defaults: _options,
-    });
-    if (options.plugins) {
-        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
-    }
-    (0, map_refs_1.mapRefs)(json, (refName) => `this.${refName}`);
-    let css = (0, collect_css_1.collectCss)(json);
-    const props = Array.from((0, get_props_1.getProps)(json));
-    const events = props.filter((prop) => (0, helpers_1.isEvent)(prop));
-    const defaultProps = json.defaultProps;
-    const childComponents = (0, get_child_components_1.getChildComponents)(json);
-    const processBindingOptions = { events };
-    options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
-    if (options.plugins) {
-        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
-    }
-    (0, strip_meta_properties_1.stripMetaProperties)(json);
-    const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-        format: 'class',
-        data: true,
-        functions: false,
-        getters: false,
-        keyPrefix: '@State() ',
-    });
-    const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-        format: 'class',
-        data: false,
-        functions: true,
-        getters: true,
-    });
-    let refs = json.refs
-        ? Object.entries(json.refs)
-            .map(([key, value]) => { var _a; return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'};`; })
-            .join('\n')
-        : '';
-    const wrap = (0, helpers_1.needsWrap)(json.children);
-    const withAttributePassing = !wrap && (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
-    const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
-    if (withAttributePassing && !refs.includes(rootRef)) {
-        refs += `\nprivate ${rootRef}!: HTMLElement;`;
-    }
-    if (options.prettier !== false) {
-        try {
-            css = (0, standalone_1.format)(css, {
-                parser: 'css',
-                plugins: [require('prettier/parser-postcss')],
-            });
+}) => {
+    return ({ component }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let json = (0, fast_clone_1.fastClone)(component);
+        const options = (0, merge_options_1.initializeOptions)({
+            target: 'stencil',
+            component,
+            defaults: _options,
+        });
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
         }
-        catch (err) {
-            console.warn('Could not format css', err);
+        (0, map_refs_1.mapRefs)(json, (refName) => `this.${refName}`);
+        let css = (0, collect_css_1.collectCss)(json);
+        let props = Array.from((0, get_props_1.getProps)(json));
+        const events = props.filter((prop) => (0, helpers_1.isEvent)(prop));
+        const defaultProps = json.defaultProps;
+        const childComponents = (0, get_child_components_1.getChildComponents)(json);
+        const processBindingOptions = { events };
+        props = props
+            .map((prop) => {
+            // Stencil adds "on" to every `@Event` so we need to remove "on" from event props
+            // https://stenciljs.com/docs/events#using-events-in-jsx
+            if ((0, helpers_1.isEvent)(prop)) {
+                return (0, event_handlers_1.getEventNameWithoutOn)(prop);
+            }
+            return prop;
+        })
+            .filter((prop) => {
+            // Stencil doesn't need children as a prop
+            return prop !== 'children';
+        });
+        options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
         }
-    }
-    let tagName = (0, helpers_1.getTagName)(json.name, options);
-    if ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.tagName) {
-        // Deprecated option, we shouldn't use this, instead change the name of your Mitosis component
-        tagName = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName;
-    }
-    const noDependencyOnUpdateHooks = (_d = (_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter((hook) => !hook.deps)) !== null && _d !== void 0 ? _d : [];
-    /*
-     * We want to create a function for every onUpdate hook that has dependencies.
-     * We call the function once in "componentDidLoad"
-     * And we create "Watch" decorators for every dependency
-     */
-    const dependencyOnUpdateHooks = (_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter((hook) => hook.deps)) !== null && _f !== void 0 ? _f : [];
-    const coreImports = (0, helpers_1.getStencilCoreImportsAsString)({
-        wrap,
-        events,
-        props,
-        dataString,
-        watch: Boolean(dependencyOnUpdateHooks === null || dependencyOnUpdateHooks === void 0 ? void 0 : dependencyOnUpdateHooks.length),
-    });
-    let str = (0, dedent_1.dedent) `
-    ${(0, helpers_1.getImports)(json, options, childComponents)}
-    
-    import { ${coreImports} } from '@stencil/core';
-    
-    @Component({
-      tag: '${tagName}',
-      ${((_g = json.meta.useMetadata) === null || _g === void 0 ? void 0 : _g.isAttachedToShadowDom) ? 'shadow: true,' : ''}
-      ${css.length
-        ? `styles: \`
-        ${(0, indent_1.indent)(css, 8)}\`,`
-        : ''}
-    })
-    export class ${json.name} {
-        ${refs}
-        ${(0, helpers_1.getPropsAsCode)(props, json, defaultProps)}
-        ${dataString}
-        ${methodsString}
-        ${(0, helpers_1.getExportsAndLocal)(json)}
-        ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
-        
-        ${dependencyOnUpdateHooks
-        .map((hook, index) => {
-        return `
-          watch${index}Fn() { 
-            ${hook.code} 
-          }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: true,
+            functions: false,
+            getters: false,
+            keyPrefix: '@State() ',
+        });
+        const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: true,
+            getters: true,
+        });
+        let refs = json.refs
+            ? Object.entries(json.refs)
+                .map(([key, value]) => { var _a; return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'};`; })
+                .join('\n')
+            : '';
+        const wrap = (0, helpers_1.needsWrap)(json.children);
+        const withAttributePassing = !wrap && (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
+        const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
+        if (withAttributePassing && !refs.includes(rootRef)) {
+            refs += `\nprivate ${rootRef}!: HTMLElement;`;
+        }
+        if (options.prettier !== false) {
+            try {
+                css = (0, standalone_1.format)(css, {
+                    parser: 'css',
+                    plugins: [require('prettier/parser-postcss')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format css', err);
+            }
+        }
+        let tagName = (0, helpers_1.getTagName)(json.name, options);
+        if ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.tagName) {
+            // Deprecated option, we shouldn't use this, instead change the name of your Mitosis component
+            tagName = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName;
+        }
+        const noDependencyOnUpdateHooks = (_d = (_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter((hook) => !hook.deps)) !== null && _d !== void 0 ? _d : [];
+        /*
+         * We want to create a function for every onUpdate hook that has dependencies.
+         * We call the function once in "componentDidLoad"
+         * And we create "Watch" decorators for every dependency
+         */
+        const dependencyOnUpdateHooks = (_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter((hook) => hook.deps)) !== null && _f !== void 0 ? _f : [];
+        const coreImports = (0, helpers_1.getStencilCoreImportsAsString)({
+            wrap,
+            events,
+            props,
+            dataString,
+            watch: Boolean(dependencyOnUpdateHooks === null || dependencyOnUpdateHooks === void 0 ? void 0 : dependencyOnUpdateHooks.length),
+        });
+        const propOptions = {
+            ...options.propOptions,
+            ...(_h = (_g = json.meta.useMetadata) === null || _g === void 0 ? void 0 : _g.stencil) === null || _h === void 0 ? void 0 : _h.propOptions,
+        };
+        let str = (0, dedent_1.dedent) `
+      ${(0, helpers_1.getImports)(json, options, childComponents)}
+      
+      import { ${coreImports} } from '@stencil/core';
+      
+      @Component({
+        tag: '${tagName}',
+        ${((_j = json.meta.useMetadata) === null || _j === void 0 ? void 0 : _j.isAttachedToShadowDom) ? 'shadow: true,' : ''}
+        ${css.length
+            ? `styles: \`
+          ${(0, indent_1.indent)(css, 8)}\`,`
+            : ''}
+      })
+      export class ${json.name} {
+          ${refs}
+          ${(0, helpers_1.getPropsAsCode)({ props, json, defaultProps, propOptions })}
+          ${dataString}
+          ${methodsString}
+          ${(0, helpers_1.getExportsAndLocal)(json)}
+          ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
           
-          ${(0, helpers_1.getDepsAsArray)(hook.deps)
-            .map((dep) => `@Watch("${dep}")`)
+          ${dependencyOnUpdateHooks
+            .map((hook, index) => {
+            return `
+            watch${index}Fn() { 
+              ${hook.code} 
+            }
+            
+            ${(0, helpers_1.getDepsAsArray)(hook.deps)
+                .map((dep) => `@Watch("${dep}")`)
+                .join('\n')}
+              watch${index}(){
+                this.watch${index}Fn();
+              }            
+            `;
+        })
             .join('\n')}
-            watch${index}(){
-              this.watch${index}Fn();
-            }            
-          `;
-    })
-        .join('\n')}
-
-        ${`componentDidLoad() { 
-            ${withAttributePassing
-        ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
-        : ''}
-            ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
-            ${dependencyOnUpdateHooks
-        .map((_, index) => `this.watch${index}Fn();`)
-        .join('\n')}
-            }`}
-        ${!((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code)
-        ? ''
-        : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
-        ${noDependencyOnUpdateHooks.length
-        ? `componentDidUpdate() { ${noDependencyOnUpdateHooks
-            .map((hook) => hook.code)
-            .join('\n')} }`
-        : ''}
-
-      render() {
-        return (${wrap ? '<Host>' : ''}
-
-          ${json.children
-        .map((item) => (0, blocks_1.blockToStencil)({
-        json: item,
-        options,
-        insideJsx: true,
-        childComponents,
-        rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
-    }))
-        .join('\n')}
-
-        ${wrap ? '</Host>' : ''})
+  
+          ${`componentDidLoad() { 
+              ${withAttributePassing
+            ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
+            : ''}
+              ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
+              ${dependencyOnUpdateHooks
+            .map((_, index) => `this.watch${index}Fn();`)
+            .join('\n')}
+              }`}
+          ${!((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code)
+            ? ''
+            : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
+          ${noDependencyOnUpdateHooks.length
+            ? `componentDidUpdate() { ${noDependencyOnUpdateHooks
+                .map((hook) => hook.code)
+                .join('\n')} }`
+            : ''}
+  
+        render() {
+          return (${wrap ? '<Host>' : ''}
+  
+            ${json.children
+            .map((item) => (0, blocks_1.blockToStencil)({
+            json: item,
+            options,
+            insideJsx: true,
+            childComponents,
+            rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+        }))
+            .join('\n')}
+  
+          ${wrap ? '</Host>' : ''})
+        }
       }
-    }
-  `;
-    if (options.plugins) {
-        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
-    }
-    if (options.prettier !== false) {
-        str = (0, standalone_1.format)(str, {
-            parser: 'typescript',
-            plugins: [require('prettier/parser-typescript')],
-        });
-    }
-    if (options.plugins) {
-        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
-    }
-    return str;
+    `;
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        if (options.prettier !== false) {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                plugins: [require('prettier/parser-typescript')],
+            });
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        return str;
+    };
 };
 exports.componentToStencil = componentToStencil;

package/dist/src/generators/stencil/helpers/index.d.ts

@@ -1,4 +1,4 @@
-import { ToStencilOptions } from '../../../generators/stencil/types';
+import { StencilPropOption, ToStencilOptions } from '../../../generators/stencil/types';
 import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
 import { MitosisNode } from '../../../types/mitosis-node';
 export declare const isEvent: (key: string) => boolean;
@@ -7,7 +7,12 @@ export type ProcessBindingOptions = {
 };
 export declare const processBinding: (json: MitosisComponent, code: string, { events }: ProcessBindingOptions) => string;
 export declare const getTagName: (name: string, { prefix }: ToStencilOptions) => string;
-export declare const getPropsAsCode: (props: string[], json: MitosisComponent, defaultProps?: MitosisState | undefined) => string;
+export declare const getPropsAsCode: ({ props, propOptions, defaultProps, json, }: {
+    props: string[];
+    json: MitosisComponent;
+    defaultProps?: MitosisState | undefined;
+    propOptions: Record<string, StencilPropOption>;
+}) => string;
 /**
  * Check for root element if it needs a wrapping <Host>
  * @param children

package/dist/src/generators/stencil/helpers/index.js

@@ -14,7 +14,7 @@ const appendEmits = (str, events) => {
     let code = str;
     if (events.length) {
         for (const event of events) {
-            code = code.replaceAll(`props.${event}(`, `props.${event}.emit(`);
+            code = code.replaceAll(`props.${event}(`, `props.${(0, event_handlers_1.getEventNameWithoutOn)(event)}.emit(`);
         }
     }
     return code;
@@ -43,7 +43,7 @@ const getTagName = (name, { prefix }) => {
     return dashName;
 };
 exports.getTagName = getTagName;
-const getPropsAsCode = (props, json, defaultProps) => {
+const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => {
     const propsTypeRef = json.propsTypeRef;
     const internalTypes = json.types;
     const isInternalType = propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef));
@@ -52,6 +52,7 @@ const getPropsAsCode = (props, json, defaultProps) => {
         var _a;
         const defaultProp = defaultProps ? (_a = defaultProps[item]) === null || _a === void 0 ? void 0 : _a.code : undefined;
         const defaultPropString = defaultProp ? ` = ${defaultProp}` : '';
+        const propOption = propOptions[item];
         if ((0, exports.isEvent)(item)) {
             return `@Event() ${item}: any${defaultPropString}`;
         }
@@ -62,7 +63,7 @@ const getPropsAsCode = (props, json, defaultProps) => {
             !isInternalType
             ? `${propsTypeRef}["${item}"]`
             : 'any';
-        return `@Prop() ${item}: ${type}${defaultPropString}`;
+        return `@Prop(${propOption ? JSON.stringify(propOption) : ''}) ${item}: ${type}${defaultPropString}`;
     })
         .join(';\n');
 };

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

@@ -1,5 +1,28 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export interface ToStencilOptions extends BaseTranspilerOptions {
+export interface StencilPropOption {
+    attribute?: string;
+    mutable?: boolean;
+    reflect?: boolean;
+}
+export interface StencilPropOptions {
+    /**
+     * Add additional options for Stencil properties: https://stenciljs.com/docs/properties#prop-options.
+     * You need to map your properties you provide to the component.
+     *
+     * Example:
+     * ```tsx
+     *  propOptions: {
+     *             className: {
+     *                 attribute: 'classname',
+     *                 mutable: false,
+     *                 reflect: false,
+     *             },
+     *         }
+     * ```
+     */
+    propOptions?: Record<string, StencilPropOption>;
+}
+export interface ToStencilOptions extends BaseTranspilerOptions, StencilPropOptions {
     /**
      * Add a prefix for every component like `my`.
      * A Stencil component needs a prefix with a dash.
@@ -11,4 +34,4 @@ export interface ToStencilOptions extends BaseTranspilerOptions {
      */
     prefix?: string;
 }
-export type StencilMetadata = {};
+export type StencilMetadata = {} & StencilPropOptions;

package/dist/src/helpers/event-handlers.d.ts

@@ -1,2 +1,3 @@
 export declare const checkIsEvent: (code: string) => boolean;
+export declare const getEventNameWithoutOn: (code: string) => string;
 export declare const checkIsBindingNativeEvent: (code: string) => boolean;

package/dist/src/helpers/event-handlers.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIsBindingNativeEvent = exports.checkIsEvent = void 0;
+exports.checkIsBindingNativeEvent = exports.getEventNameWithoutOn = exports.checkIsEvent = void 0;
+const lodash_1 = require("lodash");
 const checkIsEvent = (code) => code.startsWith('on');
 exports.checkIsEvent = checkIsEvent;
+const getEventNameWithoutOn = (code) => (0, lodash_1.camelCase)(code.replace('on', ''));
+exports.getEventNameWithoutOn = getEventNameWithoutOn;
 const nativeEvents = [
     'abort',
     'animationcancel',

package/dist/src/helpers/transform-to-jsx.d.ts

@@ -0,0 +1,4 @@
+export declare const JSX_TO_HTML_ATTR: {
+    for: string;
+};
+export declare const transformAttributeToJSX: (key: string) => string;

package/dist/src/helpers/transform-to-jsx.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformAttributeToJSX = exports.JSX_TO_HTML_ATTR = void 0;
+const typescript_1 = require("../helpers/typescript");
+exports.JSX_TO_HTML_ATTR = {
+    for: 'htmlFor',
+};
+const transformAttributeToJSX = (key) => {
+    if ((0, typescript_1.objectHasKey)(exports.JSX_TO_HTML_ATTR, key))
+        return exports.JSX_TO_HTML_ATTR[key];
+    return key;
+};
+exports.transformAttributeToJSX = transformAttributeToJSX;

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

@@ -103,7 +103,7 @@ const jsxElementToJson = (node) => {
                         }),
                     },
                     scope: forArguments,
-                    children: [(0, exports.jsxElementToJson)(bodyExpression)],
+                    children: [(0, exports.jsxElementToJson)(bodyExpression)].filter(nullable_1.checkIsDefined),
                 });
             }
         }
@@ -144,7 +144,7 @@ const jsxElementToJson = (node) => {
                         }).code,
                     }),
                 },
-                children: [(0, exports.jsxElementToJson)(node.right)],
+                children: [(0, exports.jsxElementToJson)(node.right)].filter(nullable_1.checkIsDefined),
             });
         }
         else {
@@ -154,10 +154,11 @@ const jsxElementToJson = (node) => {
     else if (types.isConditionalExpression(node)) {
         // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
         const child = (0, exports.jsxElementToJson)(node.consequent);
+        const elseCase = (0, exports.jsxElementToJson)(node.alternate);
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Show',
             meta: {
-                else: (0, exports.jsxElementToJson)(node.alternate),
+                ...((0, nullable_1.checkIsDefined)(elseCase) ? { else: elseCase } : undefined),
             },
             bindings: {
                 when: (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(node.test, { compact: true }).code }),

package/package.json

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