@builder.io/mitosis 0.7.1 → 0.7.3

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/stencil/component.js

@@ -7,7 +7,6 @@ const helpers_1 = require("../../generators/stencil/helpers");
 const get_code_processor_plugins_1 = require("../../generators/stencil/plugins/get-code-processor-plugins");
 const dash_case_1 = require("../../helpers/dash-case");
 const dedent_1 = require("../../helpers/dedent");
-const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
 const get_props_1 = require("../../helpers/get-props");
@@ -41,16 +40,7 @@ const componentToStencil = (_options = {
         const defaultProps = json.defaultProps;
         const childComponents = (0, get_child_components_1.getChildComponents)(json);
         const processBindingOptions = { events };
-        props = props
-            .map((prop) => {
-            // Stencil adds "on" to every `@Event` so we need to remove "on" from event props
-            // https://stenciljs.com/docs/events#using-events-in-jsx
-            if ((0, helpers_1.isEvent)(prop)) {
-                return (0, event_handlers_1.getEventNameWithoutOn)(prop);
-            }
-            return prop;
-        })
-            .filter((prop) => {
+        props = props.filter((prop) => {
             // Stencil doesn't need children as a prop
             return prop !== 'children';
         });

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

@@ -14,7 +14,10 @@ const appendEmits = (str, events) => {
     let code = str;
     if (events.length) {
         for (const event of events) {
-            code = code.replaceAll(`props.${event}(`, `props.${(0, event_handlers_1.getEventNameWithoutOn)(event)}.emit(`);
+            const eventWithoutOn = (0, event_handlers_1.getEventNameWithoutOn)(event);
+            code = code
+                .replaceAll(`props.${event}(`, `props.${eventWithoutOn}.emit(`)
+                .replaceAll(`props.${event}`, `props.${eventWithoutOn}`);
         }
     }
     return code;
@@ -53,17 +56,21 @@ const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => {
         const defaultProp = defaultProps ? (_a = defaultProps[item]) === null || _a === void 0 ? void 0 : _a.code : undefined;
         const defaultPropString = defaultProp ? ` = ${defaultProp}` : '';
         const propOption = propOptions[item];
-        if ((0, exports.isEvent)(item)) {
-            return `@Event() ${item}: any${defaultPropString}`;
-        }
-        const type = propsTypeRef &&
+        const hasTyping = propsTypeRef &&
             propsTypeRef !== 'any' &&
             propsTypeRef !== 'unknown' &&
             propsTypeRef !== 'never' &&
-            !isInternalType
-            ? `${propsTypeRef}["${item}"]`
-            : 'any';
-        return `@Prop(${propOption ? JSON.stringify(propOption) : ''}) ${item}: ${type}${defaultPropString}`;
+            !isInternalType;
+        if ((0, exports.isEvent)(item)) {
+            // 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}"]>>`
+                : 'any';
+            return `@Event() ${(0, event_handlers_1.getEventNameWithoutOn)(item)}: ${eventType}${defaultPropString}`;
+        }
+        const propType = hasTyping ? `${propsTypeRef}["${item}"]` : 'any';
+        return `@Prop(${propOption ? JSON.stringify(propOption) : ''}) ${item}: ${propType}${defaultPropString}`;
     })
         .join(';\n');
 };
@@ -101,6 +108,7 @@ const getStencilCoreImportsAsString = ({ wrap, events, props, dataString, watch,
         Host: wrap,
         Watch: watch,
         Event: events.length > 0,
+        EventEmitter: events.length > 0,
         Prop: props.length > 0,
         State: dataString.length > 0,
     };

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.d.ts

@@ -1,4 +1,4 @@
-import { ProcessBindingOptions } from '../../../generators/stencil/helpers/index';
+import { ProcessBindingOptions } from '../../../generators/stencil/helpers';
 import { ToStencilOptions } from '../../../generators/stencil/types';
 import { MitosisComponent } from '../../../types/mitosis-component';
 export declare const getCodeProcessorPlugins: (json: MitosisComponent, options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").MitosisPlugin[];

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCodeProcessorPlugins = void 0;
-const index_1 = require("../../../generators/stencil/helpers/index");
+const helpers_1 = require("../../../generators/stencil/helpers");
 const process_code_1 = require("../../../helpers/plugins/process-code");
 const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
     return [
@@ -16,7 +16,7 @@ const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
                 case 'context-set':
                 case 'dynamic-jsx-elements':
                 case 'types':
-                    return (code) => (0, index_1.processBinding)(json, code, processBindingOptions);
+                    return (code) => (0, helpers_1.processBinding)(json, code, processBindingOptions);
             }
         }),
     ];

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

@@ -208,6 +208,17 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
 };
 const blockToSvelte = ({ json, options, parentComponent }) => {
     var _a, _b, _c, _d;
+    // Handling key binding by wrapping the element in a #key block
+    if (json.bindings.key) {
+        const keyCode = json.bindings.key.code;
+        delete json.bindings.key;
+        const str = `
+      {#key ${keyCode}}
+        ${(0, exports.blockToSvelte)({ json, options, parentComponent })}
+      {/key}
+      `;
+        return str;
+    }
     if (mappers[json.name]) {
         return mappers[json.name]({
             json: json,

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.1",
+  "version": "0.7.3",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {