JSX spread children.

[thejimmylin]

Clear and concise description of the problem

Basically I want to write something like this:

const App = () => {
    return <div>{...["Hello", " ", "spread", " ", "children"]}</div>
}

And I wish vite could turn it to something like:

const App = () => {
    return h("div", null, ...["Hello", " ", "spread", " ", "children"]);
};

Is it possible for Vite to do this?

This is possible when I use TS to translate JSX like this example in TS playground.

Suggested solution

For now this seems like a syntax error to Vite. Is it possible for Vite to deal with JSX spread children as what is happen in TS?

Or if this is out of Vite's scope, is it possible to make some other library to deal with the JSX part only?

I am not very sure this issue should be here, because I am not sure which part of Vite is handling the JSX syntax things and maybe it is more related to esbuild or rollup or something like that. Please tell me if this issue is out of the scope of Vite.

Alternative

No response

Additional context

As this issue has mentioned, JSX spread children is technically legal but not acceptable mainly because of React has the key issue about the array of JSX elements.

However, JSX could be used by other frameworks, too.

If JSX spread children is a legal syntax then the "flatten hack" could be prevented and the related types of JSX node would be simpler.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

If you are not using any plugins, JSX/TSX will be handled by esbuild.

It seems esbuild returns a syntax error for jsx and returns a different code from ts for tsx.
Not sure about jsx but for tsx, I think it will be fixed since it is a inconsistency with TS compiler.

Closing as I think this is in the scope of esbuild.

[thejimmylin]

Thanks a lot! Those two examples are very meaningful to me. I think I can figure out these problems with them.