Migrate files in Libraries/Inspector to use export syntax (#48931)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48931

## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling

## This diff
- Updates files in Libraries/Inspector to use `export` syntax
- Appends `.default` to requires of the changed files.
- Updates the public API snapshot (intented breaking change)

Changelog:
[General][Breaking] - Files inside `Libraries/Inspector` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.

Reviewed By: robhogan

Differential Revision: D68629285

fbshipit-source-id: ee0904ea5e8f9389aecfb197d05225c88137fb08

packages/react-native/Libraries/Inspector/BorderBox.js

@@ -41,4 +41,4 @@ function BorderBox({children, box, style}: Props): React.Node {
   return <View style={[borderStyle, style]}>{children}</View>;
 }
 
-module.exports = BorderBox;
+export default BorderBox;

packages/react-native/Libraries/Inspector/BoxInspector.js

@@ -18,7 +18,7 @@ import React from 'react';
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text').default;
-const resolveBoxStyle = require('./resolveBoxStyle');
+const resolveBoxStyle = require('./resolveBoxStyle').default;
 
 const blank = {
   top: 0,
@@ -124,4 +124,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = BoxInspector;
+export default BoxInspector;

packages/react-native/Libraries/Inspector/ElementBox.js

@@ -19,8 +19,8 @@ const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;
-const BorderBox = require('./BorderBox');
-const resolveBoxStyle = require('./resolveBoxStyle');
+const BorderBox = require('./BorderBox').default;
+const resolveBoxStyle = require('./resolveBoxStyle').default;
 
 type Props = $ReadOnly<{
   frame: InspectedElementFrame,
@@ -147,4 +147,4 @@ function resolveSizeInPlace(
   }
 }
 
-module.exports = ElementBox;
+export default ElementBox;

packages/react-native/Libraries/Inspector/ElementProperties.js

@@ -24,8 +24,8 @@ const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text').default;
 const mapWithSeparator = require('../Utilities/mapWithSeparator');
-const BoxInspector = require('./BoxInspector');
-const StyleInspector = require('./StyleInspector');
+const BoxInspector = require('./BoxInspector').default;
+const StyleInspector = require('./StyleInspector').default;
 
 type Props = $ReadOnly<{
   hierarchy: ?InspectorData['hierarchy'],
@@ -120,4 +120,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ElementProperties;
+export default ElementProperties;

packages/react-native/Libraries/Inspector/Inspector.js

@@ -27,9 +27,10 @@ const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;
 const Platform = require('../Utilities/Platform');
-const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
-const InspectorOverlay = require('./InspectorOverlay');
-const InspectorPanel = require('./InspectorPanel');
+const getInspectorDataForViewAtPoint =
+  require('./getInspectorDataForViewAtPoint').default;
+const InspectorOverlay = require('./InspectorOverlay').default;
+const InspectorPanel = require('./InspectorPanel').default;
 
 const {useState} = React;
 
@@ -203,4 +204,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Inspector;
+export default Inspector;

packages/react-native/Libraries/Inspector/InspectorOverlay.js

@@ -17,7 +17,7 @@ import React from 'react';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const ElementBox = require('./ElementBox');
+const ElementBox = require('./ElementBox').default;
 
 type Props = $ReadOnly<{
   inspected?: ?InspectedElement,
@@ -63,4 +63,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InspectorOverlay;
+export default InspectorOverlay;

packages/react-native/Libraries/Inspector/InspectorPanel.js

@@ -21,9 +21,9 @@ const TouchableHighlight =
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text').default;
-const ElementProperties = require('./ElementProperties');
-const NetworkOverlay = require('./NetworkOverlay');
-const PerformanceOverlay = require('./PerformanceOverlay');
+const ElementProperties = require('./ElementProperties').default;
+const NetworkOverlay = require('./NetworkOverlay').default;
+const PerformanceOverlay = require('./PerformanceOverlay').default;
 
 type Props = $ReadOnly<{
   devtoolsIsOpen: boolean,
@@ -162,4 +162,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InspectorPanel;
+export default InspectorPanel;

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -611,4 +611,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = NetworkOverlay;
+export default NetworkOverlay;

packages/react-native/Libraries/Inspector/PerformanceOverlay.js

@@ -61,4 +61,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = PerformanceOverlay;
+export default PerformanceOverlay;

packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -20,7 +20,8 @@ import StyleSheet from '../StyleSheet/StyleSheet';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
-const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+const getInspectorDataForViewAtPoint =
+  require('./getInspectorDataForViewAtPoint').default;
 
 const {useEffect, useState, useCallback} = React;
 

packages/react-native/Libraries/Inspector/StyleInspector.js

@@ -73,4 +73,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = StyleInspector;
+export default StyleInspector;

packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -49,7 +49,7 @@ function validateRenderers(): void {
   );
 }
 
-module.exports = function getInspectorDataForViewAtPoint(
+function getInspectorDataForViewAtPoint(
   inspectedView: ?HostInstance,
   locationX: number,
   locationY: number,
@@ -78,4 +78,6 @@ module.exports = function getInspectorDataForViewAtPoint(
       );
     }
   }
-};
+}
+
+export default getInspectorDataForViewAtPoint;

packages/react-native/Libraries/Inspector/resolveBoxStyle.js

@@ -111,4 +111,4 @@ function resolveBoxStyle(
   return hasParts ? result : null;
 }
 
-module.exports = resolveBoxStyle;
+export default resolveBoxStyle;

packages/react-native/Libraries/ReactNative/AppContainer-dev.js

@@ -52,7 +52,7 @@ const InspectorDeferred = ({
 }: InspectorDeferredProps) => {
   // D39382967 adds a require cycle: InitializeCore -> AppContainer -> Inspector -> InspectorPanel -> ScrollView -> InitializeCore
   // We can't remove it yet, fallback to dynamic require for now. This is the only reason why this logic is in a separate function.
-  const Inspector = require('../Inspector/Inspector');
+  const Inspector = require('../Inspector/Inspector').default;
 
   return (
     <Inspector

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5112,7 +5112,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/Border
   style?: ViewStyleProp,
 }>;
 declare function BorderBox(Props): React.Node;
-declare module.exports: BorderBox;
+declare export default typeof BorderBox;
 "
 `;
 
@@ -5122,7 +5122,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/BoxIns
   frame: ?InspectedElementFrame,
 }>;
 declare function BoxInspector(BoxInspectorProps): React.Node;
-declare module.exports: BoxInspector;
+declare export default typeof BoxInspector;
 "
 `;
 
@@ -5132,7 +5132,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/Elemen
   style?: ?ViewStyleProp,
 }>;
 declare function ElementBox(Props): React.Node;
-declare module.exports: ElementBox;
+declare export default typeof ElementBox;
 "
 `;
 
@@ -5147,7 +5147,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/Elemen
 declare class ElementProperties extends React.Component<Props> {
   render(): React.Node;
 }
-declare module.exports: ElementProperties;
+declare export default typeof ElementProperties;
 "
 `;
 
@@ -5164,7 +5164,7 @@ type Props = {
   reactDevToolsAgent?: ReactDevToolsAgent,
 };
 declare function Inspector(Props): React.Node;
-declare module.exports: Inspector;
+declare export default typeof Inspector;
 "
 `;
 
@@ -5174,7 +5174,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/Inspec
   onTouchPoint: (locationX: number, locationY: number) => void,
 }>;
 declare function InspectorOverlay(Props): React.Node;
-declare module.exports: InspectorOverlay;
+declare export default typeof InspectorOverlay;
 "
 `;
 
@@ -5198,7 +5198,7 @@ declare class InspectorPanel extends React.Component<Props> {
   renderWaiting(): React.Node;
   render(): React.Node;
 }
-declare module.exports: InspectorPanel;
+declare export default typeof InspectorPanel;
 "
 `;
 
@@ -5255,7 +5255,7 @@ declare class NetworkOverlay extends React.Component<Props, State> {
   _getRequestIndexByXHRID(index: number): number;
   render(): React.Node;
 }
-declare module.exports: NetworkOverlay;
+declare export default typeof NetworkOverlay;
 "
 `;
 
@@ -5263,7 +5263,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/Perfor
 "declare class PerformanceOverlay extends React.Component<{ ... }> {
   render(): React.Node;
 }
-declare module.exports: PerformanceOverlay;
+declare export default typeof PerformanceOverlay;
 "
 `;
 
@@ -5281,7 +5281,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/StyleI
   style?: ?____FlattenStyleProp_Internal<ViewStyleProp>,
 }>;
 declare function StyleInspector(Props): React.Node;
-declare module.exports: StyleInspector;
+declare export default typeof StyleInspector;
 "
 `;
 
@@ -5297,12 +5297,13 @@ exports[`public API should not change unintentionally Libraries/Inspector/getIns
     ...
   },
 };
-declare module.exports: (
+declare function getInspectorDataForViewAtPoint(
   inspectedView: ?HostInstance,
   locationX: number,
   locationY: number,
   callback: (viewData: TouchedViewDataAtPoint) => boolean
-) => void;
+): void;
+declare export default typeof getInspectorDataForViewAtPoint;
 "
 `;
 
@@ -5316,7 +5317,7 @@ exports[`public API should not change unintentionally Libraries/Inspector/resolv
   right: number,
   top: number,
 }>;
-declare module.exports: resolveBoxStyle;
+declare export default typeof resolveBoxStyle;
 "
 `;