react-native-reanimated 3.0.2 → 3.1.0

package/plugin/src/plugin.ts

@@ -0,0 +1,49 @@
+import { PluginItem, NodePath } from '@babel/core';
+import { globals } from './commonObjects';
+import {
+  CallExpression,
+  FunctionDeclaration,
+  FunctionExpression,
+  ArrowFunctionExpression,
+} from '@babel/types';
+import { processForCalleesWorklets } from './processForCalleesWorklets';
+import { ReanimatedPluginPass } from './types';
+import { processIfWorkletNode } from './processIfWorkletNode';
+import { processIfGestureHandlerEventCallbackFunctionNode } from './processIfGestureHandlerEventCallbackFunctionNode';
+import { processInlineStylesWarning } from './processInlineStylesWarning';
+
+module.exports = function (): PluginItem {
+  return {
+    pre() {
+      // allows adding custom globals such as host-functions
+      if (this.opts != null && Array.isArray(this.opts.globals)) {
+        this.opts.globals.forEach((name: string) => {
+          globals.add(name);
+        });
+      }
+    },
+    visitor: {
+      CallExpression: {
+        enter(path: NodePath<CallExpression>, state: ReanimatedPluginPass) {
+          processForCalleesWorklets(path, state);
+        },
+      },
+      'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': {
+        enter(
+          path: NodePath<
+            FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
+          >,
+          state: ReanimatedPluginPass
+        ) {
+          processIfWorkletNode(path, state);
+          processIfGestureHandlerEventCallbackFunctionNode(path, state);
+        },
+      },
+      JSXAttribute: {
+        enter(path, state) {
+          processInlineStylesWarning(path, state);
+        },
+      },
+    },
+  };
+};

package/plugin/src/processForCalleesWorklets.ts

@@ -0,0 +1,106 @@
+import { NodePath } from '@babel/core';
+import {
+  CallExpression,
+  isSequenceExpression,
+  ObjectExpression,
+} from '@babel/types';
+import { ReanimatedPluginPass } from './types';
+import { processWorkletObjectMethod } from './processWorkletObjectMethod';
+import { processIfWorkletFunction } from './processIfWorkletFunction';
+import { strict as assert } from 'assert';
+
+const functionArgsToWorkletize = new Map([
+  ['useFrameCallback', [0]],
+  ['useAnimatedStyle', [0]],
+  ['useAnimatedProps', [0]],
+  ['createAnimatedPropAdapter', [0]],
+  ['useDerivedValue', [0]],
+  ['useAnimatedScrollHandler', [0]],
+  ['useAnimatedReaction', [0, 1]],
+  ['useWorkletCallback', [0]],
+  // animations' callbacks
+  ['withTiming', [2]],
+  ['withSpring', [2]],
+  ['withDecay', [1]],
+  ['withRepeat', [3]],
+]);
+
+const objectHooks = new Set([
+  'useAnimatedGestureHandler',
+  'useAnimatedScrollHandler',
+]);
+
+export function processForCalleesWorklets(
+  path: NodePath<CallExpression>,
+  state: ReanimatedPluginPass
+) {
+  const callee = isSequenceExpression(path.node.callee)
+    ? path.node.callee.expressions[path.node.callee.expressions.length - 1]
+    : path.node.callee;
+
+  // We are looking for objects we know we should workletize
+  // hence if object is not named, we return.
+  const name =
+    'name' in callee
+      ? callee.name
+      : 'property' in callee && 'name' in callee.property
+      ? callee.property.name
+      : undefined;
+  if (name === undefined) {
+    return;
+  }
+
+  if (objectHooks.has(name)) {
+    const workletToProcess = path.get('arguments.0');
+    assert(!Array.isArray(workletToProcess), "'workletToProcess' is an array'");
+    if (workletToProcess.isObjectExpression()) {
+      processObjectHook(workletToProcess, state);
+      // useAnimatedScrollHandler can take a function as an argument instead of an ObjectExpression
+      // but useAnimatedGestureHandler can't
+    } else if (name === 'useAnimatedScrollHandler') {
+      processIfWorkletFunction(workletToProcess, state);
+    }
+  } else {
+    const indices = functionArgsToWorkletize.get(name);
+    if (indices === undefined) {
+      return;
+    }
+    processArguments(path, indices, state);
+  }
+}
+
+function processObjectHook(
+  path: NodePath<ObjectExpression>,
+  state: ReanimatedPluginPass
+) {
+  const properties = path.get('properties');
+  for (const property of properties) {
+    if (property.isObjectMethod()) {
+      processWorkletObjectMethod(property, state);
+    } else if (property.isObjectProperty()) {
+      const value = property.get('value');
+      assert(!Array.isArray(value), "'value' is an array'");
+      processIfWorkletFunction(value, state);
+    } else {
+      throw new Error(
+        `'${property.type}' as to-be workletized arguments is not supported for object hooks`
+      );
+    }
+  }
+}
+
+function processArguments(
+  path: NodePath<CallExpression>,
+  indices: number[],
+  state: ReanimatedPluginPass
+) {
+  const argumentsArray = path.get('arguments');
+  indices.forEach((index) => {
+    const argumentToWorkletize = argumentsArray[index];
+    if (!argumentToWorkletize) {
+      // workletizable argument doesn't always have to be specified
+      return;
+    }
+    processIfWorkletFunction(argumentToWorkletize, state);
+  });
+}

