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"
facebook · Feb 22, 2020 · 0934879 · 0934879
1 parent 78e8160
commit 0934879
Show file tree

Hide file tree

Showing 116 changed files with 195 additions and 142 deletions.
diff --git a/packages/create-subscription/src/createSubscription.js b/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;

diff --git a/packages/react-art/src/ReactART.js b/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 {

diff --git a/packages/react-cache/src/ReactCache.js b/packages/react-cache/src/ReactCache.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import {createLRU} from './LRU';
 

diff --git a/packages/react-devtools-inline/src/frontend.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/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';
 

diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/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

diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/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 =

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/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';
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/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';
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/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';
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/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';

diff --git a/...es/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/...es/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 = {

diff --git a/...ges/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/...ges/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';

diff --git a/...ages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/...ages/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 {

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/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';

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/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 = {|

diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/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 =

diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/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,

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/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';
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/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';