Migrated components to export syntax (part 2) (#48767)

iwoplaza · facebook-github-bot · commit ce412746b163 · 2025-01-22T03:43:59.000-08:00
Summary: Pull Request resolved: #48767 ## Motivation Modernising the react-native codebase to allow for ingestion by modern Flow tooling. ## This diff - Updates a handful of components in `Libraries/Components` to use `export` syntax - `export default` for qualified objects, many `export` statements for collections (determined by how it's imported) - Appends `.default` to requires of the changed files. - Updates test files. - Updates the public API snapshot (intented breaking change) Changelog: [General][Breaking] - Files inside `Libraries/Components` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax. Reviewed By: yungsters Differential Revision: D68335872 fbshipit-source-id: eb0c67039edfe92e9e133726f6b01900dd2c2322
diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -19,7 +19,7 @@ import * as React from 'react';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'
-    ? require('../ProgressBarAndroid/ProgressBarAndroid')
+    ? require('../ProgressBarAndroid/ProgressBarAndroid').default
     : require('./ActivityIndicatorViewNativeComponent').default;
 
 const GRAY = '#999999';
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js
@@ -106,8 +106,7 @@ const ProgressBarAndroidWithForwardedRef: component(
   );
 });
 
-module.exports =
-  /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
-   * error found when Flow v0.89 was deployed. To see the error, delete this
-   * comment and run Flow. */
-  (ProgressBarAndroidWithForwardedRef: typeof ProgressBarAndroidNativeComponent);
+export default /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
+ * error found when Flow v0.89 was deployed. To see the error, delete this
+ * comment and run Flow. */
+(ProgressBarAndroidWithForwardedRef: typeof ProgressBarAndroidNativeComponent);
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js
@@ -15,6 +15,6 @@ import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNa
 
 export type {ProgressBarAndroidProps} from './ProgressBarAndroid.android';
 
