fix(46803): remove unused react imports with enabled react-jsxdev, react-jsx (microsoft#47247)

Author: a-tarasyuk

src/services/codefixes/importFixes.ts

@@ -869,10 +869,6 @@ namespace ts.codefix {
         return { kind: ImportFixKind.PromoteTypeOnly, typeOnlyAliasDeclaration };
     }
 
-    function jsxModeNeedsExplicitImport(jsx: JsxEmit | undefined) {
-        return jsx === JsxEmit.React || jsx === JsxEmit.ReactNative;
-    }
-
     function getSymbolName(sourceFile: SourceFile, checker: TypeChecker, symbolToken: Identifier, compilerOptions: CompilerOptions): string {
         const parent = symbolToken.parent;
         if ((isJsxOpeningLikeElement(parent) || isJsxClosingElement(parent)) && parent.tagName === symbolToken && jsxModeNeedsExplicitImport(compilerOptions.jsx)) {

src/services/organizeImports.ts

@@ -95,6 +95,7 @@ namespace ts.OrganizeImports {
         }
 
         const typeChecker = program.getTypeChecker();
+        const compilerOptions = program.getCompilerOptions();
         const jsxNamespace = typeChecker.getJsxNamespace(sourceFile);
         const jsxFragmentFactory = typeChecker.getJsxFragmentFactory(sourceFile);
         const jsxElementsPresent = !!(sourceFile.transformFlags & TransformFlags.ContainsJsx);
@@ -162,7 +163,7 @@ namespace ts.OrganizeImports {
 
         function isDeclarationUsed(identifier: Identifier) {
             // The JSX factory symbol is always used if JSX elements are present - even if they are not allowed.
-            return jsxElementsPresent && (identifier.text === jsxNamespace || jsxFragmentFactory && identifier.text === jsxFragmentFactory) ||
+            return jsxElementsPresent && (identifier.text === jsxNamespace || jsxFragmentFactory && identifier.text === jsxFragmentFactory) && jsxModeNeedsExplicitImport(compilerOptions.jsx) ||
                 FindAllReferences.Core.isSymbolReferencedInFile(identifier, typeChecker, sourceFile);
         }
     }

src/services/utilities.ts

@@ -3335,5 +3335,9 @@ namespace ts {
         };
     }
 
+    export function jsxModeNeedsExplicitImport(jsx: JsxEmit | undefined) {
+        return jsx === JsxEmit.React || jsx === JsxEmit.ReactNative;
+    }
+
     // #endregion
 }

tests/baselines/reference/organizeImports/JsxFactoryUsedJs.ts

@@ -6,6 +6,5 @@ import { React, Other } from "react";
 
 // ==ORGANIZED==
 
-import { React } from "react";
 
 <div/>;

tests/cases/fourslash/organizeImportsReactJsx.ts

@@ -0,0 +1,33 @@
+/// <reference path='fourslash.ts' />
+
+// @allowSyntheticDefaultImports: true
+// @moduleResolution: node
+// @noUnusedLocals: true
+// @target: es2018
+// @jsx: react-jsx
+
+// @filename: test.tsx
+////import React from 'react';
+////export default () => <div></div>
+
+// @filename: node_modules/react/package.json
+////{
+////    "name": "react",
+////    "types": "index.d.ts",
+////}
+
+// @filename: node_modules/react/index.d.ts
+////export = React;
+////declare namespace JSX {
+////    interface IntrinsicElements { [x: string]: any; }
+////}
+////declare namespace React {}
+
+// @filename: node_modules/react/jsx-runtime.d.ts
+////import './';
+
+// @filename: node_modules/react/jsx-dev-runtime.d.ts
+////import './';
+
+goTo.file("test.tsx");
+verify.organizeImports(`export default () => <div></div>`);

tests/cases/fourslash/organizeImportsReactJsxDev.ts

@@ -0,0 +1,33 @@
+/// <reference path='fourslash.ts' />
+
+// @allowSyntheticDefaultImports: true
+// @moduleResolution: node
+// @noUnusedLocals: true
+// @target: es2018
+// @jsx: react-jsxdev
+
+// @filename: test.tsx
+////import React from 'react';
+////export default () => <div></div>
+
+// @filename: node_modules/react/package.json
+////{
+////    "name": "react",
+////    "types": "index.d.ts",
+////}
+
+// @filename: node_modules/react/index.d.ts
+////export = React;
+////declare namespace JSX {
+////    interface IntrinsicElements { [x: string]: any; }
+////}
+////declare namespace React {}
+
+// @filename: node_modules/react/jsx-runtime.d.ts
+////import './';
+
+// @filename: node_modules/react/jsx-dev-runtime.d.ts
+////import './';
+
+goTo.file("test.tsx");
+verify.organizeImports(`export default () => <div></div>`);