Suggestion: output of JSXChildren

[magic-akari]

Search Terms

• JSX
• JSXChildren
• JSX code generation

Suggestion

• The signature of createElement in React is React.createElement(type, props,...children). While React.createElement always transforms JSXChildren into an array if there are more than one child.
• The signature of createElement in Vue is createElement(type, props,children). The children parameter have to be an array.

Therefore, it is better to allow the output of JSXChildren to be configured.

There will of course be a lot more details when we get started for real, but these sketches should give us a rough idea of the design.

We could add an option to tsconfig.json such as compilerOptions.JSXChildren:

compilerOptions.JSXChildren : "classic" | "onechild" | "array"

"classic"	"onechild"	"array"
what tsc is doing now	what React is actually doing	what Vue accepts

Use Cases

It will improve compatibility with some JSX libraries.

Examples

input

const App = () => {
    return (
        <div className="app">
            <main>
                <header />
                <section />
                <footer />
            </main>
        </div>
    );
};

compilerOptions.JSXChildren : "classic"

const App = () => {
    return React.createElement(
        "div",
        { className: "app" },
        React.createElement(
            "main",
            null,
            React.createElement("header", null),
            React.createElement("section", null),
            React.createElement("footer", null),
        ),
    );
};

compilerOptions.JSXChildren : "onechild"

const App = () => {
    return React.createElement(
        "div",
        { className: "app" },
        React.createElement("main", null, [
            React.createElement("header", null),
            React.createElement("section", null),
            React.createElement("footer", null),
        ]),
    );
};

compilerOptions.JSXChildren : "array"

const App = () => {
    return React.createElement("div", { className: "app" }, [
        React.createElement("main", null, [
            React.createElement("header", null),
            React.createElement("section", null),
            React.createElement("footer", null),
        ]),
    ]);
};

Please ignore the format style :)

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[magic-akari]

For consistency, maybe compilerOptions.jsxChildren is better.

Discussion is welcome.

[RyanCavanaugh]

We'd probably expose this via a configuration type in the JSX namespace rather than a compiler option (since it's the framework that decides, not the program author). I think React is actually thinking about moving to Vue's behavior anyway.

[magic-akari]

Sounds great. But does it mean emitting different JS based on the types of the expressions?

[magic-akari]

Related issue #34547

[plusgut]

Another related issue #30918
To be able to configure that in the JSX-namespace would be my favorite and would solve lots of issues I have.

[magic-akari]

Close issue by #39199 .