BUG: Mitosis does not camelCase HTML attributes in React

Scope

• This impacts ALL Mitosis outputs
• This only impacts specific generators/outputs (please list them here): React

Describe the bug Attributes like srcset are camelCased in React (possibly other frameworks? Not sure). However, Mitosis does not account for that

To Reproduce

A link to a https://mitosis.builder.io/ fiddle containing the bug: link

Expected behavior scrset should become srcSet in the React output. Same goes for all HTML attributes that are multi-word: https://reactjs.org/docs/dom-elements.html

Additional context

• I am not sure what the comprehensive list of camelCased DOM elements is, but we can probably look at React’s JSX types to determine what to do
• I am also not sure if other frameworks do this camelCasing. We might need to do this elsewhere too

[steve8708]

super interesting that solidjs supports both. I personally like that approach if it’s not a logistical headache on the implementation side

my main suggesting is just avoiding hardcoded lists of element tags/properties however possible. all frameworks need to do that for JSX types, but I’ve never seen it be built into the frameworks itself and affecting logic in these types of ways. I think the main reason why is it’s ok if a type is wrong or incomplete (you can override it locally or use any), but it’s not ok if a framework makes a wrong assumption internally

so types can be seen as a nice to have (that you can override/augment), but framework logic you can’t override and needs to support more than just what is in the HTML spec today (including custom elements, custom attributes, etc) in a predictable way

[samijaber]

The intent behind our JSX is that we match React JSX, so srcSet should be srcSet in Mitosis too

I hadn’t realized we wanted to match React more closely than the other ones. Thanks for the context

what’s the concern with just writing <picture srcSet> in mitosis? then we lowercase them

No concern, we could do it one way or the other! My thinking was that since every non-React framework I looked at sticks with the original syntax (Solid supports both srcSet and srcset btw), it’d be good to stick with the native casing as React is the odd one out (do a transformation in 1 generator vs in all-but-1)

- oh I'm not sure if lists are the wistest approach here, HTML spec constantly evolves
- there is no trying to replicate DOM tags and attrs in the library

Worth noting that either way, we’ll have to manually add every new HTML tag & attribute to our JSX type, so we are constantly maintaining a mirror of the HTML spec regardless. I’d rather stick with the list that’s already hardcoded for this issue, and I can go in and replace it with a isFirstLetterLowerCase(json.name) check in a follow-up PR if we feel strongly about this.

New Approach

@shubham-y , hold off on working on this temporarily, I’ll add a comment later with details about the new approach we want to take to address this.