@builder.io/mitosis 0.5.23 → 0.5.25

package/dist/src/generators/alpine/generate.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAlpine = exports.isValidAlpineBinding = exports.checkIsComponentNode = void 0;
+const html_tags_1 = require("../../constants/html_tags");
 const babel_transform_1 = require("../../helpers/babel-transform");
 const dash_case_1 = require("../../helpers/dash-case");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_refs_1 = require("../../helpers/get-refs");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
@@ -12,11 +14,10 @@ const replace_identifiers_1 = require("../../helpers/replace-identifiers");
 const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const collect_css_1 = require("../../helpers/styles/collect-css");
+const plugins_1 = require("../../modules/plugins");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const lodash_1 = require("lodash");
 const standalone_1 = require("prettier/standalone");
-const html_tags_1 = require("../../constants/html_tags");
-const plugins_1 = require("../../modules/plugins");
 const render_mount_hook_1 = require("./render-mount-hook");
 const render_update_hooks_1 = require("./render-update-hooks");
 const checkIsComponentNode = (node) => node.name === '@builder.io/mitosis/component';
@@ -128,7 +129,7 @@ const blockToAlpine = (json, options = {}) => {
         const { code: value, type: bindingType } = json.bindings[key];
         // TODO: proper babel transform to replace. Util for this
         const useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
-        if (key.startsWith('on')) {
+        if ((0, event_handlers_1.checkIsEvent)(key)) {
             str += bindEventHandler(options)(key, value);
         }
         else if (key === 'ref') {

package/dist/src/generators/angular/helpers.d.ts

@@ -1,4 +1,5 @@
 import { type MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
 export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
     [key: string]: string;
 };
@@ -33,3 +34,8 @@ export declare const getDefaultProps: ({ defaultProps }: MitosisComponent) => st
  * @param json The MitosisComponent.
  */
 export declare const transformState: (json: MitosisComponent) => void;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+export declare const hasFirstChildKeyAttribute: (node: MitosisNode) => boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+exports.hasFirstChildKeyAttribute = exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
@@ -120,3 +120,16 @@ const transformState = (json) => {
     });
 };
 exports.transformState = transformState;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+const hasFirstChildKeyAttribute = (node) => {
+    var _a;
+    if (!node.children || node.children.length === 0) {
+        return false;
+    }
+    const firstChildBinding = node.children[0].bindings;
+    return Boolean(firstChildBinding && ((_a = firstChildBinding.key) === null || _a === void 0 ? void 0 : _a.code));
+};
+exports.hasFirstChildKeyAttribute = hasFirstChildKeyAttribute;

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

@@ -67,6 +67,7 @@ const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const parse_selector_1 = require("./parse-selector");
 const { types } = babel;
 const mappers = {
@@ -187,7 +188,7 @@ const processEventBinding = (key, code, nodeName, customArg) => {
     };
 };
 const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
-    var _a;
+    var _a, _b;
     if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
         return;
     }
@@ -197,10 +198,15 @@ const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
     const keyToUse = BINDINGS_MAPPER[key] || key;
     const { code, arguments: cusArgs = ['event'] } = binding;
     // TODO: proper babel transform to replace. Util for this
