@builder.io/mitosis 0.5.6 → 0.5.8

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

@@ -85,7 +85,6 @@ const componentMappers = {
         ];
         block.children.forEach((item) => {
             var _a;
-            console.log('item', item);
             if (item.component && validFakeNodeNames.includes((_a = item.component) === null || _a === void 0 ? void 0 : _a.name)) {
                 let query;
                 if (item.component.options.query) {
@@ -163,18 +162,56 @@ const componentMappers = {
         }, options);
     },
     Show(node, options) {
-        var _a;
+        var _a, _b, _c;
+        const elseCase = node.meta.else;
+        const children = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+        const showNode = children.length > 0
+            ? el({
+                // TODO: the reverse mapping for this
+                component: {
+                    name: 'Core:Fragment',
+                },
+                bindings: {
+                    show: (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code,
+                },
+                children: children.map((node) => (0, exports.blockToBuilder)(node, options)),
+            }, options)
+            : undefined;
+        const elseNode = elseCase && (0, filter_empty_text_nodes_1.filterEmptyTextNodes)(elseCase)
+            ? el({
+                // TODO: the reverse mapping for this
+                component: {
+                    name: 'Core:Fragment',
+                },
+                bindings: {
+                    hide: (_b = node.bindings.when) === null || _b === void 0 ? void 0 : _b.code,
+                },
+                children: [(0, exports.blockToBuilder)(elseCase, options)],
+            }, options)
+            : undefined;
+        if (elseNode && showNode) {
+            return el({
+                component: {
+                    name: 'Core:Fragment',
+                },
+                children: [showNode, elseNode],
+            }, options);
+        }
+        else if (showNode) {
+            return showNode;
+        }
+        else if (elseNode) {
+            return elseNode;
+        }
         return el({
             // TODO: the reverse mapping for this
             component: {
                 name: 'Core:Fragment',
             },
             bindings: {
-                show: (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code,
+                show: (_c = node.bindings.when) === null || _c === void 0 ? void 0 : _c.code,
             },
-            children: node.children
-                .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-                .map((node) => (0, exports.blockToBuilder)(node, options)),
+            children: [],
         }, options);
     },
 };
@@ -202,7 +239,7 @@ function tryFormat(code) {
     return str;
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
@@ -252,16 +289,21 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
                 componentOptions[key] = parsed;
             }
             else {
-                builderBindings[`component.options.${key}`] = bindings[key].code;
+                if (!((_f = json.slots) === null || _f === void 0 ? void 0 : _f[key])) {
+                    builderBindings[`component.options.${key}`] = bindings[key].code;
+                }
             }
         }
     }
-    const hasCss = !!((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
+    for (const key in json.slots) {
+        componentOptions[key] = json.slots[key].map((node) => (0, exports.blockToBuilder)(node, options));
+    }
+    const hasCss = !!((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
     let responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        const cssRules = json5_1.default.parse((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
+        const cssRules = json5_1.default.parse((_h = bindings.css) === null || _h === void 0 ? void 0 : _h.code);
         const cssRuleKeys = Object.keys(cssRules);
         for (const ruleKey of cssRuleKeys) {
             const mediaQueryMatch = ruleKey.match(media_sizes_1.mediaQueryRegex);
@@ -285,7 +327,9 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     }
     if (thisIsComponent) {
         for (const key in json.bindings) {
-            builderBindings[`component.options.${key}`] = json.bindings[key].code;
+            if (!((_j = json.slots) === null || _j === void 0 ? void 0 : _j[key])) {
+                builderBindings[`component.options.${key}`] = json.bindings[key].code;
+            }
         }
     }
     return el({

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

@@ -29,7 +29,9 @@ export default class ${context.name}Context {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

package/dist/src/generators/context/helpers/context-with-symbol-key.js

@@ -22,7 +22,9 @@ const getContextWithSymbolKey = (options) => ({ context }) => {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

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

@@ -18,7 +18,9 @@ const contextToQwik = (options = {}) => ({ context }) => {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

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

@@ -19,7 +19,9 @@ const contextToReact = (options = { typescript: false, preact: false }) => ({ co
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

package/dist/src/generators/context/rsc.js

@@ -21,7 +21,9 @@ const contextToRsc = (options = {}) => ({ context }) => {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

package/dist/src/generators/context/solid.js

@@ -19,7 +19,9 @@ const contextToSolid = (options = {}) => ({ context }) => {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

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

@@ -33,7 +33,9 @@ export default {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

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

@@ -41,19 +41,29 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
             prettier: options.prettier,
         }, component, insideJsx);
     }
-    if (options.nativeConditionals && (0, mitosis_node_1.checkIsShowNode)(json)) {
+    if ((0, mitosis_node_1.checkIsShowNode)(json)) {
         const when = (_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
         const elseCase = json.meta.else;
-        const needsWrapper = json.children.length !== 1;
-        const renderChildren = `${needsWrapper ? '<>' : ''}
-      ${json.children
-            .map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
-            .join('\n')}
-  ${needsWrapper ? '</>' : ''}`;
-        const renderElse = elseCase && (0, is_mitosis_node_1.isMitosisNode)(elseCase)
-            ? (0, exports.blockToMitosis)(elseCase, options, component, false)
-            : 'null';
-        return `${insideJsx ? '{' : ''}(${when}) ? ${renderChildren} : ${renderElse}${insideJsx ? '}' : ''}`;
+        if (options.nativeConditionals) {
+            const needsWrapper = json.children.length !== 1;
+            const renderChildren = `${needsWrapper ? '<>' : ''}
+        ${json.children
+                .map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
+                .join('\n')}
+    ${needsWrapper ? '</>' : ''}`;
+            const renderElse = elseCase && (0, is_mitosis_node_1.isMitosisNode)(elseCase)
+                ? (0, exports.blockToMitosis)(elseCase, options, component, false)
+                : 'null';
+            return `${insideJsx ? '{' : ''}(${when}) ? ${renderChildren} : ${renderElse}${insideJsx ? '}' : ''}`;
+        }
+        else {
+            const elseHandler = elseCase
+                ? ` else={${(0, exports.blockToMitosis)(elseCase, options, component, false)}}`
+                : '';
+            return `<Show when={${when}}${elseHandler}>
+  ${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component, true)).join('\n')}
+</Show>`;
+        }
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         const needsWrapper = json.children.length !== 1;
@@ -66,7 +76,6 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
                 .join('\n')}
       ${needsWrapper ? '</>' : ''}
       ))${insideJsx ? '}' : ''}`;
-            console.log(a);
             return a;
         }
         return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
@@ -77,10 +86,20 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     </For>`;
     }
     if (json.properties._text) {
-        return json.properties._text;
+        if (insideJsx) {
+            return `${json.properties._text}`;
+        }
+        else {
+            return `<>${json.properties._text}</>`;
+        }
     }
     if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
-        return `{${(_e = json.bindings._text) === null || _e === void 0 ? void 0 : _e.code}}`;
+        if (insideJsx) {
+            return `{${json.bindings._text.code}}`;
+        }
+        else {
+            return `${json.bindings._text.code}`;
+        }
     }
     let str = '';
     str += `<${json.name} `;
@@ -94,7 +113,10 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         }
     }
     for (const key in json.bindings) {
-        const value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
+        const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
+        if ((_f = json.slots) === null || _f === void 0 ? void 0 : _f[key]) {
+            continue;
+        }
         if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
             str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
         }
@@ -110,6 +132,20 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
             }
         }
     }
+    for (const key in json.slots) {
+        const value = json.slots[key];
+        str += ` ${key}={`;
+        if (value.length > 1) {
+            str += '<>';
+        }
+        str += json.slots[key]
+            .map((item) => (0, exports.blockToMitosis)(item, options, component, insideJsx))
+            .join('\n');
+        if (value.length > 1) {
+            str += '</>';
+        }
+        str += `}`;
+    }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
@@ -228,7 +264,9 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
             });
         }
         catch (err) {
-            console.error('Format error for file:', str, JSON.stringify(json, null, 2));
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str, JSON.stringify(json, null, 2));
+            }
             throw err;
         }
     }

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

@@ -204,7 +204,9 @@ const componentToReact = (reactOptions = {}) => ({ component, path }) => {
                 .replace(/;\n\nimport\s/g, ';\nimport ');
         }
         catch (err) {
-            console.error('Format error for file:', str);
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
             throw err;
         }
     }

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

