react-native-reanimated 4.3.0-rc.0 → 4.3.1

package/src/hook/useHandler.ts

@@ -1,43 +1,129 @@
 'use strict';
 import { useEffect, useRef } from 'react';
 import type { WorkletFunction } from 'react-native-worklets';
-import { makeShareable } from 'react-native-worklets';
+import { isWorkletFunction, makeShareable } from 'react-native-worklets';
+import type { WorkletClosure } from 'react-native-worklets/lib/typescript/types';
 
-import { IS_JEST, IS_WEB } from '../common';
+import type { UnknownRecord } from '../common';
+import { IS_WEB, ReanimatedError } from '../common';
 import type { DependencyList, ReanimatedEvent } from './commonTypes';
-import { areDependenciesEqual, buildDependencies } from './utils';
 
 interface GeneralHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
+  TEvent extends object,
+  TContext extends UnknownRecord,
 > {
-  (event: ReanimatedEvent<Event>, context: Context): void;
+  (event: ReanimatedEvent<TEvent>, context: TContext): void;
 }
 
-type GeneralWorkletHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = WorkletFunction<[event: ReanimatedEvent<Event>, context: Context]>;
-
 type GeneralHandlers<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = Record<string, GeneralHandler<Event, Context> | undefined>;
-
-type GeneralWorkletHandlers<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = Record<string, GeneralWorkletHandler<Event, Context>>;
-
-interface ContextWithDependencies<Context extends Record<string, unknown>> {
-  context: Context;
-  savedDependencies: DependencyList;
-}
+  TEvent extends object,
+  TContext extends UnknownRecord,
+> = Record<string, GeneralHandler<TEvent, TContext> | undefined>;
 
