Error messaging improvements when accidentally missing an = in JSX attributes

Bug Report

I think we could give better errors when you miss an = between JSX attributes. Coming from this tweet.

🔎 Search Terms

JSX spread expected attribute

🕗 Version & Regression Information

N/A - Tested in nightly

⏯ Playground Link

import React from "react"

const shouldDisable = true
const b = () => {
    <div aria-disabled {shouldDisable} />
//                      ^^^^^^^^^^^^^ error: '...' expected.(1005)
}

The gist is that TypeScript thinks you will always be using {thing} as a spread {...thing} - but it's also just possible that you missed the =. In this case specifically, shouldDisable is a boolean, which can never spread.

Two ways we could safely improve:

Checking the type of the value in the { }:

// In this case `aria-disabled` is a boolean, and so including it here defaults to 'true' (and doesn't error)

// shouldDisable is a boolean which can never spread like current error: '...' expected.(1005)
// TS could check if token before is a jsx identifier and then recommend to add the `=`
// error: "'shouldDisable' cannot be spread, did you mean to write 'aria-disabled={shoudlDisable}"?
const shouldDisable = true
const b = () => {
    <div aria-disabled {shouldDisable} />
}

Checking whether the identifier matches an attribute:

import React from "react"
const onFocus = () => {}

// onFocus known to be function, so this 2nd error:  '...' expected.(1005)
// TS could first look to see if there's an attribute with the same name and recommend:
// error: "'onFocus' is not being used to spread inside the JSX element, did you mean to write 'onFocus={onFocus}"?
const a = () => {
    <div onFocus {onFocus} />
}

Workbench Repro

🙁 Actual behavior

It's always an error and assumed to be a spread but without the spread

🙂 Expected behavior

It'd still be an error, but it could be an error which provides the next step.

Inizia con il TypeScript JSX playground fornito e la riproduzione in Workbench di un = mancante tra gli attributi JSX, quindi esamina come viene prodotto l’attuale diagnostico '...' expected. Il lavoro è completato quando lo stesso errore continua a generare un errore, ma fornisce un suggerimento utile per aggiungere il = mancante senza rappresentare erroneamente l’espressione come uno spread.