From 46b79728853e8c47e5a0a0a1de688e2d553e5426 Mon Sep 17 00:00:00 2001
From: Hoang Pham <11971101+hoangpham95@users.noreply.github.com>
Date: Fri, 16 Aug 2019 12:46:55 -0700
Subject: [PATCH] Add JSX codefix if available (#32281)

* Add JSX codefix if available

* Update react jsx.

* Update diagnostic code.
---
 src/compiler/diagnosticMessages.json          |  4 +++
 src/services/codefixes/fixEnableJsxFlag.ts    | 35 +++++++++++++++++++
 src/services/tsconfig.json                    |  1 +
 ...bleJsxFlag_blankCompilerOptionsJsConfig.ts | 23 ++++++++++++
 ...bleJsxFlag_blankCompilerOptionsTsConfig.ts | 23 ++++++++++++
 ...lag_disabledInCompilerOptionsInJsConfig.ts | 24 +++++++++++++
 ...lag_disabledInCompilerOptionsInTsConfig.ts | 24 +++++++++++++
 ...sxFlag_missingCompilerOptionsInJsconfig.ts | 19 ++++++++++
 ...sxFlag_missingCompilerOptionsInTsconfig.ts | 19 ++++++++++
 .../codefixEnableJsxFlag_noTsconfig.ts        |  7 ++++
 10 files changed, 179 insertions(+)
 create mode 100644 src/services/codefixes/fixEnableJsxFlag.ts
 create mode 100644 tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts
 create mode 100644 tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts
 create mode 100644 tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts
 create mode 100644 tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts
 create mode 100644 tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts
 create mode 100644 tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts
 create mode 100644 tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts

diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json
index 492f853c347..0bd4693875e 100644
--- a/src/compiler/diagnosticMessages.json
+++ b/src/compiler/diagnosticMessages.json
@@ -5112,6 +5112,10 @@
         "category": "Message",
         "code": 95087
     },
+    "Enable the '--jsx' flag in your configuration file": {
+        "category": "Message",
+        "code": 95088
+    },
 
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",
diff --git a/src/services/codefixes/fixEnableJsxFlag.ts b/src/services/codefixes/fixEnableJsxFlag.ts
new file mode 100644
index 00000000000..728366392f1
--- /dev/null
+++ b/src/services/codefixes/fixEnableJsxFlag.ts
@@ -0,0 +1,35 @@
+/* @internal */
+namespace ts.codefix {
+    const fixID = "fixEnableJsxFlag";
+    const errorCodes = [Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided.code];
+    registerCodeFix({
+        errorCodes,
+        getCodeActions: context => {
+            const { configFile } = context.program.getCompilerOptions();
+            if (configFile === undefined) {
+                return undefined;
+            }
+
+            const changes = textChanges.ChangeTracker.with(context, changeTracker =>
+                doChange(changeTracker, configFile)
+            );
+            return [
+                createCodeFixActionNoFixId(fixID, changes, Diagnostics.Enable_the_jsx_flag_in_your_configuration_file)
+            ];
+        },
+        fixIds: [fixID],
+        getAllCodeActions: context =>
+            codeFixAll(context, errorCodes, changes => {
+                const { configFile } = context.program.getCompilerOptions();
+                if (configFile === undefined) {
+                    return undefined;
+                }
+
+                doChange(changes, configFile);
+            })
+    });
+
+    function doChange(changeTracker: textChanges.ChangeTracker, configFile: TsConfigSourceFile) {
+        setJsonCompilerOptionValue(changeTracker, configFile, "jsx", createStringLiteral("react"));
+    }
+}
diff --git a/src/services/tsconfig.json b/src/services/tsconfig.json
index c2a6946b5ed..6b52393422c 100644
--- a/src/services/tsconfig.json
+++ b/src/services/tsconfig.json
@@ -65,6 +65,7 @@
         "codefixes/fixClassSuperMustPrecedeThisAccess.ts",
         "codefixes/fixConstructorForDerivedNeedSuperCall.ts",
         "codefixes/fixEnableExperimentalDecorators.ts",
+        "codefixes/fixEnableJsxFlag.ts",
         "codefixes/fixExtendsInterfaceBecomesImplements.ts",
         "codefixes/fixForgottenThisPropertyAccess.ts",
         "codefixes/fixUnusedIdentifier.ts",
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts
new file mode 100644
index 00000000000..9d3c14f45bb
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts
@@ -0,0 +1,23 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/jsconfig.json
+////{
+////    "compilerOptions": {
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts
new file mode 100644
index 00000000000..7b314feeecd
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts
@@ -0,0 +1,23 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>;
+
+// @Filename: /dir/tsconfig.json
+////{
+////    "compilerOptions": {
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts
new file mode 100644
index 00000000000..dbc7d39ec6c
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts
@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>;
+
+// @Filename: /dir/jsconfig.json
+////{
+////    "compilerOptions": {
+////        "jsx": false,
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts
new file mode 100644
index 00000000000..752abc156f7
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts
@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/tsconfig.json
+////{
+////    "compilerOptions": {
+////        "jsx": false,
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts
new file mode 100644
index 00000000000..89769c49d0b
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts
@@ -0,0 +1,19 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/jsconfig.json
+////{
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": { "jsx": "react" },
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts
new file mode 100644
index 00000000000..dc81c7970af
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts
@@ -0,0 +1,19 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/tsconfig.json
+////{
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": { "jsx": "react" },
+}`,
+    },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts
new file mode 100644
index 00000000000..f07f0035fb2
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts
@@ -0,0 +1,7 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+goTo.file("/dir/a.tsx");
+verify.not.codeFixAvailable();