react-native-reanimated 2.3.0-alpha.1 → 2.3.0-beta.2

package/plugin.js

@@ -1,9 +1,8 @@
 'use strict';
 const generate = require('@babel/generator').default;
 const hash = require('string-hash-64');
-const { visitors } = require('@babel/traverse');
 const traverse = require('@babel/traverse').default;
-const parse = require('@babel/parser').parse;
+const { transformSync } = require('@babel/core');
 /**
  * holds a map of function names as keys and array of argument indexes as values which should be automatically workletized(they have to be functions)(starting from 0)
  */
@@ -35,6 +34,15 @@ const globals = new Set([
   'Date',
   'Array',
   'ArrayBuffer',
+  'Int8Array',
+  'Int16Array',
+  'Int32Array',
+  'Uint8Array',
+  'Uint8ClampedArray',
+  'Uint16Array',
+  'Uint32Array',
+  'Float32Array',
+  'Float64Array',
   'Date',
   'HermesInternal',
   'JSON',
@@ -122,10 +130,78 @@ const blacklistedFunctions = new Set([
   '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',
+  'Pan',
+  'Pinch',
+  'Rotation',
+  'Fling',
+  'LongPress',
+  'ForceTouch',
+  'Native',
+  'Race',
+  'Simultaneous',
+  'Exclusive',
+]);
+
+const gestureHandlerBuilderMethods = new Set([
+  // BaseGesture
+  'withRef',
+  'onBegan',
+  'onStart',
+  'onEnd',
+  'enabled',
+  'shouldCancelWhenOutside',
+  'hitSlop',
+  'simultaneousWithExternalGesture',
+  'requireExternalGestureToFail',
+
+  // ContinousBaseGesture
+  'onUpdate',
+
+  // TapGesture
+  'minPointers',
+  'numberOfTaps',
+  'maxDistance',
+  'maxDuration',
+  'maxDelay',
+  'maxDeltaX',
+  'maxDeltaY',
+
+  // PanGesture
+  'activeOffsetY',
+  'activeOffsetX',
+  'failOffsetY',
+  'failOffsetX',
+  'minPointers',
+  'minDistance',
+  'averageTouches',
+  'enableTrackpadTwoFingerGesture',
+
+  // FlingGesture
+  'numberOfPointers',
+  'direction',
+
+  // LongPress
+  'minDuration',
+  'maxDistance',
+
+  // ForceTouchGesture:
+  'minForce',
+  'maxForce',
+  'feedbackOnActivation',
+
+  // NativeGesture
+  'shouldActivateOnStart',
+  'disallowInterruption',
+]);
+
 class ClosureGenerator {
   constructor() {
     this.trie = [{}, false];
@@ -258,7 +334,7 @@ function buildWorkletString(t, fun, closureVariables, name) {
     ]);
   }
 
-  fun.traverse({
+  traverse(fun, {
     enter(path) {
       t.removeComments(path.node);
     },
@@ -266,14 +342,17 @@ function buildWorkletString(t, fun, closureVariables, name) {
 
   const workletFunction = t.functionExpression(
     t.identifier(name),
-    fun.node.params,
-    prependClosureVariablesIfNecessary(closureVariables, fun.get('body').node)
+    fun.program.body[0].expression.params,
+    prependClosureVariablesIfNecessary(
+      closureVariables,
+      fun.program.body[0].expression.body
+    )
   );
 
   return generate(workletFunction, { compact: true }).code;
 }
 
-function processWorkletFunction(t, fun, fileName, options = {}) {
+function processWorkletFunction(t, fun, fileName) {
   if (!t.isFunctionParent(fun)) {
     return;
   }
@@ -282,12 +361,33 @@ function processWorkletFunction(t, fun, fileName, options = {}) {
   const closure = new Map();
   const outputs = new Set();
   const closureGenerator = new ClosureGenerator();
+  const options = {};
 
   // We use copy because some of the plugins don't update bindings and
   // some even break them
-  const astWorkletCopy = parse('\n(' + fun.toString() + '\n)');
-
-  traverse(astWorkletCopy, {
+  const code = '\n(' + fun.toString() + '\n)';
+  const transformed = transformSync(code, {
+    filename: fileName,
+    presets: ['@babel/preset-typescript'],
+    plugins: [
+      '@babel/plugin-transform-shorthand-properties',
+      '@babel/plugin-transform-arrow-functions',
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-proposal-nullish-coalescing-operator',
+      ['@babel/plugin-transform-template-literals', { loose: true }],
+    ],
+    ast: true,
+    babelrc: false,
+    configFile: false,
+  });
+  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;
       if (globals.has(name) || (fun.node.id && fun.node.id.name === name)) {
@@ -347,9 +447,18 @@ function processWorkletFunction(t, fun, fileName, options = {}) {
 
   const privateFunctionId = t.identifier('_f');
   const clone = t.cloneNode(fun.node);
-  const funExpression = t.functionExpression(null, clone.params, clone.body);
-
-  const funString = buildWorkletString(t, fun, variables, functionName);
+  let funExpression;
+  if (clone.body.type === 'BlockStatement') {
+    funExpression = t.functionExpression(null, clone.params, clone.body);
+  } else {
+    funExpression = clone;
+  }
+  const funString = buildWorkletString(
+    t,
+    transformed.ast,
+    variables,
+    functionName
+  ).replace("'worklet';", '');
   const workletHash = hash(funString);
 
   const loc = fun && fun.node && fun.node.loc && fun.node.loc.start;
@@ -473,18 +582,125 @@ function processIfWorkletNode(t, fun, fileName) {
               directive.value.value === 'worklet'
           )
         ) {
-          const flags = isPossibleOptimization(fun);
-          if (flags) {
-            processWorkletFunction(t, fun, fileName, { optFlags: flags });
-          } else {
-            processWorkletFunction(t, fun, fileName);
-          }
+          processWorkletFunction(t, fun, fileName);
         }
       }
     },
   });
 }
 
+function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
+  // Auto-workletizes React Native Gesture Handler callback functions.
+  // Detects `Gesture.Tap().onEnd(<fun>)` or similar, but skips `something.onEnd(<fun>)`.
+  // Supports method chaining as well, e.g. `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`.
+
+  // Example #1: `Gesture.Tap().onEnd(<fun>)`
+  /*
+  CallExpression(
+    callee: MemberExpression(
+      object: CallExpression(
+        callee: MemberExpression(
+          object: Identifier('Gesture')
+          property: Identifier('Tap')
+        )
+      )
+      property: Identifier('onEnd')
+    )
+    arguments: [fun]
+  )
+  */
+
+  // Example #2: `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`
+  /*
+  CallExpression(
+    callee: MemberExpression(
+      object: CallExpression(
+        callee: MemberExpression(
+          object: CallExpression(
+            callee: MemberExpression(
+              object: CallExpression(
+                callee: MemberExpression(
+                  object: Identifier('Gesture')
+                  property: Identifier('Tap')
+                )
+              )
+              property: Identifier('onStart')
+            )
+            arguments: [fun1]
+          )
+          property: Identifier('onUpdate')
+        )
+        arguments: [fun2]
+      )
+      property: Identifier('onEnd')
+    )
+    arguments: [fun3]
+  )
+  */
+
+  if (
+    t.isCallExpression(fun.parent) &&
+    isGestureObjectEventCallbackMethod(t, fun.parent.callee)
+  ) {
+    processWorkletFunction(t, fun, fileName);
+  }
+}
+
+function isGestureObjectEventCallbackMethod(t, node) {
+  // Checks if node matches the pattern `Gesture.Foo()[*].onBar`
+  // where `[*]` represents any number of `.onBar(...)` or similar method calls.
+  /*
+  node: MemberExpression(
+    object: CallExpression(
+      callee: MemberExpression(
+        object: Identifier('Gesture')
+        property: Identifier('Tap')
+      )
+    )
+    property: Identifier('onEnd')
+  )
+  */
+  if (
+    t.isMemberExpression(node) &&
+    t.isIdentifier(node.property) &&
+    gestureHandlerBuilderMethods.has(node.property.name)
+  ) {
+    // direct call
+    if (isGestureObject(t, node.object)) {
+      return true;
+    }
+
+    // method chaining
+    if (
+      t.isCallExpression(node.object) &&
+      isGestureObjectEventCallbackMethod(t, node.object.callee)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function isGestureObject(t, node) {
+  // Checks if node matches `Gesture.Tap()` or similar.
+  /*
+  node: CallExpression(
+    callee: MemberExpression(
+      object: Identifier('Gesture')
+      property: Identifier('Tap')
+    )
+  )
+  */
+  return (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    t.isIdentifier(node.callee.object) &&
+    node.callee.object.name === 'Gesture' &&
+    t.isIdentifier(node.callee.property) &&
+    gestureHandlerGestureObjects.has(node.callee.property.name)
+  );
+}
+
 function processWorklets(t, path, fileName) {
   const name =
     path.node.callee.type === 'MemberExpression'
@@ -516,13 +732,13 @@ function processWorklets(t, path, fileName) {
   }
 }
 
-const FUNCTIONLESS_FLAG =   0b00000001;
-const STATEMENTLESS_FLAG =  0b00000010;
+const FUNCTIONLESS_FLAG = 0b00000001;
+const STATEMENTLESS_FLAG = 0b00000010;
 
 function isPossibleOptimization(fun) {
   let isFunctionCall = false;
   let isSteatements = false;
-  fun.scope.path.traverse({
+  traverse(fun, {
     CallExpression(path) {
       if (!possibleOptFunction.has(path.node.callee.name)) {
         isFunctionCall = true;
@@ -542,86 +758,29 @@ function isPossibleOptimization(fun) {
   return flags;
 }
 
-const PLUGIN_BLACKLIST_NAMES = ['@babel/plugin-transform-object-assign'];
-
-const PLUGIN_BLACKLIST = PLUGIN_BLACKLIST_NAMES.map((pluginName) => {
-  try {
-    const blacklistedPluginObject = require(pluginName);
-    // All Babel polyfills use the declare method that's why we can create them like that.
-    // https://github.com/babel/babel/blob/32279147e6a69411035dd6c43dc819d668c74466/packages/babel-helper-plugin-utils/src/index.js#L1
-    const blacklistedPlugin = blacklistedPluginObject.default({
-      assertVersion: (_x) => true,
-    });
-
-    visitors.explode(blacklistedPlugin.visitor);
-    return blacklistedPlugin;
-  } catch (e) {
-    console.warn(`Plugin ${pluginName} couldn't be removed!`);
-  }
-});
-
-// plugin objects are created by babel internals and they don't carry any identifier
-function removePluginsFromBlacklist(plugins) {
-  PLUGIN_BLACKLIST.forEach((blacklistedPlugin) => {
-    if (!blacklistedPlugin) {
-      return;
-    }
-
-    const toRemove = [];
-    for (let i = 0; i < plugins.length; i++) {
-      if (
-        JSON.stringify(Object.keys(plugins[i].visitor)) !==
-        JSON.stringify(Object.keys(blacklistedPlugin.visitor))
-      ) {
-        continue;
-      }
-      let areEqual = true;
-      for (const key of Object.keys(blacklistedPlugin.visitor)) {
-        if (
-          blacklistedPlugin.visitor[key].toString() !==
-          plugins[i].visitor[key].toString()
-        ) {
-          areEqual = false;
-          break;
-        }
-      }
-
-      if (areEqual) {
-        toRemove.push(i);
-      }
-    }
-
-    toRemove.forEach((x) => plugins.splice(x, 1));
-  });
-}
-
 module.exports = function ({ types: t }) {
   return {
     pre() {
       // allows adding custom globals such as host-functions
       if (this.opts != null && Array.isArray(this.opts.globals)) {
         this.opts.globals.forEach((name) => {
-          globals.add(name)
-        })
+          globals.add(name);
+        });
       }
     },
     visitor: {
       CallExpression: {
-        exit(path, state) {
+        enter(path, state) {
           processWorklets(t, path, state.file.opts.filename);
         },
       },
       'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': {
-        exit(path, state) {
-          processIfWorkletNode(t, path, state.file.opts.filename);
+        enter(path, state) {
+          const fileName = state.file.opts.filename;
+          processIfWorkletNode(t, path, fileName);
+          processIfGestureHandlerEventCallbackFunctionNode(t, path, fileName);
         },
       },
     },
-    // In this way we can modify babel options
-    // https://github.com/babel/babel/blob/eea156b2cb8deecfcf82d52aa1b71ba4995c7d68/packages/babel-core/src/transformation/normalize-opts.js#L64
-    manipulateOptions(opts, _) {
-      const plugins = opts.plugins;
-      removePluginsFromBlacklist(plugins);
-    },
   };
 };