[babel-plugin-react-jsx] Avoid duplicate "children" key in props object

[trueadm]

This PR fixes a duplicate "children" key bug in the TransformJSXToReactJSX Babel transform. Specifically, when we have JSX that looks like this:

<Component children={1}>2</Component>

Before this PR, the output would have been:

React.jsx(Component, {\n  children: 1,\n  children: "2"\n})

In the above output, the children property is duplicated in the object literal expression. In JS strict mode, this can cause errors in certain browsers (notably IE) where an object cannot contain duplicate property keys.

This PR changed the logic, so when this pattern is encountered (explicitly with children only) we create a new object and put the children property in it and then use Object.assign (or whatever the native helper is) to ensure the correct object is formed as an end-result. So the above would output:

React.jsx(Component, Object.assign({
  children: 1
}, {
  children: "2"
}));

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS against 1ea3dc4

[gaearon]

Let's fix this more broadly, incl. <A x={1} x={2} /> or more exotic ones like <A x={1} {...obj} x={2} />.

[sebmarkbage]

@gaearon Can you document why you accepted even though your comment isn't addressed? There's some insight there.

(It seems ok to me to only fix children, since the general case isn't solved for any other object literal and we just need parity with the previous transform.)

[trueadm]

@sebmarkbage The current JSX transform does not fix this case either, the fix actually comes from the ES2015 Babel preset that has a plugin that handles object literals with duplicate keys. I should have replied to the comment on here, but I forgot (we spoke about in-person though).

[gaearon]

Yeah I initially thought that old transform handled this but we later realized it didn’t either so it seemed ok