@@ -1,8 +1,4 @@
 import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToSolidOptions } from './types';
-export declare const blockToSolid: ({ json, options, component, }: {
-    json: MitosisNode;
-    options: ToSolidOptions;
-    component: MitosisComponent;
-}) => string;
+export declare const blockToSolid: (json: MitosisNode, component: MitosisComponent, options: ToSolidOptions, insideJsx: boolean) => string;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSolid = void 0;
 const babel_transform_1 = require("../../helpers/babel-transform");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const typescript_1 = require("../../helpers/typescript");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const core_1 = require("@babel/core");
@@ -17,24 +18,34 @@ const transformAttributeName = (name) => {
         return ATTTRIBUTE_MAPPERS[name];
     return name;
 };
-const blockToSolid = ({ json, options, component, }) => {
-    var _a, _b;
-    if (json.properties._text) {
-        return json.properties._text;
+const blockToSolid = (json, component, options, insideJsx) => {
+    var _a, _b, _c;
+    if (insideJsx) {
+        if (json.properties._text) {
+            return json.properties._text;
+        }
+        if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+            return `{${json.bindings._text.code}}`;
+        }
     }
-    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        return `{${json.bindings._text.code}}`;
+    else {
+        if (json.properties._text) {
+            return `<>${json.properties._text}</>`;
+        }
+        if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
+            return `${json.bindings._text.code}`;
+        }
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         const needsWrapper = json.children.length !== 1;
         // The SolidJS `<For>` component has a special index() signal function.
         // https://www.solidjs.com/docs/latest#%3Cfor%3E
-        return `<For each={${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}}>
+        return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
     {(${json.scope.forName}, _index) => {
       const ${json.scope.indexName || 'index'} = _index();
       return ${needsWrapper ? '<>' : ''}${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((child) => (0, exports.blockToSolid)({ component, json: child, options }))}}}
+            .map((child) => (0, exports.blockToSolid)(child, component, options, needsWrapper))}}}
       ${needsWrapper ? '</>' : ''}
     </For>`;
     }
@@ -45,8 +56,8 @@ const blockToSolid = ({ json, options, component, }) => {
     else {
         str += `<${json.name} `;
     }
-    if (json.name === 'Show' && json.meta.else) {
-        str += `fallback={${(0, exports.blockToSolid)({ component, json: json.meta.else, options })}}`;
+    if (json.name === 'Show' && (0, is_mitosis_node_1.isMitosisNode)(json.meta.else)) {
+        str += `fallback={${(0, exports.blockToSolid)(json.meta.else, component, options, false)}}`;
     }
     const classString = (0, styles_1.collectClassString)(json, options);
     if (classString) {
@@ -106,7 +117,7 @@ const blockToSolid = ({ json, options, component, }) => {
     if (json.children) {
         str += json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((item) => (0, exports.blockToSolid)({ component, json: item, options }))
+            .map((item) => (0, exports.blockToSolid)(item, component, options, true))
             .join('\n');
     }
     if (json.name === 'Fragment') {

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

@@ -231,7 +231,7 @@ const componentToSolid = (passedOptions) => ({ component }) => {
       return (${addWrapper ? '<>' : ''}
         ${json.children
         .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-        .map((item) => (0, blocks_1.blockToSolid)({ component, json: item, options }))
+        .map((item) => (0, blocks_1.blockToSolid)(item, component, options, addWrapper))
         .join('\n')}
         ${options.stylesType === 'style-tag' && css && css.trim().length > 4
         ? `<style>{\`${css}\`}</style>`

package/package.json

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