add destructure named imports option (reactjs#278)

lunaruan · web-flow · commit bb676bd9a732 · 2020-10-09T12:49:14.000+01:00
diff --git a/README.md b/README.md
@@ -147,6 +147,10 @@ npx react-codemod sort-comp <path>
 
 [As of Babel 7.9.0](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154), when using `runtime: automatic` in `@babel/preset-react` or `@babel/plugin-transform-react-jsx`, you will not need to explicitly import React for compiling jsx. This codemod removes the redundant import statements. It also converts  (`import React from 'react'`) to named imports (`import * as React from 'react'`).
 
+The wizard will ask for 1 option - 
+
+* **Destructure named imports?**: Destructures named imports (import * as React from 'react') as well as default imports. Does not do this by default.  
+
 ```sh
 npx react-codemod update-react-imports <path>
 ```
diff --git a/bin/cli.js b/bin/cli.js
@@ -99,6 +99,12 @@ function runTransform({ files, flags, parser, transformer, answers }) {
     }
   }
 
+  if (transformer === 'update-react-imports') {
+    if (answers.destructureNamedImports) {
+      args.push('--destructureNamedImports=true');
+    }
+  }
+
   if (flags.jscodeshift) {
     args = args.concat(flags.jscodeshift);
   }
@@ -362,6 +368,18 @@ function run() {
         },
         message: 'Destructure props?',
         default: false
+      },
+      {
+        type: 'confirm',
+        name: 'destructureNamedImports',
+        when: answers => {
+          return (
+            cli.input[0] === 'update-react-imports' ||
+            answers.transformer === 'update-react-imports'
+          );
+        },
+        message: 'Destructure named imports?',
+        default: false
       }
     ])
     .then(answers => {
diff --git a/transforms/__testfixtures__/update-react-imports/destructure-named-imports-react-not-removed.input.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports-react-not-removed.input.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/destructure-named-imports-react-not-removed.output.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports-react-not-removed.output.js
diff --git a/transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.input.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.input.js
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { createElement } from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.output.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.output.js
diff --git a/transforms/__testfixtures__/update-react-imports/destructure-named-imports.input.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports.input.js
@@ -0,0 +1,5 @@
+import * as React from "react";
+
+React.useState(false);
+
+<div />
diff --git a/transforms/__testfixtures__/update-react-imports/destructure-named-imports.output.js b/transforms/__testfixtures__/update-react-imports/destructure-named-imports.output.js
@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+useState(false);
+
+<div />
diff --git a/transforms/__tests__/update-react-imports-test.js b/transforms/__tests__/update-react-imports-test.js
@@ -35,6 +35,12 @@ const tests = [
   'react-already-used-named-export',
 ];
 
+const destructureNamedImportTests = [
+  'destructure-named-imports',
+  'destructure-named-imports-variable-used',
+  'destructure-named-imports-react-not-removed',
+];
+
 jest.mock('../update-react-imports', () => {
   return Object.assign(require.requireActual('../update-react-imports'), {
     parser: 'flow',
@@ -77,3 +83,12 @@ describe('typescript', () => {
     );
   });
 });
+
+destructureNamedImportTests.forEach((test) => {
+  defineTest(
+    __dirname,
+    'update-react-imports',
+    {destructureNamedImports: true},
+    `update-react-imports/${test}`
+  );
+});
diff --git a/transforms/update-react-imports.js b/transforms/update-react-imports.js
@@ -10,6 +10,7 @@ module.exports = function(file, api, options) {
   const j = api.jscodeshift;
   const printOptions = options.printOptions || {};
   const root = j(file.source);
+  const destructureNamedImports = options.destructureNamedImports;
 
   // https://github.com/facebook/jscodeshift/blob/master/recipes/retain-first-comment.md
   function getFirstNode() {
@@ -96,8 +97,8 @@ module.exports = function(file, api, options) {
   // local: imported
   const reactIdentifiers = {};
   const reactTypeIdentifiers = {};
-  let canDestructureReactVariable;
-  if (isReactImportUsed && isDefaultImport) {
+  let canDestructureReactVariable = false;
+  if (isReactImportUsed && (isDefaultImport || destructureNamedImports)) {
     // Checks to see if the react variable is used itself (rather than used to access its properties)
     canDestructureReactVariable =
       root

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +import * as React from "react";
++
 +React.useState(false);
++
 +<div />