From 576b7145da0a055c2cb7e1956cc8229591304263 Mon Sep 17 00:00:00 2001
From: Liming Jin <jinliming2@gmail.com>
Date: Wed, 8 Mar 2023 03:32:13 -0800
Subject: [PATCH] fix `Error` Variable scope conflicts, and remove duplicate
 `Date` (#4046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

The babel plugin transformed the code and added some helper code, it
uses `new Error()` to get the call stack. this works in general unless
you have a variable called `Error` in the local scope, in this case, It
references the wrong Object. this PR uses `global.Error` to avoid this.

`'Date'` is duplicated in this `global` array, and I removed the second
one.

## Test plan

```jsx
import { useState } from 'react';
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import Error from './components/Error'; // imported an arrow function component named 'Error'

const App = () => {
  const [hasError, setHasError] = useState(false);
  const offset = useSharedValue(0);
  // `new Error()` not working here, because `Error` reference to the function component, it's a arrow function, not a function or class
  const animatedStyles = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value * 255 }] }), []);

  if (hasError) return <Error />;
  return <Animated.View style={animatedStyles} />;
};
```

---------

Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
---
 __tests__/__snapshots__/plugin.test.js.snap | 60 ++++++++++-----------
 plugin/index.js                             |  8 +--
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/__tests__/__snapshots__/plugin.test.js.snap b/__tests__/__snapshots__/plugin.test.js.snap
index 10b05217092..db78956b363 100644
--- a/__tests__/__snapshots__/plugin.test.js.snap
+++ b/__tests__/__snapshots__/plugin.test.js.snap
@@ -10,7 +10,7 @@ var _worklet_5359970077727_init_data = {
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var f = function () {
-  var _e = [new Error(), -3, -20];
+  var _e = [new global.Error(), -3, -27];
   var _f = function _f() {
     return {
       res: x + objX.x
@@ -46,7 +46,7 @@ exports[`babel plugin doesn't capture globals 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var f = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     console.log('test');
   };
@@ -78,7 +78,7 @@ exports[`babel plugin doesn't transform string literals 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(x) {
     var bar = 'worklet';
     var baz = \\"worklet\\";
@@ -148,7 +148,7 @@ exports[`babel plugin supports SequenceExpression, many arguments 1`] = `
 function App() {
   (0, 3, fun)({
     onStart: function () {
-      var _e = [new Error(), 1, -20];
+      var _e = [new global.Error(), 1, -27];
       var _f = function _f() {};
       _f._closure = {};
       _f.__initData = _worklet_4434179069699_init_data;
@@ -168,7 +168,7 @@ exports[`babel plugin supports SequenceExpression, with objectHook 1`] = `
 function App() {
   (0, useAnimatedGestureHandler)({
     onStart: function () {
-      var _e = [new Error(), 1, -20];
+      var _e = [new global.Error(), 1, -27];
       var _f = function _f() {};
       _f._closure = {};
       _f.__initData = _worklet_4434179069699_init_data;
@@ -188,7 +188,7 @@ exports[`babel plugin supports SequenceExpression, with worklet 1`] = `
 function App() {
   (0, fun)({
     onStart: function () {
-      var _e = [new Error(), 1, -20];
+      var _e = [new global.Error(), 1, -27];
       var _f = function _f() {};
       _f._closure = {};
       _f.__initData = _worklet_4434179069699_init_data;
@@ -212,7 +212,7 @@ function App() {
   };
   (0, fun)({
     onStart: function () {
-      var _e = [new Error(), -2, -20];
+      var _e = [new global.Error(), -2, -27];
       var _f = function _f() {
         var a = obj.a;
       };
@@ -235,7 +235,7 @@ var _worklet_2022702330805_init_data = {
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), -2, -20];
+  var _e = [new global.Error(), -2, -27];
   var _f = function _f(t) {
     if (t > 0) {
       return a + foo(t - 1);
@@ -262,7 +262,7 @@ var _worklet_16669311443114_init_data = {
 function Box() {
   var offset = (0, _reactNativeReanimated.useSharedValue)(0);
   var animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
-    var _e = [new Error(), -2, -20];
+    var _e = [new global.Error(), -2, -27];
     var _f = function _f() {
       return {
         transform: [{
@@ -295,7 +295,7 @@ exports[`babel plugin transforms spread operator in worklets for arrays 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     var bar = [4, 5];
     var baz = [1].concat([2, 3], bar);
@@ -314,7 +314,7 @@ exports[`babel plugin transforms spread operator in worklets for function argume
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -337,7 +337,7 @@ var _worklet_2015887751437_init_data = {
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(arg) {
     var _console;
     (_console = console).log.apply(_console, (0, _toConsumableArray2.default)(arg));
@@ -356,7 +356,7 @@ exports[`babel plugin transforms spread operator in worklets for objects 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     var bar = {
       d: 4,
@@ -383,7 +383,7 @@ exports[`babel plugin workletizes ArrowFunctionExpression 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(x) {
     return x + 2;
   };
@@ -401,7 +401,7 @@ exports[`babel plugin workletizes FunctionDeclaration 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(x) {
     return x + 2;
   };
@@ -428,7 +428,7 @@ var Foo = function () {
   (0, _createClass2.default)(Foo, [{
     key: \\"bar\\",
     get: function () {
-      var _e = [new Error(), -2, -20];
+      var _e = [new global.Error(), -2, -27];
       var _f = function _f() {
         return x + 2;
       };
@@ -451,7 +451,7 @@ exports[`babel plugin workletizes hook wrapped ArrowFunctionExpression automatic
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var animatedStyle = useAnimatedStyle(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     return {
       width: 50
@@ -471,7 +471,7 @@ exports[`babel plugin workletizes hook wrapped named FunctionExpression automati
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var animatedStyle = useAnimatedStyle(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     return {
       width: 50
@@ -491,7 +491,7 @@ exports[`babel plugin workletizes hook wrapped unnamed FunctionExpression automa
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var animatedStyle = useAnimatedStyle(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     return {
       width: 50
@@ -520,7 +520,7 @@ var Foo = function () {
   (0, _createClass2.default)(Foo, [{
     key: \\"bar\\",
     value: function () {
-      var _e = [new Error(), 1, -20];
+      var _e = [new global.Error(), 1, -27];
       var _f = function _f(x) {
         return x + 2;
       };
@@ -541,7 +541,7 @@ exports[`babel plugin workletizes named FunctionExpression 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(x) {
     return x + 2;
   };
@@ -560,7 +560,7 @@ exports[`babel plugin workletizes object hook wrapped ArrowFunctionExpression au
 };
 useAnimatedGestureHandler({
   onStart: function () {
-    var _e = [new Error(), 1, -20];
+    var _e = [new global.Error(), 1, -27];
     var _f = function _f(event) {
       console.log(event);
     };
@@ -580,7 +580,7 @@ exports[`babel plugin workletizes object hook wrapped ObjectMethod automatically
 };
 useAnimatedGestureHandler({
   onStart: function () {
-    var _e = [new Error(), 1, -20];
+    var _e = [new global.Error(), 1, -27];
     var _f = function _f(event) {
       console.log(event);
     };
@@ -600,7 +600,7 @@ exports[`babel plugin workletizes object hook wrapped named FunctionExpression a
 };
 useAnimatedGestureHandler({
   onStart: function () {
-    var _e = [new Error(), 1, -20];
+    var _e = [new global.Error(), 1, -27];
     var _f = function _f(event) {
       console.log(event);
     };
@@ -620,7 +620,7 @@ exports[`babel plugin workletizes object hook wrapped unnamed FunctionExpression
 };
 useAnimatedGestureHandler({
   onStart: function () {
-    var _e = [new Error(), 1, -20];
+    var _e = [new global.Error(), 1, -27];
     var _f = function _f(event) {
       console.log(event);
     };
@@ -648,7 +648,7 @@ var _worklet_232586479291_init_data = {
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = _reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onBegin(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f() {
     console.log('onBegin');
   };
@@ -658,7 +658,7 @@ var foo = _reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onBegin(funct
   _f.__stackDetails = _e;
   return _f;
 }()).onStart(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(_event) {
     console.log('onStart');
   };
@@ -668,7 +668,7 @@ var foo = _reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onBegin(funct
   _f.__stackDetails = _e;
   return _f;
 }()).onEnd(function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(_event, _success) {
     console.log('onEnd');
   };
@@ -695,7 +695,7 @@ var Foo = function () {
   (0, _createClass2.default)(Foo, null, [{
     key: \\"bar\\",
     value: function () {
-      var _e = [new Error(), 1, -20];
+      var _e = [new global.Error(), 1, -27];
       var _f = function _f(x) {
         return x + 2;
       };
@@ -716,7 +716,7 @@ exports[`babel plugin workletizes unnamed FunctionExpression 1`] = `
   location: \\"${ process.cwd() }/jest tests fixture\\"
 };
 var foo = function () {
-  var _e = [new Error(), 1, -20];
+  var _e = [new global.Error(), 1, -27];
   var _f = function _f(x) {
     return x + 2;
   };
diff --git a/plugin/index.js b/plugin/index.js
index c3a928c3ace..04472eb672d 100644
--- a/plugin/index.js
+++ b/plugin/index.js
@@ -45,7 +45,6 @@ const globals = new Set([
   'Uint32Array',
   'Float32Array',
   'Float64Array',
-  'Date',
   'HermesInternal',
   'JSON',
   'Math',
@@ -450,9 +449,12 @@ function makeWorklet(t, fun, state) {
         t.variableDeclarator(
           t.identifier('_e'),
           t.arrayExpression([
-            t.newExpression(t.identifier('Error'), []),
+            t.newExpression(t.memberExpression(
+              t.identifier('global'),
+              t.identifier('Error'),
+            ), []),
             t.numericLiteral(lineOffset),
-            t.numericLiteral(-20), // the placement of opening bracket after Exception in line that defined '_e' variable
+            t.numericLiteral(-27), // the placement of opening bracket after Exception in line that defined '_e' variable
           ])
         ),
       ])