-export interface UseHandlerContext<Context extends Record<string, unknown>> {
-  context: Context;
+export interface UseHandlerContext<TContext extends UnknownRecord> {
+  context: TContext;
   doDependenciesDiffer: boolean;
-  useWeb: boolean;
+}
+
+function isBabelPluginEnabled(handlers: UnknownRecord): boolean {
+  if (!IS_WEB) {
+    // Babel plugin must be enabled in all non-web environments.
+    return true;
+  }
+
+  const handlerFunctions = Object.values(handlers);
+  // If there is no function provided, we assume that the Babel plugin is enabled.
+  return (
+    handlerFunctions.length === 0 || handlerFunctions.some(isWorkletFunction)
+  );
+}
+
+function ensureWorkletHandlers(handlers: UnknownRecord) {
+  const nonWorkletNames = Object.entries(handlers).reduce<string[]>(
+    (acc, [name, handler]) => {
+      if (!isWorkletFunction(handler)) acc.push(name);
+      return acc;
+    },
+    []
+  );
+
+  if (nonWorkletNames.length > 0) {
+    throw new ReanimatedError(
+      `Passed handlers that are not worklets. Only worklet functions are allowed. Handlers "${nonWorkletNames.join(', ')}" are not worklets.`
+    );
+  }
+}
+
+const objectIs: (a: unknown, b: unknown) => boolean =
+  typeof Object.is === 'function'
+    ? Object.is
+    : (x, y) =>
+        (x === y && (x !== 0 || 1 / (x as number) === 1 / (y as number))) ||
+        (Number.isNaN(x as number) && Number.isNaN(y as number));
+
+function areWorkletClosuresEqual(
+  next: WorkletClosure,
+  prev: WorkletClosure
+): boolean {
+  const nextKeys = Object.keys(next);
+  const prevKeys = Object.keys(prev);
+
+  return (
+    prevKeys.length === nextKeys.length &&
+    prevKeys.every((key) => key in next && objectIs(next[key], prev[key]))
+  );
+}
+
+function areWorkletsEqual(
+  next: WorkletFunction,
+  prev: WorkletFunction
+): boolean {
+  if (objectIs(next, prev)) {
+    return true;
+  }
+
+  return (
+    next.__workletHash === prev.__workletHash &&
+    areWorkletClosuresEqual(next.__closure, prev.__closure)
+  );
+}
+
+function areWorkletHandlersEqual(
+  next: Partial<Record<string, WorkletFunction>> | undefined,
+  prev: Partial<Record<string, WorkletFunction>> | undefined
+) {
+  if (!next || !prev) {
+    return false;
+  }
+
+  const nextKeys = Object.keys(next);
+  const prevKeys = Object.keys(prev);
+
+  if (nextKeys.length !== prevKeys.length) {
+    return false;
+  }
+
+  return nextKeys.every((key) => {
+    const nextValue = next[key];
+    const prevValue = prev[key];
+
+    if (!nextValue || !prevValue) {
+      return false;
+    }
+
+    return areWorkletsEqual(nextValue, prevValue);
+  });
+}
+
+function areDependenciesEqual(
+  next: Array<unknown> | undefined,
+  prev: Array<unknown> | undefined
+): boolean {
+  if (!next || !prev || next.length !== prev.length) {
+    return false;
+  }
+
+  return next.every((value, index) => objectIs(value, prev[index]));
 }
 
 /**
@@ -46,52 +132,52 @@ export interface UseHandlerContext<Context extends Record<string, unknown>> {
  * @param handlers - An object of event handlers.
  * @param dependencies - An optional array of dependencies.
  * @returns An object containing a boolean indicating whether the dependencies
- *   have changed, and a boolean indicating whether the code is running on the
- *   web.
+ *   have changed.
  * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useHandler
  */
-// @ts-expect-error This overload is required by our API.
-export function useHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
->(
+export function useHandler<Event extends object, Context extends UnknownRecord>(
   handlers: GeneralHandlers<Event, Context>,
   dependencies?: DependencyList
-): UseHandlerContext<Context>;
-
-export function useHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
->(
-  handlers: GeneralWorkletHandlers<Event, Context>,
-  dependencies?: DependencyList
 ): UseHandlerContext<Context> {
-  const initRef = useRef<ContextWithDependencies<Context> | null>(null);
-  if (initRef.current === null) {
-    const context = makeShareable({} as Context);
-    initRef.current = {
-      context,
-      savedDependencies: [],
-    };
-  }
+  'use no memo';
 
-  useEffect(() => {
-    return () => {
-      initRef.current = null;
+  const stateRef = useRef<{
+    context: Context;
+    prevHandlers: GeneralHandlers<Event, Context> | undefined;
+    prevDependencies: DependencyList;
+  } | null>(null);
+
+  if (stateRef.current === null) {
+    stateRef.current = {
+      context: makeShareable({} as Context),
+      prevHandlers: undefined,
+      prevDependencies: [],
     };
-  }, []);
+  }
 
-  const { context, savedDependencies } = initRef.current;
+  const state = stateRef.current;
+  let doDependenciesDiffer = true;
 
-  dependencies = buildDependencies(
-    dependencies,
-    handlers as Record<string, WorkletFunction>
-  );
+  if (isBabelPluginEnabled(handlers)) {
+    if (__DEV__) {
+      ensureWorkletHandlers(handlers);
+    }
+    doDependenciesDiffer = !areWorkletHandlersEqual(
+      handlers as Record<string, WorkletFunction>,
+      state.prevHandlers as Record<string, WorkletFunction>
+    );
+  } else if (dependencies) {
+    doDependenciesDiffer = !areDependenciesEqual(
+      dependencies,
+      state.prevDependencies
+    );
+  }
 
-  const doDependenciesDiffer =
-    !areDependenciesEqual(dependencies, savedDependencies) || !dependencies;
-  initRef.current.savedDependencies = dependencies;
-  const useWeb = IS_WEB || IS_JEST;
+  // Write after commit to avoid corruption from interrupted renders (in case of concurrent mode).
+  useEffect(() => {
+    state.prevHandlers = handlers;
+    state.prevDependencies = dependencies;
+  });
 
-  return { context, doDependenciesDiffer, useWeb };
+  return { context: state.context, doDependenciesDiffer };
 }

package/src/hook/utils.ts

@@ -1,131 +1,5 @@
 'use strict';
-import type { WorkletFunction } from 'react-native-worklets';
-import { isWorkletFunction } from 'react-native-worklets';
-
-import { IS_WEB, logger, ReanimatedError } from '../common';
-import type { DependencyList } from './commonTypes';
-
-// Builds one big hash from multiple worklets' hashes.
-export function buildWorkletsHash<Args extends unknown[], ReturnValue>(
-  worklets:
-    | Record<string, WorkletFunction<Args, ReturnValue>>
-    | WorkletFunction<Args, ReturnValue>[]
-) {
-  // For arrays `Object.values` returns the array itself.
-  return Object.values(worklets).reduce(
-    (acc, worklet: WorkletFunction<Args, ReturnValue>) =>
-      acc + worklet.__workletHash.toString(),
-    ''
-  );
-}
-
-// Builds dependencies array for useEvent handlers.
-export function buildDependencies(
-  dependencies: DependencyList | undefined,
-  handlers: Record<string, WorkletFunction>
-) {
-  const result = dependencies ?? [];
-
-  const nonWorkletHandlerNames = Object.entries(handlers).reduce<string[]>(
-    (acc, [name, handler]) => {
-      if (!isWorkletFunction(handler)) {
-        acc.push(name);
-      }
-      return acc;
-    },
-    []
-  );
-
-  if (nonWorkletHandlerNames.length === 0) {
-    result.push(buildWorkletsHash(handlers));
-    return result;
-  }
-
-  if (!__DEV__) {
-    return result;
-  }
-
-  const handlerNames = nonWorkletHandlerNames.join(', ');
-
-  // On native, only worklets are allowed
-  if (!IS_WEB) {
-    throw new ReanimatedError(
-      `Passed handlers that are not worklets. Only worklet functions are allowed. Handlers "${handlerNames}" are not worklets.`
-    );
-  }
-
-  // On web, non-worklets are allowed only when dependencies are provided
-  if (__DEV__ && !dependencies) {
-    logger.warn(
-      `Non-worklet handlers ("${handlerNames}") were passed without a dependency array. This will cause the hook to update on every render. Please provide a dependency array or use only worklet functions instead.`
-    );
-    return undefined;
-  }
-
-  return result;
-}
-
-function areWorkletsEqual(
-  worklet1: WorkletFunction,
-  worklet2: WorkletFunction
-) {
-  if (worklet1.__workletHash === worklet2.__workletHash) {
-    const closure1Keys = Object.keys(worklet1.__closure);
-    const closure2Keys = Object.keys(worklet2.__closure);
-
-    return (
-      closure1Keys.length === closure2Keys.length &&
-      closure1Keys.every(
-        (key) =>
-          key in worklet2.__closure &&
-          worklet1.__closure[key] === worklet2.__closure[key]
-      )
-    );
-  }
-
-  return false;
-}
-
-// This is supposed to work as useEffect comparison.
-export function areDependenciesEqual(
-  nextDependencies: DependencyList,
-  prevDependencies: DependencyList
-) {
-  function is(x: number, y: number) {
-    return (
-      (x === y && (x !== 0 || 1 / x === 1 / y)) ||
-      (Number.isNaN(x) && Number.isNaN(y))
-    );
-  }
-  const objectIs: (nextDeps: unknown, prevDeps: unknown) => boolean =
-    typeof Object.is === 'function' ? Object.is : is;
-
-  function areHookInputsEqual(
-    nextDeps: DependencyList,
-    prevDeps: DependencyList
-  ) {
-    if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {
-      return false;
-    }
-
-    for (let i = 0; i < prevDeps.length; ++i) {
-      const nextDep = nextDeps[i];
-      const prevDep = prevDeps[i];
-      if (objectIs(nextDep, prevDep)) {
-        continue;
-      }
-      if (!isWorkletFunction(nextDep) || !isWorkletFunction(prevDep)) {
-        return false;
-      }
-      if (!areWorkletsEqual(nextDep, prevDep)) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  return areHookInputsEqual(nextDependencies, prevDependencies);
-}
+import { ReanimatedError } from '../common';
 
 export function isAnimated(prop: unknown) {
   'worklet';

package/src/initializers.ts

@@ -19,6 +19,7 @@ export function initializeReanimatedModule(
   }
 }
 
+// is-tree-shakable-suppress
 if (!SHOULD_BE_USE_WEB) {
   runOnUISync(() => {
     'worklet';

package/src/jestUtils/common.ts

@@ -22,3 +22,13 @@ export const worklet = <Args extends unknown[] = [], ReturnValue = void>(
   fn.__closure = {};
   return fn;
 };
+
+/** Creates a new worklet with the same hash and closure as the original. */
+export const cloneWorklet = <Args extends unknown[] = [], ReturnValue = void>(
+  original: WorkletFunction<Args, ReturnValue>
+): WorkletFunction<Args, ReturnValue> => {
+  const w = worklet<Args, ReturnValue>();
+  w.__workletHash = original.__workletHash;
+  w.__closure = { ...original.__closure };
+  return w;
+};

package/src/jestUtils/index.ts

@@ -2,7 +2,6 @@
 'use strict';
 
 import type React from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
 
 import { IS_JEST, logger, ReanimatedError } from '../common';
 import type {
@@ -347,12 +346,10 @@ type TestComponent = React.Component<
   }
 >;
 
-export const getAnimatedStyle = (component: ReactTestInstance) => {
-  return getCurrentStyle(
-    // This type assertion is needed to get type checking in the following
-    // functions since `ReactTestInstance` has its `props` defined as `any`.
-    component as unknown as TestComponent
-  );
+export const getAnimatedStyle = (component: {
+  props: Record<string, unknown>;
+}) => {
+  return getCurrentStyle(component as unknown as TestComponent);
 };
 
-export { worklet } from './common';
+export { cloneWorklet, worklet } from './common';

package/src/jestUtils/index.web.ts

@@ -23,4 +23,4 @@ export function getAnimatedStyle() {
   // NOOP
 }
 
-export { worklet } from './common';
+export { cloneWorklet, worklet } from './common';

package/src/mutables.ts

@@ -217,8 +217,12 @@ function mutableGuestDecorator<TValue>(
       set(newValue) {
         if (globalThis.__RUNTIME_KIND === 1) {
           checkInvalidWriteDuringRender();
+          scheduleOnUI(() => {
+            mutable.value = newValue;
+          });
+        } else {
+          mutable.setAsync(newValue);
         }
-        mutable.setAsync(newValue);
       },
       enumerable: true,
       configurable: true,

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * version used to build the native part of the library in runtime. Remember to
  * keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '4.3.0-rc.0';
+export const jsVersion = '4.3.1';

package/src/privateGlobals.d.ts

@@ -24,6 +24,10 @@ declare global {
   var _REANIMATED_VERSION_JS: string | undefined;
   var __reanimatedModuleProxy: ReanimatedModuleProxy | undefined;
   var _log: (value: unknown) => void;
+  var _startProfiling: (meanHzFreq?: number) => void;
+  var _stopProfiling: () => string;
+  var _beginSection: (name: string) => void;
+  var _endSection: () => void;
   var _notifyAboutProgress: (
     tag: number,
     value: Record<string, unknown>