-    if (keyToUse.startsWith('on')) {
+    if ((0, event_handlers_1.checkIsEvent)(keyToUse)) {
         const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-        // Angular events are all lowerCased
-        return ` (${event.toLowerCase()})="${value}"`;
+        // native events are all lowerCased
+        const lowerCaseEvent = event.toLowerCase();
+        const eventKey = (0, event_handlers_1.checkIsBindingNativeEvent)(event) ||
+            ((_a = blockOptions.nativeEvents) === null || _a === void 0 ? void 0 : _a.find((nativeEvent) => nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent))
+            ? lowerCaseEvent
+            : event;
+        return ` (${eventKey})="${value}"`;
     }
     else if (keyToUse === 'class') {
         return ` [class]="${code}" `;
@@ -209,7 +215,7 @@ const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
         return ` #${code} `;
     }
     else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-        !((_a = blockOptions.nativeAttributes) === null || _a === void 0 ? void 0 : _a.includes(keyToUse)) &&
+        !((_b = blockOptions.nativeAttributes) === null || _b === void 0 ? void 0 : _b.includes(keyToUse)) &&
         !Object.values(BINDINGS_MAPPER).includes(keyToUse)) {
         // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
         return ` [attr.${keyToUse}]="${code}" `;
@@ -249,7 +255,7 @@ const handleNgOutletBindings = (node, options) => {
         }
         let keyToUse = key.includes('-') ? `'${key}'` : key;
         keyToUse = keyToUse.replace('state.', '').replace('props.', '');
-        if (key.startsWith('on')) {
+        if ((0, event_handlers_1.checkIsEvent)(key)) {
             const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
             allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(/\(.*?\)/g, '')}.bind(this), `;
         }
@@ -268,8 +274,9 @@ const handleNgOutletBindings = (node, options) => {
 };
 const blockToAngular = ({ root, json, options = {}, blockOptions = {
     nativeAttributes: [],
+    nativeEvents: [],
 }, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
         return mappers[json.name](root, json, options, blockOptions);
@@ -296,19 +303,19 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         const indexName = json.scope.indexName;
         const forName = json.scope.forName;
         // Check if "key" is present for the first child of the for loop
-        if (json.children[0].bindings && ((_b = json.children[0].bindings.key) === null || _b === void 0 ? void 0 : _b.code)) {
-            const fnIndex = ((_c = root.meta) === null || _c === void 0 ? void 0 : _c._trackByForIndex) || 0;
+        if ((0, helpers_2.hasFirstChildKeyAttribute)(json)) {
+            const fnIndex = ((_b = root.meta) === null || _b === void 0 ? void 0 : _b._trackByForIndex) || 0;
             const trackByFnName = `trackBy${forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''}${fnIndex}`;
             root.meta._trackByForIndex = fnIndex + 1;
-            let code = (_d = json.children[0].bindings.key) === null || _d === void 0 ? void 0 : _d.code;
+            let code = (_c = json.children[0].bindings.key) === null || _c === void 0 ? void 0 : _c.code;
             root.state[trackByFnName] = {
                 code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}, ${forName}) { return ${code}; }`,
                 type: 'method',
             };
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
         }
         else {
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code}${indexName ? `; index as ${indexName}` : ''}">`;
+            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}">`;
         }
         str += json.children
             .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
