@builder.io/mitosis 0.5.21 → 0.5.23

package/dist/src/generators/angular/index.js

@@ -67,6 +67,7 @@ const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
+const parse_selector_1 = require("./parse-selector");
 const { types } = babel;
 const mappers = {
     Fragment: (root, json, options, blockOptions) => {
@@ -362,10 +363,41 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         str += `</ng-container>`;
     }
     else {
-        const elSelector = childComponents.find((impName) => impName === json.name)
-            ? (0, lodash_1.kebabCase)(json.name)
-            : json.name;
-        str += `<${elSelector} `;
+        let element, classNames = [], attributes;
+        const isComponent = childComponents.find((impName) => impName === json.name);
+        if (isComponent) {
+            const selector = json.meta.selector || (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.selector);
+            if (selector) {
+                try {
+                    ({ element, classNames, attributes } = (0, parse_selector_1.parse)(`${selector}`));
+                }
+                catch (_s) {
+                    element = (0, lodash_1.kebabCase)(json.name);
+                }
+            }
+            else {
+                element = (0, lodash_1.kebabCase)(json.name);
+            }
+        }
+        else {
+            element = json.name;
+        }
+        str += `<${element} `;
+        // TODO: merge with existing classes/bindings
+        if (classNames.length) {
+            str += `class="${classNames.join(' ')}" `;
+        }
+        // TODO: Merge with existing properties
+        if (attributes) {
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value) {
+                    str += `${key}=${JSON.stringify(value)} `;
+                }
+                else {
+                    str += `${key} `;
+                }
+            });
+        }
         for (const key in json.properties) {
             if (key.startsWith('$')) {
                 continue;
@@ -441,7 +473,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
                 .join('\n');
         }
-        str += `</${elSelector}>`;
+        str += `</${element}>`;
     }
     return str;
 };

package/dist/src/generators/angular/parse-selector.d.ts

@@ -0,0 +1,5 @@
+export declare function parse(selector: string): {
+    element: string | null;
+    classNames: string[];
+    attributes: Record<string, string>;
+};

package/dist/src/generators/angular/parse-selector.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parse = void 0;
+const compiler_1 = require("@angular/compiler");
+function parse(selector) {
+    const { element, classNames, attrs } = compiler_1.CssSelector.parse(selector)[0];
+    const attributes = attrs.reduce((acc, attr, i) => {
+        if (i % 2 === 0) {
+            acc[attr] = attrs[i + 1];
+        }
+        return acc;
+    }, {});
+    return {
+        element,
+        classNames,
+        attributes,
+    };
+}
+exports.parse = parse;

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

@@ -137,8 +137,8 @@ const getStyleStringFromBlock = (block, options) => {
                  * responsiveStyles.large.background: "state.background"
                  * Should get mapped to:
                  * @media (max-width: 1200px): {
-                 *   color: "state.color",
-                 *   background: "state.background"
+                 *   color: state.color,
+                 *   background: state.background
                  * }
                  */
             }
@@ -156,9 +156,16 @@ const getStyleStringFromBlock = (block, options) => {
                 };
             }
         }
-        // All binding values are strings, so stringify media query objects
+        /**
+         * 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) {
-            styleBindings[key] = JSON.stringify(responsiveStyles[key]);
+            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);

package/package.json

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