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

package/src/reanimated2/hook/utils.ts

@@ -0,0 +1,259 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+import { AnimationObject } from '../animation';
+import { processColor } from '../Colors';
+import {
+  AnimatedStyle,
+  NativeEvent,
+  NestedObjectValues,
+  StyleProps,
+  WorkletFunction,
+} from '../commonTypes';
+import { makeRemote } from '../core';
+import { isWeb } from '../PlatformChecker';
+import { colorProps } from '../UpdateProps';
+import WorkletEventHandler from '../WorkletEventHandler';
+import {
+  Context,
+  ContextWithDependencies,
+  DependencyList,
+} from './commonTypes';
+
+interface Handler<T, TContext extends Context> extends WorkletFunction {
+  (event: T, context: TContext): void;
+}
+
+interface Handlers<T, TContext extends Context> {
+  [key: string]: Handler<T, TContext> | undefined;
+}
+
+export interface UseHandlerContext<TContext extends Context> {
+  context: TContext;
+  doDependenciesDiffer: boolean;
+  useWeb: boolean;
+}
+
+export function useEvent<T extends NativeEvent<T>>(
+  handler: (event: T) => void,
+  eventNames: string[] = [],
+  rebuild = false
+): MutableRefObject<WorkletEventHandler<T> | null> {
+  const initRef = useRef<WorkletEventHandler<T> | null>(null);
+  if (initRef.current === null) {
+    initRef.current = new WorkletEventHandler(handler, eventNames);
+  } else if (rebuild) {
+    initRef.current.updateWorklet(handler);
+  }
+
+  useEffect(() => {
+    return () => {
+      initRef.current = null;
+    };
+  }, []);
+
+  return initRef;
+}
+
+export function useHandler<T, TContext extends Context>(
+  handlers: Handlers<T, TContext>,
+  dependencies?: DependencyList
+): UseHandlerContext<TContext> {
+  const initRef = useRef<ContextWithDependencies<TContext> | null>(null);
+  if (initRef.current === null) {
+    initRef.current = {
+      context: makeRemote({}),
+      savedDependencies: [],
+    };
+  }
+
+  useEffect(() => {
+    return () => {
+      initRef.current = null;
+    };
+  }, []);
+
+  const { context, savedDependencies } = initRef.current;
+
+  dependencies = buildDependencies(dependencies, handlers);
+
+  const doDependenciesDiffer = !areDependenciesEqual(
+    dependencies,
+    savedDependencies
+  );
+  initRef.current.savedDependencies = dependencies;
+  const useWeb = isWeb();
+
+  return { context, doDependenciesDiffer, useWeb };
+}
+
+// builds one big hash from multiple worklets' hashes
+export function buildWorkletsHash(
+  handlers: Record<string, WorkletFunction> | Array<WorkletFunction>
+): string {
+  return Object.values(handlers).reduce(
+    (acc: string, worklet: WorkletFunction) =>
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      acc + worklet.__workletHash!.toString(),
+    ''
+  );
+}
+
+// builds dependencies array for gesture handlers
+export function buildDependencies(
+  dependencies: DependencyList,
+  handlers: Record<string, WorkletFunction | undefined>
+): Array<unknown> {
+  const handlersList: WorkletFunction[] = Object.values(handlers).filter(
+    (handler) => handler !== undefined
+  ) as WorkletFunction[];
+  if (!dependencies) {
+    dependencies = handlersList.map((handler) => {
+      return {
+        workletHash: handler.__workletHash,
+        closure: handler._closure,
+      };
+    });
+  } else {
+    dependencies.push(buildWorkletsHash(handlersList));
+  }
+  return dependencies;
+}
+
+// this is supposed to work as useEffect comparison
+export function areDependenciesEqual(
+  nextDeps: DependencyList,
+  prevDeps: DependencyList
+): boolean {
+  function is(x: number, y: number) {
+    /* eslint-disable no-self-compare */
+    return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+    /* eslint-enable no-self-compare */
+  }
+  const objectIs: (nextDeps: unknown, prevDeps: unknown) => boolean =
+    typeof Object.is === 'function' ? Object.is : is;
+
+  function areHookInputsEqual(
+    nextDeps: DependencyList,
+    prevDeps: DependencyList
+  ): boolean {
+    if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {
+      return false;
+    }
+    for (let i = 0; i < prevDeps.length; ++i) {
+      if (!objectIs(nextDeps[i], prevDeps[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  return areHookInputsEqual(nextDeps, prevDeps);
+}
+
+export function hasColorProps(updates: AnimatedStyle): boolean {
+  const colorPropsSet = new Set(colorProps);
+  for (const key in updates) {
+    if (colorPropsSet.has(key)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function parseColors(updates: AnimatedStyle): void {
+  'worklet';
+  for (const key in updates) {
+    if (colorProps.indexOf(key) !== -1) {
+      updates[key] = processColor(updates[key]);
+    }
+  }
+}
+
+export function canApplyOptimalisation(upadterFn: WorkletFunction): number {
+  const FUNCTIONLESS_FLAG = 0b00000001;
+  const STATEMENTLESS_FLAG = 0b00000010;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const optimalization = upadterFn.__optimalization!;
+  return (
+    optimalization & FUNCTIONLESS_FLAG && optimalization & STATEMENTLESS_FLAG
+  );
+}
+
+export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
+  'worklet';
+  const propsToCheck: NestedObjectValues<AnimationObject>[] = [prop];
+  while (propsToCheck.length > 0) {
+    const currentProp: NestedObjectValues<AnimationObject> = propsToCheck.pop() as NestedObjectValues<AnimationObject>;
+    if (Array.isArray(currentProp)) {
+      for (const item of currentProp) {
+        propsToCheck.push(item);
+      }
+    } else if (currentProp?.onFrame !== undefined) {
+      return true;
+    } else if (typeof currentProp === 'object') {
+      for (const item of Object.values(currentProp)) {
+        propsToCheck.push(item);
+      }
+    }
+    // if none of the above, it's not the animated prop, check next one
+  }
+
+  // when none of the props were animated return false
+  return false;
+}
+
+export function styleDiff(
+  oldStyle: AnimatedStyle,
+  newStyle: AnimatedStyle
+): AnimatedStyle {
+  'worklet';
+  const diff: AnimatedStyle = {};
+  Object.keys(oldStyle).forEach((key) => {
+    if (newStyle[key] === undefined) {
+      diff[key] = null;
+    }
+  });
+  Object.keys(newStyle).forEach((key) => {
+    const value = newStyle[key];
+    const oldValue = oldStyle[key];
+
+    if (isAnimated(value)) {
+      // do nothing
+      return;
+    }
+    if (
+      oldValue !== value &&
+      JSON.stringify(oldValue) !== JSON.stringify(value)
+    ) {
+      // I'd use deep equal here but that'd take additional work and this was easier
+      diff[key] = value;
+    }
+  });
+  return diff;
+}
+
+export function getStyleWithoutAnimations(newStyle: AnimatedStyle): StyleProps {
+  'worklet';
+  const diff: StyleProps = {};
+
+  for (const key in newStyle) {
+    const value = newStyle[key];
+    if (isAnimated(value)) {
+      continue;
+    }
+    diff[key] = value;
+  }
+  return diff;
+}
+
+export const validateAnimatedStyles = (styles: AnimatedStyle): void => {
+  'worklet';
+  if (typeof styles !== 'object') {
+    throw new Error(
+      `useAnimatedStyle has to return an object, found ${typeof styles} instead`
+    );
+  } else if (Array.isArray(styles)) {
+    throw new Error(
+      'useAnimatedStyle has to return an object and cannot return static styles combined with dynamic ones. Please do merging where a component receives props.'
+    );
+  }
+};

package/src/reanimated2/index.ts

@@ -1,9 +1,10 @@
 export * from './core';
-export * from './Hooks';
-export * from './animations';
+export * from './hook';
+export * from './animation';
 export * from './interpolation';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
+export * from './utils';

package/src/reanimated2/interpolation.ts

@@ -1,147 +1,216 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import interpolateNode, {
-  Extrapolate,
-} from '../reanimated1/derived/interpolate';
+// @ts-ignore JS file
+import interpolateNode from '../reanimated1/derived/interpolate';
 
-function getVal(config) {
+export enum Extrapolation {
+  IDENTITY = 'identity',
+  CLAMP = 'clamp',
+  EXTEND = 'extend',
+}
+
+export interface InterpolatedNode {
+  __nodeId: number;
+}
+
+interface InterpolationNarrowedInput {
+  leftEdgeInput: number;
+  rightEdgeInput: number;
+  leftEdgeOutput: number;
+  rightEdgeOutput: number;
+}
+
+export interface ExtrapolationConfig {
+  extrapolateLeft?: Extrapolation | string;
+  extrapolateRight?: Extrapolation | string;
+}
+
+interface RequiredExtrapolationConfig {
+  extrapolateLeft: Extrapolation;
+  extrapolateRight: Extrapolation;
+}
+
+export type ExtrapolationType =
+  | ExtrapolationConfig
+  | Extrapolation
+  | string
+  | undefined;
+
+function isNode(x: number | InterpolatedNode): x is InterpolatedNode {
   'worklet';
+  return (x as InterpolatedNode).__nodeId !== undefined;
+}
 
-  const { type, coef, val, ll, rr, x } = config;
+function getVal(
+  type: Extrapolation,
+  coef: number,
+  val: number,
+  leftEdgeOutput: number,
+  rightEdgeOutput: number,
+  x: number
+): number {
+  'worklet';
 
   switch (type) {
-    case Extrapolate.IDENTITY:
+    case Extrapolation.IDENTITY:
       return x;
-    case Extrapolate.CLAMP:
-      if (coef * val < coef * ll) {
-        return ll;
+    case Extrapolation.CLAMP:
+      if (coef * val < coef * leftEdgeOutput) {
+        return leftEdgeOutput;
       }
-      return rr;
-    case Extrapolate.EXTEND:
+      return rightEdgeOutput;
+    case Extrapolation.EXTEND:
     default:
       return val;
   }
 }
 
-function isExtrapolate(value) {
+function isExtrapolate(value: string): value is Extrapolation {
   'worklet';
 
   return (
-    value === Extrapolate.EXTEND ||
-    value === Extrapolate.CLAMP ||
-    value === Extrapolate.IDENTITY
+    value === Extrapolation.EXTEND ||
+    value === Extrapolation.CLAMP ||
+    value === Extrapolation.IDENTITY
   );
 }
 
-function validateType(type) {
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+function validateType(type: ExtrapolationType): RequiredExtrapolationConfig {
   'worklet';
-
-  const EXTRAPOLATE_ERROR_MSG = `Reanimated: config object is not valid, please provide valid config, for example:
-    interpolate(value, [inputRange], [outputRange], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'extend',
-  })`;
-
-  const EXTRAPOLATE_ERROR = (
-    extrapolate
-  ) => `Reanimated: not supported value for "${extrapolate}" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-    interpolate(value, [inputRange], [outputRange], {
-      ${extrapolate}: 'clamp',
-  })`;
-
-  type = type ?? 'extend';
-
-  // eslint-disable-next-line no-prototype-builtins
-  const hasExtrapolateLeft = type.hasOwnProperty('extrapolateLeft');
-  // eslint-disable-next-line no-prototype-builtins
-  const hasExtrapolateRight = type.hasOwnProperty('extrapolateRight');
-
-  if (
-    typeof type === 'object' &&
-    ((Object.keys(type).length === 2 &&
-      !(hasExtrapolateLeft && hasExtrapolateRight)) ||
-      (Object.keys(type).length === 1 &&
-        !(hasExtrapolateLeft || hasExtrapolateRight)) ||
-      Object.keys(type).length > 2)
-  ) {
-    throw new Error(EXTRAPOLATE_ERROR_MSG);
+  // initialize extrapolationConfig with default extrapolation
+  const extrapolationConfig: RequiredExtrapolationConfig = {
+    extrapolateLeft: Extrapolation.EXTEND,
+    extrapolateRight: Extrapolation.EXTEND,
+  };
+
+  if (!type) {
+    return extrapolationConfig;
   }
 
-  if (typeof type === 'object') {
-    if (hasExtrapolateLeft && !isExtrapolate(type.extrapolateLeft)) {
-      throw new Error(EXTRAPOLATE_ERROR('extrapolateLeft'));
-    }
-
-    if (hasExtrapolateRight && !isExtrapolate(type.extrapolateRight)) {
-      throw new Error(EXTRAPOLATE_ERROR('extrapolateRight'));
+  if (typeof type === 'string') {
+    if (!isExtrapolate(type)) {
+      throw new Error(
+        `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`
+      );
     }
+    extrapolationConfig.extrapolateLeft = type;
+    extrapolationConfig.extrapolateRight = type;
+    return extrapolationConfig;
   }
 
-  if (typeof type === 'string' && !isExtrapolate(type)) {
+  // otherwise type is extrapolation config object
+  if (
+    (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+    (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))
+  ) {
     throw new Error(
-      `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-       interpolate(value, [inputRange], [outputRange], "clamp")`
+      `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`
     );
   }
+
+  Object.assign(extrapolationConfig, type);
+  return extrapolationConfig;
 }
 
-// TODO: support default values in worklets:
-// e.g. function interpolate(x, input, output, type = Extrapolate.CLAMP)
-function internalInterpolate(x, l, r, ll, rr, type) {
+function internalInterpolate(
+  x: number,
+  narrowedInput: InterpolationNarrowedInput,
+  extrapolationConfig: RequiredExtrapolationConfig
+) {
   'worklet';
-  if (r - l === 0) return ll;
-  const progress = (x - l) / (r - l);
-  const val = ll + progress * (rr - ll);
-  const coef = rr >= ll ? 1 : -1;
-
-  const config = { type, coef, val, ll, rr, x };
-
-  if (__DEV__) validateType(type);
-
-  if (typeof type === 'object') {
-    if (coef * val < coef * ll) {
-      return getVal(Object.assign(config, { type: type.extrapolateLeft }));
-    } else if (coef * val > coef * ll) {
-      return getVal(Object.assign(config, { type: type.extrapolateRight }));
-    }
-  }
-
-  if (coef * val < coef * ll || coef * val > coef * rr) {
-    return getVal(config);
+  const {
+    leftEdgeInput,
+    rightEdgeInput,
+    leftEdgeOutput,
+    rightEdgeOutput,
+  } = narrowedInput;
+  if (rightEdgeInput - leftEdgeInput === 0) return leftEdgeOutput;
+  const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+  const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+  const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+
+  if (coef * val < coef * leftEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateLeft,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  } else if (coef * val > coef * rightEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateRight,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
   }
 
   return val;
 }
 
-export function interpolate(x, input, output, type) {
+// TODO: support default values in worklets:
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(
+  x: number | InterpolatedNode,
+  input: readonly number[],
+  output: readonly number[],
+  type?: ExtrapolationType
+): number {
   'worklet';
-  if (x && x.__nodeID) {
+  if (input.length < 2 || output.length < 2) {
+    throw Error(
+      'Interpolation input and output should contain at least two values.'
+    );
+  }
+
+  const extrapolationConfig = validateType(type);
+
+  if (isNode(x)) {
     console.warn(
       `interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`
     );
-    // we can't use rest parameters in worklets at the moment
-    // eslint-disable-next-line prefer-spread, prefer-rest-params
-    return interpolateNode.apply(undefined, arguments);
+    return interpolateNode(x, {
+      inputRange: input,
+      outputRange: output,
+      extrapolateLeft: extrapolationConfig.extrapolateLeft,
+      extrapolateRight: extrapolationConfig.extrapolateRight,
+    });
   }
 
   const length = input.length;
-  let narrowedInput = [];
-  if (x < input[0]) {
-    narrowedInput = [input[0], input[1], output[0], output[1]];
-  } else if (x > input[length - 1]) {
-    narrowedInput = [
-      input[length - 2],
-      input[length - 1],
-      output[length - 2],
-      output[length - 1],
-    ];
-  } else {
-    for (let i = 1; i < length; ++i) {
-      if (x <= input[i]) {
-        narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
-        break;
+  const narrowedInput: InterpolationNarrowedInput = {
+    leftEdgeInput: input[0],
+    rightEdgeInput: input[1],
+    leftEdgeOutput: output[0],
+    rightEdgeOutput: output[1],
+  };
+  if (length > 2) {
+    if (x > input[length - 1]) {
+      narrowedInput.leftEdgeInput = input[length - 2];
+      narrowedInput.rightEdgeInput = input[length - 1];
+      narrowedInput.leftEdgeOutput = output[length - 2];
+      narrowedInput.rightEdgeOutput = output[length - 1];
+    } else {
+      for (let i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+          narrowedInput.leftEdgeInput = input[i - 1];
+          narrowedInput.rightEdgeInput = input[i];
+          narrowedInput.leftEdgeOutput = output[i - 1];
+          narrowedInput.rightEdgeOutput = output[i];
+          break;
+        }
       }
     }
   }
-  return internalInterpolate.apply({}, [x].concat(narrowedInput).concat(type));
+
+  return internalInterpolate(x, narrowedInput, extrapolationConfig);
 }

package/src/reanimated2/jestUtils.ts

@@ -186,18 +186,6 @@ export const setUpTests = (userConfig = {}) => {
       return compareStyle(received, expectedStyle, config);
     },
   });
-
-  jest.mock('./js-reanimated', () => require('./js-reanimated/index.web'));
-  jest.mock('../ReanimatedModule', () => require('../ReanimatedModuleCompat'));
-  jest.mock('./NativeReanimated', () => {
-    let module;
-    try {
-      module = require('./NativeReanimated.js');
-    } catch {
-      module = require('./NativeReanimated.ts');
-    }
-    return module.default;
-  });
 };
 
 export const getAnimatedStyle = (received) => {