@builder.io/mitosis 0.11.2 → 0.11.4

package/dist/src/generators/angular/classic/blocks.js

@@ -393,7 +393,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             // Add ref for passing attributes
             str += `#${rootRef}`;
         }
-        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(element)) {
             return str + ' />';
         }
         str += '>';

package/dist/src/generators/angular/signals/blocks.js

@@ -10,6 +10,7 @@ const parse_selector_1 = require("../../../generators/angular/helpers/parse-sele
 const babel_transform_1 = require("../../../helpers/babel-transform");
 const bindings_1 = require("../../../helpers/bindings");
 const event_handlers_1 = require("../../../helpers/event-handlers");
+const get_tag_name_1 = require("../../../helpers/get-tag-name");
 const is_children_1 = __importDefault(require("../../../helpers/is-children"));
 const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
 const slots_1 = require("../../../helpers/slots");
@@ -268,22 +269,23 @@ const getElementTag = (json, blockOptions) => {
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     let element, classNames = [], attributes;
     const isComponent = childComponents.find((impName) => impName === json.name);
-    if (isComponent) {
-        const selector = json.meta.selector;
-        if (selector) {
-            try {
-                ({ element, classNames, attributes } = (0, parse_selector_1.parseSelector)(`${selector}`));
-            }
-            catch (_a) {
-                element = (0, lodash_1.kebabCase)(json.name);
-            }
+    const tagName = (0, get_tag_name_1.getBuilderTagName)(json);
+    const selector = json.meta.selector || (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.selector);
+    if (selector) {
+        try {
+            ({ element, classNames, attributes } = (0, parse_selector_1.parseSelector)(`${selector}`));
         }
-        else {
-            element = (0, lodash_1.kebabCase)(json.name);
+        catch (_a) {
+            element = tagName !== null && tagName !== void 0 ? tagName : (0, lodash_1.kebabCase)(json.name);
         }
     }
-    else {
-        element = json.name;
+    if (!element) {
+        if (isComponent) {
+            element = tagName !== null && tagName !== void 0 ? tagName : (0, lodash_1.kebabCase)(json.name);
+        }
+        else {
+            element = tagName !== null && tagName !== void 0 ? tagName : json.name;
+        }
     }
     let additionalString = '';
     // TODO: merge with existing classes/bindings
@@ -362,7 +364,7 @@ const blockToAngularSignals = ({ root, json, options = {}, blockOptions = {
         // Add ref for passing attributes
         str += `#${rootRef}`;
     }
-    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(element)) {
         return str + ' />';
     }
     str += '>';

package/dist/src/parsers/builder/builder.d.ts

@@ -1,6 +1,7 @@
 import { MitosisComponent, MitosisState } from '../../types/mitosis-component';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 import { MitosisNode } from '../../types/mitosis-node';
+export declare const getStyleStringFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => string;
 type InternalOptions = {
     skipMapper?: boolean;
 };

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
+exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = exports.getStyleStringFromBlock = void 0;
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
@@ -154,7 +154,9 @@ const getStyleStringFromBlock = (block, options) => {
                  */
             }
             else if (key.includes('responsiveStyles')) {
-                const [_, size, prop] = key.split('.');
+                const parts = key.split('.');
+                const size = parts[parts.length - 2];
+                const prop = parts[parts.length - 1];
                 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
@@ -195,6 +197,7 @@ const getStyleStringFromBlock = (block, options) => {
     }
     return styleString;
 };
+exports.getStyleStringFromBlock = getStyleStringFromBlock;
 const hasComponent = (block) => {
     var _a;
     return Boolean((_a = block.component) === null || _a === void 0 ? void 0 : _a.name);
@@ -301,7 +304,7 @@ const componentMappers = {
     Symbol(block, options) {
         var _a;
         let css = getCssFromBlock(block);
-        const styleString = getStyleStringFromBlock(block, options);
+        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
         const bindings = {
             symbol: (0, bindings_1.createSingleBinding)({
@@ -329,7 +332,7 @@ const componentMappers = {
             Symbol(block, options) {
                 var _a, _b, _c;
                 let css = getCssFromBlock(block);
-                const styleString = getStyleStringFromBlock(block, options);
+                const styleString = (0, exports.getStyleStringFromBlock)(block, options);
                 const actionBindings = getActionBindingsFromBlock(block, options);
                 const content = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol.content;
                 const blocks = (_b = content === null || content === void 0 ? void 0 : content.data) === null || _b === void 0 ? void 0 : _b.blocks;
@@ -456,7 +459,7 @@ const componentMappers = {
     Text: (block, options) => {
         var _a, _b, _c;
         let css = getCssFromBlock(block);
-        const styleString = getStyleStringFromBlock(block, options);
+        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
         const localizedValues = {};
         const blockBindings = {
@@ -820,7 +823,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         }
     }
     const css = getCssFromBlock(block);
-    let styleString = getStyleStringFromBlock(block, options);
+    let styleString = (0, exports.getStyleStringFromBlock)(block, options);
     const actionBindings = getActionBindingsFromBlock(block, options);
     for (const binding in blockBindings) {
         if (binding.startsWith('component.options') || binding.startsWith('options')) {

package/package.json

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