transform-react-jsx with runtime: automatic should always using jsx-runtime

[morlay]

Bug Report

"@babel/plugin-transform-react-jsx" ^7.10.4

[ "@babel/plugin-transform-react-jsx", { "runtime": "automatic"  }]

Current behavior
fallbacked classic runtime when jsx use spread with key exists

_createElement("span", {...obj, key: "key"})

Input Code

<span {...obj} key={"key"} />

Expected behavior

_jsx("span", obj, "key")

Environment

• Babel version(s): 7.12.0
• Node/npm version: 14.12.0
• OS: [e.g. OSX 10.13.4, Windows 10]
• Monorepo: yes
• How you are using Babel: cli, register, loader

Possible Solution

may transform codes like

<span key={key} {...obj} /> => jsx("span", obj, key)
<span {...obj} key={key} /> => jsx("span", {...obj, key}, key)

to support https://github.com/babel/babel/blob/master/packages/babel-helper-builder-react-jsx-experimental/src/index.js#L270

it will be friendly for custom jsx-runtime and some react-like lib

Additional context

[babel-bot]

Hey @morlay! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[AjayPoshak]

key is also a prop, so it need to be merged with obj prop before passing it down to JSX function call. I believe this is the correct behavior.

[morlay]

I got it by the comments.

  // We want to use React.createElement, even in the case of
  // jsx, for <div {...props} key={key} /> to distinguish it
  // from <div key={key} {...props} />. This is an intermediary
  // step while we deprecate key spread from props. Afterwards,
  // we will stop using createElement in the transform.

https://github.com/babel/babel/blob/master/packages/babel-helper-builder-react-jsx-experimental/src/index.js#L270

But it will be confused for adding custom jsx-runtime like emotion-js/emotion#1970

have to expose as

import { createElement } from "@emotion/core"
import { jsx, jsxs, Fragment } from "@emotion/core/jsx-runtime"

[morlay]

key prop not be used in react component for now
i think transfroming to _jsx("span", obj, "key") is safe.

When we want to use key from prop.
we should migrate to jsx-runtime first. then just put key into obj for spread, like

const obj = {
    key: "key"
}

<div {...obj} key={key} />

The rule <div key={key} {...obj} /> using jsx but <div {...obj} key={key} /> using createElement
i think we need a new eslint-rule to lint it 😆

[morlay]

or like this:

<div key={key} {...obj} /> => jsx("div", obj, key)
<div {...obj} key={key} /> => jsx("div", {...obj, key}, key)

Should got same behavior as the comments expect

[morlay]

clear enough facebook/react#20031 (comment)