@builder.io/mitosis 0.5.24 → 0.5.26

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/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,6 +274,7 @@ 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;
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
@@ -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;
@@ -770,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,
@@ -778,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') {
@@ -793,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, {
@@ -816,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, '\\${')}
@@ -843,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']
@@ -851,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';
@@ -881,9 +890,10 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
       ${Array.from(props)
         .filter((item) => !(0, slots_1.isSlotProperty)(item) && item !== 'children')
         .map((item) => {
+        const hasDefaultProp = json.defaultProps && json.defaultProps.hasOwnProperty(item);
         const propType = propsTypeRef ? `${propsTypeRef}["${item}"]` : 'any';
-        let propDeclaration = `@Input() ${item}${options.typescript ? `!: ${propType}` : ''}`;
-        if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+        let propDeclaration = `@Input() ${item}${options.typescript ? `${hasDefaultProp ? '' : '!'}: ${propType}` : ''}`;
+        if (hasDefaultProp) {
             propDeclaration += ` = defaultProps["${item}"]`;
         }
         return propDeclaration;
@@ -940,13 +950,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
             ? `
@@ -968,19 +978,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';
         }, '')}
@@ -991,7 +1001,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/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);
 }

package/dist/src/generators/qwik/src-generator.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 const parser_typescript_1 = __importDefault(require("prettier/parser-typescript"));
 const standalone_1 = require("prettier/standalone");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const html_tags_1 = require("../../constants/html_tags");
 const builder_1 = require("../../parsers/builder");
 const stable_serialize_1 = require("./helpers/stable-serialize");
@@ -410,7 +411,7 @@ class SrcBuilder {
 }
 exports.SrcBuilder = SrcBuilder;
 function isEvent(name) {
-    return name.startsWith('on') && isUppercase(name.charAt(2)) && !name.endsWith('$');
+    return (0, event_handlers_1.checkIsEvent)(name) && isUppercase(name.charAt(2)) && !name.endsWith('$');
 }
 function isUppercase(ch) {
     return ch == ch.toUpperCase();

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
+const event_handlers_1 = require("../../helpers/event-handlers");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const is_root_text_node_1 = require("../../helpers/is-root-text-node");
@@ -243,7 +244,7 @@ const blockToReact = (json, options, component, insideJsx, parentSlots = []) =>
         if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread') {
             str += ` {...(${value})} `;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const asyncKeyword = ((_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.async) ? 'async ' : '';
             const { arguments: cusArgs = ['event'] } = json.bindings[key];
             const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSolid = void 0;
 const babel_transform_1 = require("../../helpers/babel-transform");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const typescript_1 = require("../../helpers/typescript");
@@ -80,7 +81,7 @@ const blockToSolid = (json, component, options, insideJsx) => {
         if (type === 'spread') {
             str += ` {...(${code})} `;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
             const asyncKeyword = ((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.async) ? 'async ' : '';
             str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;

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

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
 const dash_case_1 = require("../../../helpers/dash-case");
+const event_handlers_1 = require("../../../helpers/event-handlers");
 const render_imports_1 = require("../../../helpers/render-imports");
 const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
-const isEvent = (key) => key.startsWith('on');
+const isEvent = (key) => (0, event_handlers_1.checkIsEvent)(key);
 exports.isEvent = isEvent;
 /**
  * We need to "emit" events those can be on multiple places, so we do it as post step

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
 const bindings_1 = require("../../helpers/bindings");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const is_upper_case_1 = require("../../helpers/is-upper-case");
 const for_1 = require("../../helpers/nodes/for");
@@ -174,7 +175,7 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
         const spreadValue = key === 'props' ? '$$props' : code;
         return ` {...${spreadValue}} `;
     }
-    else if (key.startsWith('on') && isValidHtmlTag) {
+    else if ((0, event_handlers_1.checkIsEvent)(key) && isValidHtmlTag) {
         const { async } = binding;
         // handle html native on[event] props
         const event = key.replace('on', '').toLowerCase();
@@ -188,7 +189,7 @@ const stringifyBinding = (node, options) => ([key, binding]) => {
             return ` on:${event}="{${asyncKeyword}(${cusArgs.join(',')}) => {${valueWithoutBlock}}}" `;
         }
     }
-    else if (key.startsWith('on')) {
+    else if ((0, event_handlers_1.checkIsEvent)(key)) {
         // handle on[custom event] props
         const valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
         if (valueWithoutBlock === key) {

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToSwift = void 0;
+const event_handlers_1 = require("../../helpers/event-handlers");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
@@ -123,7 +124,7 @@ const blockToSwift = (json, options) => {
                 key === 'className') {
                 continue;
             }
-            if (key.startsWith('on')) {
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
                 if (key === 'onClick') {
                     continue;
                 }

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTemplate = 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 dedent_1 = require("../../helpers/dedent");
@@ -62,7 +63,7 @@ const blockToTemplate = (json, options = {}) => {
             const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
             // TODO: proper babel transform to replace. Util for this
             const useValue = value;
-            if (key.startsWith('on')) {
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
                 // Do nothing
             }
             else {

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
 const bindings_1 = require("../../helpers/bindings");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -104,7 +105,7 @@ const stringifyBinding = (node, options) => ([key, value]) => {
     else {
         // TODO: proper babel transform to replace. Util for this
         const useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
-        if (key.startsWith('on') && isValidHtmlTag) {
+        if ((0, event_handlers_1.checkIsEvent)(key) && isValidHtmlTag) {
             // handle html native on[event] props
             const { arguments: cusArgs = ['event'], async } = value;
             let event = key.replace('on', '').toLowerCase();
@@ -123,7 +124,7 @@ const stringifyBinding = (node, options) => ([key, value]) => {
             const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
             return `${eventHandlerKey}="${eventHandlerValue}"`;
         }
-        else if (key.startsWith('on')) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             // handle on[custom event] props
             const { arguments: cusArgs = ['event'] } = node.bindings[key];
             return `:${key}="(${cusArgs.join(',')}) => ${(0, helpers_1.encodeQuotes)(useValue)}"`;

package/dist/src/helpers/event-handlers.d.ts

@@ -1 +1,2 @@
-export declare const checkIsBindingEventHandler: (code: string) => boolean;
+export declare const checkIsEvent: (code: string) => boolean;
+export declare const checkIsBindingNativeEvent: (code: string) => boolean;