From 2b30aa5cc8fef42cf8bc110b8d48a201a3dc855a Mon Sep 17 00:00:00 2001 From: Iwo Plaza Date: Wed, 12 Feb 2025 05:30:20 -0800 Subject: [PATCH] Migrate Libraries/Utilities/differ/*.js to export syntax (#49332) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/49332 ## Motivation Modernising the RN codebase to allow for modern Flow tooling to process it. ## This diff - Migrates `Libraries/Utilities/differ/*.js` to use the export syntax. - Updates deep-imports of these files to use `.default` - Updates codegen with a compat layer - Updates the current iteration of API snapshots (intended). Changelog: [General][Breaking] - Deep imports to `Libraries/Utilities/differ/...` with `require` syntax need to be appended with '.default'. Reviewed By: yungsters Differential Revision: D69467423 fbshipit-source-id: 2e58a0b9711e9bdf5ca907a5b2252584f6fec9bc --- .../GenerateViewConfigJs-test.js.snap | 4 ++-- .../components/GenerateViewConfigJs.js | 4 ++-- .../GenerateViewConfigJs-test.js.snap | 6 ++--- .../ScrollView/ScrollViewNativeComponent.js | 10 ++++---- .../TextInput/RCTTextInputViewConfig.js | 4 +++- .../Image/ImageViewNativeComponent.js | 2 +- .../react-native/Libraries/Lists/FlatList.js | 2 +- .../NativeComponent/BaseViewConfig.ios.js | 6 ++--- .../getNativeComponentAttributes.js | 8 +++---- .../ReactNativePrivateInterface.js | 2 +- .../differ/__tests__/deepDiffer-test.js | 2 +- .../differ/__tests__/matricesDiffer-test.js | 2 +- .../Libraries/Utilities/differ/deepDiffer.js | 6 ++--- .../Utilities/differ/insetsDiffer.js | 6 ++--- .../Utilities/differ/matricesDiffer.js | 9 +++---- .../Utilities/differ/pointsDiffer.js | 6 ++--- .../Libraries/Utilities/differ/sizesDiffer.js | 6 ++--- .../__snapshots__/public-api-test.js.snap | 24 +++++++++---------- .../IntegrationTests/LayoutEventsTest.js | 3 ++- 19 files changed, 56 insertions(+), 56 deletions(-) diff --git a/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap b/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap index da60422f0c5..9572af9c682 100644 --- a/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap +++ b/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap @@ -582,7 +582,7 @@ export const __INTERNAL_VIEW_CONFIG = { }, point: { - diff: require('react-native/Libraries/Utilities/differ/pointsDiffer'), + diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')), }, }, }; @@ -685,7 +685,7 @@ export const __INTERNAL_VIEW_CONFIG = { validAttributes: { startPoint: { - diff: require('react-native/Libraries/Utilities/differ/pointsDiffer'), + diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')), }, }, }; diff --git a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js index 64ecdd03a87..91cbc056423 100644 --- a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js +++ b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js @@ -74,10 +74,10 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { throw new Error('ImageRequest should not be used in props'); case 'PointPrimitive': return j.template - .expression`{ diff: require('react-native/Libraries/Utilities/differ/pointsDiffer') }`; + .expression`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) }`; case 'EdgeInsetsPrimitive': return j.template - .expression`{ diff: require('react-native/Libraries/Utilities/differ/insetsDiffer') }`; + .expression`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')) }`; case 'DimensionPrimitive': return j.literal(true); default: diff --git a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap index fda12f34e89..e687ec49198 100644 --- a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap +++ b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap @@ -707,7 +707,7 @@ export const __INTERNAL_VIEW_CONFIG = { validAttributes: { contentInset: { - diff: require('react-native/Libraries/Utilities/differ/insetsDiffer'), + diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')), }, }, }; @@ -907,7 +907,7 @@ export const __INTERNAL_VIEW_CONFIG = { }, point: { - diff: require('react-native/Libraries/Utilities/differ/pointsDiffer'), + diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')), }, }, }; @@ -1008,7 +1008,7 @@ export const __INTERNAL_VIEW_CONFIG = { validAttributes: { startPoint: { - diff: require('react-native/Libraries/Utilities/differ/pointsDiffer'), + diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')), }, }, }; diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js index 9e225c1dc21..2709ce0d815 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js @@ -42,7 +42,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = }, validAttributes: { contentOffset: { - diff: require('../../Utilities/differ/pointsDiffer'), + diff: require('../../Utilities/differ/pointsDiffer').default, }, decelerationRate: true, disableIntervalMomentum: true, @@ -126,10 +126,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = canCancelContentTouches: true, centerContent: true, contentInset: { - diff: require('../../Utilities/differ/insetsDiffer'), + diff: require('../../Utilities/differ/insetsDiffer').default, }, contentOffset: { - diff: require('../../Utilities/differ/pointsDiffer'), + diff: require('../../Utilities/differ/pointsDiffer').default, }, contentInsetAdjustmentBehavior: true, decelerationRate: true, @@ -147,7 +147,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = scrollEnabled: true, scrollEventThrottle: true, scrollIndicatorInsets: { - diff: require('../../Utilities/differ/insetsDiffer'), + diff: require('../../Utilities/differ/insetsDiffer').default, }, scrollToOverflowEnabled: true, scrollsToTop: true, @@ -159,7 +159,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = snapToOffsets: true, snapToStart: true, verticalScrollIndicatorInsets: { - diff: require('../../Utilities/differ/insetsDiffer'), + diff: require('../../Utilities/differ/insetsDiffer').default, }, zoomScale: true, ...ConditionallyIgnoredEventHandlers({ diff --git a/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js index d7cce56d367..1af4104f5f0 100644 --- a/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js +++ b/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js @@ -98,7 +98,9 @@ const RCTTextInputViewConfig = { fontWeight: true, fontVariant: true, // flowlint-next-line untyped-import:off - textShadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, + textShadowOffset: { + diff: require('../../Utilities/differ/sizesDiffer').default, + }, allowFontScaling: true, fontStyle: true, textTransform: true, diff --git a/packages/react-native/Libraries/Image/ImageViewNativeComponent.js b/packages/react-native/Libraries/Image/ImageViewNativeComponent.js index dc701ade3fb..6772d0a3216 100644 --- a/packages/react-native/Libraries/Image/ImageViewNativeComponent.js +++ b/packages/react-native/Libraries/Image/ImageViewNativeComponent.js @@ -142,7 +142,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = validAttributes: { blurRadius: true, capInsets: { - diff: require('../Utilities/differ/insetsDiffer'), + diff: require('../Utilities/differ/insetsDiffer').default, }, defaultSource: { process: require('./resolveAssetSource').default, diff --git a/packages/react-native/Libraries/Lists/FlatList.js b/packages/react-native/Libraries/Lists/FlatList.js index e6a475a0788..5928ae88b82 100644 --- a/packages/react-native/Libraries/Lists/FlatList.js +++ b/packages/react-native/Libraries/Lists/FlatList.js @@ -25,7 +25,7 @@ import memoizeOne from 'memoize-one'; import React from 'react'; const StyleSheet = require('../StyleSheet/StyleSheet'); -const deepDiffer = require('../Utilities/differ/deepDiffer'); +const deepDiffer = require('../Utilities/differ/deepDiffer').default; const Platform = require('../Utilities/Platform'); const invariant = require('invariant'); diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js index 2cd155760db..d3288e2a031 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js @@ -201,13 +201,13 @@ const validAttributesForNonEventProps = { cursor: true, opacity: true, shadowColor: {process: require('../StyleSheet/processColor').default}, - shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')}, + shadowOffset: {diff: require('../Utilities/differ/sizesDiffer').default}, shadowOpacity: true, shadowRadius: true, needsOffscreenAlphaCompositing: true, overflow: true, shouldRasterizeIOS: true, - transform: {diff: require('../Utilities/differ/matricesDiffer')}, + transform: {diff: require('../Utilities/differ/matricesDiffer').default}, transformOrigin: true, accessibilityRole: true, accessibilityState: true, @@ -222,7 +222,7 @@ const validAttributesForNonEventProps = { borderWidth: true, borderBlockWidth: true, borderStyle: true, - hitSlop: {diff: require('../Utilities/differ/insetsDiffer')}, + hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default}, collapsable: true, collapsableChildren: true, filter: { diff --git a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js b/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js index 04e8e103f57..56c89512281 100644 --- a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js +++ b/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js @@ -20,10 +20,10 @@ const processBackgroundImage = const processColor = require('../StyleSheet/processColor').default; const processColorArray = require('../StyleSheet/processColorArray').default; const processFilter = require('../StyleSheet/processFilter').default; -const insetsDiffer = require('../Utilities/differ/insetsDiffer'); -const matricesDiffer = require('../Utilities/differ/matricesDiffer'); -const pointsDiffer = require('../Utilities/differ/pointsDiffer'); -const sizesDiffer = require('../Utilities/differ/sizesDiffer'); +const insetsDiffer = require('../Utilities/differ/insetsDiffer').default; +const matricesDiffer = require('../Utilities/differ/matricesDiffer').default; +const pointsDiffer = require('../Utilities/differ/pointsDiffer').default; +const sizesDiffer = require('../Utilities/differ/sizesDiffer').default; const UIManager = require('./UIManager').default; const nullthrows = require('nullthrows'); diff --git a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js index 79d82b09c8e..611946671ad 100644 --- a/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js +++ b/packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js @@ -63,7 +63,7 @@ module.exports = { }, // TODO: Remove when React has migrated to `createAttributePayload` and `diffAttributePayloads` get deepDiffer(): deepDiffer { - return require('../Utilities/differ/deepDiffer'); + return require('../Utilities/differ/deepDiffer').default; }, get deepFreezeAndThrowOnMutationInDev(): deepFreezeAndThrowOnMutationInDev< {...} | Array, diff --git a/packages/react-native/Libraries/Utilities/differ/__tests__/deepDiffer-test.js b/packages/react-native/Libraries/Utilities/differ/__tests__/deepDiffer-test.js index 0129e9d5ee1..dd96ea35be9 100644 --- a/packages/react-native/Libraries/Utilities/differ/__tests__/deepDiffer-test.js +++ b/packages/react-native/Libraries/Utilities/differ/__tests__/deepDiffer-test.js @@ -10,7 +10,7 @@ 'use strict'; -const deepDiffer = require('../deepDiffer'); +const deepDiffer = require('../deepDiffer').default; describe('deepDiffer', function () { it('should diff primitives of the same type', () => { diff --git a/packages/react-native/Libraries/Utilities/differ/__tests__/matricesDiffer-test.js b/packages/react-native/Libraries/Utilities/differ/__tests__/matricesDiffer-test.js index 8512db2040d..dffe86fb5c2 100644 --- a/packages/react-native/Libraries/Utilities/differ/__tests__/matricesDiffer-test.js +++ b/packages/react-native/Libraries/Utilities/differ/__tests__/matricesDiffer-test.js @@ -10,7 +10,7 @@ 'use strict'; -const matricesDiffer = require('../matricesDiffer'); +const matricesDiffer = require('../matricesDiffer').default; describe('matricesDiffer', function () { it('diffs matrices with single element', () => { diff --git a/packages/react-native/Libraries/Utilities/differ/deepDiffer.js b/packages/react-native/Libraries/Utilities/differ/deepDiffer.js index 27cef58afa9..635eb82baa1 100644 --- a/packages/react-native/Libraries/Utilities/differ/deepDiffer.js +++ b/packages/react-native/Libraries/Utilities/differ/deepDiffer.js @@ -25,7 +25,7 @@ function unstable_setLogListeners(listeners: ?LogListeners) { /* * @returns {bool} true if different, false if equal */ -const deepDiffer = function ( +function deepDiffer( one: any, two: any, maxDepthOrOptions: Options | number = -1, @@ -95,7 +95,7 @@ const deepDiffer = function ( } } return false; -}; +} deepDiffer.unstable_setLogListeners = unstable_setLogListeners; -module.exports = deepDiffer; +export default deepDiffer; diff --git a/packages/react-native/Libraries/Utilities/differ/insetsDiffer.js b/packages/react-native/Libraries/Utilities/differ/insetsDiffer.js index 4ec01330fbb..ae55c772e06 100644 --- a/packages/react-native/Libraries/Utilities/differ/insetsDiffer.js +++ b/packages/react-native/Libraries/Utilities/differ/insetsDiffer.js @@ -25,7 +25,7 @@ const dummyInsets = { bottom: undefined, }; -const insetsDiffer = function (one: Inset, two: Inset): boolean { +function insetsDiffer(one: Inset, two: Inset): boolean { one = one || dummyInsets; two = two || dummyInsets; return ( @@ -35,6 +35,6 @@ const insetsDiffer = function (one: Inset, two: Inset): boolean { one.right !== two.right || one.bottom !== two.bottom) ); -}; +} -module.exports = insetsDiffer; +export default insetsDiffer; diff --git a/packages/react-native/Libraries/Utilities/differ/matricesDiffer.js b/packages/react-native/Libraries/Utilities/differ/matricesDiffer.js index 0abbe898f52..d1695afd2da 100644 --- a/packages/react-native/Libraries/Utilities/differ/matricesDiffer.js +++ b/packages/react-native/Libraries/Utilities/differ/matricesDiffer.js @@ -19,10 +19,7 @@ * @param {MatrixMath.Matrix} two Second matrix. * @return {boolean} Whether or not the two matrices differ. */ -const matricesDiffer = function ( - one: ?Array, - two: ?Array, -): boolean { +function matricesDiffer(one: ?Array, two: ?Array): boolean { if (one === two) { return false; } @@ -46,6 +43,6 @@ const matricesDiffer = function ( one[11] !== two[11] || one[15] !== two[15] ); -}; +} -module.exports = matricesDiffer; +export default matricesDiffer; diff --git a/packages/react-native/Libraries/Utilities/differ/pointsDiffer.js b/packages/react-native/Libraries/Utilities/differ/pointsDiffer.js index 2039b49511f..5995d34e92a 100644 --- a/packages/react-native/Libraries/Utilities/differ/pointsDiffer.js +++ b/packages/react-native/Libraries/Utilities/differ/pointsDiffer.js @@ -18,10 +18,10 @@ type Point = { const dummyPoint = {x: undefined, y: undefined}; -const pointsDiffer = function (one: ?Point, two: ?Point): boolean { +function pointsDiffer(one: ?Point, two: ?Point): boolean { one = one || dummyPoint; two = two || dummyPoint; return one !== two && (one.x !== two.x || one.y !== two.y); -}; +} -module.exports = pointsDiffer; +export default pointsDiffer; diff --git a/packages/react-native/Libraries/Utilities/differ/sizesDiffer.js b/packages/react-native/Libraries/Utilities/differ/sizesDiffer.js index a4c3a1fb3d0..cce188c38d4 100644 --- a/packages/react-native/Libraries/Utilities/differ/sizesDiffer.js +++ b/packages/react-native/Libraries/Utilities/differ/sizesDiffer.js @@ -13,7 +13,7 @@ const dummySize = {width: undefined, height: undefined}; type Size = {width: ?number, height: ?number}; -const sizesDiffer = function (one: Size, two: Size): boolean { +function sizesDiffer(one: Size, two: Size): boolean { const defaultedOne = one || dummySize; const defaultedTwo = two || dummySize; return ( @@ -21,6 +21,6 @@ const sizesDiffer = function (one: Size, two: Size): boolean { (defaultedOne.width !== defaultedTwo.width || defaultedOne.height !== defaultedTwo.height) ); -}; +} -module.exports = sizesDiffer; +export default sizesDiffer; 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 a6cff01924f..649ab0faf54 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 @@ -8502,13 +8502,13 @@ declare module.exports: defineLazyObjectProperty; exports[`public API should not change unintentionally Libraries/Utilities/differ/deepDiffer.js 1`] = ` "type Options = { +unsafelyIgnoreFunctions?: boolean }; -declare const deepDiffer: ( +declare function deepDiffer( one: any, two: any, maxDepthOrOptions: Options | number, maybeOptions?: Options -) => boolean; -declare module.exports: deepDiffer; +): boolean; +declare export default typeof deepDiffer; " `; @@ -8520,17 +8520,17 @@ exports[`public API should not change unintentionally Libraries/Utilities/differ bottom: ?number, ... }; -declare const insetsDiffer: (one: Inset, two: Inset) => boolean; -declare module.exports: insetsDiffer; +declare function insetsDiffer(one: Inset, two: Inset): boolean; +declare export default typeof insetsDiffer; " `; exports[`public API should not change unintentionally Libraries/Utilities/differ/matricesDiffer.js 1`] = ` -"declare const matricesDiffer: ( +"declare function matricesDiffer( one: ?Array, two: ?Array -) => boolean; -declare module.exports: matricesDiffer; +): boolean; +declare export default typeof matricesDiffer; " `; @@ -8540,15 +8540,15 @@ exports[`public API should not change unintentionally Libraries/Utilities/differ y: ?number, ... }; -declare const pointsDiffer: (one: ?Point, two: ?Point) => boolean; -declare module.exports: pointsDiffer; +declare function pointsDiffer(one: ?Point, two: ?Point): boolean; +declare export default typeof pointsDiffer; " `; exports[`public API should not change unintentionally Libraries/Utilities/differ/sizesDiffer.js 1`] = ` "type Size = { width: ?number, height: ?number }; -declare const sizesDiffer: (one: Size, two: Size) => boolean; -declare module.exports: sizesDiffer; +declare function sizesDiffer(one: Size, two: Size): boolean; +declare export default typeof sizesDiffer; " `; diff --git a/packages/rn-tester/IntegrationTests/LayoutEventsTest.js b/packages/rn-tester/IntegrationTests/LayoutEventsTest.js index a5177c5646b..f903ff8fac3 100644 --- a/packages/rn-tester/IntegrationTests/LayoutEventsTest.js +++ b/packages/rn-tester/IntegrationTests/LayoutEventsTest.js @@ -18,7 +18,8 @@ import type { const React = require('react'); const ReactNative = require('react-native'); -const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer'); +const deepDiffer = + require('react-native/Libraries/Utilities/differ/deepDiffer').default; const {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative; const {TestModule} = ReactNative.NativeModules;