Merge pull request reactjs#271 from lunaruan/update_react_imports

update-react-imports: Destructure named exports

Author: gaearon

README.md

@@ -145,7 +145,7 @@ 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`).
+[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>

bin/cli.js

@@ -183,7 +183,7 @@ const TRANSFORMER_INQUIRER_CHOICES = [
  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',
+ name: 'update-react-imports: Removes redundant import statements from explicitly importing React to compile JSX and converts default imports to destructured named imports',
  value: 'update-react-imports',
  }
 ];

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

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

transforms/__testfixtures__/update-react-imports/react-already-used-named-export.input.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+React.useState(false);

transforms/__testfixtures__/update-react-imports/react-already-used-named-export.output.js

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

transforms/__testfixtures__/update-react-imports/react-basic-default-export-jsx-element-react-variable.output.js

@@ -1,3 +1,3 @@
-import * as React from "react";
+import { createElement } from "react";
 
-React.createElement('div', 'la');
+createElement('div', 'la');

transforms/__testfixtures__/update-react-imports/react-basic-default-export.output.js

@@ -0,0 +1,3 @@
+import React, { useState } from 'react';
+
+<React.Fragment />

transforms/__testfixtures__/update-react-imports/react-jsx-member-expression.input.js

@@ -0,0 +1,3 @@
+import { Fragment, useState } from "react";
+
+<Fragment />

transforms/__testfixtures__/update-react-imports/react-jsx-member-expression.output.js

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