Add jsxFactory compiler option.

src/compiler/checker.ts

@@ -10795,13 +10795,24 @@ namespace ts {
             checkGrammarJsxElement(node);
             checkJsxPreconditions(node);
 
-            // The reactNamespace symbol should be marked as 'used' so we don't incorrectly elide its import. And if there
-            // is no reactNamespace symbol in scope when targeting React emit, we should issue an error.
-            const reactRefErr = compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined;
-            const reactNamespace = compilerOptions.reactNamespace ? compilerOptions.reactNamespace : "React";
-            const reactSym = resolveName(node.tagName, reactNamespace, SymbolFlags.Value, reactRefErr, reactNamespace);
-            if (reactSym) {
-                getSymbolLinks(reactSym).referenced = true;
+            // The JSX factory namespace symbol should be marked as 'used' so we don't incorrectly elide its import. And if
+            // it isn't in scope when targeting React emit, we should issue an error.
+            const jsxFactoryRefErr = compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined;
+            let jsxFactoryNamespace = "React";
+            if (compilerOptions.jsxFactory) {
+                let { entityName } = parseIsolatedEntityName(compilerOptions.jsxFactory);
+                while (entityName.kind === SyntaxKind.QualifiedName) {
+                    entityName = (<QualifiedName>entityName).left;
+                }
+                Debug.assertNode(entityName, node => node.kind === SyntaxKind.Identifier);
+                jsxFactoryNamespace = (<Identifier>entityName).text;
+            }
+            else if (compilerOptions.reactNamespace) {
+                jsxFactoryNamespace = compilerOptions.reactNamespace;
+            }
+            const jsxFactorySym = resolveName(node.tagName, jsxFactoryNamespace, SymbolFlags.Value, jsxFactoryRefErr, jsxFactoryNamespace);
+            if (jsxFactorySym) {
+                getSymbolLinks(jsxFactorySym).referenced = true;
             }
 
             const targetAttributesType = getJsxElementAttributesType(node);

src/compiler/commandLineParser.ts

@@ -72,6 +72,11 @@ namespace ts {
             paramType: Diagnostics.KIND,
             description: Diagnostics.Specify_JSX_code_generation_Colon_preserve_or_react,
         },
+        {
+            name: "jsxFactory",
+            type: "string",
+            description: Diagnostics.Specify_the_JSX_factory_function_to_use_when_targeting_react_JSX_emit_e_g_React_createElement_or_h,
+        },
         {
             name: "reactNamespace",
             type: "string",

src/compiler/diagnosticMessages.json

@@ -2365,6 +2365,14 @@
         "category": "Error",
         "code": 5066
     },
+    "Option '{0}' can only be used when '{1}' is '{2}'.": {
+        "category": "Error",
+        "code": 5067
+    },
+    "Invalid value for '{0}'. '{1}' is not a valid identifier/qualified-name.": {
+        "category": "Error",
+        "code": 5068
+    },
     "Concatenate and emit output to single file.": {
         "category": "Message",
         "code": 6001
@@ -2861,6 +2869,10 @@
         "category": "Error",
         "code": 6140
     },
+    "Specify the JSX factory function to use when targeting 'react' JSX emit, e.g. 'React.createElement' or 'h'.": {
+        "category": "Message",
+        "code": 6141
+    },
     "Variable '{0}' implicitly has an '{1}' type.": {
         "category": "Error",
         "code": 7005

src/compiler/factory.ts

@@ -1618,17 +1618,38 @@ namespace ts {
         );
     }
 
-    function createReactNamespace(reactNamespace: string, parent: JsxOpeningLikeElement) {
+    export function createEntityName(entityName: string) {
+        const { entityName: node } = parseIsolatedEntityName(entityName);
+
+        // Parsing occurred in an isolated context, so nodes need to be synthesized
+        // and positions erased for correct positioning in emit.
+        const synthesize = (node: Node) => {
+            node.pos = -1;
+            node.end = -1;
+            node.flags |= NodeFlags.Synthesized;
+            forEachChild(node, synthesize);
+        };
+        synthesize(node);
+
+        return node;
+    }
+
+    export function createJsxFactory(jsxFactory: string) {
+        const entityName = createEntityName(jsxFactory);
+        return createExpressionFromEntityName(entityName);
+    }
+
+    export function createReactCreateElement(reactNamespace: string | undefined, parentElement: JsxOpeningLikeElement) {
         // To ensure the emit resolver can properly resolve the namespace, we need to
         // treat this identifier as if it were a source tree node by clearing the `Synthesized`
         // flag and setting a parent node.
         const react = createIdentifier(reactNamespace || "React");
         react.flags &= ~NodeFlags.Synthesized;
-        react.parent = parent;
-        return react;
+        react.parent = parentElement;
+        return createPropertyAccess(react, "createElement");
     }
 
-    export function createReactCreateElement(reactNamespace: string, tagName: Expression, props: Expression, children: Expression[], parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
+    export function createJsxFactoryCall(jsxFactory: Expression, tagName: Expression, props: Expression, children: Expression[], parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
         const argumentsList = [tagName];
         if (props) {
             argumentsList.push(props);
@@ -1651,10 +1672,7 @@ namespace ts {
         }
 
         return createCall(
-            createPropertyAccess(
-                createReactNamespace(reactNamespace, parentElement),
-                "createElement"
-            ),
+            jsxFactory,
             /*typeArguments*/ undefined,
             argumentsList,
             location
@@ -2909,4 +2927,4 @@ namespace ts {
     function tryGetModuleNameFromDeclaration(declaration: ImportEqualsDeclaration | ImportDeclaration | ExportDeclaration, host: EmitHost, resolver: EmitResolver, compilerOptions: CompilerOptions) {
         return tryGetModuleNameFromFile(resolver.getExternalModuleFileFromDeclaration(declaration), host, compilerOptions);
     }
-}
+}

src/compiler/parser.ts

@@ -462,6 +462,13 @@ namespace ts {
         return result;
     }
 
+    /* @internal */
+    export function parseIsolatedEntityName(content: string) {
+        const result = Parser.parseIsolatedEntityName(content);
+        Parser.fixupParentReferences(result.entityName);
+        return result;
+    }
+
     /* @internal */
     // Exposed only for testing.
     export function parseJSDocTypeExpressionForTests(content: string, start?: number, length?: number) {
@@ -584,6 +591,20 @@ namespace ts {
             return result;
         }
 
+        export function parseIsolatedEntityName(content: string, allowReservedWords = false) {
+            initializeState("file.js", content, ScriptTarget.Latest, /*_syntaxCursor:*/ undefined, ScriptKind.JS);
+            sourceFile = <SourceFile>{ languageVariant: LanguageVariant.Standard, text: content };
+
+            nextToken();
+            const entityName = parseEntityName(allowReservedWords);
+            parseExpected(SyntaxKind.EndOfFileToken);
+
+            const diagnostics = parseDiagnostics;
+            clearState();
+
+            return { entityName, diagnostics };
+        }
+
         function getLanguageVariant(scriptKind: ScriptKind) {
             // .tsx and .jsx files are treated as jsx language variant.
             return scriptKind === ScriptKind.TSX || scriptKind === ScriptKind.JSX || scriptKind === ScriptKind.JS ? LanguageVariant.JSX : LanguageVariant.Standard;

src/compiler/program.ts

@@ -1533,6 +1533,21 @@ namespace ts {
                 programDiagnostics.add(createCompilerDiagnostic(Diagnostics.Invalid_value_for_reactNamespace_0_is_not_a_valid_identifier, options.reactNamespace));
             }
 
+            if (options.jsxFactory) {
+                if (options.jsx !== JsxEmit.React) {
+                    programDiagnostics.add(createCompilerDiagnostic(Diagnostics.Option_0_can_only_be_used_when_1_is_2, "jsxFactory", "jsx", "react"));
+                }
+
+                if (options.reactNamespace) {
+                    programDiagnostics.add(createCompilerDiagnostic(Diagnostics.Option_0_cannot_be_specified_with_option_1, "jsxFactory", "reactNamespace"));
+                }
+
+                const { diagnostics } = parseIsolatedEntityName(options.jsxFactory);
+                if (diagnostics.length > 0) {
+                    programDiagnostics.add(createCompilerDiagnostic(Diagnostics.Invalid_value_for_0_1_is_not_a_valid_identifier_Slashqualified_name, "jsxFactory", options.jsxFactory));
+                }
+            }
+
             // If the emit is enabled make sure that every output file is unique and not overwriting any of the input files
             if (!options.noEmit && !options.suppressOutputPathCheck) {
                 const emitHost = getEmitHost();

src/compiler/transformers/jsx.ts

@@ -113,8 +113,12 @@ namespace ts {
                     || createAssignHelper(currentSourceFile.externalHelpersModuleName, segments);
             }
 
-            const element = createReactCreateElement(
-                compilerOptions.reactNamespace,
+            const jsxFactory = compilerOptions.jsxFactory
+                ? createJsxFactory(compilerOptions.jsxFactory)
+                : createReactCreateElement(compilerOptions.reactNamespace, node);
+
+            const element = createJsxFactoryCall(
+                jsxFactory,
                 tagName,
                 objectProperties,
                 filter(map(children, transformJsxChildToExpression), isDefined),

src/compiler/types.ts

@@ -2719,6 +2719,7 @@ namespace ts {
         inlineSources?: boolean;
         isolatedModules?: boolean;
         jsx?: JsxEmit;
+        jsxFactory?: string;
         lib?: string[];
         /*@internal*/listEmittedFiles?: boolean;
         /*@internal*/listFiles?: boolean;

src/harness/unittests/transpile.ts

@@ -293,6 +293,10 @@ var x = 0;`, {
             options: { compilerOptions: { jsx: 1 }, fileName: "input.js", reportDiagnostics: true }
         });
 
+        transpilesCorrectly("Supports setting 'jsxFactory'", "x;", {
+            options: { compilerOptions: { jsxFactory: "React.createElement", jsx: JsxEmit.React }, fileName: "input.js", reportDiagnostics: true }
+        });
+
         transpilesCorrectly("Supports setting 'lib'", "x;", {
             options: { compilerOptions: { lib: ["es2015", "dom"] }, fileName: "input.js", reportDiagnostics: true }
         });

tests/baselines/reference/tsxReactEmitJsxFactory1.errors.txt

@@ -0,0 +1,15 @@
+tests/cases/conformance/jsx/file.tsx(8,2): error TS2304: Cannot find name 'h'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
+    declare module JSX {
+    	interface IntrinsicElements {
+    		[s: string]: any;
+    	}
+    }
+
+    // This should issue an error as 'h' is not declared.
+    <div />;
+     ~~~
+!!! error TS2304: Cannot find name 'h'.
+

tests/baselines/reference/tsxReactEmitJsxFactory1.js

@@ -0,0 +1,14 @@
+//// [file.tsx]
+declare module JSX {
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+// This should issue an error as 'h' is not declared.
+<div />;
+
+
+//// [file.js]
+// This should issue an error as 'h' is not declared.
+h("div", null);

tests/baselines/reference/tsxReactEmitJsxFactory2.js

@@ -0,0 +1,14 @@
+//// [file.tsx]
+declare module JSX {
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+declare var h: any;
+
+<div />;
+
+
+//// [file.js]
+h("div", null);

tests/baselines/reference/tsxReactEmitJsxFactory2.symbols

@@ -0,0 +1,18 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 0, 20))
+
+		[s: string]: any;
+>s : Symbol(s, Decl(file.tsx, 2, 3))
+	}
+}
+
+declare var h: any;
+>h : Symbol(h, Decl(file.tsx, 6, 11))
+
+<div />;
+>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 0, 20))
+

tests/baselines/reference/tsxReactEmitJsxFactory2.types

@@ -0,0 +1,19 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface IntrinsicElements {
+>IntrinsicElements : IntrinsicElements
+
+		[s: string]: any;
+>s : string
+	}
+}
+
+declare var h: any;
+>h : any
+
+<div />;
+><div /> : any
+>div : any
+

tests/baselines/reference/tsxReactEmitJsxFactory3.js

@@ -0,0 +1,14 @@
+//// [file.tsx]
+declare module JSX {
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+declare var React: any;
+
+<div />;
+
+
+//// [file.js]
+React.createElement("div", null);

tests/baselines/reference/tsxReactEmitJsxFactory3.symbols

@@ -0,0 +1,18 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 0, 20))
+
+		[s: string]: any;
+>s : Symbol(s, Decl(file.tsx, 2, 3))
+	}
+}
+
+declare var React: any;
+>React : Symbol(React, Decl(file.tsx, 6, 11))
+
+<div />;
+>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 0, 20))
+

tests/baselines/reference/tsxReactEmitJsxFactory3.types

@@ -0,0 +1,19 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface IntrinsicElements {
+>IntrinsicElements : IntrinsicElements
+
+		[s: string]: any;
+>s : string
+	}
+}
+
+declare var React: any;
+>React : any
+
+<div />;
+><div /> : any
+>div : any
+

tests/baselines/reference/tsxReactEmitJsxFactory4.js

@@ -0,0 +1,14 @@
+//// [file.tsx]
+declare module JSX {
+	interface IntrinsicElements {
+		[s: string]: any;
+	}
+}
+
+declare var a: any;
+
+<div />;
+
+
+//// [file.js]
+a.b.c("div", null);