refactor: Convert Animated directory to use ESModule imports/exports (#34539)

Summary:
This PR refactors the Animated directory to use ESModule imports/exports instead of using a mixture of the 2 module formats, as requested on #34425.

## Changelog

[Internal] [Changed] - Convert all files in the Animated directory to use ESModule imports/exports

Pull Request resolved: #34539

Test Plan: This doesn't really add or modify any existing features so checking if CI passes should be enough

Reviewed By: yungsters

Differential Revision: D39235720

Pulled By: yungsters

fbshipit-source-id: 84b4c0a71dc9fca1ab7053263f1cf7c336df58c1

Author: gabrieldonadel

Libraries/Animated/Animated.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+export type {CompositeAnimation, Numeric} from './AnimatedImplementation';
+
 import Platform from '../Utilities/Platform';
 import typeof AnimatedFlatList from './components/AnimatedFlatList';
 import typeof AnimatedImage from './components/AnimatedImage';
@@ -16,31 +18,31 @@ import typeof AnimatedSectionList from './components/AnimatedSectionList';
 import typeof AnimatedText from './components/AnimatedText';
 import typeof AnimatedView from './components/AnimatedView';
 
-import * as AnimatedMock from './AnimatedMock';
-import * as AnimatedImplementation from './AnimatedImplementation';
+import AnimatedMock from './AnimatedMock';
+import AnimatedImplementation from './AnimatedImplementation';
 
 const Animated = ((Platform.isTesting
   ? AnimatedMock
-  : AnimatedImplementation): typeof AnimatedMock);
+  : AnimatedImplementation): typeof AnimatedImplementation);
 
