@builder.io/mitosis 0.5.19 → 0.5.21

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

@@ -114,7 +114,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     }
     for (const key in json.bindings) {
         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]) {
+        if (!value || ((_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') {

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

@@ -50,8 +50,8 @@ const blockToSolid = (json, component, options, insideJsx) => {
     </For>`;
     }
     let str = '';
-    const isFragmentWithoutKey = json.name === 'Fragment' && !json.bindings.key;
-    if (isFragmentWithoutKey) {
+    const isFragment = json.name === 'Fragment';
+    if (isFragment) {
         str += '<';
     }
     else {
@@ -61,15 +61,19 @@ const blockToSolid = (json, component, options, insideJsx) => {
         str += `fallback={${(0, exports.blockToSolid)(json.meta.else, component, options, false)}}`;
     }
     const classString = (0, styles_1.collectClassString)(json, options);
-    if (classString) {
+    if (classString && !isFragment) {
         str += ` class=${classString} `;
     }
     for (const key in json.properties) {
+        if (isFragment)
+            continue;
         const value = json.properties[key];
         const newKey = transformAttributeName(key);
         str += ` ${newKey}="${value}" `;
     }
     for (const key in json.bindings) {
+        if (isFragment)
+            continue;
         const { code, arguments: cusArg = ['event'], type } = json.bindings[key];
         if (!code)
             continue;
@@ -122,7 +126,7 @@ const blockToSolid = (json, component, options, insideJsx) => {
             .map((item) => (0, exports.blockToSolid)(item, component, options, true))
             .join('\n');
     }
-    if (isFragmentWithoutKey) {
+    if (isFragment) {
         str += '</>';
     }
     else {

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

@@ -120,13 +120,45 @@ const getActionBindingsFromBlock = (block, options) => {
 const getStyleStringFromBlock = (block, options) => {
     var _a, _b;
     const styleBindings = {};
+    const responsiveStyles = {};
     let styleString = '';
     if (block.bindings) {
         for (const key in block.bindings) {
-            if (key.includes('style') && key.includes('.')) {
+            if (!key.includes('.')) {
+                continue;
+            }
+            if (key.includes('style')) {
                 const styleProperty = key.split('.')[1];
                 styleBindings[styleProperty] = convertExportDefaultToReturn(((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key]);
+                /**
+                 * responsiveStyles that are bound need to be merged into media queries.
+                 * Example:
+                 * responsiveStyles.large.color: "state.color"
+                 * responsiveStyles.large.background: "state.background"
+                 * Should get mapped to:
+                 * @media (max-width: 1200px): {
+                 *   color: "state.color",
+                 *   background: "state.background"
+                 * }
+                 */
             }
+            else if (key.includes('responsiveStyles')) {
+                const [_, size, prop] = key.split('.');
+                const mediaKey = `@media (max-width: ${media_sizes_1.sizes[size].max}px)`;
+                /**
+                 * The media query key has spaces/special characters so we need to ensure
+                 * that the key is always a string otherwise there will be runtime errors.
+                 */
+                const objKey = `"${mediaKey}"`;
+                responsiveStyles[objKey] = {
+                    ...responsiveStyles[objKey],
+                    [prop]: block.bindings[key],
+                };
+            }
+        }
+        // All binding values are strings, so stringify media query objects
+        for (const key in responsiveStyles) {
+            styleBindings[key] = JSON.stringify(responsiveStyles[key]);
         }
     }
     const styleKeys = Object.keys(styleBindings);
@@ -326,22 +358,25 @@ const componentMappers = {
         delete node.bindings.columns;
         delete node.properties.columns;
         node.children =
-            ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map((col, index) => {
-                var _a;
-                return (0, create_mitosis_node_1.createMitosisNode)({
-                    name: 'Column',
+            ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map((col, index) => (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Column',
+                /**
+                 * If width if undefined, do not create a binding otherwise its JSX will
+                 * be <Column width={} /> which is not valid due to the empty expression.
+                 */
+                ...(col.width !== undefined && {
                     bindings: {
-                        width: { code: (_a = col.width) === null || _a === void 0 ? void 0 : _a.toString() },
+                        width: { code: col.width.toString() },
                     },
-                    ...(col.link && {
-                        properties: {
-                            link: col.link,
-                        },
-                    }),
-                    meta: (0, exports.getMetaFromBlock)(block, options),
-                    children: col.blocks.map((col) => (0, exports.builderElementToMitosisNode)(col, options)),
-                });
-            })) || [];
+                }),
+                ...(col.link && {
+                    properties: {
+                        link: col.link,
+                    },
+                }),
+                meta: (0, exports.getMetaFromBlock)(block, options),
+                children: col.blocks.map((col) => (0, exports.builderElementToMitosisNode)(col, options)),
+            }))) || [];
         return node;
     },
     PersonalizationContainer(block, options) {

package/dist/src/types/config.d.ts

@@ -19,6 +19,9 @@ export type generatorsOption = {
 };
 export type MitosisConfig = {
     generators?: generatorsOption;
+    /**
+     * Apply common options to all targets
+     */
     commonOptions?: Omit<BaseTranspilerOptions, 'experimental'>;
     /**
      * List of targets to compile to.
@@ -57,6 +60,7 @@ export type MitosisConfig = {
      *   react: {
      *     stateType: 'builder';
      *     stylesType: 'styled-jsx'
+     *     plugins: [myPlugin]
      *   }
      * }
      * ```

package/package.json

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