JSX spread child can be a generator

[corbane]

Bug Report

🔎 Search Terms

JSX spread child must be an array type.
JSX spread child generator
JSX spread generator
ts(2609)
2609 generator

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about <Search Terms above>

⏯ Playground Link

Playground code

💻 Code

function* generate() {
    for(var i=0; i <10; i++)
        yield document.createElement("span")
}
var result = <div>{...generate()}</div>

🙁 Actual behavior

An error is generated if a JSX.Element generator is used.

🙂 Expected behavior

The result of the compilation conforms to javascript and the code works. so the compiler doesn't need to fail in this case.

function* generate() {
    for (var i = 0; i < 10; i++)
        yield document.createElement("span");
}
var result = React.createElement("div", null, ...generate());

[MartinJohns]

Related: #51328

[RyanCavanaugh]

This is explicitly not allowed by React, see facebook/react#13312

[Josh-Cena]

@RyanCavanaugh That patch is about rendering generators as components; this one is about spreading it as children. Each individual child is still a plain-function component or a tag. After spreading, it would not be observable to React.

[corbane]

@RyanCavanaugh, I understand.
But Typescript only cares about React? React is not the only library available.
I used React in my example for the Playground, but personally I don't use React.
My createElement and createFragment functions are custom functions that directly return HTMLElement or SVGElement.
A kind of Jquery in JSX, there is no notion of state or keys.
the "Working as Intended" label is specific to a single solution.

[RyanCavanaugh]

That patch is about rendering generators as components; this one is about spreading it as children. Each individual child is still a plain-function component or a tag. After spreading, it would not be observable to React.

This is a child spread, which is a JSX-specific feature, so we can't say for certain that it transforms to a runtime spread (as far as I know, React has not provided a spec for what any given JSX feature is truly a sugar for). Other transpilers, even as lately as this year, have not necessarily produced an ES iterator spread in their output when consuming this (favoring instead to present the argument as-is): evanw/esbuild#2245, so it's not a settled question.

The unquestionably safe thing to write is this:

var result = <div>{[...generate()]}</div>

React is not the only library available.

Sure, but it's what 98%+ of TS users are using. We can't possibly support any JSX framework anyone might come up with

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.