@builder.io/mitosis 0.7.0 → 0.7.2

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

@@ -297,24 +297,25 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         str += `</ng-container>`;
     }
     else {
-        let element, classNames = [], attributes;
+        let element = null, 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 (_r) {
-                    element = (0, lodash_1.kebabCase)(json.name);
-                }
+        const tagName = json.properties.$tagName;
+        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}`));
             }
-            else {
-                element = (0, lodash_1.kebabCase)(json.name);
+            catch (_r) {
+                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;
+            }
         }
         str += `<${element} `;
         // TODO: merge with existing classes/bindings

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,6 +42,8 @@ const render_imports_1 = require("../../helpers/render-imports");
 const state_1 = require("../../helpers/state");
 const plugins_1 = require("../../modules/plugins");
 const mitosis_node_1 = require("../../types/mitosis-node");
+const babel = __importStar(require("@babel/core"));
+const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 const json5_1 = __importDefault(require("json5"));
 const standalone_1 = require("prettier/standalone");
 const react_1 = require("../react");
@@ -87,11 +112,35 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     </For>`;
     }
     if (json.properties._text) {
+        let text = json.properties._text
+            // Convert HTML <br> to JSX-valid <br />
+            .replace(/<br\s*>/g, '<br />');
+        let isInvalidJsx = text.includes('{') || text.includes('}');
+        if (text.includes('<') || text.includes('>')) {
+            // test if this can parse as jsx
+            try {
+                babel.parse(`let _ = <>${text}</>;`, {
+                    plugins: [[plugin_syntax_typescript_1.default, { isTSX: true }]],
+                });
+                isInvalidJsx = false;
+            }
+            catch (e) {
+                isInvalidJsx = true;
+            }
+        }
+        if (isInvalidJsx) {
+            text = text
+                .replace(/>/g, '&gt;')
+                .replace(/</g, '&lt;')
+                .replace(/{/g, '&#123;')
+                .replace(/}/g, '&#125;')
+                .replace(/&/g, '&amp;');
+        }
         if (insideJsx) {
-            return `${json.properties._text}`;
+            return `${text}`;
         }
         else {
-            return `<>${json.properties._text}</>`;
+            return `<>${text}</>`;
         }
     }
     if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {

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

@@ -756,9 +756,6 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             }
         }
     }
-    if (block.component && block.tagName && block.tagName !== 'div') {
-        properties.builderTag = block.tagName;
-    }
     const css = getCssFromBlock(block);
     let styleString = getStyleStringFromBlock(block, options);
     const actionBindings = getActionBindingsFromBlock(block, options);

package/package.json

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