Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX spread child can be a generator #51711

Closed
corbane opened this issue Dec 1, 2022 · 6 comments
Closed

JSX spread child can be a generator #51711

corbane opened this issue Dec 1, 2022 · 6 comments
Labels
Working as Intended The behavior described is the intended behavior; this is not a bug

Comments

@corbane
Copy link

corbane commented Dec 1, 2022

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.
image

🙂 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());
@corbane corbane changed the title JSX spread child can be an generator JSX spread child can be a generator Dec 1, 2022
@MartinJohns
Copy link
Contributor

Related: #51328

@RyanCavanaugh
Copy link
Member

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

@RyanCavanaugh RyanCavanaugh added the Working as Intended The behavior described is the intended behavior; this is not a bug label Dec 8, 2022
@Josh-Cena
Copy link
Contributor

Josh-Cena commented 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
Copy link
Author

corbane commented 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
Copy link
Member

RyanCavanaugh commented Dec 8, 2022

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Working as Intended The behavior described is the intended behavior; this is not a bug
Projects
None yet
Development

No branches or pull requests

5 participants