Migrate files in Libraries/EventEmitter and Libraries/Image to use ex…

…port syntax (#49020)

Summary:
Pull Request resolved: #49020

## Motivation
Modernising the RN codebase to allow for modern Flow tooling to process it.

## This diff
- Migrates the `Libraries/EventEmitter/*.js` and `Libraries/Image/*.js` files to use the `export` syntax.
- Updates deep-imports of these files to use `.default`
- Updates the current iteration of API snapshots (intended).

Changelog:
[General][Breaking] - Deep imports to modules inside `Libraries/EventEmitter` and `Libraries/Image/*.js` with `require` syntax need to be appended with '.default'.

Reviewed By: huntie

Differential Revision: D68780876

fbshipit-source-id: bd8e702aba33878e38df6d9c89bec27e7c8df0ac

packages/react-native/Libraries/Core/setUpBatchedBridge.js

@@ -21,8 +21,9 @@ registerModule(
   'RCTDeviceEventEmitter',
   () => require('../EventEmitter/RCTDeviceEventEmitter').default,
 );
-registerModule('RCTNativeAppEventEmitter', () =>
-  require('../EventEmitter/RCTNativeAppEventEmitter'),
+registerModule(
+  'RCTNativeAppEventEmitter',
+  () => require('../EventEmitter/RCTNativeAppEventEmitter').default,
 );
 registerModule('GlobalPerformanceLogger', () =>
   require('../Utilities/GlobalPerformanceLogger'),

packages/react-native/Libraries/Core/setUpReactDevTools.js

@@ -209,7 +209,8 @@ if (__DEV__) {
   );
 
   // 3. Fallback to attempting to connect WS-based RDT frontend
-  const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
+  const RCTNativeAppEventEmitter =
+    require('../EventEmitter/RCTNativeAppEventEmitter').default;
   RCTNativeAppEventEmitter.addListener(
     'RCTDevMenuShown',
     connectToWSBasedReactDevToolsFrontend,

packages/react-native/Libraries/EventEmitter/RCTEventEmitter.js

@@ -18,4 +18,4 @@ const RCTEventEmitter = {
   },
 };
 
-module.exports = RCTEventEmitter;
+export default RCTEventEmitter;

packages/react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter.js

@@ -15,4 +15,4 @@ import RCTDeviceEventEmitter from './RCTDeviceEventEmitter';
  * adding all event listeners directly to RCTNativeAppEventEmitter.
  */
 const RCTNativeAppEventEmitter = RCTDeviceEventEmitter;
-module.exports = RCTNativeAppEventEmitter;
+export default RCTNativeAppEventEmitter;

packages/react-native/Libraries/Image/AssetRegistry.js

@@ -12,7 +12,9 @@
 
 import type {PackagerAsset} from '@react-native/assets-registry/registry';
 
-module.exports = require('@react-native/assets-registry/registry') as {
+const AssetRegistry = require('@react-native/assets-registry/registry') as {
   registerAsset: (asset: PackagerAsset) => number,
   getAssetByID: (assetId: number) => PackagerAsset,
 };
+
+module.exports = AssetRegistry;

packages/react-native/Libraries/Image/AssetSourceResolver.js

@@ -210,4 +210,4 @@ class AssetSourceResolver {
     pickScale;
 }
 
-module.exports = AssetSourceResolver;
+export default AssetSourceResolver;

packages/react-native/Libraries/Image/Image.android.js

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

packages/react-native/Libraries/Image/Image.ios.js

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

packages/react-native/Libraries/Image/Image.js.flow

@@ -10,4 +10,4 @@
 
 import type {Image} from './ImageTypes.flow';
 
-declare module.exports: Image;
+declare export default Image;

packages/react-native/Libraries/Image/ImageBackground.js

@@ -103,4 +103,4 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   }
 }
 
-module.exports = ImageBackground;
+export default ImageBackground;

packages/react-native/Libraries/Image/ImageViewNativeComponent.js

@@ -83,7 +83,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         validAttributes: {
           blurRadius: true,
           defaultSource: {
-            process: require('./resolveAssetSource'),
+            process: require('./resolveAssetSource').default,
           },
           internal_analyticTag: true,
           resizeMethod: true,
@@ -146,7 +146,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../Utilities/differ/insetsDiffer'),
           },
           defaultSource: {
-            process: require('./resolveAssetSource'),
+            process: require('./resolveAssetSource').default,
           },
           internal_analyticTag: true,
           resizeMode: true,

packages/react-native/Libraries/Image/RelativeImageStub.js

@@ -15,7 +15,7 @@
 
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
-module.exports = (AssetRegistry.registerAsset({
+const RelativeImageStub = (AssetRegistry.registerAsset({
   __packager_asset: true,
   fileSystemLocation: '/full/path/to/directory',
   httpServerLocation: '/assets/full/path/to/directory',
@@ -26,3 +26,5 @@ module.exports = (AssetRegistry.registerAsset({
   name: 'icon',
   type: 'png',
 }): number);
+
+module.exports = RelativeImageStub;

packages/react-native/Libraries/Image/__tests__/Image-test.js

@@ -18,7 +18,7 @@ import NativeImageLoaderIOS from '../NativeImageLoaderIOS';
 import {act, create} from 'react-test-renderer';
 
 const render = require('../../../jest/renderer');
-const Image = require('../Image');
+const Image = require('../Image').default;
 const ImageInjection = require('../ImageInjection');
 const React = require('react');
 

packages/react-native/Libraries/Image/__tests__/ImageBackground-test.js

@@ -12,7 +12,7 @@
 'use strict';
 
 const render = require('../../../jest/renderer');
-const ImageBackground = require('../ImageBackground');
+const ImageBackground = require('../ImageBackground').default;
 const React = require('react');
 
 describe('ImageBackground', () => {

packages/react-native/Libraries/Image/__tests__/assetRelativePathInSnapshot-test.js

@@ -14,7 +14,7 @@ jest.disableAutomock();
 
 const {create} = require('../../../jest/renderer');
 const View = require('../../Components/View/View').default;
-const Image = require('../Image');
+const Image = require('../Image').default;
 const React = require('react');
 
 it('renders assets based on relative path', async () => {

packages/react-native/Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -20,7 +20,7 @@ describe('resolveAssetSource', () => {
     jest.resetModules();
 
     AssetRegistry = require('@react-native/assets-registry/registry');
-    resolveAssetSource = require('../resolveAssetSource');
+    resolveAssetSource = require('../resolveAssetSource').default;
     NativeSourceCode =
       require('../../NativeModules/specs/NativeSourceCode').default;
     Platform = require('../../Utilities/Platform');
@@ -434,7 +434,7 @@ describe('resolveAssetSource', () => {
 });
 
 describe('resolveAssetSource.pickScale', () => {
-  const resolveAssetSource = require('../resolveAssetSource');
+  const resolveAssetSource = require('../resolveAssetSource').default;
 
   it('picks matching scale', () => {
     expect(resolveAssetSource.pickScale([1], 2)).toBe(1);

packages/react-native/Libraries/Image/nativeImageSource.js

@@ -61,4 +61,4 @@ function nativeImageSource(spec: NativeImageSourceSpec): ImageURISource {
   };
 }
 
-module.exports = nativeImageSource;
+export default nativeImageSource;

packages/react-native/Libraries/Image/resolveAssetSource.js

@@ -11,11 +11,13 @@
 // Utilities for resolving an asset into a `source` for e.g. `Image`
 
 import type {ResolvedAssetSource} from './AssetSourceResolver';
+import typeof AssetSourceResolverT from './AssetSourceResolver';
 import type {ImageSource} from './ImageSource';
 
 import SourceCode from '../NativeModules/specs/NativeSourceCode';
 
-const AssetSourceResolver = require('./AssetSourceResolver');
+const AssetSourceResolver: AssetSourceResolverT =
+  require('./AssetSourceResolver').default;
 const {pickScale} = require('./AssetUtils');
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
@@ -140,4 +142,4 @@ function resolveAssetSource(source: ?ImageSource): ?ResolvedAssetSource {
 resolveAssetSource.pickScale = pickScale;
 resolveAssetSource.setCustomSourceTransformer = setCustomSourceTransformer;
 resolveAssetSource.addCustomSourceTransformer = addCustomSourceTransformer;
-module.exports = resolveAssetSource;
+export default resolveAssetSource;

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -14,7 +14,7 @@ import processBoxShadow from '../StyleSheet/processBoxShadow';
 
 const ReactNativeStyleAttributes =
   require('../Components/View/ReactNativeStyleAttributes').default;
-const resolveAssetSource = require('../Image/resolveAssetSource');
+const resolveAssetSource = require('../Image/resolveAssetSource').default;
 const processBackgroundImage =
   require('../StyleSheet/processBackgroundImage').default;
 const processColor = require('../StyleSheet/processColor').default;

packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -48,7 +48,7 @@ module.exports = {
     return require('../Utilities/Platform');
   },
   get RCTEventEmitter(): RCTEventEmitter {
-    return require('../EventEmitter/RCTEventEmitter');
+    return require('../EventEmitter/RCTEventEmitter').default;
   },
   get ReactNativeViewConfigRegistry(): ReactNativeViewConfigRegistry {
     return require('../Renderer/shims/ReactNativeViewConfigRegistry');

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

@@ -4710,13 +4710,13 @@ declare export default IEventEmitter<RCTDeviceEventDefinitions>;
 
 exports[`public API should not change unintentionally Libraries/EventEmitter/RCTEventEmitter.js 1`] = `
 "declare const RCTEventEmitter: { register(eventEmitter: any): void };
-declare module.exports: RCTEventEmitter;
+declare export default typeof RCTEventEmitter;
 "
 `;
 
 exports[`public API should not change unintentionally Libraries/EventEmitter/RCTNativeAppEventEmitter.js 1`] = `
 "declare const RCTNativeAppEventEmitter: typeof RCTDeviceEventEmitter;
-declare module.exports: RCTNativeAppEventEmitter;
+declare export default typeof RCTNativeAppEventEmitter;
 "
 `;
 
@@ -4799,10 +4799,11 @@ declare export default typeof EventPolyfill;
 `;
 
 exports[`public API should not change unintentionally Libraries/Image/AssetRegistry.js 1`] = `
-"declare module.exports: {
+"declare const AssetRegistry: {
   registerAsset: (asset: PackagerAsset) => number,
   getAssetByID: (assetId: number) => PackagerAsset,
 };
+declare module.exports: AssetRegistry;
 "
 `;
 
@@ -4835,7 +4836,7 @@ declare class AssetSourceResolver {
   fromSource(source: string): ResolvedAssetSource;
   static pickScale: (scales: Array<number>, deviceScale?: number) => number;
 }
-declare module.exports: AssetSourceResolver;
+declare export default typeof AssetSourceResolver;
 "
 `;
 
@@ -4850,7 +4851,7 @@ declare export function getUrlCacheBreaker(): string;
 `;
 
 exports[`public API should not change unintentionally Libraries/Image/Image.js.flow 1`] = `
-"declare module.exports: Image;
+"declare export default Image;
 "
 `;
 
@@ -4868,7 +4869,7 @@ exports[`public API should not change unintentionally Libraries/Image/ImageBackg
   _captureRef: $FlowFixMe;
   render(): React.Node;
 }
-declare module.exports: ImageBackground;
+declare export default typeof ImageBackground;
 "
 `;
 
@@ -5144,7 +5145,8 @@ declare export default typeof NativeImageStoreIOS;
 `;
 
 exports[`public API should not change unintentionally Libraries/Image/RelativeImageStub.js 1`] = `
-"declare module.exports: number;
+"declare const RelativeImageStub: number;
+declare module.exports: RelativeImageStub;
 "
 `;
 
@@ -5171,13 +5173,13 @@ exports[`public API should not change unintentionally Libraries/Image/nativeImag
   width: number,
 }>;
 declare function nativeImageSource(spec: NativeImageSourceSpec): ImageURISource;
-declare module.exports: nativeImageSource;
+declare export default typeof nativeImageSource;
 "
 `;
 
 exports[`public API should not change unintentionally Libraries/Image/resolveAssetSource.js 1`] = `
 "declare function resolveAssetSource(source: ?ImageSource): ?ResolvedAssetSource;
-declare module.exports: resolveAssetSource;
+declare export default typeof resolveAssetSource;
 "
 `;
 

packages/react-native/index.js

@@ -128,10 +128,10 @@ module.exports = {
     return require('./Libraries/Lists/FlatList').default;
   },
   get Image(): Image {
-    return require('./Libraries/Image/Image');
+    return require('./Libraries/Image/Image').default;
   },
   get ImageBackground(): ImageBackground {
-    return require('./Libraries/Image/ImageBackground');
+    return require('./Libraries/Image/ImageBackground').default;
   },
   get InputAccessoryView(): InputAccessoryView {
     return require('./Libraries/Components/TextInput/InputAccessoryView')
@@ -367,7 +367,7 @@ module.exports = {
       .DynamicColorIOS;
   },
   get NativeAppEventEmitter(): RCTNativeAppEventEmitter {
-    return require('./Libraries/EventEmitter/RCTNativeAppEventEmitter');
+    return require('./Libraries/EventEmitter/RCTNativeAppEventEmitter').default;
   },
   get NativeModules(): NativeModules {
     return require('./Libraries/BatchedBridge/NativeModules').default;

packages/react-native/jest/setup.js

@@ -120,9 +120,14 @@ jest
       },
     },
   }))
-  .mock('../Libraries/Image/Image', () =>
-    mockComponent('../Libraries/Image/Image'),
-  )
+  .mock('../Libraries/Image/Image', () => ({
+    __esModule: true,
+    default: mockComponent(
+      '../Libraries/Image/Image',
+      /* instanceMethods */ null,
+      /* isESModule */ true,
+    ),
+  }))
   .mock('../Libraries/Text/Text', () => ({
     __esModule: true,
     default: mockComponent(

packages/rn-tester/js/examples/Image/ImageCapInsetsExample.js

@@ -12,7 +12,8 @@
 
 const React = require('react');
 const ReactNative = require('react-native');
-const nativeImageSource = require('react-native/Libraries/Image/nativeImageSource');
+const nativeImageSource =
+  require('react-native/Libraries/Image/nativeImageSource').default;
 const {Image, StyleSheet, Text, View} = ReactNative;
 
 type Props = $ReadOnly<{}>;