Support JSX shorthand properties, for compatibility with Bun

Suggestion

🔍 Search Terms

• jsx
• tsx
• shorthand
• properties

✅ Viability 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, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript’s Design Goals.

⭐ Suggestion

Bun implements JSX shorthand properties, presumably because they are extremely convenient to use, even though they haven’t been added to the JSX spec, presumably because that’s effectively dead.

📃 Motivating Example

Example code:

const onClick = console.log;
const vdom = <div {onClick} />;

console.log ( vdom );

Basically {foo} is just a shorthand for foo={foo}. The same way outside of JSX {foo} is a shorthand for {foo: foo}.

💻 Use Cases

It’s a very natural extension of the syntax, and extremely convenient too, for many components that I personally write about half of the JSX is just redundant and could be deleted if I could use shorthand properties.

As massive of an improvement it is though I can’t give up type-checking for it.

Basically the engine I’d like to use supports it already, the code I tend to write screams for this feature, but the JSX spec is abandonware and TS doesn’t support it.

Can we please consider adding it and improve the lives of millions of developers? If that’s not a strong argument enough can we consider adding this for compatibility with Bun?

I’d be more than happy to submit a PR for this.

//cc @Jarred-Sumner

[MartinJohns]

As a workaround you can use object spreading:

const onClick = console.log;
const vdom = <div {...{onClick}} />;

Works well with multiple attributes as well:

const onClick = console.log;
const onBlur = console.log;
const vdom = <div {...{onClick, onBlur}} />;

No idea why some people have the urge to downvote this comment when all I do is provide a viable option that already works and is supported by both JSX and TypeScript.

[rossipedia]

It’s a very natural extension of the syntax, and extremely convenient too, for many components that I personally write about half of the JSX is just redundant and could be deleted if I could use shorthand properties.

As massive of an improvement it is though I can’t give up type-checking for it.

I’m going to push back against both of these statements. I don’t find it natural, and I don’t see it as an improvement. I find the syntax noisy and annoying to scan, because now I have to add one more syntax in my head to keep track of when it comes to passing props. It might make writing props marginally easier by saving a few keystrokes, but it will make reading those props a bit more aggravating, especially in scenarios where both the shorthand and longhand are used.

The more ways you have to achieve a single task, the more complex the language becomes, and the harder it is to learn and teach. Even for somebody like me who’s been writing JS professionally for 25 years, and TS since it was introduced, I’d much prefer the language move in the direction of being easier to read and understand, even if it means I have to type a few more characters.