@depup/react-native-worklets 0.11.3-depup.0 → 0.12.1-depup.0

package/src/WorkletsModule/NativeWorklets.native.ts

@@ -270,14 +270,16 @@ See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting
     initializer: SerializableRef<() => void>,
     useDefaultQueue: boolean,
     customQueue: object | undefined,
-    enableEventLoop: boolean
+    enableEventLoop: boolean,
+    enableLocking: boolean
   ) {
     return this.#workletsModuleProxy.createWorkletRuntime(
       name,
       initializer,
       useDefaultQueue,
       customQueue,
-      enableEventLoop
+      enableEventLoop,
+      enableLocking
     );
   }
 

package/src/WorkletsModule/workletsModuleProxy.ts

@@ -160,7 +160,8 @@ export interface WorkletsModuleProxy {
     initializer: SerializableRef<() => void>,
     useDefaultQueue: boolean,
     customQueue: object | undefined,
-    enableEventLoop: boolean
+    enableEventLoop: boolean,
+    enableLocking: boolean
   ): WorkletRuntime;
 
   scheduleOnRuntime<TValue>(

package/src/debug/jsVersion.ts

@@ -5,4 +5,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 = '0.11.3';
+export const jsVersion = '0.12.1';

package/src/memory/serializable.native.ts

@@ -89,6 +89,21 @@ const DETECT_CYCLIC_OBJECT_DEPTH_THRESHOLD = 30;
 // We use it to check if later on the function reenters with the same object
 let processedObjectAtThresholdDepth: unknown;
 
+const serializationPathStack: string[] = [];
+
+function withPathSegment<TValue>(segment: string, serialize: () => TValue) {
+  serializationPathStack.push(segment);
+  try {
+    return serialize();
+  } finally {
+    serializationPathStack.pop();
+  }
+}
+
+function formatSerializationPath(): string {
+  return serializationPathStack.join('');
+}
+
 export function createSerializable<TValue>(
   value: TValue,
   shouldPersistRemote = false,
@@ -211,6 +226,17 @@ export function createSerializable<TValue>(
     }
   }
 
+  if (__DEV__) {
+    const constructorName =
+      (value as { constructor?: { name?: string } })?.constructor?.name ||
+      'unknown';
+    const path = formatSerializationPath();
+    const location = path ? ` It was located at \`${path}\`.` : '';
+    console.warn(
+      `[Worklets] Cannot copy value of type \`${constructorName}\`.${location}`
+    );
+  }
+
   return cloneUndefined() as SerializableRef<TValue>;
 }
 
@@ -356,11 +382,17 @@ function cloneObjectProperties<T extends object>(
     if (key === '__initData' && clonedProps.__initData !== undefined) {
       continue;
     }
-    clonedProps[key] = createSerializable(
-      element,
-      shouldPersistRemote,
-      depth + 1
-    );
+    if (__DEV__) {
+      clonedProps[key] = withPathSegment(`[${JSON.stringify(key)}]`, () =>
+        createSerializable(element, shouldPersistRemote, depth + 1)
+      );
+    } else {
+      clonedProps[key] = createSerializable(
+        element,
+        shouldPersistRemote,
+        depth + 1
+      );
+    }
   }
   return clonedProps;
 }
