Skip to content

Commit

Permalink
fix Error Variable scope conflicts, and remove duplicate Date (#4046
Browse files Browse the repository at this point in the history 
)

<!-- 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>
  • Loading branch information
@jinliming2 @tjzel
jinliming2 and tjzel authored Mar 8, 2023
1 parent 79b699a commit 576b714
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 33 deletions.
60 changes: 30 additions & 30 deletions __tests__/__snapshots__/plugin.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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');
};
Expand Down Expand Up @@ -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\\";
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
};
Expand All @@ -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);
Expand All @@ -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: [{
Expand Down Expand Up @@ -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);
Expand All @@ -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];
Expand All @@ -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));
Expand All @@ -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,
Expand All @@ -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;
};
Expand All @@ -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;
};
Expand All @@ -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;
};
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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;
};
Expand All @@ -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;
};
Expand All @@ -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);
};
Expand All @@ -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);
};
Expand All @@ -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);
};
Expand All @@ -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);
};
Expand Down Expand Up @@ -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');
};
Expand All @@ -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');
};
Expand All @@ -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');
};
Expand All @@ -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;
};
Expand All @@ -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;
};
Expand Down
8 changes: 5 additions & 3 deletions plugin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const globals = new Set([
'Uint32Array',
'Float32Array',
'Float64Array',
'Date',
'HermesInternal',
'JSON',
'Math',
Expand Down Expand Up @@ -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
])
),
])
Expand Down

0 comments on commit 576b714

Please sign in to comment.