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: {