Angular: lowercasing event names in data binding syntax should be optional

[lukjab71]

I am interested in helping provide a feature!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

What problem does this feature solve?

After upgrading mitosis to latest version we discovered that event names in binding strings are lower cased. I believe below piece of code is responsible for this logic:

if (keyToUse.startsWith('on')) {
    const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
    // Angular events are all lowerCased
    return ` (${event.toLowerCase()})="${value}"`;
}

The problem is that we are using external library with components for our product. Those components expose events that are camel cased. So after mitosis upgrade all events stopped working. We need to write custom solution for substituting the events in generated code. It would be nice the have some option to preserve original names.

What does the proposed API look like?

I'm not sure how such solution should look like. Should this be some metadata of MitosisComponent, some flag in ToAngularOptions interface, or maybe some additional field for binding. I'm open to provide a fix if you consider this idea valuable and guide me with direction.

Additional Information

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhxtETangBtTRwQdAAaOAwYADkg9ABdOABeFAxsPHRbKmx0ADd0KmdJdzgodBhkKANbIo8AHhZgbIA%2Bao84GpNTNEEQc3Bva3hvDq6KAFFcmwSEW1cExs9vVAgmdA4mCABzWwByfF9t52IeZtbWgAl0JnWAQjgASU8cAygtOEC9XKZjOGADACV0DhdGEAGrIUJwTCffBhACKAHdgABrMJPFhwEBPb4gaAEMgxeHQJGoa4tGo8epNIoFCSEIA%3D%3D