From 43433eb2f1b1269da6cae855f259d00b742c37cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 17 Oct 2020 15:20:39 +0200
Subject: [PATCH 1/2] Add tests related to the key prop when using new JSX
 transform

---
 ...xJsxsCjsTransformKeyProp(jsx=react-jsx).js | 28 ++++++++
 ...CjsTransformKeyProp(jsx=react-jsx).symbols | 22 +++++++
 ...xsCjsTransformKeyProp(jsx=react-jsx).types | 26 ++++++++
 ...xsCjsTransformKeyProp(jsx=react-jsxdev).js | 29 +++++++++
 ...TransformKeyProp(jsx=react-jsxdev).symbols | 22 +++++++
 ...jsTransformKeyProp(jsx=react-jsxdev).types | 26 ++++++++
 ...sformKeyPropCustomImport(jsx=react-jsx).js | 28 ++++++++
 ...KeyPropCustomImport(jsx=react-jsx).symbols | 22 +++++++
 ...rmKeyPropCustomImport(jsx=react-jsx).types | 26 ++++++++
 ...rmKeyPropCustomImport(jsx=react-jsxdev).js | 29 +++++++++
 ...PropCustomImport(jsx=react-jsxdev).symbols | 22 +++++++
 ...eyPropCustomImport(jsx=react-jsxdev).types | 26 ++++++++
 ...eyPropCustomImportPragma(jsx=react-jsx).js | 63 ++++++++++++++++++
 ...pCustomImportPragma(jsx=react-jsx).symbols | 47 ++++++++++++++
 ...ropCustomImportPragma(jsx=react-jsx).types | 55 ++++++++++++++++
 ...ropCustomImportPragma(jsx=react-jsxdev).js | 65 +++++++++++++++++++
 ...stomImportPragma(jsx=react-jsxdev).symbols | 47 ++++++++++++++
 ...CustomImportPragma(jsx=react-jsxdev).types | 55 ++++++++++++++++
 .../jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx   |  9 +++
 ...jsxJsxsCjsTransformKeyPropCustomImport.tsx | 10 +++
 ...sCjsTransformKeyPropCustomImportPragma.tsx | 21 ++++++
 21 files changed, 678 insertions(+)
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).types
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).types
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).types
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).types
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).types
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).symbols
 create mode 100644 tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).types
 create mode 100644 tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx
 create mode 100644 tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx
 create mode 100644 tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx

diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
new file mode 100644
index 0000000000000..5cd85c1dfdd75
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
@@ -0,0 +1,28 @@
+//// [jsxJsxsCjsTransformKeyProp.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+
+//// [jsxJsxsCjsTransformKeyProp.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_js_1 = require("react/jsx-runtime.js");
+/// <reference path="react16.d.ts" />
+var props = { answer: 42 };
+var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).symbols
new file mode 100644
index 0000000000000..2dada593db2fa
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).symbols
@@ -0,0 +1,22 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>answer : Symbol(answer, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(jsxJsxsCjsTransformKeyProp.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyProp.tsx, 2, 14))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(jsxJsxsCjsTransformKeyProp.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyProp.tsx, 3, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).types
new file mode 100644
index 0000000000000..dd7730aada5d6
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).types
@@ -0,0 +1,26 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
new file mode 100644
index 0000000000000..3a06a71cfccd3
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
@@ -0,0 +1,29 @@
+//// [jsxJsxsCjsTransformKeyProp.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+
+//// [jsxJsxsCjsTransformKeyProp.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
+var _jsxFileName = "tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx";
+/// <reference path="react16.d.ts" />
+var props = { answer: 42 };
+var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 10 }, this);
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).symbols
new file mode 100644
index 0000000000000..2dada593db2fa
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).symbols
@@ -0,0 +1,22 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>answer : Symbol(answer, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(jsxJsxsCjsTransformKeyProp.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyProp.tsx, 2, 14))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(jsxJsxsCjsTransformKeyProp.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyProp.tsx, 1, 5))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyProp.tsx, 3, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).types
new file mode 100644
index 0000000000000..dd7730aada5d6
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).types
@@ -0,0 +1,26 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
new file mode 100644
index 0000000000000..e1bcb7caf433e
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
@@ -0,0 +1,28 @@
+//// [jsxJsxsCjsTransformKeyPropCustomImport.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+
+//// [jsxJsxsCjsTransformKeyPropCustomImport.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_js_1 = require("preact/jsx-runtime.js");
+/// <reference path="react16.d.ts" />
+var props = { answer: 42 };
+var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).symbols
new file mode 100644
index 0000000000000..801d791f75ef1
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).symbols
@@ -0,0 +1,22 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>answer : Symbol(answer, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 2, 14))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 3, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).types
new file mode 100644
index 0000000000000..4a50274fb66b6
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).types
@@ -0,0 +1,26 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
new file mode 100644
index 0000000000000..b67bee03f45ae
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
@@ -0,0 +1,29 @@
+//// [jsxJsxsCjsTransformKeyPropCustomImport.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+
+//// [jsxJsxsCjsTransformKeyPropCustomImport.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_dev_runtime_js_1 = require("preact/jsx-dev-runtime.js");
+var _jsxFileName = "tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx";
+/// <reference path="react16.d.ts" />
+var props = { answer: 42 };
+var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 10 }, this);
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).symbols
new file mode 100644
index 0000000000000..801d791f75ef1
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).symbols
@@ -0,0 +1,22 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>answer : Symbol(answer, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 2, 14))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 1, 5))
+>key : Symbol(key, Decl(jsxJsxsCjsTransformKeyPropCustomImport.tsx, 3, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).types
new file mode 100644
index 0000000000000..4a50274fb66b6
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).types
@@ -0,0 +1,26 @@
+=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx ===
+/// <reference path="react16.d.ts" />
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
new file mode 100644
index 0000000000000..8af6119b2d667
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
@@ -0,0 +1,63 @@
+//// [tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx] ////
+
+//// [preact.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+//// [react.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+const a2 = <div key="foo" {...props2}>text</div>;
+const b2 = <div {...props2} key="bar">text</div>;
+
+export {};
+
+
+//// [preact.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_js_1 = require("preact/jsx-runtime.js");
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+var props = { answer: 42 };
+var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+//// [react.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_runtime_js_1 = require("react/jsx-runtime.js");
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+require("./preact");
+var props2 = { answer: 42 };
+var a2 = jsx_runtime_js_1.jsx("div", __assign({}, props2, { children: "text" }), "foo");
+var b2 = React.createElement("div", __assign({}, props2, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).symbols
new file mode 100644
index 0000000000000..433cf36d0b5d2
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).symbols
@@ -0,0 +1,47 @@
+=== tests/cases/conformance/jsx/jsxs/react.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>answer : Symbol(answer, Decl(react.tsx, 3, 16))
+
+const a2 = <div key="foo" {...props2}>text</div>;
+>a2 : Symbol(a2, Decl(react.tsx, 4, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(react.tsx, 4, 15))
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b2 = <div {...props2} key="bar">text</div>;
+>b2 : Symbol(b2, Decl(react.tsx, 5, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>key : Symbol(key, Decl(react.tsx, 5, 27))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
+=== tests/cases/conformance/jsx/jsxs/preact.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>answer : Symbol(answer, Decl(preact.tsx, 2, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(preact.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(preact.tsx, 3, 14))
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(preact.tsx, 4, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>key : Symbol(key, Decl(preact.tsx, 4, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).types
new file mode 100644
index 0000000000000..7f625b5856091
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).types
@@ -0,0 +1,55 @@
+=== tests/cases/conformance/jsx/jsxs/react.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+>props2 : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a2 = <div key="foo" {...props2}>text</div>;
+>a2 : JSX.Element
+><div key="foo" {...props2}>text</div> : JSX.Element
+>div : any
+>key : string
+>props2 : { answer: number; }
+>div : any
+
+const b2 = <div {...props2} key="bar">text</div>;
+>b2 : JSX.Element
+><div {...props2} key="bar">text</div> : JSX.Element
+>div : any
+>props2 : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
+=== tests/cases/conformance/jsx/jsxs/preact.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
new file mode 100644
index 0000000000000..f4ccb5d73075f
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
@@ -0,0 +1,65 @@
+//// [tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx] ////
+
+//// [preact.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+//// [react.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+const a2 = <div key="foo" {...props2}>text</div>;
+const b2 = <div {...props2} key="bar">text</div>;
+
+export {};
+
+
+//// [preact.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_dev_runtime_js_1 = require("preact/jsx-dev-runtime.js");
+var _jsxFileName = "tests/cases/conformance/jsx/jsxs/preact.tsx";
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+var props = { answer: 42 };
+var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 4, columnNumber: 10 }, this);
+var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+//// [react.js]
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
+var _jsxFileName = "tests/cases/conformance/jsx/jsxs/react.tsx";
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+require("./preact");
+var props2 = { answer: 42 };
+var a2 = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props2, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 5, columnNumber: 11 }, this);
+var b2 = React.createElement("div", __assign({}, props2, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).symbols b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).symbols
new file mode 100644
index 0000000000000..433cf36d0b5d2
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).symbols
@@ -0,0 +1,47 @@
+=== tests/cases/conformance/jsx/jsxs/react.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>answer : Symbol(answer, Decl(react.tsx, 3, 16))
+
+const a2 = <div key="foo" {...props2}>text</div>;
+>a2 : Symbol(a2, Decl(react.tsx, 4, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(react.tsx, 4, 15))
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b2 = <div {...props2} key="bar">text</div>;
+>b2 : Symbol(b2, Decl(react.tsx, 5, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props2 : Symbol(props2, Decl(react.tsx, 3, 5))
+>key : Symbol(key, Decl(react.tsx, 5, 27))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
+=== tests/cases/conformance/jsx/jsxs/preact.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>answer : Symbol(answer, Decl(preact.tsx, 2, 15))
+
+const a = <div key="foo" {...props}>text</div>;
+>a : Symbol(a, Decl(preact.tsx, 3, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>key : Symbol(key, Decl(preact.tsx, 3, 14))
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+const b = <div {...props} key="bar">text</div>;
+>b : Symbol(b, Decl(preact.tsx, 4, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props : Symbol(props, Decl(preact.tsx, 2, 5))
+>key : Symbol(key, Decl(preact.tsx, 4, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+export {};
+
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).types b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).types
new file mode 100644
index 0000000000000..7f625b5856091
--- /dev/null
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).types
@@ -0,0 +1,55 @@
+=== tests/cases/conformance/jsx/jsxs/react.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+>props2 : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a2 = <div key="foo" {...props2}>text</div>;
+>a2 : JSX.Element
+><div key="foo" {...props2}>text</div> : JSX.Element
+>div : any
+>key : string
+>props2 : { answer: number; }
+>div : any
+
+const b2 = <div {...props2} key="bar">text</div>;
+>b2 : JSX.Element
+><div {...props2} key="bar">text</div> : JSX.Element
+>div : any
+>props2 : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
+=== tests/cases/conformance/jsx/jsxs/preact.tsx ===
+/// <reference path="react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+>props : { answer: number; }
+>{ answer: 42 } : { answer: number; }
+>answer : number
+>42 : 42
+
+const a = <div key="foo" {...props}>text</div>;
+>a : JSX.Element
+><div key="foo" {...props}>text</div> : JSX.Element
+>div : any
+>key : string
+>props : { answer: number; }
+>div : any
+
+const b = <div {...props} key="bar">text</div>;
+>b : JSX.Element
+><div {...props} key="bar">text</div> : JSX.Element
+>div : any
+>props : { answer: number; }
+>key : string
+>div : any
+
+export {};
+
diff --git a/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx
new file mode 100644
index 0000000000000..4b10dba80c485
--- /dev/null
+++ b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx
@@ -0,0 +1,9 @@
+// @jsx: react-jsx,react-jsxdev
+// @strict: true
+// @module: commonjs
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
diff --git a/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx
new file mode 100644
index 0000000000000..fb4f96a4b7d43
--- /dev/null
+++ b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx
@@ -0,0 +1,10 @@
+// @jsx: react-jsx,react-jsxdev
+// @jsxImportSource: preact
+// @strict: true
+// @module: commonjs
+/// <reference path="/.lib/react16.d.ts" />
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
diff --git a/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx
new file mode 100644
index 0000000000000..2da0af4f2ce1c
--- /dev/null
+++ b/tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImportPragma.tsx
@@ -0,0 +1,21 @@
+// @jsx: react-jsx,react-jsxdev
+// @strict: true
+// @module: commonjs
+// @filename: preact.tsx
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource preact */
+const props = { answer: 42 }
+const a = <div key="foo" {...props}>text</div>;
+const b = <div {...props} key="bar">text</div>;
+
+export {};
+
+// @filename: react.tsx
+/// <reference path="/.lib/react16.d.ts" />
+/* @jsxImportSource react */
+import "./preact";
+const props2 = { answer: 42 }
+const a2 = <div key="foo" {...props2}>text</div>;
+const b2 = <div {...props2} key="bar">text</div>;
+
+export {};

From 9fd2c2cb4b8982c8bf74ba9a956b14d2ba17cf1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 17 Oct 2020 19:47:49 +0200
Subject: [PATCH 2/2] Add auto-import for createElement when using the new JSX
 transform

---
 src/compiler/factory/utilities.ts             |  6 +-
 src/compiler/transformers/jsx.ts              | 74 +++++++++++--------
 ...xJsxsCjsTransformKeyProp(jsx=react-jsx).js |  3 +-
 ...xsCjsTransformKeyProp(jsx=react-jsxdev).js |  3 +-
 ...sformKeyPropCustomImport(jsx=react-jsx).js |  3 +-
 ...rmKeyPropCustomImport(jsx=react-jsxdev).js |  3 +-
 ...eyPropCustomImportPragma(jsx=react-jsx).js |  6 +-
 ...ropCustomImportPragma(jsx=react-jsxdev).js |  6 +-
 8 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/src/compiler/factory/utilities.ts b/src/compiler/factory/utilities.ts
index 770600d94b71d..0960509ae4de9 100644
--- a/src/compiler/factory/utilities.ts
+++ b/src/compiler/factory/utilities.ts
@@ -46,7 +46,7 @@ namespace ts {
         }
     }
 
-    function createJsxFactoryExpression(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, parent: JsxOpeningLikeElement | JsxOpeningFragment): Expression {
+    export function createJsxFactoryExpression(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, parent: JsxOpeningLikeElement | JsxOpeningFragment): Expression {
         return jsxFactoryEntity ?
             createJsxFactoryExpressionFromEntityName(factory, jsxFactoryEntity, parent) :
             factory.createPropertyAccessExpression(
@@ -64,7 +64,7 @@ namespace ts {
             );
     }
 
-    export function createExpressionForJsxElement(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, tagName: Expression, props: Expression | undefined, children: readonly Expression[] | undefined, parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
+    export function createExpressionForJsxElement(factory: NodeFactory, callee: Expression, tagName: Expression, props: Expression | undefined, children: readonly Expression[] | undefined, location: TextRange): LeftHandSideExpression {
         const argumentsList = [tagName];
         if (props) {
             argumentsList.push(props);
@@ -88,7 +88,7 @@ namespace ts {
 
         return setTextRange(
             factory.createCallExpression(
-                createJsxFactoryExpression(factory, jsxFactoryEntity, reactNamespace, parentElement),
+                callee,
                 /*typeArguments*/ undefined,
                 argumentsList
             ),
diff --git a/src/compiler/transformers/jsx.ts b/src/compiler/transformers/jsx.ts
index 905bfad32e001..fb9d16d6b9482 100644
--- a/src/compiler/transformers/jsx.ts
+++ b/src/compiler/transformers/jsx.ts
@@ -4,7 +4,7 @@ namespace ts {
         interface PerFileState {
             importSpecifier?: string;
             filenameDeclaration?: VariableDeclaration & { name: Identifier; };
-            utilizedImplicitRuntimeImports?: Map<ImportSpecifier>;
+            utilizedImplicitRuntimeImports?: Map<Map<ImportSpecifier>>;
         }
 
         const {
@@ -40,17 +40,25 @@ namespace ts {
         }
 
         function getImplicitImportForName(name: string) {
-            const existing = currentFileState.utilizedImplicitRuntimeImports?.get(name);
+            const importSource = name === "createElement"
+                ? currentFileState.importSpecifier!
+                : `${currentFileState.importSpecifier}/${compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime.js" : "jsx-runtime.js"}`;
+            const existing = currentFileState.utilizedImplicitRuntimeImports?.get(importSource)?.get(name);
             if (existing) {
                 return existing.name;
             }
             if (!currentFileState.utilizedImplicitRuntimeImports) {
                 currentFileState.utilizedImplicitRuntimeImports = createMap();
             }
+            let specifierSourceImports = currentFileState.utilizedImplicitRuntimeImports.get(importSource);
+            if (!specifierSourceImports) {
+                specifierSourceImports = createMap();
+                currentFileState.utilizedImplicitRuntimeImports.set(importSource, specifierSourceImports);
+            }
             const generatedName = factory.createUniqueName(`_${name}`, GeneratedIdentifierFlags.Optimistic | GeneratedIdentifierFlags.FileLevel | GeneratedIdentifierFlags.AllowNameSubstitution);
             const specifier = factory.createImportSpecifier(factory.createIdentifier(name), generatedName);
             generatedName.generatedImportReference = specifier;
-            currentFileState.utilizedImplicitRuntimeImports.set(name, specifier);
+            specifierSourceImports.set(name, specifier);
             return generatedName;
         }
 
@@ -73,29 +81,30 @@ namespace ts {
             if (currentFileState.filenameDeclaration) {
                 statements = insertStatementAfterCustomPrologue(statements.slice(), factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([currentFileState.filenameDeclaration], NodeFlags.Const)));
             }
-            if (currentFileState.utilizedImplicitRuntimeImports && currentFileState.utilizedImplicitRuntimeImports.size && currentFileState.importSpecifier !== undefined) {
-                const specifier = `${currentFileState.importSpecifier}/${compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime.js" : "jsx-runtime.js"}`;
-                if (isExternalModule(node)) {
-                    // Add `import` statement
-                    const importStatement = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, factory.createImportClause(/*typeOnly*/ false, /*name*/ undefined, factory.createNamedImports(arrayFrom(currentFileState.utilizedImplicitRuntimeImports.values()))), factory.createStringLiteral(specifier));
-                    setParentRecursive(importStatement, /*incremental*/ false);
-                    statements = insertStatementAfterCustomPrologue(statements.slice(), importStatement);
-                }
-                else if (isExternalOrCommonJsModule(node)) {
-                    // Add `require` statement
-                    const requireStatement = factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([
-                        factory.createVariableDeclaration(
-                            factory.createObjectBindingPattern(map(arrayFrom(currentFileState.utilizedImplicitRuntimeImports.values()), s => factory.createBindingElement(/*dotdotdot*/ undefined, s.propertyName, s.name))),
-                            /*exclaimationToken*/ undefined,
-                            /*type*/ undefined,
-                            factory.createCallExpression(factory.createIdentifier("require"), /*typeArguments*/ undefined, [factory.createStringLiteral(specifier)])
-                        )
-                    ], NodeFlags.Const));
-                    setParentRecursive(requireStatement, /*incremental*/ false);
-                    statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
-                }
-                else {
-                    // Do nothing (script file) - consider an error in the checker?
+            if (currentFileState.utilizedImplicitRuntimeImports) {
+                for (const [importSource, importSpecifiersMap] of arrayFrom(currentFileState.utilizedImplicitRuntimeImports.entries())) {
+                    if (isExternalModule(node)) {
+                        // Add `import` statement
+                        const importStatement = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, factory.createImportClause(/*typeOnly*/ false, /*name*/ undefined, factory.createNamedImports(arrayFrom(importSpecifiersMap.values()))), factory.createStringLiteral(importSource));
+                        setParentRecursive(importStatement, /*incremental*/ false);
+                        statements = insertStatementAfterCustomPrologue(statements.slice(), importStatement);
+                    }
+                    else if (isExternalOrCommonJsModule(node)) {
+                        // Add `require` statement
+                        const requireStatement = factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([
+                            factory.createVariableDeclaration(
+                                factory.createObjectBindingPattern(map(arrayFrom(importSpecifiersMap.values()), s => factory.createBindingElement(/*dotdotdot*/ undefined, s.propertyName, s.name))),
+                                /*exclaimationToken*/ undefined,
+                                /*type*/ undefined,
+                                factory.createCallExpression(factory.createIdentifier("require"), /*typeArguments*/ undefined, [factory.createStringLiteral(importSource)])
+                            )
+                        ], NodeFlags.Const));
+                        setParentRecursive(requireStatement, /*incremental*/ false);
+                        statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
+                    }
+                    else {
+                        // Do nothing (script file) - consider an error in the checker?
+                    }
                 }
             }
             if (statements !== visited.statements) {
@@ -306,14 +315,21 @@ namespace ts {
                 }
             }
 
+            const callee = currentFileState.importSpecifier === undefined
+                ? createJsxFactoryExpression(
+                    factory,
+                    context.getEmitResolver().getJsxFactoryEntity(currentSourceFile),
+                    compilerOptions.reactNamespace!, // TODO: GH#18217
+                    node
+                )
+                : getImplicitImportForName("createElement");
+
             const element = createExpressionForJsxElement(
                 factory,
-                context.getEmitResolver().getJsxFactoryEntity(currentSourceFile),
-                compilerOptions.reactNamespace!, // TODO: GH#18217
+                callee,
                 tagName,
                 objectProperties,
                 mapDefined(children, transformJsxChildToExpression),
-                node,
                 location
             );
 
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
index 5cd85c1dfdd75..4ef773b91118e 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsx).js
@@ -21,8 +21,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var react_1 = require("react");
 var jsx_runtime_js_1 = require("react/jsx-runtime.js");
 /// <reference path="react16.d.ts" />
 var props = { answer: 42 };
 var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = react_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
index 3a06a71cfccd3..fa5bdb385521a 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyProp(jsx=react-jsxdev).js
@@ -21,9 +21,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var react_1 = require("react");
 var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
 var _jsxFileName = "tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyProp.tsx";
 /// <reference path="react16.d.ts" />
 var props = { answer: 42 };
 var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 10 }, this);
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = react_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
index e1bcb7caf433e..da3771ec312c1 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsx).js
@@ -21,8 +21,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var preact_1 = require("preact");
 var jsx_runtime_js_1 = require("preact/jsx-runtime.js");
 /// <reference path="react16.d.ts" />
 var props = { answer: 42 };
 var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = preact_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
index b67bee03f45ae..46cbac3c9fd45 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImport(jsx=react-jsxdev).js
@@ -21,9 +21,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var preact_1 = require("preact");
 var jsx_dev_runtime_js_1 = require("preact/jsx-dev-runtime.js");
 var _jsxFileName = "tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformKeyPropCustomImport.tsx";
 /// <reference path="react16.d.ts" />
 var props = { answer: 42 };
 var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 10 }, this);
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = preact_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
index 8af6119b2d667..11600352cd2ad 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsx).js
@@ -34,12 +34,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var preact_1 = require("preact");
 var jsx_runtime_js_1 = require("preact/jsx-runtime.js");
 /// <reference path="react16.d.ts" />
 /* @jsxImportSource preact */
 var props = { answer: 42 };
 var a = jsx_runtime_js_1.jsx("div", __assign({}, props, { children: "text" }), "foo");
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = preact_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
 //// [react.js]
 "use strict";
 var __assign = (this && this.__assign) || function () {
@@ -54,10 +55,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var react_1 = require("react");
 var jsx_runtime_js_1 = require("react/jsx-runtime.js");
 /// <reference path="react16.d.ts" />
 /* @jsxImportSource react */
 require("./preact");
 var props2 = { answer: 42 };
 var a2 = jsx_runtime_js_1.jsx("div", __assign({}, props2, { children: "text" }), "foo");
-var b2 = React.createElement("div", __assign({}, props2, { key: "bar" }), "text");
+var b2 = react_1.createElement("div", __assign({}, props2, { key: "bar" }), "text");
diff --git a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
index f4ccb5d73075f..672fe8faa1014 100644
--- a/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
+++ b/tests/baselines/reference/jsxJsxsCjsTransformKeyPropCustomImportPragma(jsx=react-jsxdev).js
@@ -34,13 +34,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var preact_1 = require("preact");
 var jsx_dev_runtime_js_1 = require("preact/jsx-dev-runtime.js");
 var _jsxFileName = "tests/cases/conformance/jsx/jsxs/preact.tsx";
 /// <reference path="react16.d.ts" />
 /* @jsxImportSource preact */
 var props = { answer: 42 };
 var a = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 4, columnNumber: 10 }, this);
-var b = React.createElement("div", __assign({}, props, { key: "bar" }), "text");
+var b = preact_1.createElement("div", __assign({}, props, { key: "bar" }), "text");
 //// [react.js]
 "use strict";
 var __assign = (this && this.__assign) || function () {
@@ -55,6 +56,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+var react_1 = require("react");
 var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
 var _jsxFileName = "tests/cases/conformance/jsx/jsxs/react.tsx";
 /// <reference path="react16.d.ts" />
@@ -62,4 +64,4 @@ var _jsxFileName = "tests/cases/conformance/jsx/jsxs/react.tsx";
 require("./preact");
 var props2 = { answer: 42 };
 var a2 = jsx_dev_runtime_js_1.jsxDEV("div", __assign({}, props2, { children: "text" }), "foo", false, { fileName: _jsxFileName, lineNumber: 5, columnNumber: 11 }, this);
-var b2 = React.createElement("div", __assign({}, props2, { key: "bar" }), "text");
+var b2 = react_1.createElement("div", __assign({}, props2, { key: "bar" }), "text");