Evaluate JSX children after the other props in both JSX modes
Plain mode built the props record in the declaration order of its type, so JsxDOM.domProps evaluated children before most attributes, while preserve mode evaluates them last, as JSX writes them (#9104). Plain mode now builds the same Pjsx element as preserve mode and prints it as the call; the tag is still flattened outside preserve mode.
modifiedJS plain JSX mode
let note = (s: string) => s->String.toUpperCaselet element = <div title={note("t")} key={note("k")}> {React.string(note("c"))} </div>
js
Before
After
let element = JsxRuntime.jsx("div", {let element = JsxRuntime.jsx("div", { children: "c".toUpperCase(), title: "t".toUpperCase() title: "t".toUpperCase(), children: "c".toUpperCase()}, "k".toUpperCase());}, "k".toUpperCase());
Review
- Why keep a let-bound tag when the element has no other argument? Inlining a function literal into the tag drops the name the let gives it, which React shows; the old call always had a props argument.