-module.exports = {
+export default {
   get FlatList(): AnimatedFlatList {
-    return require('./components/AnimatedFlatList');
+    return require('./components/AnimatedFlatList').default;
   },
   get Image(): AnimatedImage {
-    return require('./components/AnimatedImage');
+    return require('./components/AnimatedImage').default;
   },
   get ScrollView(): AnimatedScrollView {
-    return require('./components/AnimatedScrollView');
+    return require('./components/AnimatedScrollView').default;
   },
   get SectionList(): AnimatedSectionList {
-    return require('./components/AnimatedSectionList');
+    return require('./components/AnimatedSectionList').default;
   },
   get Text(): AnimatedText {
-    return require('./components/AnimatedText');
+    return require('./components/AnimatedText').default;
   },
   get View(): AnimatedView {
-    return require('./components/AnimatedView');
+    return require('./components/AnimatedView').default;
   },
   ...Animated,
 };

Libraries/Animated/AnimatedEvent.js

@@ -10,14 +10,12 @@
 
 'use strict';
 
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
-const NativeAnimatedHelper = require('./NativeAnimatedHelper');
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {findNodeHandle} from '../ReactNative/RendererProxy';
 
-const invariant = require('invariant');
-
-const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
+import invariant from 'invariant';
 
 import type {PlatformConfig} from './AnimatedPlatformConfig';
 
@@ -31,7 +29,7 @@ export type EventConfig = {
   platformConfig?: PlatformConfig,
 };
 
-function attachNativeEvent(
+export function attachNativeEvent(
   viewRef: any,
   eventName: string,
   argMapping: $ReadOnlyArray<?Mapping>,
@@ -146,7 +144,7 @@ function validateMapping(argMapping: $ReadOnlyArray<?Mapping>, args: any) {
   });
 }
 
-class AnimatedEvent {
+export class AnimatedEvent {
   _argMapping: $ReadOnlyArray<?Mapping>;
   _listeners: Array<Function> = [];
   _attachedEvent: ?{detach: () => void, ...};
@@ -165,7 +163,7 @@ class AnimatedEvent {
       this.__addListener(config.listener);
     }
     this._attachedEvent = null;
-    this.__isNative = shouldUseNativeDriver(config);
+    this.__isNative = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this.__platformConfig = config.platformConfig;
   }
 
@@ -257,5 +255,3 @@ class AnimatedEvent {
     this._listeners.forEach(listener => listener(...args));
   };
 }
-
-module.exports = {AnimatedEvent, attachNativeEvent};

Libraries/Animated/AnimatedImplementation.js

@@ -10,23 +10,23 @@
 
 'use strict';
 
-const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
-const AnimatedAddition = require('./nodes/AnimatedAddition');
-const AnimatedDiffClamp = require('./nodes/AnimatedDiffClamp');
-const AnimatedDivision = require('./nodes/AnimatedDivision');
-const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
-const AnimatedModulo = require('./nodes/AnimatedModulo');
-const AnimatedMultiplication = require('./nodes/AnimatedMultiplication');
-const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedSubtraction = require('./nodes/AnimatedSubtraction');
-const AnimatedTracking = require('./nodes/AnimatedTracking');
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
-const DecayAnimation = require('./animations/DecayAnimation');
-const SpringAnimation = require('./animations/SpringAnimation');
-const TimingAnimation = require('./animations/TimingAnimation');
-
-const createAnimatedComponent = require('./createAnimatedComponent');
+import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import AnimatedAddition from './nodes/AnimatedAddition';
+import AnimatedDiffClamp from './nodes/AnimatedDiffClamp';
+import AnimatedDivision from './nodes/AnimatedDivision';
+import AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import AnimatedModulo from './nodes/AnimatedModulo';
+import AnimatedMultiplication from './nodes/AnimatedMultiplication';
+import AnimatedNode from './nodes/AnimatedNode';
+import AnimatedSubtraction from './nodes/AnimatedSubtraction';
+import AnimatedTracking from './nodes/AnimatedTracking';
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+import DecayAnimation from './animations/DecayAnimation';
+import SpringAnimation from './animations/SpringAnimation';
+import TimingAnimation from './animations/TimingAnimation';
+
+import createAnimatedComponent from './createAnimatedComponent';
 
 import type {
   AnimationConfig,
@@ -575,7 +575,7 @@ export type {AnimatedNumeric as Numeric};
  *
  * See https://reactnative.dev/docs/animated
  */
-module.exports = {
+export default {
   /**
    * Standard value class for driving animations.  Typically initialized with
    * `new Animated.Value(0);`

Libraries/Animated/AnimatedMock.js

@@ -12,14 +12,14 @@
 
 import type {EndResult} from './animations/Animation';
 
-const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
-const AnimatedImplementation = require('./AnimatedImplementation');
-const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
-const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedValue = require('./nodes/AnimatedValue');
-const AnimatedValueXY = require('./nodes/AnimatedValueXY');
+import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import AnimatedImplementation from './AnimatedImplementation';
+import AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import AnimatedNode from './nodes/AnimatedNode';
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
 
-const createAnimatedComponent = require('./createAnimatedComponent');
+import createAnimatedComponent from './createAnimatedComponent';
 
 import type {EndCallback} from './animations/Animation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
@@ -168,7 +168,7 @@ const loop = function (
 
 export type {AnimatedNumeric as Numeric};
 
-module.exports = {
+export default {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
   Color: AnimatedColor,

Libraries/Animated/AnimatedWeb.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const AnimatedImplementation = require('./AnimatedImplementation');
+import AnimatedImplementation from './AnimatedImplementation';
 
-module.exports = {
+export default {
   ...AnimatedImplementation,
   /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
    * types. Plain intrinsic components can't be typed like this */

Libraries/Animated/Easing.js

@@ -214,7 +214,7 @@ const Easing = {
     x2: number,
     y2: number,
   ): (t: number) => number {
-    const _bezier = require('./bezier');
+    const _bezier = require('./bezier').default;
     return _bezier(x1, y1, x2, y2);
   },
 
@@ -247,4 +247,4 @@ const Easing = {
   },
 };
 
-module.exports = Easing;
+export default Easing;

Libraries/Animated/NativeAnimatedHelper.js

@@ -550,7 +550,7 @@ function transformDataType(value: number | string): number | string {
   }
 }
 
-module.exports = {
+export default {
   API,
   isSupportedColorStyleProp,
   isSupportedStyleProp,

Libraries/Animated/SpringConfig.js

@@ -24,7 +24,7 @@ function dampingFromOrigamiValue(oValue: number) {
   return (oValue - 8) * 3 + 25;
 }
 
-function fromOrigamiTensionAndFriction(
+export function fromOrigamiTensionAndFriction(
   tension: number,
   friction: number,
 ): SpringConfigType {
@@ -34,7 +34,7 @@ function fromOrigamiTensionAndFriction(
   };
 }
 
-function fromBouncinessAndSpeed(
+export function fromBouncinessAndSpeed(
   bounciness: number,
   speed: number,
 ): SpringConfigType {
@@ -96,8 +96,3 @@ function fromBouncinessAndSpeed(
     damping: dampingFromOrigamiValue(bouncyFriction),
   };
 }
-
-module.exports = {
-  fromOrigamiTensionAndFriction,
-  fromBouncinessAndSpeed,
-};

Libraries/Animated/__tests__/Animated-test.js

@@ -8,7 +8,6 @@
  * @oncall react_native
  */
 
-import AnimatedProps from '../nodes/AnimatedProps';
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';
 
@@ -21,7 +20,8 @@ jest.mock('../../BatchedBridge/NativeModules', () => ({
   },
 }));
 
-let Animated = require('../Animated');
+let AnimatedProps = require('../nodes/AnimatedProps').default;
+let Animated = require('../Animated').default;
 
 describe('Animated tests', () => {
   beforeEach(() => {
@@ -692,7 +692,7 @@ describe('Animated tests', () => {
 
     beforeEach(() => {
       jest.mock('../../Interaction/InteractionManager');
-      Animated = require('../Animated');
+      Animated = require('../Animated').default;
       InteractionManager = require('../../Interaction/InteractionManager');
     });
 

Libraries/Animated/__tests__/AnimatedMock-test.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const AnimatedMock = require('../AnimatedMock');
-const AnimatedImplementation = require('../AnimatedImplementation');
+import AnimatedMock from '../AnimatedMock';
+import AnimatedImplementation from '../AnimatedImplementation';
 
 describe('Animated Mock', () => {
   it('matches implementation keys', () => {