Enhancement: added option checkKeyMustBeforeSpread of `react/jsx-key`

[morlay]

jsx-runtime landed. but there have different transform results when key before or after props spread

facebook/react#20031

<div key="key "{...props} />;

<div {...props} key="key"/>;

// will convert to 

import { createElement } from "react"
import { jsx } from "react/jsx-runtime"

jsx("div", props, "key")
createElement("div", { ...props, key: "key" }) // only key after props spread do the fallback 

to avoid the fallback to using createElement,
need a rule to limit the key before spread.

[ljharb]

facebook/react#20031 (comment) suggests the opposite - that the key must be after the spread so react can statically know which one will "win".

[ljharb]

Let's wait until that issue gets some resolution before implementing anything here.

[morlay]

@ljharb Yes. we need waiting. Just put the issue here for tracking.

babel and typescript already have implemented this logic. So i'm not optimistic to they will change it.

and typescript and babel have diffrent fallback results.

https://www.typescriptlang.org/play?ts=4.1.0-dev.20201015#code/PQKhAIAECsGcA8CSBbADgewE4BcDK6BXTAYwFMpTl1sBLdAO2E1IENjtwRgAobgHlioW9cAG8AdJNSZ0qWAF9wwAHy8BQkQGtSATwC8AIhYGxk8dNkKlq-oOGmpMuYu36DAExawTKoA

typescript is not use createElement of @jsxImportSource, but React.createElement direclty.

if nothing changed. This eslint rule is really needed.

[ljharb]

Sounds like we'll want to make a rule that warns when the key appears after the spread, despite that being highly counterintuitive.

[morlay]

seems this may a temporary rule until react evolution completed.

maybe as a option of react/jsx-key

[ljharb]

I like that better.