-module.exports = (require('../UnimplementedViews/UnimplementedView'):
+export default (require('../UnimplementedViews/UnimplementedView'):
   | UnimplementedViewType
   | ProgressBarAndroidNativeComponentType);
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/__tests__/ProgressBarAndroid-test.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/__tests__/ProgressBarAndroid-test.js
@@ -16,7 +16,7 @@ const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
  * comment suppresses an error found when Flow v0.99 was deployed. To see the
  * error, delete this comment and run Flow. */
 // $FlowFixMe[missing-platform-support]
-const ProgressBarAndroid = require('../ProgressBarAndroid.android');
+const ProgressBarAndroid = require('../ProgressBarAndroid.android').default;
 const React = require('react');
 
 describe('<ProgressBarAndroid />', () => {
diff --git a/packages/react-native/Libraries/Components/RefreshControl/RefreshControl.js b/packages/react-native/Libraries/Components/RefreshControl/RefreshControl.js
@@ -201,4 +201,4 @@ class RefreshControl extends React.Component<RefreshControlProps> {
   };
 }
 
-module.exports = RefreshControl;
+export default RefreshControl;
diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js
@@ -1913,5 +1913,5 @@ Wrapper.displayName = 'ScrollView';
 // $FlowExpectedError[prop-missing]
 Wrapper.Context = ScrollViewContext;
 
-module.exports = ((Wrapper: $FlowFixMe): typeof Wrapper &
+export default ((Wrapper: $FlowFixMe): typeof Wrapper &
   ScrollViewComponentStatics);
diff --git a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js
@@ -15,7 +15,7 @@ const {create, unmount, update} = require('../../../../jest/renderer');
 const Text = require('../../../Text/Text');
 const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
 const View = require('../../View/View');
-const ScrollView = require('../ScrollView');
+const ScrollView = require('../ScrollView').default;
 const React = require('react');
 
 describe('ScrollView', () => {
diff --git a/packages/react-native/Libraries/Components/ScrollView/processDecelerationRate.js b/packages/react-native/Libraries/Components/ScrollView/processDecelerationRate.js
@@ -27,4 +27,4 @@ function processDecelerationRate(
   return decelerationRate;
 }
 
-module.exports = processDecelerationRate;
+export default processDecelerationRate;
diff --git a/packages/react-native/Libraries/Components/Sound/SoundManager.js b/packages/react-native/Libraries/Components/Sound/SoundManager.js
@@ -18,4 +18,4 @@ const SoundManager = {
   },
 };
 
-module.exports = SoundManager;
+export default SoundManager;
diff --git a/packages/react-native/Libraries/Components/StatusBar/StatusBar.js b/packages/react-native/Libraries/Components/StatusBar/StatusBar.js
@@ -493,4 +493,4 @@ class StatusBar extends React.Component<Props> {
   }
 }
 
-module.exports = StatusBar;
+export default StatusBar;
diff --git a/packages/react-native/Libraries/Components/StatusBar/__tests__/StatusBar-test.js b/packages/react-native/Libraries/Components/StatusBar/__tests__/StatusBar-test.js
@@ -11,7 +11,7 @@
 'use strict';
 
 const {create} = require('../../../../jest/renderer');
-const StatusBar = require('../StatusBar');
+const StatusBar = require('../StatusBar').default;
 const React = require('react');
 
 describe('StatusBar', () => {
diff --git a/packages/react-native/Libraries/Inspector/InspectorPanel.js b/packages/react-native/Libraries/Inspector/InspectorPanel.js
@@ -15,7 +15,7 @@ import type {ElementsHierarchy, InspectedElement} from './Inspector';
 import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
 import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js
@@ -20,7 +20,7 @@ import RCTModalHostView from './RCTModalHostViewNativeComponent';
 import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
 import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const View = require('../Components/View/View');
 const AppContainer = require('../ReactNative/AppContainer');
 const I18nManager = require('../ReactNative/I18nManager');
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1936,7 +1936,7 @@ declare export default function useAndroidRippleForView(
 
 exports[`public API should not change unintentionally Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js 1`] = `
 "export type { ProgressBarAndroidProps } from \\"./ProgressBarAndroid.android\\";
-declare module.exports:
+declare export default
   | UnimplementedViewType
   | ProgressBarAndroidNativeComponentType;
 "
@@ -1993,7 +1993,7 @@ declare class RefreshControl extends React.Component<RefreshControlProps> {
   _onRefresh: $FlowFixMe;
   _setNativeRef: $FlowFixMe;
 }
-declare module.exports: RefreshControl;
+declare export default typeof RefreshControl;
 "
 `;
 
@@ -2267,7 +2267,7 @@ declare const Wrapper: component(
   ref: React.RefSetter<PublicScrollViewInstance>,
   ...props: Props
 );
-declare module.exports: typeof Wrapper & ScrollViewComponentStatics;
+declare export default typeof Wrapper & ScrollViewComponentStatics;
 "
 `;
 
@@ -2413,7 +2413,7 @@ exports[`public API should not change unintentionally Libraries/Components/Scrol
 "declare function processDecelerationRate(
   decelerationRate: number | \\"normal\\" | \\"fast\\"
 ): number;
-declare module.exports: processDecelerationRate;
+declare export default typeof processDecelerationRate;
 "
 `;
 
@@ -2425,7 +2425,7 @@ declare export default typeof NativeSoundManager;
 
 exports[`public API should not change unintentionally Libraries/Components/Sound/SoundManager.js 1`] = `
 "declare const SoundManager: { playTouchSound: () => void };
-declare module.exports: SoundManager;
+declare export default typeof SoundManager;
 "
 `;
 
@@ -2520,7 +2520,7 @@ declare class StatusBar extends React.Component<Props> {
   static _updatePropsStack: $FlowFixMe;
   render(): React.Node;
 }
-declare module.exports: StatusBar;
+declare export default typeof StatusBar;
 "
 `;
 
diff --git a/packages/react-native/index.js b/packages/react-native/index.js
@@ -160,22 +160,24 @@ module.exports = {
         "It can now be installed and imported from '@react-native-community/progress-bar-android' instead of 'react-native'. " +
         'See https://github.com/react-native-progress-view/progress-bar-android',
     );
-    return require('./Libraries/Components/ProgressBarAndroid/ProgressBarAndroid');
+    return require('./Libraries/Components/ProgressBarAndroid/ProgressBarAndroid')
+      .default;
   },
   get RefreshControl(): RefreshControl {
-    return require('./Libraries/Components/RefreshControl/RefreshControl');
+    return require('./Libraries/Components/RefreshControl/RefreshControl')
+      .default;
   },
   get SafeAreaView(): SafeAreaView {
     return require('./Libraries/Components/SafeAreaView/SafeAreaView').default;
   },
   get ScrollView(): ScrollView {
-    return require('./Libraries/Components/ScrollView/ScrollView');
+    return require('./Libraries/Components/ScrollView/ScrollView').default;
   },
   get SectionList(): SectionList {
     return require('./Libraries/Lists/SectionList').default;
   },
   get StatusBar(): StatusBar {
-    return require('./Libraries/Components/StatusBar/StatusBar');
+    return require('./Libraries/Components/StatusBar/StatusBar').default;
   },
   get Switch(): Switch {
     return require('./Libraries/Components/Switch/Switch').default;
diff --git a/packages/react-native/jest/setup.js b/packages/react-native/jest/setup.js
@@ -169,11 +169,12 @@ jest
       setString: jest.fn(),
     },
   }))
-  .mock('../Libraries/Components/RefreshControl/RefreshControl', () =>
-    jest.requireActual(
+  .mock('../Libraries/Components/RefreshControl/RefreshControl', () => ({
+    __esModule: true,
+    default: jest.requireActual(
       '../Libraries/Components/RefreshControl/__mocks__/RefreshControlMock',
     ),
-  )
+  }))
   .mock('../Libraries/Components/ScrollView/ScrollView', () => {
     const baseComponent = mockComponent(
       '../Libraries/Components/ScrollView/ScrollView',
@@ -190,16 +191,20 @@ jest
         scrollResponderZoomTo: jest.fn(),
         scrollResponderScrollNativeHandleToKeyboard: jest.fn(),
       },
+      true, // isESModule
     );
     const mockScrollView = jest.requireActual('./mockScrollView');
-    return mockScrollView(baseComponent);
+    return {
+      __esModule: true,
+      default: mockScrollView(baseComponent),
+    };
   })
   .mock('../Libraries/Components/ActivityIndicator/ActivityIndicator', () => ({
     __esModule: true,
     default: mockComponent(
       '../Libraries/Components/ActivityIndicator/ActivityIndicator',
-      null,
-      true,
+      null, // instanceMethods
+      true, // isESModule
     ),
   }))
   .mock('../Libraries/AppState/AppState', () => ({

Original file line number	Diff line number	Diff line change
`@@ -201,4 +201,4 @@ class RefreshControl extends React.Component<RefreshControlProps> {`
`201`	`201`	`};`
`202`	`202`	`}`
`203`	`203`
`204`		`-module.exports = RefreshControl;`
	`204`	`+export default RefreshControl;`
Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,4 @@ function processDecelerationRate(`
`27`	`27`	`return decelerationRate;`
`28`	`28`	`}`
`29`	`29`
`30`		`-module.exports = processDecelerationRate;`
	`30`	`+export default processDecelerationRate;`
Original file line number	Diff line number	Diff line change
`@@ -493,4 +493,4 @@ class StatusBar extends React.Component<Props> {`
`493`	`493`	`}`
`494`	`494`	`}`
`495`	`495`
`496`		`-module.exports = StatusBar;`
	`496`	`+export default StatusBar;`