Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG: Mitosis does not camelCase HTML attributes in React

See original GitHub issue


  • 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 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:

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

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

steve8708commented, Jul 14, 2022

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

samijabercommented, Jul 14, 2022

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( 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why does my camelCase attributes work well with TypeScript ...
Okay I found the problem, it's coming from Styled Components, which puts the props on the generated HTML:
Read more >
Intercepting the case battle between snakes and camels in ...
Yes, you got the issue. The naming style in JSON data has been changed from camelCase to snake_case. Assuming this naming style change...
Read more >
Content - 3811e52cdfcda707d47b0ed2f8fb560e94e67923
Previously this would not fallback to default content: ```html ... <a name="1.5.3"></a> # 1.5.3 diplohaplontic-meiosis (2016-03-25) ## Bug Fixes ...
Read more >
page&gt; &lt - Massachusetts Institute of Technology
<ref>[]</ref> ... The tradition is a form of [[philosophical anarchism]], which does not recommend any ...
Read more >
JPG ... -from-the-given-array-such-that-their-sum-is-not-present-in-any-of-the-arrays/ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found