@builder.io/mitosis 0.7.3 → 0.7.5

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

@@ -10,6 +10,7 @@ const hooks_1 = require("../../generators/angular/helpers/hooks");
 const parse_selector_1 = require("../../generators/angular/parse-selector");
 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 remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
@@ -299,7 +300,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
     else {
         let element = null, classNames = [], attributes;
         const isComponent = childComponents.find((impName) => impName === json.name);
-        const tagName = json.properties.$tagName;
+        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 {

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

@@ -52,6 +52,13 @@ exports.DEFAULT_FORMAT = 'legacy';
 const isValidAttributeName = (str) => {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
+const isInvalidJsxAttributeName = (str) => {
+    let attr = str.trim();
+    if (attr.startsWith(':') || str.startsWith('@')) {
+        return true;
+    }
+    return false;
+};
 const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const options = {
@@ -154,6 +161,10 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     let str = '';
     str += `<${json.name} `;
     for (const key in json.properties) {
+        if (isInvalidJsxAttributeName(key)) {
+            console.warn('Skipping invalid attribute name:', key);
+            continue;
+        }
         const value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (!isValidAttributeName(key)) {
             console.warn('Skipping invalid attribute name:', key);
@@ -163,6 +174,10 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         }
     }
     for (const key in json.bindings) {
+        if (isInvalidJsxAttributeName(key)) {
+            console.warn('Skipping invalid attribute name:', key);
+            continue;
+        }
         const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
         if (!value || ((_f = json.slots) === null || _f === void 0 ? void 0 : _f[key])) {
             continue;

package/dist/src/generators/stencil/helpers/index.js

@@ -65,7 +65,7 @@ const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => {
             // Stencil adds "on" to every `@Event` so we need to remove "on" from event props
             // https://stenciljs.com/docs/events#using-events-in-jsx
             const eventType = hasTyping
-                ? `EventEmitter<ReturnType<Required<${propsTypeRef}>["${item}"]>>`
+                ? `EventEmitter<Parameters<Required<${propsTypeRef}>["${item}"]>[number]> | void`
                 : 'any';
             return `@Event() ${(0, event_handlers_1.getEventNameWithoutOn)(item)}: ${eventType}${defaultPropString}`;
         }

package/dist/src/generators/vue/vue.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToVue = void 0;
+const apply_meta_tagname_1 = require("../../helpers/apply-meta-tagname");
 const babel_transform_1 = require("../../helpers/babel-transform");
 const bindings_1 = require("../../helpers/bindings");
 const dedent_1 = require("../../helpers/dedent");
@@ -165,6 +166,8 @@ const componentToVue = (userOptions) => ({ component: _component, path }) => {
     const css = (0, collect_css_1.collectCss)(component, {
         prefix: (_b = (_a = options.cssNamespace) === null || _a === void 0 ? void 0 : _a.call(options)) !== null && _b !== void 0 ? _b : undefined,
     });
+    // Apply the meta tagName to the component BEFORE we strip the meta properties
+    (0, apply_meta_tagname_1.applyMetaTagName)(component);
     (0, strip_meta_properties_1.stripMetaProperties)(component);
     const templateStrBody = component.children
         .map((item) => (0, blocks_1.blockToVue)(item, options, { isRootNode: true }))

package/dist/src/helpers/apply-meta-tagname.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const applyMetaTagName: (json: MitosisComponent) => MitosisComponent;

package/dist/src/helpers/apply-meta-tagname.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyMetaTagName = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("./is-mitosis-node");
+const applyMetaTagName = (json) => {
+    (0, legacy_1.default)(json).forEach((item) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if (item.properties.$tagName) {
+                item.name = item.properties.$tagName;
+                delete item.properties.$tagName;
+            }
+        }
+    });
+    return json;
+};
+exports.applyMetaTagName = applyMetaTagName;

package/dist/src/helpers/get-tag-name.d.ts

@@ -0,0 +1,2 @@
+import { MitosisNode } from '../types/mitosis-node';
+export declare const getBuilderTagName: (node: MitosisNode) => string | undefined;

package/dist/src/helpers/get-tag-name.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBuilderTagName = void 0;
+const getBuilderTagName = (node) => {
+    return node.properties.$tagName;
+};
+exports.getBuilderTagName = getBuilderTagName;

package/dist/src/plugins/compile-away-builder-components.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileAwayBuilderComponents = exports.compileAwayBuilderComponentsFromTree = exports.components = void 0;
+const get_tag_name_1 = require("../helpers/get-tag-name");
 const sdk_1 = require("@builder.io/sdk");
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
@@ -38,7 +39,7 @@ const wrapOutput = (node, child, components) => {
             ...(0, lodash_1.omit)(node.bindings, ...inputNames),
         },
         // TODO: forward tagName as a $tagName="..."
-        name: node.properties._tagName || node.properties.$tagName || 'div',
+        name: node.properties._tagName || (0, get_tag_name_1.getBuilderTagName)(node) || 'div',
         children: Array.isArray(child) ? child : [child],
     });
 };

package/package.json

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