DevSexy code customs · every attribute declared
Markup crosses a prop boundary.
HTML and SVG can both resemble JSX. Their attributes, style values, namespaces, events, and wrapper contracts still need different inspections before React owns them.
HTML lane
<label class="field" for="email">
- DOM property names
- void elements
- form associations
SVG lane
<path stroke-width="2" fill-rule="evenodd">
- camel-cased paint props
- ID and URL references
- ARIA stays hyphenated
Transformation receipt
Every rewrite should be inspectable.
classclassNameRenamedReact DOM property
forhtmlForRenamedLabel association preserved
stroke-widthstrokeWidthRenamedSVG prop casing
aria-labelaria-labelPreservedARIA spelling is unchanged
data-test-iddata-test-idPreservedCustom data contract
onclick="save()"data-devsexy-review-onclickQuarantinedBehavior requires a real function
Inline style object lab
A CSS declaration string becomes JavaScript data.
style="font-size: 14px; --brand: #bfd456; line-height: 1.4"
style={{ fontSize: "14px", "--brand": "#bfd456", lineHeight: "1.4" }}font-sizefontSizecamelCase key--brand"--brand"custom property stays quoted14px"14px"unit remains explicit1.4"1.4"converter does not guess numeric intentEvent-handler quarantine
Behavior-bearing strings do not become trusted functions.
HTML event attributes execute in a global-string scope. React expects a function reference with application state and imports. The Worker preserves the evidence under a data-devsexy-review-* name and never runs it.
<button onclick="checkout(cart)">Buy</button>
<button data-devsexy-review-onclick="checkout(cart)">Buy</button>
Replace after review: onClick={() => checkout(cart)}
Wrapper contract
Choose output ownership, not just an extension.
Fragment
<>…</>Groups one or many roots without adding a DOM node.
JSX component
export function Badge()JavaScript syntax; props remain your design decision.
TSX component
(): React.JSX.ElementAdds a return contract, not invented prop types.
Component name
Uppercase identifierReact treats lowercase names as built-in elements.
Post-conversion compiler gate
Converted is the beginning of integration.
Parse JSX / TSX
The output must compile under the target toolchain.
Read the receipt
Review quarantined handlers and unknown attributes.
Render the asset
Check labels, IDs, gradients, masks, and form associations.
Add behavior and types
Connect real functions, state, props, and domain types.
Lint and test
React warnings and interaction tests own the final verdict.