Closed
Description
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
💻 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());
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity
[-]JSX spread child can be an generator[/-][+]JSX spread child can be a generator[/+]MartinJohns commentedon Dec 2, 2022
Related: #51328
RyanCavanaugh commentedon Dec 8, 2022
This is explicitly not allowed by React, see facebook/react#13312
Josh-Cena commentedon Dec 8, 2022
@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 commentedon Dec 8, 2022
@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 commentedon Dec 8, 2022
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:
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 commentedon Dec 10, 2022
This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.