BuilderIO / BuilderIO/mitosis

BUG: Mitosis does not camelCase HTML attributes in React

Open
#526 7 comments 0 reactions 1 assignee Claimed by @shubham-y View on GitHub
core good first issue react
Dominant language
TypeScript
Stars
14.4k
Forks
671
PR merge metrics
No merged PRs in 30d

Description

**Scope**
- [ ] This impacts ALL Mitosis outputs
- [x] 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](https://mitosis.builder.io/?outputTab=react&code=import+%7B+useState+%7D+from+%22%40builder.io%2Fmitosis%22%3B%0A%0Aexport+default+function+MyComponent%28props%29+%7B%0A++const+%5Bname%2C+setName%5D+%3D+useState%28%22Steve%22%29%3B%0A%0A++return+%28%0A++++%3Cdiv%3E%0A++++++%3Cimg+srcset%3D%22http%3A%2F%2Fexample.com%22+%2F%3E++++%3C%2Fdiv%3E%0A++%29%3B%0A%7D)

**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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.