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.

Bắt đầu với TypeScript JSX playground được cung cấp và bản tái hiện trong Workbench về việc thiếu = giữa các thuộc tính JSX, sau đó kiểm tra cách chẩn đoán hiện tại '...' expected được tạo ra. Công việc được hoàn thành khi cùng một lỗi đó vẫn tiếp tục gây ra lỗi, nhưng cung cấp một gợi ý hữu ích để thêm = bị thiếu mà không biểu diễn sai biểu thức thành spread.