package/plugin/src/processIfGestureHandlerEventCallbackFunctionNode.ts

@@ -0,0 +1,156 @@
+import { NodePath } from '@babel/core';
+import {
+  FunctionDeclaration,
+  FunctionExpression,
+  ArrowFunctionExpression,
+  isIdentifier,
+  isCallExpression,
+  Expression,
+  isMemberExpression,
+  isExpression,
+} from '@babel/types';
+import { processIfWorkletFunction } from './processIfWorkletFunction';
+import { ReanimatedPluginPass } from './types';
+
+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',
+  'Manual',
+  'Race',
+  'Simultaneous',
+  'Exclusive',
+]);
+
+const gestureHandlerBuilderMethods = new Set([
+  'onBegin',
+  'onStart',
+  'onEnd',
+  'onFinalize',
+  'onUpdate',
+  'onChange',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
+]);
+
+// 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]
+  )
+  */
+export function processIfGestureHandlerEventCallbackFunctionNode(
+  path: NodePath<
+    FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
+  >,
+  state: ReanimatedPluginPass
+) {
+  if (
+    isCallExpression(path.parent) &&
+    isExpression(path.parent.callee) &&
+    isGestureObjectEventCallbackMethod(path.parent.callee)
+  ) {
+    processIfWorkletFunction(path, state);
+  }
+}
+
+function isGestureObjectEventCallbackMethod(exp: Expression) {
+  // Checks if node matches the pattern `Gesture.Foo()[*].onBar`
+  // where `[*]` represents any number of method calls.
+  return (
+    isMemberExpression(exp) &&
+    isIdentifier(exp.property) &&
+    gestureHandlerBuilderMethods.has(exp.property.name) &&
+    containsGestureObject(exp.object)
+  );
+}
+
+function containsGestureObject(exp: Expression) {
+  // Checks if node matches the pattern `Gesture.Foo()[*]`
+  // where `[*]` represents any number of chained method calls, like `.something(42)`.
+
+  // direct call
+  if (isGestureObject(exp)) {
+    return true;
+  }
+
+  // method chaining
+  if (
+    isCallExpression(exp) &&
+    isMemberExpression(exp.callee) &&
+    containsGestureObject(exp.callee.object)
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function isGestureObject(exp: Expression) {
+  // Checks if node matches `Gesture.Tap()` or similar.
+  /*
+  node: CallExpression(
+    callee: MemberExpression(
+      object: Identifier('Gesture')
+      property: Identifier('Tap')
+    )
+  )
+  */
+  return (
+    isCallExpression(exp) &&
+    isMemberExpression(exp.callee) &&
+    isIdentifier(exp.callee.object) &&
+    exp.callee.object.name === 'Gesture' &&
+    isIdentifier(exp.callee.property) &&
+    gestureHandlerGestureObjects.has(exp.callee.property.name)
+  );
+}

package/plugin/src/processIfWorkletFunction.ts

@@ -0,0 +1,55 @@
+import { NodePath, Node } from '@babel/core';
+import {
+  FunctionDeclaration,
+  FunctionExpression,
+  ArrowFunctionExpression,
+  callExpression,
+  isScopable,
+  isExportNamedDeclaration,
+  variableDeclaration,
+  variableDeclarator,
+} from '@babel/types';
+import { ReanimatedPluginPass } from './types';
+import { makeWorklet } from './makeWorklet';
+
+// Replaces FunctionDeclaration, FunctionExpression or ArrowFunctionExpression
+// with a workletized version of itself.
+
+export function processIfWorkletFunction(
+  path: NodePath<Node>,
+  state: ReanimatedPluginPass
+) {
+  if (
+    path.isFunctionDeclaration() ||
+    path.isFunctionExpression() ||
+    path.isArrowFunctionExpression()
+  ) {
+    processWorkletFunction(path, state);
+  }
+}
+
+function processWorkletFunction(
+  path: NodePath<
+    FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
+  >,
+  state: ReanimatedPluginPass
+) {
+  const newFun = makeWorklet(path, state);
+
+  const replacement = callExpression(newFun, []);
+
+  // we check if function needs to be assigned to variable declaration.
+  // This is needed if function definition directly in a scope. Some other ways
+  // where function definition can be used is for example with variable declaration:
+  // const ggg = function foo() { }
+  // ^ in such a case we don't need to define variable for the function
+  const needDeclaration =
+    isScopable(path.parent) || isExportNamedDeclaration(path.parent);
+  path.replaceWith(
+    'id' in path.node && path.node.id && needDeclaration
+      ? variableDeclaration('const', [
+          variableDeclarator(path.node.id, replacement),
+        ])
+      : replacement
+  );
+}

package/plugin/src/processIfWorkletNode.ts

@@ -0,0 +1,44 @@
+import { NodePath } from '@babel/core';
+import {
+  FunctionDeclaration,
+  FunctionExpression,
+  ArrowFunctionExpression,
+  isBlockStatement,
+  isDirectiveLiteral,
+} from '@babel/types';
+import { processIfWorkletFunction } from './processIfWorkletFunction';
+import { ReanimatedPluginPass } from './types';
+
+export function processIfWorkletNode(
+  fun: NodePath<
+    FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
+  >,
+  state: ReanimatedPluginPass
+) {
+  fun.traverse({
+    DirectiveLiteral(path) {
+      const value = path.node.value;
+      if (
+        value === 'worklet' &&
+        path.getFunctionParent() === fun &&
+        isBlockStatement(fun.node.body)
+      ) {
+        // make sure "worklet" is listed among directives for the fun
+        // this is necessary as because of some bug, babel will attempt to
+        // process replaced function if it is nested inside another function
+        const directives = fun.node.body.directives;
+        if (
+          directives &&
+          directives.length > 0 &&
+          directives.some(
+            (directive) =>
+              isDirectiveLiteral(directive.value) &&
+              directive.value.value === 'worklet'
+          )
+        ) {
+          processIfWorkletFunction(fun, state);
+        }
+      }
+    },
+  });
+}

package/plugin/src/processInlineStylesWarning.ts

@@ -0,0 +1,129 @@
+import { NodePath } from '@babel/core';
+import {
+  MemberExpression,
+  callExpression,
+  arrowFunctionExpression,
+  isArrayExpression,
+  ObjectExpression,
+  JSXAttribute,
+  isJSXExpressionContainer,
+  identifier,
+  stringLiteral,
+  expressionStatement,
+  memberExpression,
+  returnStatement,
+  blockStatement,
+  ObjectProperty,
+  isIdentifier,
+} from '@babel/types';
+import { isRelease } from './utils';
+import { ReanimatedPluginPass } from './types';
+import { strict as assert } from 'assert';
+
+function generateInlineStylesWarning(path: NodePath<MemberExpression>) {
+  // replaces `sharedvalue.value` with `(()=>{console.warn(require('react-native-reanimated').getUseOfValueInStyleWarning());return sharedvalue.value;})()`
+  return callExpression(
+    arrowFunctionExpression(
+      [],
+      blockStatement([
+        expressionStatement(
+          callExpression(
+            memberExpression(identifier('console'), identifier('warn')),
+            [
+              callExpression(
+                memberExpression(
+                  callExpression(identifier('require'), [
+                    stringLiteral('react-native-reanimated'),
+                  ]),
+                  identifier('getUseOfValueInStyleWarning')
+                ),
+                []
+              ),
+            ]
+          )
+        ),
+        returnStatement(path.node),
+      ])
+    ),
+    []
+  );
+}
+
+function processPropertyValueForInlineStylesWarning(
+  path: NodePath<ObjectProperty['value']>
+) {
+  // if it's something like object.value then raise a warning
+  if (path.isMemberExpression() && isIdentifier(path.node.property)) {
+    if (path.node.property.name === 'value') {
+      path.replaceWith(generateInlineStylesWarning(path));
+    }
+  }
+}
+
+function processTransformPropertyForInlineStylesWarning(
+  path: NodePath<ObjectProperty['value']>
+) {
+  if (isArrayExpression(path.node)) {
+    const elements = path.get('elements');
+    assert(Array.isArray(elements), "'elements' should be an array");
+    for (const element of elements) {
+      if (element.isObjectExpression()) {
+        processStyleObjectForInlineStylesWarning(element);
+      }
+    }
+  }
+}
+
+function processStyleObjectForInlineStylesWarning(
+  path: NodePath<ObjectExpression>
+) {
+  const properties = path.get('properties');
+  for (const property of properties) {
+    if (property.isObjectProperty()) {
+      const value = property.get('value');
+      if (
+        isIdentifier(property.node.key) &&
+        property.node.key.name === 'transform'
+      ) {
+        processTransformPropertyForInlineStylesWarning(value);
+      } else {
+        processPropertyValueForInlineStylesWarning(value);
+      }
+    }
+  }
+}
+
+export function processInlineStylesWarning(
+  path: NodePath<JSXAttribute>,
+  state: ReanimatedPluginPass
+) {
+  if (isRelease()) {
+    return;
+  }
+  if (state.opts.disableInlineStylesWarning) {
+    return;
+  }
+  if (path.node.name.name !== 'style') {
+    return;
+  }
+  if (!isJSXExpressionContainer(path.node.value)) {
+    return;
+  }
+
+  const expression = path.get('value').get('expression');
+  // style={[{...}, {...}]}
+  assert(!Array.isArray(expression), "'expression' should not be an array");
+  if (expression.isArrayExpression()) {
+    const elements = expression.get('elements');
+    assert(Array.isArray(elements), "'elements' should be an array");
+    for (const element of elements) {
+      if (element.isObjectExpression()) {
+        processStyleObjectForInlineStylesWarning(element);
+      }
+    }
+  }
+  // style={{...}}
+  else if (expression.isObjectExpression()) {
+    processStyleObjectForInlineStylesWarning(expression);
+  }
+}

package/plugin/src/processWorkletObjectMethod.ts

@@ -0,0 +1,31 @@
+import { NodePath } from '@babel/core';
+import {
+  ObjectMethod,
+  identifier,
+  isIdentifier,
+  isFunctionParent,
+  objectProperty,
+  callExpression,
+} from '@babel/types';
+import { ReanimatedPluginPass } from './types';
+import { makeWorklet } from './makeWorklet';
+
+export function processWorkletObjectMethod(
+  path: NodePath<ObjectMethod>,
+  state: ReanimatedPluginPass
+) {
+  // Replaces ObjectMethod with a workletized version of itself.
+
+  if (!isFunctionParent(path)) {
+    return;
+  }
+
+  const newFun = makeWorklet(path, state);
+
+  const replacement = objectProperty(
+    identifier(isIdentifier(path.node.key) ? path.node.key.name : ''),
+    callExpression(newFun, [])
+  );
+
+  path.replaceWith(replacement);
+}

package/plugin/src/types.ts

@@ -0,0 +1,15 @@
+import { BabelFile } from '@babel/core';
+
+export interface ReanimatedPluginPass {
+  file: BabelFile;
+  key: string;
+  opts: {
+    relativeSourceLocation?: boolean;
+    disableInlineStylesWarning?: boolean;
+  };
+  cwd: string;
+  filename: string | undefined;
+  get(key: unknown): unknown;
+  set(key: unknown, value: unknown): void;
+  [key: string]: unknown;
+}

package/plugin/src/utils.ts

@@ -0,0 +1,6 @@
+export function isRelease() {
+  return (
+    process.env.BABEL_ENV &&
+    ['production', 'release'].includes(process.env.BABEL_ENV)
+  );
+}

package/plugin/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "removeComments": true,
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "outDir": "lib/",
+    "rootDir": "src/"
+  },
+  "files": ["src/plugin.ts"]
+}