@builder.io/mitosis 0.5.20 → 0.5.22

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/parsers/builder/builder.js

@@ -120,13 +120,52 @@ 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, but we don't want to stringify the values
+         * within the style object otherwise the bindings will be evaluated as strings.
+         * As a result, do not use JSON.stringify here.
+         */
+        for (const key in responsiveStyles) {
+            const styles = Object.keys(responsiveStyles[key]);
+            const keyValues = styles.map((prop) => `${prop}: ${responsiveStyles[key][prop]}`);
+            const stringifiedObject = `{ ${keyValues.join(', ')} }`;
+            styleBindings[key] = stringifiedObject;
         }
     }
     const styleKeys = Object.keys(styleBindings);
@@ -326,22 +365,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.20",
+  "version": "0.5.22",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {