@builder.io/mitosis 0.5.7 → 0.5.9

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

@@ -162,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);
     },
 };
@@ -365,6 +403,20 @@ const componentToBuilder = (options = {}) => ({ component }) => {
             if (value) {
                 (0, lodash_1.set)(el, 'component.options.symbol.content', value);
             }
+            if (el.bindings) {
+                for (const [key, value] of Object.entries(el.bindings)) {
+                    if (value.match(/\n|;/)) {
+                        if (!el.code) {
+                            el.code = {};
+                        }
+                        if (!el.code.bindings) {
+                            el.code.bindings = {};
+                        }
+                        el.code.bindings[key] = value;
+                        el.bindings[key] = ` return ${value}`;
+                    }
+                }
+            }
         }
     });
     return result;

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

@@ -27,7 +27,7 @@ const isValidAttributeName = (str) => {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
 const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const options = {
         format: exports.DEFAULT_FORMAT,
         ...toMitosisOptions,
@@ -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,12 +113,12 @@ 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;
-        if ((_g = json.slots) === null || _g === void 0 ? void 0 : _g[key]) {
+        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 (((_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.type) === 'spread') {
-            str += ` {...(${(_j = json.bindings[key]) === null || _j === void 0 ? void 0 : _j.code})} `;
+        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})} `;
         }
         else if (key.startsWith('on')) {
             str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;

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