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

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);
+        },
+      },
     },
   };
 };