From 6e3a3cc225d94fb893683c23b57e911720af5648 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Wed, 23 Sep 2020 12:39:52 +0100
Subject: [PATCH 1/3] Add TypeScript tests for update-react-imports

---
 ...cifiers-import-react-variable.tsx.input.js |  5 +++
 ...ifiers-import-react-variable.tsx.output.js |  6 +++
 ...nd-multiple-specifiers-import.tsx.input.js |  3 ++
 ...d-multiple-specifiers-import.tsx.output.js |  3 ++
 .../typescript/jsx-element.tsx.input.js       |  3 ++
 .../typescript/jsx-element.tsx.output.js      |  1 +
 .../typescript/jsx-fragment.tsx.input.js      |  3 ++
 .../typescript/jsx-fragment.tsx.output.js     |  1 +
 .../typescript/leading-comment.tsx.input.js   |  7 ++++
 .../typescript/leading-comment.tsx.output.js  |  5 +++
 ...act-already-used-named-export.tsx.input.js |  3 ++
 ...ct-already-used-named-export.tsx.output.js |  0
 ...rt-jsx-element-react-variable.tsx.input.js |  5 +++
 ...t-jsx-element-react-variable.tsx.output.js |  5 +++
 ...ic-default-export-jsx-element.tsx.input.js |  3 ++
 ...c-default-export-jsx-element.tsx.output.js |  1 +
 .../react-basic-default-export.tsx.input.js   |  3 ++
 .../react-basic-default-export.tsx.output.js  |  3 ++
 .../react-jsx-member-expression.tsx.input.js  |  3 ++
 .../react-jsx-member-expression.tsx.output.js |  3 ++
 .../typescript/react-not-removed.tsx.input.js |  7 ++++
 .../react-not-removed.tsx.output.js           |  7 ++++
 .../variable-already-used.tsx.input.js        |  7 ++++
 .../variable-already-used.tsx.output.js       |  0
 .../__tests__/update-react-imports-test.js    | 39 ++++++++++++++++---
 25 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.output.js

diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js
new file mode 100644
index 00000000..b4427d55
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js
@@ -0,0 +1,5 @@
+import React, { createElement, useState } from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js
new file mode 100644
index 00000000..41bcef48
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js
@@ -0,0 +1,6 @@
+import { createElement, useState } from "react";
+import * as React from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js
new file mode 100644
index 00000000..e2b936aa
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js
@@ -0,0 +1,3 @@
+import React, { createElement, useState } from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js
new file mode 100644
index 00000000..51ebe952
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js
@@ -0,0 +1,3 @@
+import { createElement, useState } from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js
new file mode 100644
index 00000000..0d900289
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js
new file mode 100644
index 00000000..8d6e7b5a
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js
@@ -0,0 +1 @@
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js
new file mode 100644
index 00000000..6a8c34d4
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+<></>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js
new file mode 100644
index 00000000..ef5e4912
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js
@@ -0,0 +1 @@
+<></>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js
new file mode 100644
index 00000000..0ace368f
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js
@@ -0,0 +1,7 @@
+/**
+ * Hello world.
+ */
+
+import * as React from "react";
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js
new file mode 100644
index 00000000..f739df62
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js
@@ -0,0 +1,5 @@
+/**
+ * Hello world.
+ */
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js
new file mode 100644
index 00000000..33f35684
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+React.useState(false);
\ No newline at end of file
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.output.js
new file mode 100644
index 00000000..e69de29b
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js
new file mode 100644
index 00000000..ec844c2f
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+React.createElement('div', {});
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js
new file mode 100644
index 00000000..3995e26c
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js
@@ -0,0 +1,5 @@
+import { createElement } from "react";
+
+createElement('div', {});
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js
new file mode 100644
index 00000000..16c86170
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js
new file mode 100644
index 00000000..f3b72ee9
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js
@@ -0,0 +1 @@
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js
new file mode 100644
index 00000000..37f5d41d
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+React.createElement('div', 'la');
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js
new file mode 100644
index 00000000..c4c96c0f
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js
@@ -0,0 +1,3 @@
+import { createElement } from "react";
+
+createElement('div', 'la');
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js
new file mode 100644
index 00000000..5d34788a
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js
@@ -0,0 +1,3 @@
+import React, { useState } from 'react';
+
+<React.Fragment />
\ No newline at end of file
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js
new file mode 100644
index 00000000..7627281e
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js
@@ -0,0 +1,3 @@
+import { Fragment, useState } from 'react';
+
+<Fragment />
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js
new file mode 100644
index 00000000..73b0dae2
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+React.createElement('div', {});
+
+Promise.resolve(React);
+
+<div>Hi</div>
\ No newline at end of file
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js
new file mode 100644
index 00000000..8dc1bf74
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+React.createElement('div', {});
+
+Promise.resolve(React);
+
+<div>Hi</div>
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js
new file mode 100644
index 00000000..c2d7852c
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+React.createElement('div', {});
+
+createElement('someFunction');
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.output.js
new file mode 100644
index 00000000..e69de29b
diff --git a/transforms/__tests__/update-react-imports-test.js b/transforms/__tests__/update-react-imports-test.js
index 599127be..be14068c 100644
--- a/transforms/__tests__/update-react-imports-test.js
+++ b/transforms/__tests__/update-react-imports-test.js
@@ -8,20 +8,23 @@
 
 'use strict';
 
