Migrate Reanimated 2 code to TS (#1807)

createNPMPackage.sh

@@ -30,6 +30,8 @@ yarn add react-native --dev
 mv android android-temp
 mv android-npm android
 
+yarn run type:generate
+
 npm pack
 
 mv android android-npm

package.json

@@ -9,10 +9,11 @@
     "format": "prettier --write --list-different './src/**/*.js'",
     "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
     "release": "npm login && release-it",
-    "type:check": "yarn tsc"
+    "type:check": "yarn tsc --noEmit",
+    "type:generate": "rm -rf lib/ && mkdir lib/ && cp -RL src/ lib/ && find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete && yarn tsc"
   },
-  "main": "src/Animated.js",
-  "module": "lib/module/Animated",
+  "main": "lib/Animated.js",
+  "module": "lib/Animated",
   "react-native": "src/Animated",
   "source": "src/Animated",
   "types": "react-native-reanimated.d.ts",
@@ -102,7 +103,7 @@
     "typescript": "^4.1.3"
   },
   "lint-staged": {
-    "*.js": [
+    "*.(js|ts|tsx)": [
       "eslint --ext '.js,.ts,.tsx' src/",
       "prettier --write"
     ]

src/reanimated2/Bezier.js → src/reanimated2/Bezier.ts

@@ -3,19 +3,20 @@
  * BezierEasing - use bezier curve for transition easing function
  * by Gaëtan Renaudeau 2014 - 2015 – MIT License
  */
-
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 // These values are established by empiricism with tests (tradeoff: performance VS precision)
 
 export function Bezier(mX1, mY1, mX2, mY2) {
   'worklet';
 
-  var NEWTON_ITERATIONS = 4;
-  var NEWTON_MIN_SLOPE = 0.001;
-  var SUBDIVISION_PRECISION = 0.0000001;
-  var SUBDIVISION_MAX_ITERATIONS = 10;
+  const NEWTON_ITERATIONS = 4;
+  const NEWTON_MIN_SLOPE = 0.001;
+  const SUBDIVISION_PRECISION = 0.0000001;
+  const SUBDIVISION_MAX_ITERATIONS = 10;
 
-  var kSplineTableSize = 11;
-  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+  const kSplineTableSize = 11;
+  const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
 
   function A(aA1, aA2) {
     'worklet';
@@ -44,9 +45,9 @@ export function Bezier(mX1, mY1, mX2, mY2) {
 
   function binarySubdivide(aX, aA, aB, mX1, mX2) {
     'worklet';
-    var currentX;
-    var currentT;
-    var i = 0;
+    let currentX;
+    let currentT;
+    let i = 0;
     do {
       currentT = aA + (aB - aA) / 2.0;
       currentX = calcBezier(currentT, mX1, mX2) - aX;
@@ -64,12 +65,12 @@ export function Bezier(mX1, mY1, mX2, mY2) {
 
   function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
     'worklet';
-    for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
-      var currentSlope = getSlope(aGuessT, mX1, mX2);
+    for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+      const currentSlope = getSlope(aGuessT, mX1, mX2);
       if (currentSlope === 0.0) {
         return aGuessT;
       }
-      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+      const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
       aGuessT -= currentX / currentSlope;
     }
     return aGuessT;
@@ -98,15 +99,15 @@ export function Bezier(mX1, mY1, mX2, mY2) {
   // Precompute samples table
   const sampleValues = new Array(kSplineTableSize);
 
-  for (var i = 0; i < kSplineTableSize; ++i) {
+  for (let i = 0; i < kSplineTableSize; ++i) {
     sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
   }
 
   function getTForX(aX) {
     'worklet';
-    var intervalStart = 0.0;
-    var currentSample = 1;
-    var lastSample = kSplineTableSize - 1;
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    const lastSample = kSplineTableSize - 1;
 
     for (
       ;
@@ -118,12 +119,12 @@ export function Bezier(mX1, mY1, mX2, mY2) {
     --currentSample;
 
     // Interpolate to provide an initial guess for t
-    var dist =
+    const dist =
       (aX - sampleValues[currentSample]) /
       (sampleValues[currentSample + 1] - sampleValues[currentSample]);
-    var guessForT = intervalStart + dist * kSampleStepSize;
+    const guessForT = intervalStart + dist * kSampleStepSize;
 
-    var initialSlope = getSlope(guessForT, mX1, mX2);
+    const initialSlope = getSlope(guessForT, mX1, mX2);
     if (initialSlope >= NEWTON_MIN_SLOPE) {
       return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
     } else if (initialSlope === 0.0) {

src/reanimated2/Colors.js → src/reanimated2/Colors.ts

@@ -7,7 +7,8 @@
  */
 
 /* eslint no-bitwise: 0 */
-
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Platform } from 'react-native';
 import { makeRemote, makeShareable, isConfigured } from './core';
 import { interpolate } from './interpolation';

src/reanimated2/Easing.js → src/reanimated2/Easing.ts

@@ -1,4 +1,11 @@
+// spread and rest parameters can't be used in worklets right now
+/* eslint-disable prefer-rest-params */
+/* eslint-disable prefer-spread */
+
 /* global _WORKLET */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import EasingNode from '../reanimated1/Easing';
 import { Bezier } from './Bezier';
 

src/reanimated2/Hooks.js → src/reanimated2/Hooks.ts

@@ -1,4 +1,6 @@
 /* global _frameTimestamp */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { useEffect, useRef, useCallback } from 'react';
 
 import WorkletEventHandler from './WorkletEventHandler';
@@ -609,7 +611,7 @@ function areDependenciesEqual(nextDeps, prevDeps) {
     return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
     /* eslint-enable no-self-compare */
   }
-  var objectIs = typeof Object.is === 'function' ? Object.is : is;
+  const objectIs = typeof Object.is === 'function' ? Object.is : is;
 
   function areHookInputsEqual(nextDeps, prevDeps) {
     if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {

src/reanimated2/NativeMethods.js → src/reanimated2/NativeMethods.ts

@@ -1,4 +1,6 @@
 /* global _WORKLET _measure _scrollTo */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { findNodeHandle } from 'react-native';
 
 export function getTag(view) {

src/reanimated2/NativeReanimated.native.js → src/reanimated2/NativeReanimated.native.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Platform } from 'react-native';
 
 const InnerNativeModule = global.__reanimatedModuleProxy;

src/reanimated2/NativeReanimated.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import reanimatedJS from './js-reanimated';
+
+export default reanimatedJS;

src/reanimated2/PropAdapters.js → src/reanimated2/PropAdapters.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { createAnimatedPropAdapter } from './core';
 
 export const SVGAdapter = createAnimatedPropAdapter((props) => {

src/reanimated2/UpdateProps.js → src/reanimated2/UpdateProps.ts

@@ -1,4 +1,6 @@
 /* global _updateProps */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { processColor } from './Colors';
 import { makeShareable, isConfigured } from './core';
 import { Platform } from 'react-native';

src/reanimated2/WorkletEventHandler.js → src/reanimated2/WorkletEventHandler.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import NativeModule from './NativeReanimated';
 
 const jsListener = (eventName, handler) => (evt) => {

src/reanimated2/__mocks__/MutableValue.js → src/reanimated2/__mocks__/MutableValue.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 export default class MutableValue {
   constructor(value) {
     this._value = value;

src/reanimated2/__mocks__/NativeReanimated.native.ts

@@ -0,0 +1 @@
+NativeReanimated.ts

src/reanimated2/__mocks__/NativeReanimated.js → src/reanimated2/__mocks__/NativeReanimated.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import MutableValue from './MutableValue';
 
 global._setGlobalConsole = (_val) => {

src/reanimated2/animations.js → src/reanimated2/animations.ts

@@ -1,4 +1,6 @@
 /* global _WORKLET */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Easing } from './Easing';
 import { isColor, convertToHSVA, toRGBA } from './Colors';
 import NativeReanimated from './NativeReanimated';

src/reanimated2/core.js → src/reanimated2/core.ts

@@ -1,5 +1,6 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
-
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import NativeReanimated from './NativeReanimated';
 import { Platform } from 'react-native';
 import { addWhitelistedNativeProps } from '../ConfigHelper';
@@ -59,6 +60,8 @@ function _toArrayReanimated(object) {
 
 function _mergeObjectsReanimated() {
   'worklet';
+  // we can't use rest parameters in worklets at the moment
+  // eslint-disable-next-line prefer-rest-params
   return Object.assign.apply(null, arguments);
 }
 

src/reanimated2/interpolation.js → src/reanimated2/interpolation.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import interpolateNode, {
   Extrapolate,
 } from '../reanimated1/derived/interpolate';
@@ -117,6 +119,8 @@ export function interpolate(x, input, output, type) {
     console.warn(
       `interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`
     );
+    // we can't use rest parameters in worklets at the moment
+    // eslint-disable-next-line prefer-spread, prefer-rest-params
     return interpolateNode.apply(undefined, arguments);
   }
 

src/reanimated2/jestUtils.js → src/reanimated2/jestUtils.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 const MockDate = require('mockdate');
 
 let config = {
@@ -148,10 +150,15 @@ export const setUpTests = (userConfig = {}) => {
 
   jest.mock('./js-reanimated', () => require('./js-reanimated/index.web'));
   jest.mock('../ReanimatedModule', () => require('../ReanimatedModuleCompat'));
-  jest.mock(
-    './NativeReanimated',
-    () => require('./NativeReanimated.js').default
-  );
+  jest.mock('./NativeReanimated', () => {
+    let module;
+    try {
+      module = require('./NativeReanimated.js');
+    } catch {
+      module = require('./NativeReanimated.ts');
+    }
+    return module.default;
+  });
 };
 
 export const getAnimatedStyle = (received) => {

src/reanimated2/js-reanimated/JSReanimated.js → src/reanimated2/js-reanimated/JSReanimated.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import MapperRegistry from './MapperRegistry';
 import MutableValue from './MutableValue';
 import Mapper from './Mapper';

src/reanimated2/js-reanimated/Mapper.js → src/reanimated2/js-reanimated/Mapper.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import MutableValue from './MutableValue';
 
 export default class Mapper {

src/reanimated2/js-reanimated/MapperRegistry.js → src/reanimated2/js-reanimated/MapperRegistry.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 export default class MapperRegistry {
   sortedMappers = [];
   mappers = new Map();

src/reanimated2/js-reanimated/MutableValue.js → src/reanimated2/js-reanimated/MutableValue.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 export default class MutableValue {
   static MUTABLE_ID = 1;
 

src/reanimated2/js-reanimated/index.web.js → src/reanimated2/js-reanimated/index.web.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import JSReanimated from './JSReanimated';
 
 const reanimatedJS = new JSReanimated();

src/reanimated2/mock.js → src/reanimated2/mock.ts

@@ -1,4 +1,6 @@
 /* eslint-disable standard/no-callback-literal */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 const NOOP = () => {
   // noop
 };

src/reanimated2/platform-specific/RNRenderer.js → src/reanimated2/platform-specific/RNRenderer.ts

@@ -1 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative';

tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    // remove after Rea is rewritten to TS
-    "noEmit": true,
     // for react-native-reanimated-tests.tsx
     "paths": {
       "react-native-reanimated": ["./react-native-reanimated.d.ts"]
     },
+    // change to true after we transition to TS
+    "declaration": false,
+    "preserveSymlinks": true,
     "target": "es6",
     "module": "es6",
     "jsx": "react-native",
@@ -15,8 +16,12 @@
     "lib": ["es6"],
     "esModuleInterop": true,
     "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "lib/reanimated2/"
   },
-  "files": ["react-native-reanimated-tests.tsx", "react-native-reanimated.d.ts"]
+  "include": [
+    "src/reanimated2/**/*.ts",
+    "react-native-reanimated.d.ts",
+    "react-native-reanimated-tests.tsx"
+  ]
 }