@builder.io/mitosis 0.7.2 → 0.7.4

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/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/package.json

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