Skip to content

TSX support attribute object literal shorthand #31797

Closed
Closed
TSX support attribute object literal shorthand#31797
Labels
ExternalRelates to another program, environment, or user action which we cannot control.

Description

@nojvek
Noj Vek (nojvek)
opened on Jun 6, 2019

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:

  • 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.

Activity

  1. nojvek commented on Jun 6, 2019

    @nojvek
    Noj Vek (nojvek)
    on Jun 6, 2019
    ContributorAuthor

    Ryan Cavanaugh (@RyanCavanaugh) ^

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

  2. ajafff commented on Jun 6, 2019

    @ajafff
    Klaus Meinhardt (ajafff)
    on Jun 6, 2019
    Contributor

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

  3. jwbay commented on Jun 7, 2019

    @jwbay
    jwbay
    on Jun 7, 2019
    Contributor

    Proposed for the JSX spec here: react/jsx#23

  4. nojvek commented on Jun 10, 2019

    @nojvek
    Noj Vek (nojvek)
    on Jun 10, 2019
    ContributorAuthor

    said JSX pr with BNF grammar change: react/jsx#118

  5. jhpratt commented on Jun 13, 2019

    @jhpratt
    Jacob Pratt (jhpratt)
    on Jun 13, 2019

    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 (react/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?

  6. Ryan Cavanaugh (RyanCavanaugh)
    added
    ExternalRelates to another program, environment, or user action which we cannot control.
    on Jun 13, 2019

  7. RyanCavanaugh commented on Jun 13, 2019

    @RyanCavanaugh
    Ryan Cavanaugh (RyanCavanaugh)
    on Jun 13, 2019
    Member

    These proposals need to start with the JSX folks.

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

  8. nojvek commented on Jun 13, 2019

    @nojvek
    Noj Vek (nojvek)
    on Jun 13, 2019
    ContributorAuthor

    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.

  9. RyanCavanaugh commented on Jun 13, 2019

    @RyanCavanaugh
    Ryan Cavanaugh (RyanCavanaugh)
    on Jun 13, 2019
    Member

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

  10. jhpratt commented on Jun 13, 2019

    @jhpratt
    Jacob Pratt (jhpratt)
    on Jun 13, 2019

    I've just created react/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.

  11. TypeScript Bot (typescript-bot)
    closed this as completedon Jun 17, 2019

  12. typescript-bot commented on Jun 17, 2019

    @typescript-bot
    TypeScript Bot (typescript-bot)
    on Jun 17, 2019
    Contributor

    This issue has been marked as 'External' 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

    ExternalRelates to another program, environment, or user action which we cannot control.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions