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
index f27298b..1ed903d 100644
--- 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
@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { FunctionComponent } from 'react';
-const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+const App: FunctionComponent<{ message: string }> = ({ message }) => (
{message}
);
diff --git a/transforms/update-react-imports.js b/transforms/update-react-imports.js
index 2871541..bf4a12b 100644
--- a/transforms/update-react-imports.js
+++ b/transforms/update-react-imports.js
@@ -31,6 +31,7 @@ module.exports = function(file, api, options) {
path =>
path.parent.value.type !== 'MemberExpression' &&
path.parent.value.type !== 'QualifiedTypeIdentifier' &&
+ path.parent.value.type !== 'TSQualifiedName' &&
path.parent.value.type !== 'JSXMemberExpression',
)
.size() > 0
@@ -118,6 +119,12 @@ module.exports = function(file, api, options) {
path.parent.value.type === 'QualifiedTypeIdentifier' &&
path.parent.value.qualification.name === 'React'
) &&
+ !(
+ (
+ path.parent.value.type === 'TSQualifiedName' &&
+ path.parent.value.left.name === 'React'
+ )
+ ) &&
!(
path.parent.value.type === 'JSXMemberExpression' &&
path.parent.value.object.name === 'React'
@@ -159,6 +166,30 @@ module.exports = function(file, api, options) {
}
});
+ root
+ .find(j.TSQualifiedName, {
+ left: {
+ type: 'Identifier',
+ name: 'React',
+ },
+ })
+ .forEach(path => {
+ const id = path.value.right.name;
+ reactIdentifiers[id] = id;
+ // We don't tend to use type imports
+ // Comment line above out and uncomment this to use type imports
+ // Also ignoring typeof imports?
+ // reactTypeIdentifiers[id] = id
+
+ // if (reactIdentifiers[id]) {
+ // canDestructureReactVariable = false
+ // }
+
+ if (isVariableDeclared(id)) {
+ canDestructureReactVariable = false;
+ }
+ });
+
// Add React identifiers to separate object so we can destructure the imports
// later if we can. If a variable that we are trying to import has already
// been declared, do not try to destructure imports
@@ -216,6 +247,19 @@ module.exports = function(file, api, options) {
j(path).replaceWith(j.identifier(id));
});
+ root
+ .find(j.TSQualifiedName, {
+ left: {
+ type: 'Identifier',
+ name: 'React',
+ },
+ })
+ .forEach(path => {
+ const id = path.value.right.name;
+
+ j(path).replaceWith(j.identifier(id));
+ });
+
root
.find(j.MemberExpression, {
object: {