@builder.io/mitosis 0.5.5 → 0.5.7

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) {
@@ -202,7 +201,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 +251,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 +289,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

@@ -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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const options = {
         format: exports.DEFAULT_FORMAT,
         ...toMitosisOptions,
@@ -95,8 +95,11 @@ 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.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
-            str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
+        if ((_g = json.slots) === null || _g === void 0 ? void 0 : _g[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})} `;
         }
         else if (key.startsWith('on')) {
             str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;
@@ -110,6 +113,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 +245,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/parsers/jsx/state.js

@@ -100,6 +100,15 @@ function mapStateIdentifiers(json) {
     const stateProperties = Object.keys(json.state);
     const plugin = (0, process_code_1.createCodeProcessorPlugin)(() => (code) => mapStateIdentifiersInExpression(code, stateProperties));
     plugin(json);
+    for (const key in json.targetBlocks) {
+        const targetBlock = json.targetBlocks[key];
+        for (const targetBlockKey of Object.keys(targetBlock)) {
+            const block = targetBlock[targetBlockKey];
+            if (block && 'code' in block) {
+                block.code = mapStateIdentifiersInExpression(block.code, stateProperties);
+            }
+        }
+    }
     (0, legacy_1.default)(json).forEach(function (item) {
         // only consolidate bindings for HTML tags, not custom components
         // custom components are always PascalCase, e.g. MyComponent

package/package.json

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