new JSX transform

README.md

Summary explainer: facebook/react#20031 (comment)

playground:

Input:

<ComponentA />;
<ComponentD prop="A" key="K" />;
<ComponentB {...props} />;
<ComponentC {...props} key="K" />;
<ComponentE key="K" {...props} />;

Output:

import { createElement as _createElement } from "react";
import { jsx as _jsx } from "react/jsx-runtime";

/*#__PURE__*/
_jsx(ComponentA, {});

/*#__PURE__*/
_jsx(ComponentD, {
  prop: "A"
}, "K");

/*#__PURE__*/
_jsx(ComponentB, { ...props
});

/*#__PURE__*/
_createElement(ComponentC, { ...props,
  key: "K"
});

/*#__PURE__*/
_jsx(ComponentE, { ...props
}, "K");

ESLint warn against spread after key: https://astexplorer.net/#/gist/b8acc14dece98274719a0dca27fe489f/398cfa3dac05edc8479feb747d74f5bceb73e6be