add destructure named imports option (reactjs#278)

Author: lunaruan

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>
 ```

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

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>

transforms/__testfixtures__/update-react-imports/destructure-named-imports-react-not-removed.output.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { createElement } from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;

transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.input.js

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

transforms/__testfixtures__/update-react-imports/destructure-named-imports-variable-used.output.js

@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+useState(false);
+
+<div />

transforms/__testfixtures__/update-react-imports/destructure-named-imports.input.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}`
+ );
+});

transforms/__testfixtures__/update-react-imports/destructure-named-imports.output.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