BuilderIO/mitosis

BUG: Mitosis does not camelCase HTML attributes in React

Open

#526 opened on Jun 28, 2022

View on GitHub
 (7 comments) (0 reactions) (1 assignee)TypeScript (9,803 stars) (411 forks)batch import
coregood first issuereact

Description

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

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of React DOM attributesFamiliarity with Mitosis code generation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the React generator code in Mitosis, likely in packages/generator react/, to see how HTML attributes are transformed to JSX. Identify the mapping or transformation logic that handles attribute names. Refer to React's official documentation on DOM elements to find all camelCased attributes (e.g., srcset > srcSet). The issue mentions using React's JSX types as a reference. Since there is an assignee, please coordinate with them to avoid duplication of work. A possible fix involves adding a mapping for multi word attributes or using a library like 'html attributes' to convert to React compatible names. Test the fix using the provided reproduction link.