Use synthetic identifier during emit instead

Author: RyanCavanaugh

src/compiler/emitter.ts

@@ -1177,9 +1177,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
                 }
 
                 function emitJsxElement(openingNode: JsxOpeningLikeElement, children?: JsxChild[]) {
+                    let syntheticReactRef = <Identifier>createSynthesizedNode(SyntaxKind.Identifier);
+                    syntheticReactRef.text = 'React';
+                    syntheticReactRef.parent = openingNode;
+
                     // Call React.createElement(tag, ...
                     emitLeadingComments(openingNode);
-                    write("React.createElement(");
+                    emitExpressionIdentifier(syntheticReactRef);
+                    write(".createElement(");
                     emitTagName(openingNode.tagName);
                     write(", ");
 
@@ -1193,7 +1198,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
                         // a call to React.__spread
                         let attrs = openingNode.attributes;
                         if (forEach(attrs, attr => attr.kind === SyntaxKind.JsxSpreadAttribute)) {
-                            write("React.__spread(");
+                            emitExpressionIdentifier(syntheticReactRef);
+                            write(".__spread(");
 
                             let haveOpenedObjectLiteral = false;
                             for (let i = 0; i < attrs.length; i++) {

tests/baselines/reference/tsxReactEmit6.js

@@ -0,0 +1,36 @@
+//// [tests/cases/conformance/jsx/tsxReactEmit6.tsx] ////
+
+//// [file.tsx]
+
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+//// [react-consumer.tsx]
+namespace M {
+	export var React: any;
+}
+
+namespace M {
+	// Should emit M.React.createElement
+	//  and M.React.__spread
+	var foo;
+	var spread1 = <div x='' {...foo} y='' />;
+}
+
+
+//// [file.js]
+//// [react-consumer.js]
+var M;
+(function (M) {
+})(M || (M = {}));
+var M;
+(function (M) {
+    // Should emit M.React.createElement
+    //  and M.React.__spread
+    var foo;
+    var spread1 = M.React.createElement("div", M.React.__spread({x: ''}, foo, {y: ''}));
+})(M || (M = {}));

tests/baselines/reference/tsxReactEmit6.symbols

@@ -0,0 +1,39 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface Element { }
+>Element : Symbol(Element, Decl(file.tsx, 1, 20))
+
+	interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 22))
+
+		[s: string]: any;
+>s : Symbol(s, Decl(file.tsx, 4, 3))
+	}
+}
+
+=== tests/cases/conformance/jsx/react-consumer.tsx ===
+namespace M {
+>M : Symbol(M, Decl(react-consumer.tsx, 0, 0), Decl(react-consumer.tsx, 2, 1))
+
+	export var React: any;
+>React : Symbol(React, Decl(react-consumer.tsx, 1, 11))
+}
+
+namespace M {
+>M : Symbol(M, Decl(react-consumer.tsx, 0, 0), Decl(react-consumer.tsx, 2, 1))
+
+	// Should emit M.React.createElement
+	//  and M.React.__spread
+	var foo;
+>foo : Symbol(foo, Decl(react-consumer.tsx, 7, 4))
+
+	var spread1 = <div x='' {...foo} y='' />;
+>spread1 : Symbol(spread1, Decl(react-consumer.tsx, 8, 4))
+>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 2, 22))
+>x : Symbol(unknown)
+>y : Symbol(unknown)
+}
+

tests/baselines/reference/tsxReactEmit6.types

@@ -0,0 +1,41 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+declare module JSX {
+>JSX : any
+
+	interface Element { }
+>Element : Element
+
+	interface IntrinsicElements {
+>IntrinsicElements : IntrinsicElements
+
+		[s: string]: any;
+>s : string
+	}
+}
+
+=== tests/cases/conformance/jsx/react-consumer.tsx ===
+namespace M {
+>M : typeof M
+
+	export var React: any;
+>React : any
+}
+
+namespace M {
+>M : typeof M
+
+	// Should emit M.React.createElement
+	//  and M.React.__spread
+	var foo;
+>foo : any
+
+	var spread1 = <div x='' {...foo} y='' />;
+>spread1 : JSX.Element
+><div x='' {...foo} y='' /> : JSX.Element
+>div : any
+>x : any
+>foo : any
+>y : any
+}
+

tests/cases/conformance/jsx/tsxReactEmit6.tsx

@@ -0,0 +1,22 @@
+//@jsx: react
+//@module: commonjs
+
+//@filename: file.tsx
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+//@filename: react-consumer.tsx
+namespace M {
+	export var React: any;
+}
+
+namespace M {
+	// Should emit M.React.createElement
+	//  and M.React.__spread
+	var foo;
+	var spread1 = <div x='' {...foo} y='' />;
+}