@builder.io/mitosis 0.1.3 → 0.1.5

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

@@ -212,8 +212,24 @@ var blockToReact = function (json, options, component, parentSlots) {
         }
         else {
             if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
-                str += " ".concat(key, "={").concat(useBindingValue, "} ");
+                if (useBindingValue === 'true') {
+                    str += " ".concat(key, " ");
+                }
+                else {
+                    str += " ".concat(key, "={").concat(useBindingValue, "} ");
+                }
+            }
+        }
+    }
+    if (json.slots) {
+        for (var key in json.slots) {
+            var value = json.slots[key];
+            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 slotStringValue = reactComponents.length === 1 ? reactComponents[0] : "<>".concat(reactComponents.join('\n'), "</>");
+            str += " ".concat(key, "={").concat(slotStringValue, "} ");
         }
     }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {

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

@@ -47,7 +47,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
-var mitosis_1 = require("../../generators/mitosis");
 var symbol_processor_1 = require("../../symbols/symbol-processor");
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
@@ -496,6 +495,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     }
     var bindings = {};
     var children = [];
+    var slots = {};
     if (blockBindings) {
         for (var key in blockBindings) {
             if (key === 'css') {
@@ -528,15 +528,12 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         for (var key in block.component.options) {
             var value = block.component.options[key];
             var valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
-            var transformBldrElementToBinding = function (item) {
+            var transformBldrElementToMitosisNode = 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, mitosis_1.blockToMitosis)(node, {}, null);
+                return node;
             };
             if ((0, exports.isBuilderElement)(value)) {
-                bindings[key] = (0, bindings_1.createSingleBinding)({ code: transformBldrElementToBinding(value) });
+                slots[key] = [transformBldrElementToMitosisNode(value)];
             }
             else if (typeof value === 'string') {
                 properties[key] = value;
@@ -550,9 +547,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                     }
                     return true;
                 })
-                    .map(transformBldrElementToBinding);
-                var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
-                bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
+                    .map(transformBldrElementToMitosisNode);
+                slots[key] = childrenElements;
             }
             else {
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
@@ -583,6 +579,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             Object.keys(css).length && {
             css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
         })),
+        slots: __assign({}, slots),
     });
     // Has single text node child
     var firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];

package/dist/src/parsers/svelte/html/text.d.ts

@@ -11,6 +11,9 @@ export declare function parseText(node: TemplateNode): {
         [key: string]: import("../../..").Binding | undefined;
     };
     children: import("../../..").MitosisNode[];
+    slots?: {
+        [key: string]: import("../../..").MitosisNode[];
+    } | undefined;
 } | {
     name: string;
     properties: {
@@ -27,4 +30,7 @@ export declare function parseText(node: TemplateNode): {
         [key: string]: import("../../..").Binding | undefined;
     };
     children: import("../../..").MitosisNode[];
+    slots?: {
+        [key: string]: import("../../..").MitosisNode[];
+    } | undefined;
 };

package/dist/src/types/mitosis-node.d.ts

@@ -43,6 +43,13 @@ export type BaseNode = {
         [key: string]: Binding | undefined;
     };
     children: MitosisNode[];
+    /**
+     * Key-value store of slots. The key is the slot name and the value is an array of nodes.
+     * It is used when components have props that are also nodes
+     */
+    slots?: {
+        [key: string]: MitosisNode[];
+    };
 };
 export type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';
 export type ForNode = BaseNode & {

package/package.json

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