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.

Beginne mit dem bereitgestellten TypeScript JSX Playground und der Workbench-Reproduktion für ein fehlendes = zwischen JSX-Attributen und untersuche dann, wie die aktuelle Diagnose '...' expected erzeugt wird. Die Arbeit ist abgeschlossen, wenn derselbe Fehler weiterhin einen Fehler meldet, aber einen nützlichen Vorschlag zum Hinzufügen des fehlenden = liefert, ohne den Ausdruck fälschlich als Spread darzustellen.