Migrate automatically (#1759)

## Description

Automatically use interpolateNode nad EasingNode when users still use old naming (interpolate, Easing) in V1 code.

## Changes

<!--
Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section.

For example:

- Added `foo` method which add bouncing animation
- Updated `about.md` docs
- Added caching in CI builds

-->

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

```JS
import React from "react";
import { SectionList, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Animated, { Easing } from 'react-native-reanimated';

const App = () => {
  let opacity = new Animated.Value(0);

  const animate = easing => {
    opacity.setValue(0);
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1200,
      easing
    }).start();
  };

  const size = opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 80]
  });

  const animatedStyles = [
    styles.box,
    {
      opacity,
      width: size,
      height: size
    }
  ];

  return (
    <View style={styles.container}>
      <StatusBar hidden={true} />
      <Text style={styles.title}>
        Press rows below to preview the Easing!
      </Text>
      <View style={styles.boxContainer}>
        <Animated.View style={animatedStyles} />
      </View>
      <SectionList
        style={styles.list}
        sections={SECTIONS}
        keyExtractor={(item) => item.title}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => animate(item.easing)}
            style={styles.listRow}
          >
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.listHeader}>{title}</Text>
        )}
      />
    </View>
  );
};

const SECTIONS = [
  {
    title: "Predefined animations",
    data: [
      { title: "Bounce", easing: Easing.bounce },
      { title: "Ease", easing: Easing.ease },
      { title: "Elastic", easing: Easing.elastic(4) }
    ]
  },
  {
    title: "Standard functions",
    data: [
      { title: "Linear", easing: Easing.linear },
      { title: "Quad", easing: Easing.quad },
      { title: "Cubic", easing: Easing.cubic }
    ]
  },
  {
    title: "Additional functions",
    data: [
      {
        title: "Bezier",
        easing: Easing.bezier(0, 2, 1, -1)
      },
      { title: "Circle", easing: Easing.circle },
      { title: "Sin", easing: Easing.sin },
      { title: "Exp", easing: Easing.exp }
    ]
  },
  {
    title: "Combinations",
    data: [
      {
        title: "In + Bounce",
        easing: Easing.in(Easing.bounce)
      },
      {
        title: "Out + Exp",
        easing: Easing.out(Easing.exp)
      },
      {
        title: "InOut + Elastic",
        easing: Easing.inOut(Easing.elastic(1))
      }
    ]
  }
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#20232a"
  },
  title: {
    marginTop: 10,
    textAlign: "center",
    color: "#61dafb"
  },
  boxContainer: {
    height: 160,
    alignItems: "center"
  },
  box: {
    marginTop: 32,
    borderRadius: 4,
    backgroundColor: "#61dafb"
  },
  list: {
    backgroundColor: "#fff"
  },
  listHeader: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: "#f4f4f4",
    color: "#999",
    fontSize: 12,
    textTransform: "uppercase"
  },
  listRow: {
    padding: 8
  }
});

export default App;
```

## Checklist

- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Added TS types tests
- [ ] Added unit / integration tests
- [ ] Updated documentation
- [ ] Ensured that CI passes

src/reanimated2/Easing.js

@@ -1,3 +1,5 @@
+/* global _WORKLET */
+import EasingNode from '../Easing';
 import { Bezier } from './Bezier';
 
 /**
@@ -235,7 +237,7 @@ function inOut(easing) {
   };
 }
 
-export const Easing = {
+const EasingObject = {
   linear,
   ease,
   quad,
@@ -252,3 +254,39 @@ export const Easing = {
   out,
   inOut,
 };
+
+function createChecker(worklet, workletName, prevArgs) {
+  function checkIfReaOne() {
+    'worklet'
+    if (arguments && (!_WORKLET)) {
+      for (let i = 0; i < arguments.length; i++) {
+        const arg = arguments[i];
+        if (arg && arg.__nodeID) {
+          console.warn(`Easing was renamed to EasingNode in Reanimated 2. Please use EasingNode instead`);
+          if (prevArgs) {
+            return EasingNode[workletName].apply(undefined, prevArgs).apply(undefined, arguments);
+          }
+          return EasingNode[workletName].apply(undefined, arguments);
+        }
+      }
+    }
+    const res = worklet.apply(this, arguments);
+    if ((!_WORKLET) && res && (typeof res === 'function') && res.__worklet) {
+      return createChecker(res, workletName, arguments);
+    }
+    return res;
+  }
+  // use original worklet on UI side
+  checkIfReaOne._closure = worklet._closure;
+  checkIfReaOne.asString = worklet.asString;
+  checkIfReaOne.__workletHash = worklet.__workletHash;
+  checkIfReaOne.__location = worklet.__location;
+  return checkIfReaOne;
+}
+
+Object.keys(EasingObject).forEach((key) => {
+  EasingObject[key] = createChecker(EasingObject[key], key);
+});
+
+export const Easing = EasingObject;
+export default Easing;

src/reanimated2/interpolation.js

@@ -1,4 +1,6 @@
-import { Extrapolate } from '../derived/interpolate';
+import interpolateNode,{
+  Extrapolate
+} from '../derived/interpolate';
 
 function getVal(config) {
   'worklet';
@@ -112,9 +114,8 @@ function internalInterpolate(x, l, r, ll, rr, type) {
 export function interpolate(x, input, output, type) {
   'worklet';
   if (x && x.__nodeID) {
-    throw new Error(
-      'Reanimated: interpolate from V1 has been renamed to interpolateNode.'
-    );
+    console.warn(`interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`);
+    return interpolateNode.apply(undefined, arguments);
   }
 
   const length = input.length;