@@ -316,7 +323,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         str += `</ng-container>`;
     }
     else if (json.name === 'Show') {
-        let condition = (_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code;
+        let condition = (_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code;
         if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
             let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
             condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
@@ -327,7 +334,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             .join('\n');
         str += `</ng-container>`;
         // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_h = json.meta) === null || _h === void 0 ? void 0 : _h.else)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)((_g = json.meta) === null || _g === void 0 ? void 0 : _g.else)) {
             str += `<ng-container *ngIf="!(${condition})">`;
             str += (0, exports.blockToAngular)({ root, json: json.meta.else, options, blockOptions });
             str += `</ng-container>`;
@@ -344,10 +351,10 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 code: '{}' + (options.typescript ? ' as any' : ''),
                 type: 'property',
             };
-            if (!((_j = root.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code.includes(inputsPropsStateName))) {
+            if (!((_h = root.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code.includes(inputsPropsStateName))) {
                 (0, helpers_2.addCodeToOnInit)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
-            if (!((_k = root.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
+            if (!((_j = root.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
                 (0, helpers_2.addCodeToOnUpdate)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
             allProps = `${inputsPropsStateName}`;
@@ -371,7 +378,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 try {
                     ({ element, classNames, attributes } = (0, parse_selector_1.parse)(`${selector}`));
                 }
-                catch (_s) {
+                catch (_r) {
                     element = (0, lodash_1.kebabCase)(json.name);
                 }
             }
@@ -406,13 +413,13 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             str += ` ${key}="${value}" `;
         }
         for (const key in json.bindings) {
-            if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
-                if (((_m = json.bindings[key]) === null || _m === void 0 ? void 0 : _m.code) === 'this') {
+            if (((_k = json.bindings[key]) === null || _k === void 0 ? void 0 : _k.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
+                if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.code) === 'this') {
                     // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
                     continue;
                 }
                 let refName = '';
-                if ((_o = json.bindings['spreadRef']) === null || _o === void 0 ? void 0 : _o.code) {
+                if ((_m = json.bindings['spreadRef']) === null || _m === void 0 ? void 0 : _m.code) {
                     refName = json.bindings['spreadRef'].code;
                 }
                 else {
@@ -427,16 +434,16 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 root.meta.onViewInit = (root.meta.onViewInit || { code: '' });
                 let spreadCode = '';
                 let changesCode = '';
-                if ((_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code.startsWith('{')) {
+                if ((_o = json.bindings[key]) === null || _o === void 0 ? void 0 : _o.code.startsWith('{')) {
                     json.meta._spreadStateRef = json.meta._spreadStateRef || 0;
                     const name = `${refName}_state_${json.meta._spreadStateRef}`;
                     json.meta._spreadStateRef = json.meta._spreadStateRef + 1;
-                    (0, helpers_2.makeReactiveState)(root, name, `this.${name} = ${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.code};`);
+                    (0, helpers_2.makeReactiveState)(root, name, `this.${name} = ${(_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code};`);
                     spreadCode = `this.${name}`;
                     changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
                 }
                 else {
-                    spreadCode = `${(_r = json.bindings[key]) === null || _r === void 0 ? void 0 : _r.code}`;
+                    spreadCode = `${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.code}`;
                     changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
                 }
                 if (!root.compileContext) {
@@ -542,7 +549,7 @@ const handleBindings = (json, item, index, forName, indexName) => {
                 continue;
             if (key === 'key')
                 continue;
-            if (key.startsWith('on')) {
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
                 const { arguments: cusArgs = ['event'] } = item.bindings[key];
                 const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
                 if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
@@ -570,12 +577,12 @@ const handleBindings = (json, item, index, forName, indexName) => {
             }
         }
         else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
-            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !key.startsWith('on')) {
+            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !(0, event_handlers_1.checkIsEvent)(key)) {
                 json.state[newBindingName] = { code: 'null', type: 'property' };
                 (0, helpers_2.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
                 item.bindings[key].code = `state.${newBindingName}`;
             }
-            else if (key.startsWith('on')) {
+            else if ((0, event_handlers_1.checkIsEvent)(key)) {
                 const { arguments: cusArgs = ['event'] } = item.bindings[key];
                 if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
                     ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
@@ -646,7 +653,7 @@ const classPropertiesPlugin = () => ({
     },
 });
 const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     // Make a copy we can safely mutate, similar to babel's toolchain
     let json = (0, fast_clone_1.fastClone)(_component);
     const useMetadata = (_a = json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata;
@@ -687,11 +694,14 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                         // so we need to use `this.` inside the class to access state and props
                         const isSpreadAttributeBinding = ((_a = node === null || node === void 0 ? void 0 : node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread' &&
                             html_tags_1.VALID_HTML_TAGS.includes(node.name.trim());
+                        // If we have a For loop with "key" it will be transformed to
+                        // trackOfXXX, we need to use "this" for state properties
+                        const isKey = key === 'key';
                         const newLocal = processAngularCode({
                             contextVars: [],
                             outputVars,
                             domRefs: [], // the template doesn't need the this keyword.
-                            replaceWith: isSpreadAttributeBinding ? 'this' : undefined,
+                            replaceWith: isKey || isSpreadAttributeBinding ? 'this' : undefined,
                         })(code);
                         return newLocal.replace(/"/g, '&quot;');
                     };
@@ -767,7 +777,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     const helperFunctions = new Set();
     let template = json.children
         .map((item) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const tmpl = (0, exports.blockToAngular)({
             root: json,
             json: item,
@@ -775,6 +785,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             blockOptions: {
                 childComponents,
                 nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
+                nativeEvents: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeEvents) !== null && _d !== void 0 ? _d : [],
             },
         });
         if (options.state === 'inline-with-wrappers') {
@@ -790,6 +801,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(json, options, {
         childComponents,
         nativeAttributes: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeAttributes) !== null && _d !== void 0 ? _d : [],
+        nativeEvents: (_f = (_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.nativeEvents) !== null && _f !== void 0 ? _f : [],
     });
     (0, helpers_2.transformState)(json);
     const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -813,8 +825,8 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
     // Preparing built in component metadata parameters
     const componentMetadata = {
-        selector: ((_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.selector)
-            ? `'${(_f = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _f === void 0 ? void 0 : _f.selector}'`
+        selector: ((_g = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _g === void 0 ? void 0 : _g.selector)
+            ? `'${(_h = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _h === void 0 ? void 0 : _h.selector}'`
             : `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}'`,
         template: `\`
       ${(0, indent_1.indent)(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
@@ -840,7 +852,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     const hasConstructor = Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
     const angularCoreImports = [
         ...(outputs.length ? ['Output', 'EventEmitter'] : []),
-        ...(((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? ['Inject', 'forwardRef'] : []),
+        ...(((_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.inject) ? ['Inject', 'forwardRef'] : []),
         'Component',
         ...(domRefs.size || dynamicComponents.size || refsForObjSpread.size
             ? ['ViewChild', 'ElementRef']
@@ -848,7 +860,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         ...(refsForObjSpread.size ? ['Renderer2'] : []),
         ...(props.size ? ['Input'] : []),
         ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
-        ...(((_h = json.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.length) && options.typescript ? ['SimpleChanges'] : []),
+        ...(((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length) && options.typescript ? ['SimpleChanges'] : []),
     ].join(', ');
     let str = (0, dedent_1.dedent) `
     import { ${angularCoreImports} } from '@angular/core';
@@ -937,13 +949,13 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             ? `\nprivate renderer${options.typescript ? ': Renderer2' : ''},\n`
             : ''}) {}
           `}
-      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code)
+      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_l = json.hooks.onInit) === null || _l === void 0 ? void 0 : _l.code)
         ? ''
         : `ngOnInit() {
-              ${!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onInit)
+              ${!((_m = json.hooks) === null || _m === void 0 ? void 0 : _m.onInit)
             ? ''
             : `
-                    ${(_l = json.hooks.onInit) === null || _l === void 0 ? void 0 : _l.code}
+                    ${(_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code}
                     `}
               ${json.hooks.onMount.length > 0
             ? `
@@ -965,19 +977,19 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
 
       ${
     // hooks specific to Angular
-    ((_o = (_m = json.compileContext) === null || _m === void 0 ? void 0 : _m.angular) === null || _o === void 0 ? void 0 : _o.hooks)
-        ? Object.entries((_q = (_p = json.compileContext) === null || _p === void 0 ? void 0 : _p.angular) === null || _q === void 0 ? void 0 : _q.hooks).map(([key, value]) => {
+    ((_q = (_p = json.compileContext) === null || _p === void 0 ? void 0 : _p.angular) === null || _q === void 0 ? void 0 : _q.hooks)
+        ? Object.entries((_s = (_r = json.compileContext) === null || _r === void 0 ? void 0 : _r.angular) === null || _s === void 0 ? void 0 : _s.hooks).map(([key, value]) => {
             return `${key}() {
             ${value.code}
           }`;
         })
         : ''}
 
-      ${!((_r = json.hooks.onUpdate) === null || _r === void 0 ? void 0 : _r.length)
+      ${!((_t = json.hooks.onUpdate) === null || _t === void 0 ? void 0 : _t.length)
         ? ''
         : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
               if (typeof window !== 'undefined') {
-                ${(_s = json.hooks.onUpdate) === null || _s === void 0 ? void 0 : _s.reduce((code, hook) => {
+                ${(_u = json.hooks.onUpdate) === null || _u === void 0 ? void 0 : _u.reduce((code, hook) => {
             code += hook.code;
             return code + '\n';
         }, '')}
@@ -988,7 +1000,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
       ${!json.hooks.onUnMount && !refsForObjSpread.size
         ? ''
         : `ngOnDestroy() {
-              ${((_t = json.hooks.onUnMount) === null || _t === void 0 ? void 0 : _t.code) || ''}
+              ${((_v = json.hooks.onUnMount) === null || _v === void 0 ? void 0 : _v.code) || ''}
               ${refsForObjSpread.size
             ? `for (const fn of this._listenerFns.values()) { fn(); }`
             : ''}

package/dist/src/generators/angular/types.d.ts

@@ -17,7 +17,19 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
 }
 export declare const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions;
 export type AngularMetadata = {
+    /**
+     * Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding.
+     * If you want to skip some you can use the 'nativeAttributes'.
+     */
     nativeAttributes?: string[];
+    /**
+     * If you encounter some native events which aren't generated in lower-case.
+     * Create a new PR inside [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) to fix it for all.
+     */
+    nativeEvents?: string[];
+    /**
+     * Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component)
+     */
     selector?: string;
 };
 export type AngularBlockOptions = {

package/dist/src/generators/helpers/functions.d.ts

@@ -1,2 +1,2 @@
-import { Plugin } from '../../modules/plugins';
-export declare const FUNCTION_HACK_PLUGIN: Plugin;
+import { MitosisPlugin } from '../../modules/plugins';
+export declare const FUNCTION_HACK_PLUGIN: MitosisPlugin;

package/dist/src/generators/helpers/rsc.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkIfIsClientComponent = void 0;
+const event_handlers_1 = require("../../helpers/event-handlers");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const checkIsNodeAMitosisComponent = (node) => node.name[0] === node.name[0].toUpperCase();
@@ -26,7 +27,7 @@ const checkIfIsClientComponent = (json) => {
     let foundEventListener = false;
     (0, legacy_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node) && !checkIsNodeAMitosisComponent(node)) {
-            if (Object.keys(node.bindings).filter((item) => item.startsWith('on')).length) {
+            if (Object.keys(node.bindings).filter((item) => (0, event_handlers_1.checkIsEvent)(item)).length) {
                 foundEventListener = true;
                 this.stop();
             }

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

@@ -4,14 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToCustomElement = exports.componentToHtml = void 0;
-const core_1 = require("@babel/core");
-const function_1 = require("fp-ts/lib/function");
-const lodash_1 = require("lodash");
-const legacy_1 = __importDefault(require("neotraverse/legacy"));
-const standalone_1 = require("prettier/standalone");
 const html_tags_1 = require("../../constants/html_tags");
 const babel_transform_1 = require("../../helpers/babel-transform");
 const dash_case_1 = require("../../helpers/dash-case");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_prop_functions_1 = require("../../helpers/get-prop-functions");
 const get_props_1 = require("../../helpers/get-props");
@@ -22,7 +18,6 @@ const has_bindings_text_1 = require("../../helpers/has-bindings-text");
 const has_component_1 = require("../../helpers/has-component");
 const has_props_1 = require("../../helpers/has-props");
 const has_stateful_dom_1 = require("../../helpers/has-stateful-dom");
-const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const is_html_attribute_1 = require("../../helpers/is-html-attribute");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const map_refs_1 = require("../../helpers/map-refs");
@@ -35,6 +30,12 @@ const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-prop
 const collect_css_1 = require("../../helpers/styles/collect-css");
 const plugins_1 = require("../../modules/plugins");
 const mitosis_node_1 = require("../../types/mitosis-node");
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const standalone_1 = require("prettier/standalone");
 const on_mount_1 = require("../helpers/on-mount");
 const isAttribute = (key) => {
     return /-/.test(key);
@@ -295,7 +296,7 @@ const blockToHtml = (json, options, blockOptions = {}) => {
             const cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
             // TODO: proper babel transform to replace. Util for this
             const useValue = value;
-            if (key.startsWith('on')) {
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
                 let event = key.replace('on', '').toLowerCase();
                 const fnName = (0, lodash_1.camelCase)(`on-${elId}-${event}`);
                 const codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options, blockOptions));

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLiquid = exports.isValidLiquidBinding = void 0;
+const event_handlers_1 = require("../../helpers/event-handlers");
 const standalone_1 = require("prettier/standalone");
 const html_tags_1 = require("../../constants/html_tags");
 const fast_clone_1 = require("../../helpers/fast-clone");
@@ -89,7 +90,7 @@ const blockToLiquid = (json, options = {}) => {
             const { code: value } = json.bindings[key];
             // TODO: proper babel transform to replace. Util for this
             const useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
-            if (key.startsWith('on')) {
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
                 // Do nothing
             }
             else if ((0, exports.isValidLiquidBinding)(useValue)) {

package/dist/src/generators/lit/generate.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLit = void 0;
 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 filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const get_props_1 = require("../../helpers/get-props");
@@ -80,7 +81,7 @@ const blockToLit = (json, options = {}) => {
             // https://lit.dev/docs/templates/directives/#ref
             str += ` ref="${code}" `;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
             const useKey = '@' + key.substring(2).toLowerCase();
             str += ` ${useKey}=\${${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(code)}} `;

package/dist/src/generators/marko/generate.js

@@ -7,6 +7,7 @@ exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exp
 const html_tags_1 = require("../../constants/html_tags");
 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 filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const get_refs_1 = require("../../helpers/get-refs");
@@ -76,7 +77,7 @@ const blockToMarko = (json, options) => {
         else if (key === 'ref') {
             str += ` key="${(0, lodash_1.camelCase)(code)}" `;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const asyncKeyword = async ? 'async ' : '';
             const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
             str += ` ${(0, dash_case_1.dashCase)(useKey)}=(${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(options.component, code)}) `;

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

@@ -4,22 +4,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
-const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-const plugins_1 = require("../../modules/plugins");
-const json5_1 = __importDefault(require("json5"));
-const standalone_1 = require("prettier/standalone");
 const hooks_1 = require("../../constants/hooks");
 const html_tags_1 = require("../../constants/html_tags");
 const dedent_1 = require("../../helpers/dedent");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_components_1 = require("../../helpers/get-components");
 const get_refs_1 = require("../../helpers/get-refs");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const is_root_text_node_1 = require("../../helpers/is-root-text-node");
 const map_refs_1 = require("../../helpers/map-refs");
 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 json5_1 = __importDefault(require("json5"));
+const standalone_1 = require("prettier/standalone");
 const react_1 = require("../react");
 exports.DEFAULT_FORMAT = 'legacy';
 // Special isValidAttributeName for Mitosis so we can allow for $ in names
@@ -120,7 +121,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
             str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const { arguments: cusArgs = ['event'], async } = json.bindings[key];
             const asyncKeyword = async ? 'async ' : '';
             str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${value.replace(/\s*;$/, '')}} `;

package/dist/src/generators/qwik/helpers/add-prevent-default.js

@@ -4,8 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addPreventDefault = void 0;
-const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const event_handlers_1 = require("../../../helpers/event-handlers");
 const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
 /**
  * Find event handlers that explicitly call .preventDefault() and
  * add preventdefault:event
@@ -17,7 +18,7 @@ function addPreventDefault(json) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
             if (node.bindings) {
                 for (const key of Object.keys(node.bindings)) {
-                    if (key.startsWith('on')) {
+                    if ((0, event_handlers_1.checkIsEvent)(key)) {
                         if ((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.includes('.preventDefault()')) {
                             const event = key.slice(2).toLowerCase();
                             node.properties['preventdefault:' + event] = '';

package/dist/src/generators/qwik/helpers/handlers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderHandlers = void 0;
+const event_handlers_1 = require("../../../helpers/event-handlers");
 const component_1 = require("../component");
 const src_generator_1 = require("../src-generator");
 const IIF_START = '(() => {';
@@ -55,5 +56,5 @@ function renderHandler(file, symbol, code) {
     });
 }
 function isEventName(name) {
-    return name.startsWith('on') && name.charAt(2).toUpperCase() == name.charAt(2);
+    return (0, event_handlers_1.checkIsEvent)(name) && name.charAt(2).toUpperCase() == name.charAt(2);
 }