[jsx-runtime] `createElement` fallback shoud from @jsxImportSource

[morlay]

if using React.createElement, it is a different results from babel, and will broken react-like lib.

why createElement fallback: facebook/react#20031 (comment)

TypeScript Version: 4.1.0-dev.20201015

Search Terms:

Code

/** @jsxImportSource preact */

const keyBeforeSpread = <span key="a" {...props} />
const keyAfterSpread =<span {...props} key="das" />

Expected behavior:

/** @jsxImportSource preact */
import { jsx } from "preact/jsx-runtime"
import { createElement } from "preact"

const keyBeforeSpread = jsx("span", Object.assign({}, props), "a");
const keyAfterSpread = createElement("span", Object.assign({}, props, { key: "das" }));

Actual behavior:

/** @jsxImportSource preact */
const keyBeforeSpread = _jsx("span", Object.assign({}, props), "a");
const keyAfterSpread = React.createElement("span", Object.assign({}, props, { key: "das" }));

Playground Link:
https://www.typescriptlang.org/play?ts=4.1.0-dev.20201015#code/PQKhAIAECsGcA8CSBbADgewE4BcDK6BXTAYwFNxVNSBDY7cEYAKCePQDtZ6BrUgTwBCpAGZZSuSjQAm4ALzgAPLFTV24Xn1kAialvABvAHTHK6VLAC+4YAD5WHLuv4BBYdlKYJVajNlKVakYmmGaWTppaUtSwerZAA

Related Issues:

[gaearon]

Note that even without @jsxImportSource, it's very important that in react-jsx mode, <span {...props} key="foo" /> does auto-import of createElement (from 'react' by default, or from @jsxImportSource if specified — and note no /jsx-runtime in this case).

Otherwise people will have unexpected crashes when you add a spread because React will not exist. (Since they thought they didn't need to import it.)

[gaearon]

cc @weswigham it would be nice to avoid releasing without this fix since it's very subtle and hard to catch.