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.

Commencez par le TypeScript JSX playground fourni et la reproduction dans Workbench d’un = manquant entre des attributs JSX, puis examinez comment le diagnostic actuel '...' expected est produit. Le travail est terminé lorsque la même erreur continue de produire une erreur, mais fournit une suggestion utile pour ajouter le = manquant sans présenter à tort l’expression comme un spread.