importFixes: Support missing "React" at a JSXOpeningElement

src/compiler/checker.ts

@@ -210,6 +210,10 @@ namespace ts {
             getSuggestionForNonexistentProperty,
             getSuggestionForNonexistentSymbol,
             getBaseConstraintOfType,
+            getJsxNamespaceSymbol: node => {
+                node = getParseTreeNode(node);
+                return getJsxNamespaceSymbol(node, /*diagnostics*/ false);
+            },
         };
 
         const tupleTypes: GenericType[] = [];
@@ -14101,9 +14105,7 @@ namespace ts {
             checkJsxPreconditions(node);
             // The reactNamespace/jsxFactory's root symbol should be marked as 'used' so we don't incorrectly elide its import.
             // And if there is no reactNamespace/jsxFactory's 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 = getJsxNamespace();
-            const reactSym = resolveName(node.tagName, reactNamespace, SymbolFlags.Value, reactRefErr, reactNamespace);
+            const reactSym = getJsxNamespaceSymbol(node.tagName, /*diagnostics*/ true);
             if (reactSym) {
                 // Mark local symbol as referenced here because it might not have been marked
                 // if jsx emit was not react as there wont be error being emitted
@@ -14118,6 +14120,12 @@ namespace ts {
             checkJsxAttributesAssignableToTagNameAttributes(node);
         }
 
+        function getJsxNamespaceSymbol(location: ts.Node, diagnostics: boolean): Symbol {
+            const reactRefErr = diagnostics && compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined;
+            const reactNamespace = getJsxNamespace();
+            return resolveName(location, reactNamespace, SymbolFlags.Value, reactRefErr, reactNamespace);
+        }
+
         /**
          * Check if a property with the given name is known anywhere in the given type. In an object type, a property
          * is considered known if the object type is empty and the check is for assignability, if the object type has

src/compiler/types.ts

@@ -2594,6 +2594,8 @@ namespace ts {
          * Does not include properties of primitive types.
          */
         /* @internal */ getAllPossiblePropertiesOfType(type: Type): Symbol[];
+
+        /* @internal */ getJsxNamespaceSymbol(location: ts.Node): Symbol;
     }
 
     export enum NodeBuilderFlags {

src/compiler/utilities.ts

@@ -2004,6 +2004,10 @@ namespace ts {
         return node.kind === SyntaxKind.NumericLiteral;
     }
 
+    export function isStringLiteral(node: Node): node is StringLiteral {
+        return node.kind === SyntaxKind.StringLiteral;
+    }
+
     export function isStringOrNumericLiteral(node: Node): node is StringLiteral | NumericLiteral {
         const kind = node.kind;
         return kind === SyntaxKind.StringLiteral
@@ -4043,6 +4047,10 @@ namespace ts {
         return node.kind === SyntaxKind.ExportAssignment;
     }
 
+    export function isModuleDeclaration(node: Node): node is ModuleDeclaration {
+        return node.kind === SyntaxKind.ModuleDeclaration;
+    }
+
     export function isModuleOrEnumDeclaration(node: Node): node is ModuleDeclaration | EnumDeclaration {
         return node.kind === SyntaxKind.ModuleDeclaration || node.kind === SyntaxKind.EnumDeclaration;
     }

src/harness/fourslash.ts

@@ -2385,7 +2385,10 @@ namespace FourSlash {
             const codeFixes = this.getCodeFixActions(this.activeFile.fileName, errorCode);
 
             if (!codeFixes || codeFixes.length === 0) {
-                this.raiseError("No codefixes returned.");
+                if (expectedTextArray.length !== 0) {
+                    this.raiseError("No codefixes returned.");
+                }
+                return;
             }
 
             const actualTextArray: string[] = [];

src/services/codefixes/importFixes.ts

@@ -138,8 +138,22 @@ namespace ts.codefix {
 
         const currentTokenMeaning = getMeaningFromLocation(token);
         if (context.errorCode === Diagnostics._0_refers_to_a_UMD_global_but_the_current_file_is_a_module_Consider_adding_an_import_instead.code) {
-            const symbol = checker.getAliasedSymbol(checker.getSymbolAtLocation(token));
-            return getCodeActionForImport(symbol, /*isDefault*/ false, /*isNamespaceImport*/ true);
+            const umdSymbol = checker.getSymbolAtLocation(token);
+            let symbol: ts.Symbol;
+            let symbolName: string;
+            if (umdSymbol.flags & ts.SymbolFlags.Alias) {
+                symbol = checker.getAliasedSymbol(umdSymbol);
+                symbolName = name;
+            } else if (isJsxOpeningLikeElement(token.parent) && token.parent.tagName === token) {
+                // The error wasn't for the symbolAtLocation, it was for the JSX tag itself, which needs access to e.g. `React`.
+                symbol = checker.getAliasedSymbol(checker.getJsxNamespaceSymbol(token));
+                symbolName = symbol.name;
+            }
+            else {
+                Debug.fail("Either the symbol or the JSX namespace should be a UMD global if we got here");
+            }
+
+            return getCodeActionForImport(symbol, symbolName, /*isDefault*/ false, /*isNamespaceImport*/ true);
         }
 
         const candidateModules = checker.getAmbientModules();
@@ -159,15 +173,15 @@ namespace ts.codefix {
                 if (localSymbol && localSymbol.name === name && checkSymbolHasMeaning(localSymbol, currentTokenMeaning)) {
                     // check if this symbol is already used
                     const symbolId = getUniqueSymbolId(localSymbol);
-                    symbolIdActionMap.addActions(symbolId, getCodeActionForImport(moduleSymbol, /*isDefault*/ true));
+                    symbolIdActionMap.addActions(symbolId, getCodeActionForImport(moduleSymbol, name, /*isDefault*/ true));
                 }
             }
 
             // check exports with the same name
             const exportSymbolWithIdenticalName = checker.tryGetMemberInModuleExports(name, moduleSymbol);
             if (exportSymbolWithIdenticalName && checkSymbolHasMeaning(exportSymbolWithIdenticalName, currentTokenMeaning)) {
                 const symbolId = getUniqueSymbolId(exportSymbolWithIdenticalName);
-                symbolIdActionMap.addActions(symbolId, getCodeActionForImport(moduleSymbol));
+                symbolIdActionMap.addActions(symbolId, getCodeActionForImport(moduleSymbol, name));
             }
         }
 
@@ -218,7 +232,7 @@ namespace ts.codefix {
             return declarations ? some(symbol.declarations, decl => !!(getMeaningFromDeclaration(decl) & meaning)) : false;
         }
 
-        function getCodeActionForImport(moduleSymbol: Symbol, isDefault?: boolean, isNamespaceImport?: boolean): ImportCodeAction[] {
+        function getCodeActionForImport(moduleSymbol: Symbol, symbolName: string, isDefault?: boolean, isNamespaceImport?: boolean): ImportCodeAction[] {
             const existingDeclarations = getImportDeclarations(moduleSymbol);
             if (existingDeclarations.length > 0) {
                 // With an existing import statement, there are more than one actions the user can do.
@@ -375,10 +389,10 @@ namespace ts.codefix {
                 const moduleSpecifierWithoutQuotes = stripQuotes(moduleSpecifier || getModuleSpecifierForNewImport());
                 const changeTracker = createChangeTracker();
                 const importClause = isDefault
-                    ? createImportClause(createIdentifier(name), /*namedBindings*/ undefined)
+                    ? createImportClause(createIdentifier(symbolName), /*namedBindings*/ undefined)
                     : isNamespaceImport
-                        ? createImportClause(/*name*/ undefined, createNamespaceImport(createIdentifier(name)))
-                        : createImportClause(/*name*/ undefined, createNamedImports([createImportSpecifier(/*propertyName*/ undefined, createIdentifier(name))]));
+                        ? createImportClause(/*name*/ undefined, createNamespaceImport(createIdentifier(symbolName)))
+                        : createImportClause(/*name*/ undefined, createNamedImports([createImportSpecifier(/*propertyName*/ undefined, createIdentifier(symbolName))]));
                 const importDecl = createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, importClause, createLiteral(moduleSpecifierWithoutQuotes));
                 if (!lastImportDeclaration) {
                     changeTracker.insertNodeAt(sourceFile, sourceFile.getStart(), importDecl, { suffix: `${context.newLineCharacter}${context.newLineCharacter}` });
@@ -392,7 +406,7 @@ namespace ts.codefix {
                 // are there are already a new line seperating code and import statements.
                 return createCodeAction(
                     Diagnostics.Import_0_from_1,
-                    [name, `"${moduleSpecifierWithoutQuotes}"`],
+                    [symbolName, `"${moduleSpecifierWithoutQuotes}"`],
                     changeTracker.getChanges(),
                     "NewImport",
                     moduleSpecifierWithoutQuotes
@@ -412,8 +426,9 @@ namespace ts.codefix {
                         removeFileExtension(getRelativePath(moduleFileName, sourceDirectory));
 
                     function tryGetModuleNameFromAmbientModule(): string {
-                        if (moduleSymbol.valueDeclaration.kind !== SyntaxKind.SourceFile) {
-                            return moduleSymbol.name;
+                        const decl = moduleSymbol.valueDeclaration;
+                        if (isModuleDeclaration(decl) && isStringLiteral(decl.name)) {
+                            return decl.name.text;
                         }
                     }
 

tests/cases/fourslash/importNameCodeFixUMDGlobalReact0.ts

@@ -0,0 +1,28 @@
+/// <reference path="fourslash.ts" />
+
+// @jsx: react
+
+// @Filename: /node_modules/@types/react/index.d.ts
+////export = React;
+////export as namespace React;
+////declare namespace React {
+////    export class Component { render(): JSX.Element | null; }
+////}
+////declare global {
+////    namespace JSX {
+////        interface Element {}
+////    }
+////}
+
+// @Filename: /a.tsx
+////[|import { Component } from "react";
+////export class MyMap extends Component { }
+////<MyMap/>;|]
+
+goTo.file("/a.tsx");
+
+verify.importFixAtPosition([
+`import { Component } from "react";
+import * as React from "react";
+export class MyMap extends Component { }
+<MyMap/>;`]);

tests/cases/fourslash/importNameCodeFixUMDGlobalReact1.ts

@@ -0,0 +1,28 @@
+/// <reference path="fourslash.ts" />
+
+// @jsx: react
+
+// @Filename: /node_modules/@types/react/index.d.ts
+////export = React;
+////export as namespace React;
+////declare namespace React {
+////    export class Component { render(): JSX.Element | null; }
+////}
+////declare global {
+////    namespace JSX {
+////        interface Element {}
+////    }
+////}
+
+// @Filename: /a.tsx
+////[|import { Component } from "react";
+////export class MyMap extends Component { }
+////<MyMap></MyMap>;|]
+
+goTo.file("/a.tsx");
+
+verify.importFixAtPosition([
+`import { Component } from "react";
+import * as React from "react";
+export class MyMap extends Component { }
+<MyMap></MyMap>;`]);

tests/cases/fourslash/importNameCodeFixUMDGlobalReact2.ts

@@ -0,0 +1,21 @@
+/// <reference path="fourslash.ts" />
+
+// https://github.com/Microsoft/TypeScript/issues/16065
+
+// @jsx: react
+// @jsxFactory: factory
+
+// @Filename: /factory.ts
+////export function factory() { return {}; }
+////declare global {
+////    namespace JSX {
+////        interface Element {}
+////    }
+////}
+
+// @Filename: /a.tsx
+////[|<div/>|]
+
+goTo.file("/a.tsx");
+verify.not
+verify.importFixAtPosition([]);