@@ -383,8 +415,12 @@ function cloneArray<T extends unknown[]>(
   shouldPersistRemote: boolean,
   depth: number
 ): SerializableRef<T> {
-  const clonedElements = value.map((element) =>
-    createSerializable(element, shouldPersistRemote, depth + 1)
+  const clonedElements = value.map((element, index) =>
+    __DEV__
+      ? withPathSegment(`[${index}]`, () =>
+          createSerializable(element, shouldPersistRemote, depth + 1)
+        )
+      : createSerializable(element, shouldPersistRemote, depth + 1)
   );
   const clone = WorkletsModule.createSerializableArray(
     clonedElements,
@@ -452,33 +488,39 @@ function cloneWorklet<TValue extends WorkletFunction>(
     // seems more elegant to handle it this way.
     delete (value as WorkletFunction).__stackDetails;
   }
-  const clonedProps: Record<string, unknown> = cloneObjectProperties(
-    value,
-    shouldPersistRemote,
-    depth
-  );
-  // to save on transferring static __initData field of worklet structure
-  // we request serializable value to persist its UI counterpart. This means
-  // that the __initData field that contains long strings representing the
-  // worklet code, source map, and location, will always be
-  // serialized/deserialized once.
-  clonedProps.__initData = createSerializable(
-    value.__initData,
-    true,
-    depth + 1
-  );
+  const buildClone = (): SerializableRef<TValue> => {
+    const clonedProps: Record<string, unknown> = cloneObjectProperties(
+      value,
+      shouldPersistRemote,
+      depth
+    );
+    // to save on transferring static __initData field of worklet structure
+    // we request serializable value to persist its UI counterpart. This means
+    // that the __initData field that contains long strings representing the
+    // worklet code, source map, and location, will always be
+    // serialized/deserialized once.
+    clonedProps.__initData = __DEV__
+      ? withPathSegment('["__initData"]', () =>
+          createSerializable(value.__initData, true, depth + 1)
+        )
+      : createSerializable(value.__initData, true, depth + 1);
+
+    const clone = WorkletsModule.createSerializableWorklet(
+      clonedProps,
+      // TODO: Check after refactor if we can remove shouldPersistRemote parameter (imho it's redundant here since worklets are always persistent)
+      // retain all worklets
+      true
+    ) as SerializableRef<TValue>;
+    serializableMappingCache.set(value, clone);
+    serializableMappingCache.set(clone);
 
-  const clone = WorkletsModule.createSerializableWorklet(
-    clonedProps,
-    // TODO: Check after refactor if we can remove shouldPersistRemote parameter (imho it's redundant here since worklets are always persistent)
-    // retain all worklets
-    true
-  ) as SerializableRef<TValue>;
-  serializableMappingCache.set(value, clone);
-  serializableMappingCache.set(clone);
+    freezeObjectInDev(value);
+    return clone;
+  };
 
-  freezeObjectInDev(value);
-  return clone;
+  return __DEV__
+    ? withPathSegment(`<worklet ${value.name || 'anonymous'}>`, buildClone)
+    : buildClone();
 }
 
 /**
@@ -541,9 +583,22 @@ function cloneMap(
 ): SerializableRef<Map<unknown, unknown>> {
   const clonedKeys: unknown[] = [];
   const clonedValues: unknown[] = [];
+  let index = 0;
   for (const [key, element] of value.entries()) {
-    clonedKeys.push(createSerializable(key));
-    clonedValues.push(createSerializable(element));
+    if (__DEV__) {
+      clonedKeys.push(
+        withPathSegment(`.keys()[${index}]`, () => createSerializable(key))
+      );
+      clonedValues.push(
+        withPathSegment(`.values()[${index}]`, () =>
+          createSerializable(element)
+        )
+      );
+      index++;
+    } else {
+      clonedKeys.push(createSerializable(key));
+      clonedValues.push(createSerializable(element));
+    }
   }
   const clone = WorkletsModule.createSerializableMap(clonedKeys, clonedValues);
   serializableMappingCache.set(value, clone);
@@ -555,8 +610,18 @@ function cloneMap(
 
 function cloneSet(value: Set<unknown>): SerializableRef<Set<unknown>> {
   const clonedElements: unknown[] = [];
+  let index = 0;
   for (const element of value) {
-    clonedElements.push(createSerializable(element));
+    if (__DEV__) {
+      clonedElements.push(
+        withPathSegment(`.values()[${index}]`, () =>
+          createSerializable(element)
+        )
+      );
+      index++;
+    } else {
+      clonedElements.push(createSerializable(element));
+    }
   }
   const clone = WorkletsModule.createSerializableSet(clonedElements);
   serializableMappingCache.set(value, clone);
@@ -638,7 +703,9 @@ function cloneCustom<TValue extends object, TPacked = unknown>(
   typeId: number
 ): SerializableRef<TValue> {
   const packedData = pack(data);
-  const serialized = createSerializable(packedData);
+  const serialized = __DEV__
+    ? withPathSegment('.pack()', () => createSerializable(packedData))
+    : createSerializable(packedData);
 
   return WorkletsModule.createCustomSerializable(
     serialized,

package/src/mock.ts

@@ -6,6 +6,8 @@ import { isWorkletFunction } from './workletFunction';
 
 const NOOP = () => {};
 const NOOP_FACTORY = () => NOOP;
+const UI_RUNTIME_HOLDER = {};
+const UI_SCHEDULER_HOLDER = {};
 const ID = <TValue>(value: TValue) => value;
 const IMMEDIATE_CALLBACK_INVOCATION = <TCallback>(callback: () => TCallback) =>
   callback();
@@ -23,32 +25,50 @@ globalThis._getAnimationTimestamp = () => performance.now();
 globalThis.requestAnimationFrame = mockedRequestAnimationFrame;
 
 const WorkletAPI = {
+  callMicrotasks: NOOP,
+  createSerializable: ID,
+  createShareable<TValue>(_hostRuntimeId: number, initial: TValue) {
+    let value = initial;
+    const set = (next: TValue | ((prev: TValue) => TValue)) => {
+      value =
+        typeof next === 'function'
+          ? (next as (prev: TValue) => TValue)(value)
+          : next;
+    };
+    return {
+      isHost: false,
+      __shareableRef: true,
+      getAsync: () => Promise.resolve(value),
+      getSync: () => value,
+      setAsync: set,
+      setSync: set,
+    };
+  },
+  createSynchronizable: ID,
+  createWorkletRuntime: NOOP_FACTORY,
+  executeOnUIRuntimeSync: ID,
+  getDynamicFeatureFlag: () => false,
+  getRuntimeKind: () => RuntimeKind.ReactNative,
+  getStaticFeatureFlag: () => false,
+  getUIRuntimeHolder: () => UI_RUNTIME_HOLDER,
+  getUISchedulerHolder: () => UI_SCHEDULER_HOLDER,
+  isBundleModeEnabled: () => false,
+  isRNRuntime: () => true,
+  isSerializableRef: ID,
+  isShareable: (value: unknown) =>
+    typeof value === 'object' &&
+    value !== null &&
+    !!(value as Record<string, unknown>).__shareableRef,
   isShareableRef: () => true,
+  isSynchronizable: () => false,
+  isUIRuntime: () => false, // maybe it should be true?
+  isWorkerRuntime: () => false,
+  isWorkletFunction: isWorkletFunction,
+  isWorkletRuntime: () => false,
   makeShareable: ID,
   makeShareableCloneOnUIRecursive: ID,
   makeShareableCloneRecursive: ID,
-  shareableMappingCache: new Map(),
-  getStaticFeatureFlag: () => false,
-  setDynamicFeatureFlag: NOOP,
-  isSynchronizable: () => false,
-  getRuntimeKind: () => RuntimeKind.ReactNative,
-  RuntimeKind: RuntimeKind,
-  createWorkletRuntime: NOOP_FACTORY,
-  runOnRuntime: ID,
-  runOnRuntimeAsync<Args extends unknown[], ReturnValue>(
-    _workletRuntime: unknown,
-    worklet: (...args: Args) => ReturnValue,
-    ...args: Args
-  ): Promise<ReturnValue> {
-    return WorkletAPI.runOnUIAsync(worklet, ...args);
-  },
-  scheduleOnRuntime: IMMEDIATE_CALLBACK_INVOCATION,
-  createSerializable: ID,
-  isSerializableRef: ID,
-  serializableMappingCache: new Map(),
-  createSynchronizable: ID,
-  callMicrotasks: NOOP,
-  executeOnUIRuntimeSync: ID,
+  registerCustomSerializable: NOOP,
   runOnJS<Args extends unknown[], ReturnValue>(
     fun: (...args: Args) => ReturnValue
   ): (...args: Args) => void {
@@ -59,6 +79,35 @@ const WorkletAPI = {
           : (fun as () => ReturnValue)
       );
   },
+  runOnRuntime: ID,
+  runOnRuntimeAsync<Args extends unknown[], ReturnValue>(
+    _workletRuntime: unknown,
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ): Promise<ReturnValue> {
+    return WorkletAPI.runOnUIAsync(worklet, ...args);
+  },
+  runOnRuntimeAsyncWithId<Args extends unknown[], ReturnValue>(
+    _runtimeId: number,
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ): Promise<ReturnValue> {
+    return WorkletAPI.runOnUIAsync(worklet, ...args);
+  },
+  runOnRuntimeSync<Args extends unknown[], ReturnValue>(
+    _workletRuntime: unknown,
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ): ReturnValue {
+    return worklet(...args);
+  },
+  runOnRuntimeSyncWithId<Args extends unknown[], ReturnValue>(
+    _runtimeId: number,
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ): ReturnValue {
+    return worklet(...args);
+  },
   runOnUI<Args extends unknown[], ReturnValue>(
     worklet: (...args: Args) => ReturnValue
   ): (...args: Args) => void {
@@ -89,19 +138,32 @@ const WorkletAPI = {
     });
   },
   runOnUISync: IMMEDIATE_CALLBACK_INVOCATION,
+  RuntimeKind: RuntimeKind,
   scheduleOnRN<Args extends unknown[], ReturnValue>(
     fun: (...args: Args) => ReturnValue,
     ...args: Args
   ): void {
     WorkletAPI.runOnJS(fun)(...args);
   },
+  scheduleOnRuntime: IMMEDIATE_CALLBACK_INVOCATION,
+  scheduleOnRuntimeWithId<Args extends unknown[], ReturnValue>(
+    _runtimeId: number,
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ): void {
+    WorkletAPI.scheduleOnUI(worklet, ...args);
+  },
   scheduleOnUI<Args extends unknown[], ReturnValue>(
     worklet: (...args: Args) => ReturnValue,
     ...args: Args
   ): void {
     WorkletAPI.runOnUI(worklet)(...args);
   },
-  isWorkletFunction: isWorkletFunction,
+  serializableMappingCache: new Map(),
+  setDynamicFeatureFlag: NOOP,
+  shareableMappingCache: new Map(),
+  toggleSlowAnimationsOnUIRuntime: () => false,
+  UIRuntimeId: RuntimeKind.UI,
   WorkletsModule: {},
 };
 

package/src/runLoop/uiRuntime/requestAnimationFrame.ts

@@ -2,7 +2,6 @@
 
 export function setupRequestAnimationFrame() {
   'worklet';
-  const callMicrotasks = globalThis.__callMicrotasks;
 
   let queuedCallbacks: ((timestamp: number) => void)[] = [];
   let queuedCallbacksBegin = 0;
@@ -28,7 +27,7 @@ export function setupRequestAnimationFrame() {
 
     flushedCallbacksBegin = flushedCallbacksEnd;
 
-    callMicrotasks();
+    globalThis.__callMicrotasks();
 
     const finalizers = queuedFinalizers;
     queuedFinalizers = [];

package/src/runLoop/workletRuntime/taskQueue.ts

@@ -19,7 +19,6 @@ export function setupTaskQueue() {
     const task = queue.timeoutCallbacks.get(handlerId);
     task?.();
     queue.timeoutCallbacks.delete(handlerId);
-    globalThis.__callMicrotasks();
   };
 
   globalThis.__callMicrotasks = function callMicrotasks() {

package/src/runtimes.native.ts

@@ -81,6 +81,7 @@ export function createWorkletRuntime(
   let queue: 'default' | object | null = 'default';
   let animationQueuePollingRate: number;
   let enableEventLoop = true;
+  let enableLocking = true;
   if (typeof nameOrConfig === 'string') {
     name = nameOrConfig;
     initializerFn = initializer;
@@ -96,7 +97,15 @@ export function createWorkletRuntime(
     animationQueuePollingRate = Math.round(
       nameOrConfig?.animationQueuePollingRate ?? 16
     );
-    enableEventLoop = nameOrConfig?.enableEventLoop ?? true;
+    enableLocking = nameOrConfig?.enableLocking ?? true;
+    if (__DEV__ && !enableLocking && nameOrConfig?.enableEventLoop) {
+      throw new Error(
+        '[Worklets] The Event Loop cannot be enabled on a runtime with locking disabled.'
+      );
+    }
+    enableEventLoop = enableLocking
+      ? (nameOrConfig?.enableEventLoop ?? true)
+      : false;
   }
 
   const useDefaultQueue = queue === 'default';
@@ -126,7 +135,8 @@ export function createWorkletRuntime(
     }),
     useDefaultQueue,
     customQueue,
-    enableEventLoop
+    enableEventLoop,
+    enableLocking
   );
 }
 
@@ -172,7 +182,6 @@ export function scheduleOnRuntime<Args extends unknown[], ReturnValue>(
     createSerializable(() => {
       'worklet';
       worklet(...args);
-      globalThis.__callMicrotasks?.();
     }),
     SHOULD_CAPTURE_SCHEDULE_STACK ? new Error().stack : undefined
   );
@@ -196,7 +205,6 @@ if (!isBundleModeEnabled()) {
       globalThis.__serializer(() => {
         'worklet';
         worklet(...args);
-        globalThis.__callMicrotasks?.();
       })
     );
   }
@@ -250,7 +258,6 @@ export function scheduleOnRuntimeWithId<Args extends unknown[], ReturnValue>(
     createSerializable(() => {
       'worklet';
       worklet(...args);
-      globalThis.__callMicrotasks?.();
     }),
     SHOULD_CAPTURE_SCHEDULE_STACK ? new Error().stack : undefined
   );
@@ -274,7 +281,6 @@ if (!isBundleModeEnabled()) {
       globalThis.__serializer(() => {
         'worklet';
         worklet(...args);
-        globalThis.__callMicrotasks?.();
       })
     );
   }
@@ -470,7 +476,6 @@ export function runOnRuntimeAsync<Args extends unknown[], ReturnValue>(
             serializedError
           );
         }
-        globalThis.__callMicrotasks?.();
       }),
       scheduleStack
     );
@@ -545,7 +550,6 @@ export function runOnRuntimeAsyncWithId<Args extends unknown[], ReturnValue>(
             serializedError
           );
         }
-        globalThis.__callMicrotasks?.();
       }),
       scheduleStack
     );

package/src/threads.ts

@@ -1,7 +1,6 @@
 'use strict';
 
 import { IS_JEST } from './platformChecker';
-import { mockedRequestAnimationFrame } from './runLoop/uiRuntime/mockedRequestAnimationFrame';
 
 export function scheduleOnUI<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,
@@ -58,8 +57,8 @@ export function runOnUIAsync<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,
   ...args: Args
 ): Promise<ReturnValue> {
-  return new Promise<ReturnValue>((resolve) => {
-    enqueueUI(worklet, args, resolve);
+  return new Promise<ReturnValue>((resolve, reject) => {
+    enqueueUI(worklet, args, resolve, reject);
   });
 }
 
@@ -67,6 +66,7 @@ type UIJob<Args extends unknown[] = unknown[], ReturnValue = unknown> = [
   worklet: (...args: Args) => ReturnValue,
   args: Args,
   resolve?: (value: ReturnValue) => void,
+  reject?: (reason?: unknown) => void,
 ];
 
 let runOnUIQueue: UIJob[] = [];
@@ -74,37 +74,49 @@ let runOnUIQueue: UIJob[] = [];
 function enqueueUI<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,
   args: Args,
-  resolve?: (value: ReturnValue) => void
+  resolve?: (value: ReturnValue) => void,
+  reject?: (reason?: unknown) => void
 ): void {
-  if (IS_JEST) {
-    mockedRequestAnimationFrame(() => {
-      const result = worklet(...args);
-      resolve?.(result);
-    });
-  } else {
-    const job = [worklet, args, resolve];
-    runOnUIQueue.push(job as UIJob);
-    if (runOnUIQueue.length === 1) {
+  const job = [worklet, args, resolve, reject];
+  runOnUIQueue.push(job as UIJob);
+  if (runOnUIQueue.length === 1) {
+    if (IS_JEST) {
       flushUIQueue();
+    } else {
+      queueMicrotask(flushUIQueue);
     }
   }
 }
 
+let offset = 0;
+
 function flushUIQueue(): void {
-  queueMicrotask(() => {
-    const queue = runOnUIQueue;
-    runOnUIQueue = [];
-    requestAnimationFrameImpl(() => {
-      queue.forEach(([workletFunction, workletArgs, jobResolve]) => {
-        const result = workletFunction(...workletArgs);
-        if (jobResolve) {
-          jobResolve(result);
+  const queue = runOnUIQueue;
+  runOnUIQueue = [];
+  requestAnimationFrame(() => {
+    offset = 0;
+    while (queue.length > offset) {
+      try {
+        drainUIQueue(queue);
+      } catch (e) {
+        const [, , , jobReject] = queue[offset - 1];
+        if (jobReject) {
+          jobReject(e);
+        } else {
+          console.error(e);
         }
-      });
-    });
+      }
+    }
   });
 }
 
-const requestAnimationFrameImpl = !globalThis.requestAnimationFrame
-  ? mockedRequestAnimationFrame
-  : globalThis.requestAnimationFrame;
+function drainUIQueue(queue: UIJob[]): void {
+  while (queue.length > offset) {
+    const [workletFunction, workletArgs, jobResolve] = queue[offset];
+    offset++;
+    const result = workletFunction(...workletArgs);
+    if (jobResolve) {
+      jobResolve(result);
+    }
+  }
+}

package/src/types.ts

@@ -121,18 +121,52 @@ type WorkletRuntimeConfigBase = {
    * by requestAnimationFrame. If not specified, it defaults to 16 ms.
    */
   animationQueuePollingRate?: number;
-  /**
-   * Determines whether to enable the default Event Loop or not. The Event Loop
-   * provides implementations for `setTimeout`, `setImmediate`, `setInterval`,
-   * `requestAnimationFrame`, `queueMicrotask`, `clearTimeout`, `clearInterval`,
-   * `clearImmediate`, and `cancelAnimationFrame` methods. If not specified, it
-   * defaults to `true`.
-   */
-  enableEventLoop?: boolean;
 };
 
 /** Configuration object for creating a worklet runtime. */
 export type WorkletRuntimeConfig = WorkletRuntimeConfigBase &
+  (
+    | {
+        /**
+         * Determines whether to enable the default Event Loop, which provides
+         * `setTimeout`, `setInterval`, `requestAnimationFrame` and other
+         * scheduling APIs. If not specified, it defaults to `true`. Cannot be
+         * enabled when {@link enableLocking} is set to `false`.
+         */
+        enableEventLoop?: boolean;
+        /**
+         * Determines whether access to the underlying JS runtime is
+         * synchronized with a mutex around every JSI operation. If not
+         * specified, it defaults to `true`. Can be disabled only together
+         * with the Event Loop.
+         *
+         * Runtime without locking doesn't receive HMR updates
+         * and new Custom Serializable registrations.
+         *
+         * Disable only when you can guarantee thread safety of all access to the runtime.
+         */
+        enableLocking?: true;
+      }
+    | {
+        /**
+         * The Event Loop cannot be enabled on a runtime with
+         * {@link enableLocking} set to `false`.
+         */
+        enableEventLoop?: false;
+        /**
+         * Determines whether access to the underlying JS runtime is
+         * synchronized with a mutex around every JSI operation. If not
+         * specified, it defaults to `true`. Can be disabled only together
+         * with the Event Loop.
+         *
+         * Runtime without locking doesn't receive HMR updates
+         * and new Custom Serializable registrations.
+         *
+         * Disable only when you can guarantee thread safety of all access to the runtime.
+         */
+        enableLocking: false;
+      }
+  ) &
   (
     | {
         /**