Codemod to import * as React from "react"; (#18102)

* import * as React from "react";

This is the correct way to import React from an ES module since the ES
module will not have a default export. Only named exports.

* import * as ReactDOM from "react-dom"

Author: sebmarkbage

packages/create-subscription/src/createSubscription.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import invariant from 'shared/invariant';
 
 type Unsubscribe = () => void;

packages/react-art/src/ReactART.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import * as React from 'react';
 import ReactVersion from 'shared/ReactVersion';
 import {LegacyRoot} from 'shared/ReactRootTags';
 import {

packages/react-cache/src/ReactCache.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import {createLRU} from './LRU';
 

packages/react-devtools-inline/src/frontend.js

@@ -1,6 +1,7 @@
 /** @flow */
 
-import React, {forwardRef} from 'react';
+import * as React from 'react';
+import {forwardRef} from 'react';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -7,13 +7,8 @@
  * @flow
  */
 
-import React, {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import * as React from 'react';
+import {useContext, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {RegistryContext} from './Contexts';
 

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useContext} from 'react';
+import * as React from 'react';
+import {useContext} from 'react';
 import {RegistryContext} from './Contexts';
 
 import styles from './ContextMenuItem.css';

packages/react-devtools-shared/src/devtools/cache.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {createContext} from 'react';
+import * as React from 'react';
+import {createContext} from 'react';
 
 // Cache implementation was forked from the React repo:
 // https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js

packages/react-devtools-shared/src/devtools/views/Button.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';

packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import styles from './ButtonIcon.css';
 
 export type IconType =

packages/react-devtools-shared/src/devtools/views/Components/Badge.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Fragment} from 'react';
+import * as React from 'react';
+import {Fragment} from 'react';
 import {
   ElementTypeMemo,
   ElementTypeForwardRef,

packages/react-devtools-shared/src/devtools/views/Components/Components.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Suspense} from 'react';
+import * as React from 'react';
+import {Suspense} from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import {InspectedElementContextController} from './InspectedElementContext';

packages/react-devtools-shared/src/devtools/views/Components/EditableName.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useCallback, useState} from 'react';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
 import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
 import styles from './EditableName.css';
 

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Fragment, useRef} from 'react';
+import * as React from 'react';
+import {Fragment, useRef} from 'react';
 import styles from './EditableValue.css';
 import {useEditableValue} from '../hooks';
 

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Fragment, useContext, useMemo, useState} from 'react';
+import * as React from 'react';
+import {Fragment, useContext, useMemo, useState} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
 import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';

packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 

packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import {
   ElementTypeForwardRef,
   ElementTypeMemo,

packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js

@@ -8,7 +8,8 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {useCallback, useContext, useRef, useState} from 'react';
+import * as React from 'react';
+import {useCallback, useContext, useRef, useState} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';

packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useCallback, useContext, useEffect, useState} from 'react';
+import * as React from 'react';
+import {useCallback, useContext, useEffect, useState} from 'react';
 import {BridgeContext} from '../context';
 import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {
+import * as React from 'react';
+import {
   createContext,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js

@@ -8,7 +8,8 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {useCallback, useState} from 'react';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
 import {alphaSortEntries, getMetaValueLabel} from '../utils';

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Fragment, useLayoutEffect, useRef} from 'react';
+import * as React from 'react';
+import {Fragment, useLayoutEffect, useRef} from 'react';
 import styles from './AutoSizeInput.css';
 
 type Props = {

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import styles from './LayoutViewer.css';
 
 import type {Layout} from './types';

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useContext, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+import {useContext, useMemo, useRef, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {copy} from 'clipboard-js';
 import {

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {
+import * as React from 'react';
+import {
   createContext,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Fragment, useContext, useMemo} from 'react';
+import * as React from 'react';
+import {Fragment, useContext, useMemo} from 'react';
 import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
 import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
 import {NativeStyleContext} from './context';

packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {createContext, useCallback, useContext, useEffect} from 'react';
+import * as React from 'react';
+import {createContext, useCallback, useContext, useEffect} from 'react';
 import {createResource} from '../../cache';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeStateContext} from './TreeContext';

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -6,7 +6,8 @@
  *
  * @flow
  */
-import React, {
+import * as React from 'react';
+import {
   Fragment,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import * as React from 'react';
+import {useCallback, useContext, useEffect, useRef} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -8,7 +8,8 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {Fragment, useCallback, useContext} from 'react';
+import * as React from 'react';
+import {Fragment, useCallback, useContext} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {BridgeContext, ContextMenuContext, StoreContext} from '../context';
 import ContextMenu from '../../ContextMenu/ContextMenu';

packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useContext, useMemo} from 'react';
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
 import {TreeStateContext} from './TreeContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 import TreeFocusedContext from './TreeFocusedContext';

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {
+import * as React from 'react';
+import {
   Fragment,
   Suspense,
   useCallback,

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -24,7 +24,8 @@
 // For this reason, changes to the tree context are processed in sequence: tree -> search -> owners
 // This enables each section to potentially override (or mask) previous values.
 
-import React, {
+import * as React from 'react';
+import {
   createContext,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -12,7 +12,8 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, {useEffect, useMemo, useState} from 'react';
+import * as React from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import Store from '../store';
 import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';

packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {Component} from 'react';
+import * as React from 'react';
+import {Component} from 'react';
 import styles from './ErrorBoundary.css';
 
 type Props = {|

packages/react-devtools-shared/src/devtools/views/Icon.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 import styles from './Icon.css';
 
 export type IconType =

packages/react-devtools-shared/src/devtools/views/ModalDialog.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {
+import * as React from 'react';
+import {
   createContext,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import styles from './ChartNode.css';
 

packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js

@@ -7,7 +7,8 @@
  * @flow
  */
 
-import React, {useCallback, useContext} from 'react';
+import * as React from 'react';
+import {useCallback, useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';