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

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')),
     },
   },
 };

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:

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')),
     },
   },
 };

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({

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,

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,

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');
 

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: {

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');
 

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<mixed>,

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', () => {

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', () => {

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;

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;

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<number>,
-  two: ?Array<number>,
-): boolean {
+function matricesDiffer(one: ?Array<number>, two: ?Array<number>): 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;

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;

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;

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<number>,
   two: ?Array<number>
-) => 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;
 "
 `;
 

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;