Use named components for type imports in update-react-imports

[BPScott]

Fixes #283.

Previously running update-react-imports against

import React from 'react';

const App: React.FunctionComponent<{ message: string }> = ({ message }) => ();

produced the following output:

import * as React from 'react';

const App: React.FunctionComponent<{ message: string }> = ({ message }) => ();

Note that types are not converted to be named exports like when React.BLAH values are used, usage in types still gets plucked off the namespace object. This PR applies the fix documented here, so now it compiles to:

import { FunctionComponent } from 'react';

const App: FunctionComponent<{ message: string }> = ({ message }) => ();

[stropho]

I was looking for this right now. Well if it helps anyone, you can run the updated codemod from this PR before it gets merged (if ever) like this:
npx -p react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports react-codemod update-react-imports PATH

[lainermeister]

npx -p react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports react-codemod update-react-imports PATH

I tried running this (in the same directory where npx react-codemod update-react-imports worked) and got the following error:

npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports.
npm ERR! package.json npm can't find a package.json file in your current directory.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/elainewong/.npm/_logs/2022-10-31T20_41_09_939Z-debug.log
Install for [
  'react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports'
] failed with code 1

Any idea where I'm going wrong? @stropho @thespacemanatee @raopg @pmillspaugh @NoMoreViolence @julianguyen

Thanks!

[stropho]

@lainermeister sorry, no idea. I tried to run the command right now and it works fine (Linux,Mac) even if I am in a directory where there is no package.json - (based on npm can't find a package.json file in your current directory.)
So my wild guess is that there was either a Github outage 🤣 or there are some security measures on your machine or network... Or the issues is completely somewhere else 🤷

[TkDodo]

This PR correctly addressed 518 files out of 577 in our codebase that had React specific type imports, so thank you for that ❤️

see:

• [update-react-imports] skips files that contain type imports #325

I think it's fair to say that it "fixes" this issue, too.