react-native-reanimated 3.0.0-rc.9 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.0.0-rc.9",
+  "version": "3.0.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
@@ -54,7 +54,7 @@
     "scripts/reanimated_utils.rb",
     "README.md",
     "mock.js",
-    "plugin.js",
+    "plugin/",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -76,11 +76,11 @@
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "convert-source-map": "^1.7.0",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "setimmediate": "^1.0.5",
-    "string-hash-64": "^1.0.3",
-    "convert-source-map": "^1.7.0"
+    "string-hash-64": "^1.0.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0-0",
@@ -89,11 +89,11 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@react-native-community/eslint-config": "^0.0.5",
+    "@babel/preset-env": "^7.20.0",
+    "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
@@ -103,7 +103,7 @@
     "@types/babel__traverse": "^7.14.2",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.66.0",
+    "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -115,6 +115,7 @@
     "eslint-config-standard": "^16.0.3",
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
@@ -124,9 +125,8 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.70.5",
+    "react-native": "0.71.3",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^2.4.2",
     "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",

package/{plugin.js → plugin/index.js}

@@ -33,7 +33,6 @@ const globals = new Set([
   'this',
   'console',
   'performance',
-  '_chronoNow',
   'Date',
   'Array',
   'ArrayBuffer',
@@ -58,6 +57,7 @@ const globals = new Set([
   'null',
   'UIManager',
   'requestAnimationFrame',
+  'setImmediate',
   '_WORKLET',
   'arguments',
   'Boolean',
@@ -84,72 +84,12 @@ const globals = new Set([
   '_dispatchCommand',
   '_setGestureState',
   '_getCurrentTime',
-  '_eventTimestamp',
-  '_frameTimestamp',
   'isNaN',
   'LayoutAnimationRepository',
   '_notifyAboutProgress',
   '_notifyAboutEnd',
 ]);
 
-// leaving way to avoid deep capturing by adding 'stopCapturing' to the blacklist
-const blacklistedFunctions = new Set([
-  'stopCapturing',
-  'toString',
-  'map',
-  'filter',
-  'findIndex',
-  'forEach',
-  'valueOf',
-  'toPrecision',
-  'toExponential',
-  'constructor',
-  'toFixed',
-  'toLocaleString',
-  'toSource',
-  'charAt',
-  'charCodeAt',
-  'concat',
-  'indexOf',
-  'lastIndexOf',
-  'localeCompare',
-  'length',
-  'match',
-  'replace',
-  'search',
-  'slice',
-  'split',
-  'substr',
-  'substring',
-  'toLocaleLowerCase',
-  'toLocaleUpperCase',
-  'toLowerCase',
-  'toUpperCase',
-  'every',
-  'join',
-  'pop',
-  'push',
-  'reduce',
-  'reduceRight',
-  'reverse',
-  'shift',
-  'slice',
-  'some',
-  'sort',
-  'splice',
-  'unshift',
-  'hasOwnProperty',
-  'isPrototypeOf',
-  'propertyIsEnumerable',
-  'bind',
-  'apply',
-  'call',
-  '__callAsync',
-  'includes',
-]);
-
-const possibleOptFunction = new Set(['interpolate']);
-
 const gestureHandlerGestureObjects = new Set([
   // from https://github.com/software-mansion/react-native-gesture-handler/blob/new-api/src/handlers/gestures/gestureObjects.ts
   'Tap',
@@ -179,112 +119,6 @@ const gestureHandlerBuilderMethods = new Set([
   'onTouchesCancelled',
 ]);
 
-class ClosureGenerator {
-  constructor() {
-    this.trie = [{}, false];
-  }
-
-  mergeAns(oldAns, newAns) {
-    const [purePath, node] = oldAns;
-    const [purePathUp, nodeUp] = newAns;
-    if (purePathUp.length !== 0) {
-      return [purePath.concat(purePathUp), nodeUp];
-    } else {
-      return [purePath, node];
-    }
-  }
-
-  findPrefixRec(path) {
-    const notFound = [[], null];
-    if (!path || path.node.type !== 'MemberExpression') {
-      return notFound;
-    }
-    const memberExpressionNode = path.node;
-    if (memberExpressionNode.property.type !== 'Identifier') {
-      return notFound;
-    }
-    if (
-      memberExpressionNode.computed ||
-      memberExpressionNode.property.name === 'value' ||
-      blacklistedFunctions.has(memberExpressionNode.property.name)
-    ) {
-      // a.b[w] -> a.b.w in babel nodes
-      // a.v.value
-      // sth.map(() => )
-      return notFound;
-    }
-    if (
-      path.parent &&
-      path.parent.type === 'AssignmentExpression' &&
-      path.parent.left === path.node
-    ) {
-      /// captured.newProp = 5;
-      return notFound;
-    }
-    const purePath = [memberExpressionNode.property.name];
-    const node = memberExpressionNode;
-    const upAns = this.findPrefixRec(path.parentPath);
-    return this.mergeAns([purePath, node], upAns);
-  }
-
-  findPrefix(base, babelPath) {
-    const purePath = [base];
-    const node = babelPath.node;
-    const upAns = this.findPrefixRec(babelPath.parentPath);
-    return this.mergeAns([purePath, node], upAns);
-  }
-
-  addPath(base, babelPath) {
-    const [purePath, node] = this.findPrefix(base, babelPath);
-    let parent = this.trie;
-    let index = -1;
-    for (const current of purePath) {
-      index++;
-      if (parent[1]) {
-        continue;
-      }
-      if (!parent[0][current]) {
-        parent[0][current] = [{}, false];
-      }
-      if (index === purePath.length - 1) {
-        parent[0][current] = [node, true];
-      }
-      parent = parent[0][current];
-    }
-  }
-
-  generateNodeForBase(t, current, parent) {
-    const currentNode = parent[0][current];
-    if (currentNode[1]) {
-      return currentNode[0];
-    }
-    return t.objectExpression(
-      Object.keys(currentNode[0]).map((propertyName) =>
-        t.objectProperty(
-          t.identifier(propertyName),
-          this.generateNodeForBase(t, propertyName, currentNode),
-          false,
-          true
-        )
-      )
-    );
-  }
-
-  generate(t, variables, names) {
-    const arrayOfKeys = [...names];
-    return t.objectExpression(
-      variables.map((variable, index) =>
-        t.objectProperty(
-          t.identifier(variable.name),
-          this.generateNodeForBase(t, arrayOfKeys[index], this.trie),
-          false,
-          true
-        )
-      )
-    );
-  }
-}
-
 function isRelease() {
   return ['production', 'release'].includes(process.env.BABEL_ENV);
 }
@@ -370,7 +204,9 @@ function buildWorkletString(t, fun, closureVariables, name, inputMap) {
 
   const code = generate(workletFunction).code;
 
-  if (shouldGenerateSourceMap()) {
+  const includeSourceMap = shouldGenerateSourceMap();
+
+  if (includeSourceMap) {
     // Clear contents array (should be empty anyways)
     inputMap.sourcesContent = [];
     // Include source contents in source map, because Flipper/iframe is not
@@ -382,8 +218,6 @@ function buildWorkletString(t, fun, closureVariables, name, inputMap) {
     }
   }
 
-  const includeSourceMap = shouldGenerateSourceMap();
-
   const transformed = transformSync(code, {
     plugins: [prependClosureVariablesIfNecessary()],
     compact: !includeSourceMap,
@@ -428,8 +262,6 @@ function makeWorklet(t, fun, state) {
   const functionName = makeWorkletName(t, fun);
 
   const closure = new Map();
-  const closureGenerator = new ClosureGenerator();
-  const options = {};
 
   // remove 'worklet'; directive before generating string
   fun.traverse({
@@ -471,13 +303,6 @@ function makeWorklet(t, fun, state) {
     inputSourceMap: codeObject.map,
   });
 
-  if (
-    fun.parent &&
-    fun.parent.callee &&
-    fun.parent.callee.name === 'useAnimatedStyle'
-  ) {
-    options.optFlags = isPossibleOptimization(transformed.ast);
-  }
   traverse(transformed.ast, {
     ReferencedIdentifier(path) {
       const name = path.node.name;
@@ -512,7 +337,6 @@ function makeWorklet(t, fun, state) {
         currentScope = currentScope.parent;
       }
       closure.set(name, path.node);
-      closureGenerator.addPath(name, path);
     },
   });
 
@@ -552,6 +376,35 @@ function makeWorklet(t, fun, state) {
     lineOffset -= closure.size + 2;
   }
 
+  const pathForStringDefinitions = fun.parentPath.isProgram()
+    ? fun
+    : fun.findParent((path) => path.parentPath.isProgram());
+
+  const initDataId =
+    pathForStringDefinitions.parentPath.scope.generateUidIdentifier(
+      `worklet_${workletHash}_init_data`
+    );
+
+  const initDataObjectExpression = t.objectExpression([
+    t.objectProperty(t.identifier('code'), t.stringLiteral(funString)),
+    t.objectProperty(t.identifier('location'), t.stringLiteral(location)),
+  ]);
+
+  if (sourceMapString) {
+    initDataObjectExpression.properties.push(
+      t.objectProperty(
+        t.identifier('sourceMap'),
+        t.stringLiteral(sourceMapString)
+      )
+    );
+  }
+
+  pathForStringDefinitions.insertBefore(
+    t.variableDeclaration('const', [
+      t.variableDeclarator(initDataId, initDataObjectExpression),
+    ])
+  );
+
   const statements = [
     t.variableDeclaration('const', [
       t.variableDeclarator(privateFunctionId, funExpression),
@@ -560,14 +413,11 @@ function makeWorklet(t, fun, state) {
       t.assignmentExpression(
         '=',
         t.memberExpression(privateFunctionId, t.identifier('_closure'), false),
-        closureGenerator.generate(t, variables, closure.keys())
-      )
-    ),
-    t.expressionStatement(
-      t.assignmentExpression(
-        '=',
-        t.memberExpression(privateFunctionId, t.identifier('asString'), false),
-        t.stringLiteral(funString)
+        t.objectExpression(
+          variables.map((variable) =>
+            t.objectProperty(t.identifier(variable.name), variable, false, true)
+          )
+        )
       )
     ),
     t.expressionStatement(
@@ -575,10 +425,10 @@ function makeWorklet(t, fun, state) {
         '=',
         t.memberExpression(
           privateFunctionId,
-          t.identifier('__workletHash'),
+          t.identifier('__initData'),
           false
         ),
-        t.numericLiteral(workletHash)
+        initDataId
       )
     ),
     t.expressionStatement(
@@ -586,30 +436,14 @@ function makeWorklet(t, fun, state) {
         '=',
         t.memberExpression(
           privateFunctionId,
-          t.identifier('__location'),
+          t.identifier('__workletHash'),
           false
         ),
-        t.stringLiteral(location)
+        t.numericLiteral(workletHash)
       )
     ),
   ];
 
-  if (sourceMapString) {
-    statements.push(
-      t.expressionStatement(
-        t.assignmentExpression(
-          '=',
-          t.memberExpression(
-            privateFunctionId,
-            t.identifier('__sourceMap'),
-            false
-          ),
-          t.stringLiteral(sourceMapString)
-        )
-      )
-    );
-  }
-
   if (!isRelease()) {
     statements.unshift(
       t.variableDeclaration('const', [
@@ -638,22 +472,6 @@ function makeWorklet(t, fun, state) {
     );
   }
 
-  if (options && options.optFlags) {
-    statements.push(
-      t.expressionStatement(
-        t.assignmentExpression(
-          '=',
-          t.memberExpression(
-            privateFunctionId,
-            t.identifier('__optimalization'),
-            false
-          ),
-          t.numericLiteral(options.optFlags)
-        )
-      )
-    );
-  }
-
   statements.push(t.returnStatement(privateFunctionId));
 
   const newFun = t.functionExpression(fun.id, [], t.blockStatement(statements));
@@ -841,17 +659,14 @@ function isGestureObject(t, node) {
 }
 
 function processWorklets(t, path, state) {
-  
   const callee =
     path.node.callee.type === 'SequenceExpression'
       ? path.node.callee.expressions[path.node.callee.expressions.length - 1]
       : path.node.callee;
 
   const name =
-    callee.type === 'MemberExpression'
-      ? callee.property.name
-      : callee.name;
-  
+    callee.type === 'MemberExpression' ? callee.property.name : callee.name;
+
   if (
     objectHooks.has(name) &&
     path.get('arguments.0').type === 'ObjectExpression'
@@ -875,30 +690,89 @@ function processWorklets(t, path, state) {
   }
 }
 
-const FUNCTIONLESS_FLAG = 0b00000001;
-const STATEMENTLESS_FLAG = 0b00000010;
+function generateInlineStylesWarning(t, memberExpression) {
+  // replaces `sharedvalue.value` with `(()=>{console.warn(require('react-native-reanimated').getUseOfValueInStyleWarning());return sharedvalue.value;})()`
+  return t.callExpression(
+    t.arrowFunctionExpression(
+      [],
+      t.blockStatement([
+        t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier('console'), t.identifier('warn')),
+            [
+              t.callExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier('require'), [
+                    t.stringLiteral('react-native-reanimated'),
+                  ]),
+                  t.identifier('getUseOfValueInStyleWarning')
+                ),
+                []
+              ),
+            ]
+          )
+        ),
+        t.returnStatement(memberExpression.node),
+      ])
+    ),
+    []
+  );
+}
 
-function isPossibleOptimization(fun) {
-  let isFunctionCall = false;
-  let isStatement = false;
-  traverse(fun, {
-    CallExpression(path) {
-      if (!possibleOptFunction.has(path.node.callee.name)) {
-        isFunctionCall = true;
+function processPropertyValueForInlineStylesWarning(t, path) {
+  // if it's something like object.value then raise a warning
+  if (t.isMemberExpression(path)) {
+    if (path.get('property').node.name === 'value') {
+      path.replaceWith(generateInlineStylesWarning(t, path));
+    }
+  }
+}
+
+function processTransformPropertyForInlineStylesWarning(t, path) {
+  if (t.isArrayExpression(path)) {
+    const elements = path.get('elements');
+    for (const element of elements) {
+      if (t.isObjectExpression(element)) {
+        processStyleObjectForInlineStylesWarning(t, element);
       }
-    },
-    IfStatement() {
-      isStatement = true;
-    },
-  });
-  let flags = 0;
-  if (!isFunctionCall) {
-    flags = flags | FUNCTIONLESS_FLAG;
+    }
   }
-  if (!isStatement) {
-    flags = flags | STATEMENTLESS_FLAG;
+}
+
+function processStyleObjectForInlineStylesWarning(t, path) {
+  const properties = path.get('properties');
+  for (const property of properties) {
+    const value = property.get('value');
+    if (t.isProperty(property)) {
+      if (property.get('key').node.name === 'transform') {
+        processTransformPropertyForInlineStylesWarning(t, value);
+      } else {
+        processPropertyValueForInlineStylesWarning(t, value);
+      }
+    }
+  }
+}
+
+function processInlineStylesWarning(t, path, state) {
+  if (isRelease()) return;
+  if (state.opts.disableInlineStylesWarning) return;
+  if (path.get('name').node.name !== 'style') return;
+  if (!t.isJSXExpressionContainer(path.get('value'))) return;
+
+  const expression = path.get('value').get('expression');
+  // style={[{...}, {...}]}
+  if (t.isArrayExpression(expression)) {
+    const elements = expression.get('elements');
+    for (const element of elements) {
+      if (t.isObjectExpression(element)) {
+        processStyleObjectForInlineStylesWarning(t, element);
+      }
+    }
+  }
+  // style={{...}}
+  else if (t.isObjectExpression(expression)) {
+    processStyleObjectForInlineStylesWarning(t, expression);
   }
-  return flags;
 }
 
 module.exports = function ({ types: t }) {
@@ -923,6 +797,11 @@ module.exports = function ({ types: t }) {
           processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
+      JSXAttribute: {
+        enter(path, state) {
+          processInlineStylesWarning(t, path, state);
+        },
+      },
     },
   };
 };