Unexpected JSX output for children with jsx: react-jsx

[nstepien]

TypeScript Version: 4.1.0-dev.20200925

Search Terms: jsx

Code

import type * as React from 'react';

console.log(
  <div>
    <div />
  </div>
)

console.log(
  <div>
    <div />
    <div />
  </div>
)

console.log(
  <div>
    {[1, 2].map(i => <div key={i}>{i}</div>)}
  </div>
)

Expected behavior:
Something closer to Babel's output, notice the lack of arrays for the children prop:

import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
console.log( /*#__PURE__*/_jsx("div", {
  children: /*#__PURE__*/_jsx("div", {})
}));
console.log( /*#__PURE__*/_jsxs("div", {
  children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx("div", {})]
}));
console.log( /*#__PURE__*/_jsx("div", {
  children: [1, 2].map(i => /*#__PURE__*/_jsx("div", {
    children: i
  }, i))
}));

Actual behavior:

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
console.log(_jsxs("div", { children: [_jsx("div", {}, void 0)] }, void 0));
console.log(_jsxs("div", { children: [_jsx("div", {}, void 0),
        _jsx("div", {}, void 0)] }, void 0));
console.log(_jsxs("div", { children: [[1, 2].map(i => _jsx("div", { children: i }, i))] }, void 0));

• On the first line, jsxs is used, and the one child is wrapped in an array, unlike in Babel's output. I believe this will break code that expect a single child node as the children prop.
• The second line looks good.
• On the third line, the children are incorrectly wrapped in an array. This can break code expecting children to be an array of jsx nodes, instead I get an extra array wrapping my array of nodes.
• The void 0 for key-less nodes is also unnecessary.

Playground Link:
https://www.typescriptlang.org/play?ts=4.1.0-insiders.20200925#code/JYWwDg9gTgLgBDAnmApnAVHAhgZzgJRSwGN4AzKCEOAciiNJoG4AoF4iAOxwgBsUAdLwgBzABQs4cADwATYADcAfJKkz5CuAHoVU6Vo0qAlGw7c+g4eNVzFutbc07Vejdvv7DLE+y49+QqISrnYucADeANoAjAA0cABMALoCIFhgYsBwALxK6opwANYoiNnhwAC+SuUVnnZGFTYGoUZAA
I can't configure jsx to be react-jsx in the playground.

Related Issues:

[weswigham]

Yeah, a single child element shouldn't be wrapped in an array. (Though, a minor react API aside: I still don't get how a consumer is meant to distinguish a single child which is an array from a list of children.) It looks like it's just a problem when we're using the jsxs factory, and not the jsx one.

[nstepien]

I still don't get how a consumer is meant to distinguish a single child which is an array from a list of children

I don't think there is a need to distinguish. The React.Children.* APIs are there with handling the children prop, like nested arrays or non-array children.
Unfortunately there is a lot of code out there that expect flat arrays/lone nodes for example, and do not rely on React.Children, and will thus break with the TS's new runtime output.
https://reactjs.org/docs/react-api.html#reactchildren