+const flowOnlyTests = [
+  'flow-default-and-type-specifier-import-react-variable',
+  'flow-default-and-type-specifier-import',
+  'react-type-not-removed',
+  'react-type-default-export',
+];
+
 const tests = [
   'default-and-multiple-specifiers-import-react-variable',
   'default-and-multiple-specifiers-import',
-  'flow-default-and-type-specifier-import-react-variable',
-  'flow-default-and-type-specifier-import',
   'jsx-element',
   'jsx-fragment',
   'leading-comment',
   'react-basic-default-export-jsx-element-react-variable',
   'react-basic-default-export-jsx-element',
   'react-basic-default-export',
-  'react-type-default-export',
   'react-not-removed',
-  'react-type-not-removed',
   'variable-already-used',
   'react-jsx-member-expression',
   'react-already-used-named-export',
@@ -35,7 +38,7 @@ jest.mock('../update-react-imports', () => {
 
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
 
-tests.forEach((test) => {
+[...tests, ...flowOnlyTests].forEach((test) => {
   defineTest(
     __dirname,
     'update-react-imports',
@@ -43,3 +46,29 @@ tests.forEach((test) => {
     `update-react-imports/${test}`
   );
 });
+
+describe('typescript', () => {
+  beforeEach(() => {
+    jest.mock('../update-react-imports', () => {
+      return Object.assign(
+        require.requireActual('../update-react-imports'),
+        {
+          parser: 'tsx'
+        }
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  [...tests].forEach((test) => {
+    defineTest(
+      __dirname,
+      'update-react-imports',
+      null,
+      `update-react-imports/typescript/${test}.tsx`
+    );
+  });
+});

From 009dd054bcec094960f068b05a8d8ef2475c3161 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Wed, 23 Sep 2020 12:40:06 +0100
Subject: [PATCH 2/3] Fix update-react-imports for TS

---
 transforms/update-react-imports.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/transforms/update-react-imports.js b/transforms/update-react-imports.js
index a18b96b8..a3ad6ce5 100644
--- a/transforms/update-react-imports.js
+++ b/transforms/update-react-imports.js
@@ -40,14 +40,16 @@ module.exports = function(file, api, options) {
   const reactImportPaths = root
     .find(j.ImportDeclaration, {
       type: 'ImportDeclaration',
-      source: {
-        type: 'Literal',
-      },
     })
     .filter(path => {
       return (
-        path.value.source.value === 'React' ||
-        path.value.source.value === 'react'
+        (
+          path.value.source.type === 'Literal' ||
+          path.value.source.type === 'StringLiteral'
+        ) && (
+          path.value.source.value === 'React' ||
+          path.value.source.value === 'react'
+        )
       );
     });
 

From 452d536042f0a26ac7a7b1a69daaedcde3d333d9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Wed, 23 Sep 2020 12:46:08 +0100
Subject: [PATCH 3/3] Add more tests

---
 .../typescript/preserve-types-default.tsx.input.js         | 5 +++++
 .../typescript/preserve-types-default.tsx.output.js        | 5 +++++
 .../typescript/preserve-types-namespace.tsx.input.js       | 5 +++++
 .../typescript/preserve-types-namespace.tsx.output.js      | 0
 transforms/__tests__/update-react-imports-test.js          | 7 ++++++-
 5 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js
 create mode 100644 transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.output.js

diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js
new file mode 100644
index 00000000..2f8f600f
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js
new file mode 100644
index 00000000..f27298b2
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js
new file mode 100644
index 00000000..f27298b2
--- /dev/null
+++ b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.output.js
new file mode 100644
index 00000000..e69de29b
diff --git a/transforms/__tests__/update-react-imports-test.js b/transforms/__tests__/update-react-imports-test.js
index be14068c..179f1475 100644
--- a/transforms/__tests__/update-react-imports-test.js
+++ b/transforms/__tests__/update-react-imports-test.js
@@ -15,6 +15,11 @@ const flowOnlyTests = [
   'react-type-default-export',
 ];
 
+const tsOnlyTests = [
+  'preserve-types-namespace',
+  'preserve-types-default',
+];
+
 const tests = [
   'default-and-multiple-specifiers-import-react-variable',
   'default-and-multiple-specifiers-import',
@@ -63,7 +68,7 @@ describe('typescript', () => {
     jest.resetModules();
   });
 
-  [...tests].forEach((test) => {
+  [...tests, ...tsOnlyTests].forEach((test) => {
     defineTest(
       __dirname,
       'update-react-imports',