4 ms·
Given <foo bar={qux}>bla</foo> React used to transform it into React.createElement("foo", { bar: qux }, "bla") Now it transforms it into import _jsx from "rea
by 90s_dev 1y ago
Given <foo bar={qux}>bla</foo>
React used to transform it into React.createElement("foo", { bar: qux }, "bla")
Now it transforms it into import _jsx from "react/jsx-runtime"; _jsx("foo", { bar: qux }, "bla")
My proposal transforms it into { [Symbol.for('jsx')]: 'foo', bar: qux, children: "bla" }
It's self-contained and generic, doesn't rely on auto-imports or globals, and doesn't have key collisions.
It's the only way I can imagine it ever being standardized.
- pwdisswordfishz 1y agoWhat does <foo children={qux}>bla</foo> do?
- 90s_dev 1y agoThis is a known ambiguity in JSX, to the point where TypeScript gives this error: > 'children' are specified twice. The attribute named 'children' will be overwritten. ts(2710)
- pwdisswordfishz 1y agoNo, that's an ambiguity in React. JSX defines only syntax.
- 90s_dev 1y agoTrue. Then can you suggest a standardized ECMAScript JSX proposal that doesn't turn this into a "children" key on an object? Would you just transform it into an array? ["foo", { bar: qux }, "baz"] ?
- WorldMaker 1y agoThat array does better match the current function parameters, so would be a simpler proposal to existing transpilers.
- 90s_dev 1y agoYeah it seems fine. I wouldn't be strongly opposed to it. Standardization of either is better than nothing.
- aatd86 1y agoIn my opinion, first sin of react is that createElement should be a method of a document at best. There are a few things missing but jsx is sugar that complicates things for me. Just teach people function composition. It's easier.