From 48d900b703aa125f2bc6e7ab5a24de45572bc66b Mon Sep 17 00:00:00 2001 From: Iwo Plaza Date: Tue, 28 Jan 2025 06:13:07 -0800 Subject: [PATCH] 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 --- .../Libraries/Inspector/BorderBox.js | 2 +- .../Libraries/Inspector/BoxInspector.js | 4 +-- .../Libraries/Inspector/ElementBox.js | 6 ++--- .../Libraries/Inspector/ElementProperties.js | 6 ++--- .../Libraries/Inspector/Inspector.js | 9 ++++--- .../Libraries/Inspector/InspectorOverlay.js | 4 +-- .../Libraries/Inspector/InspectorPanel.js | 8 +++--- .../Libraries/Inspector/NetworkOverlay.js | 2 +- .../Libraries/Inspector/PerformanceOverlay.js | 2 +- .../Inspector/ReactDevToolsOverlay.js | 3 ++- .../Libraries/Inspector/StyleInspector.js | 2 +- .../getInspectorDataForViewAtPoint.js | 6 +++-- .../Libraries/Inspector/resolveBoxStyle.js | 2 +- .../Libraries/ReactNative/AppContainer-dev.js | 2 +- .../__snapshots__/public-api-test.js.snap | 27 ++++++++++--------- 15 files changed, 45 insertions(+), 40 deletions(-) diff --git a/packages/react-native/Libraries/Inspector/BorderBox.js b/packages/react-native/Libraries/Inspector/BorderBox.js index 600db4f1b7af68..b743d31aaac59d 100644 --- a/packages/react-native/Libraries/Inspector/BorderBox.js +++ b/packages/react-native/Libraries/Inspector/BorderBox.js @@ -41,4 +41,4 @@ function BorderBox({children, box, style}: Props): React.Node { return {children}; } -module.exports = BorderBox; +export default BorderBox; diff --git a/packages/react-native/Libraries/Inspector/BoxInspector.js b/packages/react-native/Libraries/Inspector/BoxInspector.js index 884f0418946a71..bec2933af25d7c 100644 --- a/packages/react-native/Libraries/Inspector/BoxInspector.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/ElementBox.js b/packages/react-native/Libraries/Inspector/ElementBox.js index 35d0c697db2ec4..179377dff89264 100644 --- a/packages/react-native/Libraries/Inspector/ElementBox.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/ElementProperties.js b/packages/react-native/Libraries/Inspector/ElementProperties.js index b9b2d5e6305bae..f1fee23ff8825d 100644 --- a/packages/react-native/Libraries/Inspector/ElementProperties.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/Inspector.js b/packages/react-native/Libraries/Inspector/Inspector.js index 85a239b01b4630..9fe497c376f6b3 100644 --- a/packages/react-native/Libraries/Inspector/Inspector.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/InspectorOverlay.js b/packages/react-native/Libraries/Inspector/InspectorOverlay.js index 6f19c7339a6d0c..cb2e7ab5e29a6d 100644 --- a/packages/react-native/Libraries/Inspector/InspectorOverlay.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/InspectorPanel.js b/packages/react-native/Libraries/Inspector/InspectorPanel.js index 2d8a3791684848..170888770131df 100644 --- a/packages/react-native/Libraries/Inspector/InspectorPanel.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/NetworkOverlay.js b/packages/react-native/Libraries/Inspector/NetworkOverlay.js index e2ec5fc8bd38ed..336a2a000bf2a1 100644 --- a/packages/react-native/Libraries/Inspector/NetworkOverlay.js +++ b/packages/react-native/Libraries/Inspector/NetworkOverlay.js @@ -611,4 +611,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = NetworkOverlay; +export default NetworkOverlay; diff --git a/packages/react-native/Libraries/Inspector/PerformanceOverlay.js b/packages/react-native/Libraries/Inspector/PerformanceOverlay.js index a9bd7834940bb9..bc0981e30ec8c4 100644 --- a/packages/react-native/Libraries/Inspector/PerformanceOverlay.js +++ b/packages/react-native/Libraries/Inspector/PerformanceOverlay.js @@ -61,4 +61,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = PerformanceOverlay; +export default PerformanceOverlay; diff --git a/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js b/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js index 46b4979a5544b4..876e3e4daeddd5 100644 --- a/packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/StyleInspector.js b/packages/react-native/Libraries/Inspector/StyleInspector.js index d7620991e1bf9e..40c8ac13f6250f 100644 --- a/packages/react-native/Libraries/Inspector/StyleInspector.js +++ b/packages/react-native/Libraries/Inspector/StyleInspector.js @@ -73,4 +73,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = StyleInspector; +export default StyleInspector; diff --git a/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js b/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js index daa4dd284076cf..3c20e2d05f8f55 100644 --- a/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js +++ b/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; diff --git a/packages/react-native/Libraries/Inspector/resolveBoxStyle.js b/packages/react-native/Libraries/Inspector/resolveBoxStyle.js index ece1655338896a..a2ce4a0d93dbd7 100644 --- a/packages/react-native/Libraries/Inspector/resolveBoxStyle.js +++ b/packages/react-native/Libraries/Inspector/resolveBoxStyle.js @@ -111,4 +111,4 @@ function resolveBoxStyle( return hasParts ? result : null; } -module.exports = resolveBoxStyle; +export default resolveBoxStyle; diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js index b5a1a0756eef0e..bec563fe1276e1 100644 --- a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js +++ b/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 ( ; 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 { 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 { 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 { _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, }>; 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; " `;