Typescript: TSX support attribute object literal shorthand

[nojvek]

Search Terms

tsx attribute shorthand, object shorthand

Suggestion

ES6 has this great syntax of passing key value pairs in objects e.g.

function swahili() {
  const hello = 'jambo';
  const great = 'sawa';
  return {hello, great};
}

but in TSX land this doesn't transfer well e.g.

function render() {
  const hello = 'jambo';
  const great = 'sawa';
  return <Greetings {hello, great} />
}

typescript throws an error that it needs a TS1005: '...' expected.

It instead needs to be written as

function render() {
  const hello = 'jambo';
  const great = 'sawa';
  return <Greetings {...{hello, great}} />
}

which seems very boiler platey.

It would be awesome if we could make a small tweak to pass attributes like es6 shorthand.

so all of these would be equal

<Foo hello={hello} world={world} />
<Foo {hello} {world} />
<foo {hello, world} />

They would all be emitted as

h(Foo, {hello, world})

Use Cases

Examples

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [x] 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.

[nojvek]

@RyanCavanaugh ^

Since you're the TSX expert, I assume you may have thoughts on it.

[ajafff]

This is better proposed to the JSX spec. If it's accepted there, it'll surely find its way into Typescript

[jwbay]

Proposed for the JSX spec here: https://github.com/facebook/jsx/issues/23

[nojvek]

said JSX pr with BNF grammar change: https://github.com/facebook/jsx/pull/118

[jhpratt]

The problem I find with proposals to the JSX spec is that they go untouched for _years_. This issue was created in 2014, and has had no action. Another issue (facebook/jsx#66) was created in 2016 and is a relatively trivial change.

Even worse, there is no response from the maintainers even after being directly pinged. That's the case in both issues.

TypeScript is a superset of JavaScript, why not also make it a superset of JSX?

[RyanCavanaugh]

These proposals need to start with the JSX folks.

I'm vaguely surprised (but happy) it doesn't already parse as a sequence expression 😅

[nojvek]

Just curious, What do you mean by sequence expression?

Yeah jsx folks have been non-active for years. I tried pinging some contributors so let’s see where this goes.

[RyanCavanaugh]

The expression a, b (e.g. 1 + (2, 3) === 4) evaluates a, evaluates b, and produces the right operand's result.

[jhpratt]

I've just created facebook/jsx#119. Let's see what happens; I absolutely intend on forking the spec and updating it if Facebook doesn't consider proposals that have been open for multiple years.

[typescript-bot]

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