From 9eeef22a67ff74ccc2d20647624bee26211a3ab5 Mon Sep 17 00:00:00 2001 From: Iwo Plaza Date: Tue, 21 Jan 2025 07:00:35 -0800 Subject: [PATCH] Migrated components to `export` syntax (part 1) (#48765) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/48765 ## 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: cortinico Differential Revision: D68330077 fbshipit-source-id: 6bf00c82f72dbcaaa26470d7ea0917639fc3de4a --- .../legacySendAccessibilityEvent.android.js | 2 +- .../AccessibilityInfo/legacySendAccessibilityEvent.ios.js | 2 +- .../legacySendAccessibilityEvent.js.flow | 2 +- .../Libraries/Components/Clipboard/Clipboard.js | 2 +- .../DrawerAndroid/DrawerLayoutAndroid.android.js | 2 +- .../Components/DrawerAndroid/DrawerLayoutAndroid.js | 3 +-- .../DrawerAndroid/__tests__/DrawerAndroid-test.js | 2 +- .../Libraries/Components/Keyboard/Keyboard.js | 2 +- .../Components/Keyboard/__tests__/Keyboard-test.js | 2 +- .../Libraries/ReactPrivate/ReactNativePrivateInterface.js | 3 ++- .../__tests__/__snapshots__/public-api-test.js.snap | 8 ++++---- packages/react-native/index.js | 7 ++++--- packages/react-native/jest/setup.js | 7 +++++-- 13 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js index fdbabb475c7..cc75d54fafd 100644 --- a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js @@ -33,4 +33,4 @@ function legacySendAccessibilityEvent( } } -module.exports = legacySendAccessibilityEvent; +export default legacySendAccessibilityEvent; diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js index 17091e354ff..3fdf5a6a926 100644 --- a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js @@ -23,4 +23,4 @@ function legacySendAccessibilityEvent( } } -module.exports = legacySendAccessibilityEvent; +export default legacySendAccessibilityEvent; diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow index 14e63dddeac..9459d8cd458 100644 --- a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow @@ -17,4 +17,4 @@ declare function legacySendAccessibilityEvent( eventType: string, ): void; -module.exports = legacySendAccessibilityEvent; +export default legacySendAccessibilityEvent; diff --git a/packages/react-native/Libraries/Components/Clipboard/Clipboard.js b/packages/react-native/Libraries/Components/Clipboard/Clipboard.js index 5a5acf9d9db..71080290a42 100644 --- a/packages/react-native/Libraries/Components/Clipboard/Clipboard.js +++ b/packages/react-native/Libraries/Components/Clipboard/Clipboard.js @@ -13,7 +13,7 @@ import NativeClipboard from './NativeClipboard'; /** * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android */ -module.exports = { +export default { /** * Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content * ```javascript diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 7235d6543d0..2b11746b648 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js @@ -391,4 +391,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = DrawerLayoutAndroid; +export default DrawerLayoutAndroid; diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js index 9673bf922a8..b3d689ebafc 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js +++ b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js @@ -12,5 +12,4 @@ import typeof DrawerLayoutAndroid from './DrawerLayoutAndroid.android'; -module.exports = - require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid; +export default require('../UnimplementedViews/UnimplementedView') as $FlowFixMe as DrawerLayoutAndroid; diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js b/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js index a82d42cbb54..115e0f0778a 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js +++ b/packages/react-native/Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js @@ -17,7 +17,7 @@ const View = require('../../View/View'); * 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 DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android'); +const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android').default; const React = require('react'); describe('', () => { diff --git a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js index 7d7c0fdeaa7..1bf9a591aff 100644 --- a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js +++ b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js @@ -202,4 +202,4 @@ class Keyboard { } } -module.exports = (new Keyboard(): Keyboard); +export default (new Keyboard(): Keyboard); diff --git a/packages/react-native/Libraries/Components/Keyboard/__tests__/Keyboard-test.js b/packages/react-native/Libraries/Components/Keyboard/__tests__/Keyboard-test.js index d352aed059d..6b2d7d89495 100644 --- a/packages/react-native/Libraries/Components/Keyboard/__tests__/Keyboard-test.js +++ b/packages/react-native/Libraries/Components/Keyboard/__tests__/Keyboard-test.js @@ -11,7 +11,7 @@ const LayoutAnimation = require('../../../LayoutAnimation/LayoutAnimation'); const dismissKeyboard = require('../../../Utilities/dismissKeyboard'); -const Keyboard = require('../Keyboard'); +const Keyboard = require('../Keyboard').default; jest.mock('../../../LayoutAnimation/LayoutAnimation'); jest.mock('../../../Utilities/dismissKeyboard'); diff --git a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js index c459c79d846..3c5385d23b4 100644 --- a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js +++ b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js @@ -77,7 +77,8 @@ module.exports = { return require('../Core/ReactFiberErrorDialog').default; }, get legacySendAccessibilityEvent(): legacySendAccessibilityEvent { - return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent'); + return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent') + .default; }, get RawEventEmitter(): RawEventEmitter { return require('../Core/RawEventEmitter').default; 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 index 9d8f4d57541..bbec5c97ab6 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -1631,7 +1631,7 @@ exports[`public API should not change unintentionally Libraries/Components/Acces reactTag: number, eventType: string ): void; -declare module.exports: legacySendAccessibilityEvent; +declare export default typeof legacySendAccessibilityEvent; " `; @@ -1703,7 +1703,7 @@ declare export default typeof Button; `; exports[`public API should not change unintentionally Libraries/Components/Clipboard/Clipboard.js 1`] = ` -"declare module.exports: { +"declare export default { getString(): Promise, setString(content: string): void, }; @@ -1723,7 +1723,7 @@ declare export default typeof AndroidDrawerLayoutNativeComponent; `; exports[`public API should not change unintentionally Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js 1`] = ` -"declare module.exports: DrawerLayoutAndroid; +"declare export default DrawerLayoutAndroid; " `; @@ -1780,7 +1780,7 @@ declare class Keyboard { metrics(): ?KeyboardMetrics; scheduleLayoutAnimation(event: KeyboardEvent): void; } -declare module.exports: Keyboard; +declare export default Keyboard; " `; diff --git a/packages/react-native/index.js b/packages/react-native/index.js index 3086f22a316..4f44bbbbcf8 100644 --- a/packages/react-native/index.js +++ b/packages/react-native/index.js @@ -122,7 +122,8 @@ module.exports = { }, // $FlowFixMe[value-as-type] get DrawerLayoutAndroid(): DrawerLayoutAndroid { - return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid'); + return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid') + .default; }, get FlatList(): FlatList { return require('./Libraries/Lists/FlatList'); @@ -242,7 +243,7 @@ module.exports = { "It can now be installed and imported from '@react-native-clipboard/clipboard' instead of 'react-native'. " + 'See https://github.com/react-native-clipboard/clipboard', ); - return require('./Libraries/Components/Clipboard/Clipboard'); + return require('./Libraries/Components/Clipboard/Clipboard').default; }, get DeviceInfo(): DeviceInfo { return require('./Libraries/Utilities/DeviceInfo'); @@ -269,7 +270,7 @@ module.exports = { return require('./Libraries/Interaction/InteractionManager'); }, get Keyboard(): Keyboard { - return require('./Libraries/Components/Keyboard/Keyboard'); + return require('./Libraries/Components/Keyboard/Keyboard').default; }, get LayoutAnimation(): LayoutAnimation { return require('./Libraries/LayoutAnimation/LayoutAnimation'); diff --git a/packages/react-native/jest/setup.js b/packages/react-native/jest/setup.js index 94a9f1ab4d2..d5e76a693e8 100644 --- a/packages/react-native/jest/setup.js +++ b/packages/react-native/jest/setup.js @@ -163,8 +163,11 @@ jest }, })) .mock('../Libraries/Components/Clipboard/Clipboard', () => ({ - getString: jest.fn(() => ''), - setString: jest.fn(), + __esModule: true, + default: { + getString: jest.fn(() => ''), + setString: jest.fn(), + }, })) .mock('../Libraries/Components/RefreshControl/RefreshControl', () => jest.requireActual(