@builder.io/mitosis 0.0.145 → 0.0.147

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

@@ -59,13 +59,13 @@ var NODE_MAPPERS = {
                 return '';
             }
             var children = (0, helpers_1.processBinding)('props.children', options);
-            return "{".concat(children, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}");
+            return "<>{".concat(children, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
         }
         var slotProp = (0, helpers_1.processBinding)(slotName, options).replace('name=', '');
         if (!slotProp.startsWith('props.')) {
             slotProp = "props.".concat(slotProp);
         }
-        return "{".concat(slotProp, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}");
+        return "<>{".concat(slotProp, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
     },
     Fragment: function (json, options, component) {
         var wrap = (0, helpers_1.wrapInFragment)(json);
@@ -85,7 +85,12 @@ var NODE_MAPPERS = {
     },
     Show: function (json, options, component) {
         var _a;
-        var wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        var wrap = (0, helpers_1.wrapInFragment)(json) ||
+            (0, is_root_text_node_1.isRootTextNode)(json) ||
+            component.children[0] === json ||
+            // 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
@@ -123,6 +128,7 @@ var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
     } }, ATTTRIBUTE_MAPPERS);
 var blockToReact = function (json, options, component, parentSlots) {
     var _a, _b, _c;
+    if (parentSlots === void 0) { parentSlots = []; }
     if (NODE_MAPPERS[json.name]) {
         return NODE_MAPPERS[json.name](json, options, component, parentSlots);
     }
@@ -219,7 +225,7 @@ var blockToReact = function (json, options, component, parentSlots) {
     if (json.children) {
         childrenNodes = json.children
             .map(function (item) { return (0, exports.blockToReact)(item, options, component, needsToRenderSlots); })
-            .join('\n');
+            .join('');
     }
     if (needsToRenderSlots.length) {
         needsToRenderSlots.forEach(function (_a) {

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

@@ -223,7 +223,7 @@ var componentToReact = function (reactOptions) {
                     .replace(/;\n\nimport\s/g, ';\nimport ');
             }
             catch (err) {
-                console.error('Format error for file:');
+                console.error('Format error for file:', str);
                 throw err;
             }
         }

package/dist/src/generators/vue/compositionApi.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCompositionApiScript = void 0;
 var dedent_1 = require("../../helpers/dedent");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var helpers_1 = require("./helpers");
@@ -93,7 +92,7 @@ function generateCompositionApiScript(component, options, template, props, onUpd
             code: hook.deps || '',
             options: options,
             json: component,
-        }), ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " }, {immediate: true})");
+        }), ", () => { ").concat(hook.code, " }, {immediate: true})");
     }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
     return str;
 }

package/dist/src/helpers/filter-empty-text-nodes.d.ts

@@ -1,2 +1,3 @@
 import { MitosisNode } from '../types/mitosis-node';
+export declare const isEmptyTextNode: (node: MitosisNode) => boolean;
 export declare const filterEmptyTextNodes: (node: MitosisNode) => boolean;

package/dist/src/helpers/filter-empty-text-nodes.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterEmptyTextNodes = void 0;
-var filterEmptyTextNodes = function (node) {
-    return !(typeof node.properties._text === 'string' && !node.properties._text.trim().length);
+exports.filterEmptyTextNodes = exports.isEmptyTextNode = void 0;
+var isEmptyTextNode = function (node) {
+    return typeof node.properties._text === 'string' && node.properties._text.trim().length === 0;
 };
+exports.isEmptyTextNode = isEmptyTextNode;
+var filterEmptyTextNodes = function (node) { return !(0, exports.isEmptyTextNode)(node); };
 exports.filterEmptyTextNodes = filterEmptyTextNodes;

package/dist/src/helpers/is-root-text-node.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTextNode = exports.isRootTextNode = void 0;
 function isRootTextNode(json) {
     var firstChild = json.children[0];
-    return Boolean(firstChild && isTextNode(firstChild));
+    return Boolean(json.children.length === 1 && firstChild && isTextNode(firstChild));
 }
 exports.isRootTextNode = isRootTextNode;
 function isTextNode(node) {

package/dist/src/parsers/builder/builder.d.ts

@@ -11,6 +11,7 @@ type BuilderToMitosisOptions = {
     };
     includeBuilderExtras?: boolean;
     preserveTextBlocks?: boolean;
+    includeSpecialBindings?: boolean;
 };
 export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
 /**

package/dist/src/parsers/builder/builder.js

@@ -417,6 +417,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     var _a;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (_internalOptions === void 0) { _internalOptions = {}; }
+    var _x = options.includeSpecialBindings, includeSpecialBindings = _x === void 0 ? true : _x;
     if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
         block.component.name = 'Fragment';
     }
@@ -501,9 +502,9 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             }
             var useKey = key.replace(/^(component\.)?options\./, '');
             if (!useKey.includes('.')) {
-                bindings[useKey] = {
+                bindings[useKey] = (0, bindings_1.createSingleBinding)({
                     code: blockBindings[key].code || blockBindings[key],
-                };
+                });
             }
             else if (useKey.includes('style') && useKey.includes('.')) {
                 var styleProperty = useKey.split('.')[1];
@@ -538,19 +539,18 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                     }
                     return true;
                 })
-                    .map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); });
-                children.push({
-                    '@type': '@builder.io/mitosis/node',
-                    name: 'Slot',
-                    meta: {},
-                    scope: {},
-                    bindings: {},
-                    properties: { name: key },
-                    children: childrenElements,
+                    .map(function (item) {
+                    var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
+                    // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
+                    // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
+                    // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
+                    return (0, __1.blockToMitosis)(node, {}, null);
                 });
+                var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
+                bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
             }
             else {
-                bindings[key] = { code: json5_1.default.stringify(value) };
+                bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
             }
         }
     }
@@ -564,19 +564,19 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         if (binding.startsWith('component.options') || binding.startsWith('options')) {
             var value = blockBindings[binding];
             var useKey = binding.replace(/^(component\.options\.|options\.)/, '');
-            bindings[useKey] = { code: value };
+            bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: value });
         }
     }
     var node = (0, create_mitosis_node_1.createMitosisNode)({
         name: ((_r = (_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === null || _r === void 0 ? void 0 : _r.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
-        properties: __assign(__assign(__assign({}, (block.component && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
+        properties: __assign(__assign(__assign({}, (block.component && includeSpecialBindings && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
         bindings: __assign(__assign(__assign(__assign({}, bindings), actionBindings), (styleString && {
-            style: { code: styleString },
+            style: (0, bindings_1.createSingleBinding)({ code: styleString }),
         })), (css &&
             Object.keys(css).length && {
-            css: { code: JSON.stringify(css) },
+            css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
         })),
     });
     // Has single text node child

package/dist/src/parsers/jsx/jsx.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseJsx = void 0;
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var traverse_nodes_1 = require("../../helpers/traverse-nodes");
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
@@ -234,6 +236,9 @@ function parseJsx(jsx, _options) {
             mitosisComponent.context.get[context].type = 'reactive';
         });
     }
+    (0, traverse_nodes_1.traverseNodes)(mitosisComponent, function (node) {
+        node.children = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+    });
     return mitosisComponent;
 }
 exports.parseJsx = parseJsx;

package/package.json

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