BuilderIO/mitosis

BUG: Mitosis does not camelCase HTML attributes in React

Open

#526 geöffnet am 28. Juni 2022

Auf GitHub ansehen
 (7 Kommentare) (0 Reaktionen) (1 zugewiesene Person)TypeScript (9.803 Stars) (411 Forks)batch import
coregood first issuereact

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
blocked
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic knowledge of React DOM attributesFamiliarity with Mitosis code generation
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50
Research-Richtung
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.