add update-react-import codemod (#262)

Author: lunaruan

README.md

@@ -143,6 +143,14 @@ guide](https://github.com/airbnb/javascript/blob/7684892951ef663e1c4e62ad57d662e
 npx react-codemod sort-comp <path>
 ```
 
+#### `update-react-imports`
+
+[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`).
+
+```sh
+npx react-codemod update-react-imports <path>
+```
+
 ### Explanation of the new ES2015 class transform with property initializers
 1. Determine if mixins are convertible. We only transform a `createClass` call to an ES6 class component when:
   - There are no mixins on the class, or

bin/cli.js

@@ -181,6 +181,10 @@ const TRANSFORMER_INQUIRER_CHOICES = [
     name:
       'Reorders React component methods to match the ESLint react/sort-comp rule.',
     value: 'sort-comp'
+  },
+  {
+    name: 'update-react-imports: Removes redundant import statements from explicitly importing React to compile JSX and converts default imports to named imports',
+    value: 'update-react-imports',
   }
 ];
 

transforms/__testfixtures__/update-react-imports/default-and-multiple-specifiers-import-react-variable.input.js

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

transforms/__testfixtures__/update-react-imports/default-and-multiple-specifiers-import-react-variable.output.js

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

transforms/__testfixtures__/update-react-imports/default-and-multiple-specifiers-import.input.js

@@ -0,0 +1,3 @@
+import React, { type Element, createElement, useState } from "react";
+
+<div>Hi</div>;

transforms/__testfixtures__/update-react-imports/default-and-multiple-specifiers-import.output.js

@@ -0,0 +1,4 @@
+import type { Element } from "react";
+import { createElement, useState } from "react";
+
+<div>Hi</div>;

transforms/__testfixtures__/update-react-imports/flow-default-and-type-specifier-import-react-variable.input.js

@@ -0,0 +1,5 @@
+import React, { type Element, type Component } from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;

transforms/__testfixtures__/update-react-imports/flow-default-and-type-specifier-import-react-variable.output.js

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

transforms/__testfixtures__/update-react-imports/flow-default-and-type-specifier-import.input.js

@@ -0,0 +1,3 @@
+import React, { type Element } from "react";
+
+<div>Hi</div>;

transforms/__testfixtures__/update-react-imports/flow-default-and-type-specifier-import.output.js

@@ -0,0 +1,3 @@
+import type { Element } from "react";
+
+<div>Hi</div>;