Skip to content

JSX spread child can be a generator #51711

Closed
@corbane

Description

@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.
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());

Activity

changed the title [-]JSX spread child can be an generator[/-] [+]JSX spread child can be a generator[/+] on Dec 1, 2022
MartinJohns

MartinJohns commented on Dec 2, 2022

@MartinJohns
Contributor

Related: #51328

RyanCavanaugh

RyanCavanaugh commented on Dec 8, 2022

@RyanCavanaugh
Member

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

Josh-Cena

Josh-Cena commented on Dec 8, 2022

@Josh-Cena
Contributor

@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

corbane commented on Dec 8, 2022

@corbane
Author

@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

RyanCavanaugh commented on Dec 8, 2022

@RyanCavanaugh
Member

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

typescript-bot commented on Dec 10, 2022

@typescript-bot
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Working as IntendedThe behavior described is the intended behavior; this is not a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @MartinJohns@RyanCavanaugh@corbane@typescript-bot@Josh-Cena

        Issue actions

          JSX spread child can be a generator · Issue #51711 · microsoft/TypeScript