react-native-worklets 0.3.0 → 0.4.0-bundle-mode-preview-1

package/src/initializers.ts

@@ -1,93 +1,21 @@
 'use strict';
 
-import { mockedRequestAnimationFrame } from './animationFrameQueue/mockedRequestAnimationFrame';
-import { setupRequestAnimationFrame } from './animationFrameQueue/requestAnimationFrame';
-import { reportFatalErrorOnJS } from './errors';
-import {
-  DEFAULT_LOGGER_CONFIG,
-  logToLogBoxAndConsole,
-  registerLoggerConfig,
-  replaceLoggerImplementation,
-} from './logger';
-import { isJest, isWeb, shouldBeUseWeb } from './PlatformChecker';
+import { bundleValueUnpacker } from './bundleUnpacker';
+import { setupCallGuard } from './callGuard';
+import { registerReportFatalRemoteError } from './errors';
+import { IS_JEST, SHOULD_BE_USE_WEB } from './PlatformChecker';
+import { mockedRequestAnimationFrame } from './runLoop/mockedRequestAnimationFrame';
+import { setupRequestAnimationFrame } from './runLoop/requestAnimationFrame';
+import { setupSetImmediate } from './runLoop/setImmediatePolyfill';
+import { setupSetInterval } from './runLoop/setIntervalPolyfill';
+import { setupSetTimeout } from './runLoop/setTimeoutPolyfill';
 import { executeOnUIRuntimeSync, runOnJS, setupMicrotasks } from './threads';
 import { isWorkletFunction } from './workletFunction';
 import { registerWorkletsError, WorkletsError } from './WorkletsError';
-import type { IWorkletsModule } from './WorkletsModule';
+import { WorkletsModule } from './WorkletsModule';
+import type { ValueUnpacker } from './workletTypes';
 
-const IS_JEST = isJest();
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
-// Override the logFunction implementation with the one that adds logs
-// with better stack traces to the LogBox (need to override it after `runOnJS`
-// is defined).
-function overrideLogFunctionImplementation() {
-  'worklet';
-  replaceLoggerImplementation((data) => {
-    'worklet';
-    runOnJS(logToLogBoxAndConsole)(data);
-  });
-}
-
-// Register logger config and replace the log function implementation in
-// the React runtime global scope
-registerLoggerConfig(DEFAULT_LOGGER_CONFIG);
-overrideLogFunctionImplementation();
-
-// this is for web implementation
-if (SHOULD_BE_USE_WEB) {
-  global._WORKLET = false;
-  global._log = console.log;
-  global._getAnimationTimestamp = () => performance.now();
-} else {
-  if (__DEV__) {
-    const testWorklet = () => {
-      'worklet';
-    };
-    if (!isWorkletFunction(testWorklet)) {
-      throw new WorkletsError(
-        `Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details.`
-      );
-    }
-  }
-  // Register WorkletsError and logger config in the UI runtime global scope.
-  // (we are using `executeOnUIRuntimeSync` here to make sure that the changes
-  // are applied before any async operations are executed on the UI runtime)
-  executeOnUIRuntimeSync(registerWorkletsError)();
-  executeOnUIRuntimeSync(registerLoggerConfig)(DEFAULT_LOGGER_CONFIG);
-  executeOnUIRuntimeSync(overrideLogFunctionImplementation)();
-}
-
-// callGuard is only used with debug builds
-export function callGuardDEV<Args extends unknown[], ReturnValue>(
-  fn: (...args: Args) => ReturnValue,
-  ...args: Args
-): ReturnValue | void {
-  'worklet';
-  try {
-    return fn(...args);
-  } catch (e) {
-    if (global.__ErrorUtils) {
-      global.__ErrorUtils.reportFatalError(e as Error);
-    } else {
-      throw e;
-    }
-  }
-}
-
-export function setupCallGuard() {
-  'worklet';
-  global.__callGuardDEV = callGuardDEV;
-  global.__ErrorUtils = {
-    reportFatalError: (error: Error) => {
-      runOnJS(reportFatalErrorOnJS)({
-        message: error.message,
-        moduleName: 'Worklets',
-        stack: error.stack,
-      });
-    },
-  };
-}
+let capturableConsole: typeof console;
 
 /**
  * Currently there seems to be a bug in the JSI layer which causes a crash when
@@ -102,7 +30,11 @@ export function setupCallGuard() {
  * we don't copy the methods as they are in the original console object, we copy
  * JavaScript wrappers instead.
  */
-function createMemorySafeCapturableConsole(): typeof console {
+export function getMemorySafeCapturableConsole(): typeof console {
+  if (capturableConsole) {
+    return capturableConsole;
+  }
+
   const consoleCopy = Object.fromEntries(
     Object.entries(console).map(([methodName, method]) => {
       const methodWrapper = function methodWrapper(...args: unknown[]) {
@@ -125,37 +57,101 @@ function createMemorySafeCapturableConsole(): typeof console {
     })
   );
 
+  capturableConsole = consoleCopy as unknown as typeof console;
+
   return consoleCopy as unknown as typeof console;
 }
 
-// We really have to create a copy of console here. Function runOnJS we use on elements inside
-// this object makes it not configurable
-const capturableConsole = createMemorySafeCapturableConsole();
-
-export function setupConsole() {
+export function setupConsole(boundCapturableConsole: typeof console) {
   'worklet';
   // @ts-ignore TypeScript doesn't like that there are missing methods in console object, but we don't provide all the methods for the UI runtime console version
-  global.console = {
-    /* eslint-disable @typescript-eslint/unbound-method */
-    assert: runOnJS(capturableConsole.assert),
-    debug: runOnJS(capturableConsole.debug),
-    log: runOnJS(capturableConsole.log),
-    warn: runOnJS(capturableConsole.warn),
-    error: runOnJS(capturableConsole.error),
-    info: runOnJS(capturableConsole.info),
-    /* eslint-enable @typescript-eslint/unbound-method */
+  globalThis.console = {
+    assert: runOnJS(boundCapturableConsole.assert),
+    debug: runOnJS(boundCapturableConsole.debug),
+    log: runOnJS(boundCapturableConsole.log),
+    warn: runOnJS(boundCapturableConsole.warn),
+    error: runOnJS(boundCapturableConsole.error),
+    info: runOnJS(boundCapturableConsole.info),
   };
 }
 
-export function initializeUIRuntime(WorkletsModule: IWorkletsModule) {
-  if (isWeb()) {
+let initialized = false;
+
+export function init() {
+  if (initialized) {
     return;
   }
-  if (!WorkletsModule) {
-    throw new WorkletsError(
-      'Worklets are trying to initialize the UI runtime without a valid WorkletsModule'
-    );
+  initialized = true;
+
+  initializeRuntime();
+
+  if (SHOULD_BE_USE_WEB) {
+    initializeRuntimeOnWeb();
+  }
+
+  if (globalThis._WORKLET) {
+    initializeWorkletRuntime();
+  } else {
+    initializeRNRuntime();
+    if (!SHOULD_BE_USE_WEB) {
+      installRNBindingsOnUIRuntime();
+    }
+  }
+}
+
+/** A function that should be run on any kind of runtime. */
+function initializeRuntime() {
+  if (globalThis._WORKLETS_BUNDLE_MODE) {
+    globalThis.__valueUnpacker = bundleValueUnpacker as ValueUnpacker;
+  }
+}
+
+/** A function that should be run only on React Native runtime. */
+function initializeRNRuntime() {
+  if (__DEV__) {
+    const testWorklet = () => {
+      'worklet';
+    };
+    if (!isWorkletFunction(testWorklet)) {
+      throw new WorkletsError(
+        `Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details.`
+      );
+    }
+  }
+
+  registerReportFatalRemoteError();
+}
+
+/** A function that should be run only on Worklet runtimes. */
+function initializeWorkletRuntime() {
+  if (globalThis._WORKLETS_BUNDLE_MODE) {
+    setupCallGuard();
+
+    if (__DEV__) {
+      /**
+       * Temporary workaround for Metro bundler. We must implement a dummy
+       * Refresh module to prevent Metro from throwing irrelevant errors.
+       */
+
+      const Refresh = new Proxy(
+        {},
+        {
+          get() {
+            return () => {};
+          },
+        }
+      );
+
+      globalThis.__r.Refresh = Refresh;
+    }
   }
+}
+
+/** A function that should be run only on RN Runtime in web implementation. */
+function initializeRuntimeOnWeb() {
+  globalThis._WORKLET = false;
+  globalThis._log = console.log;
+  globalThis._getAnimationTimestamp = () => performance.now();
   if (IS_JEST) {
     // requestAnimationFrame react-native jest's setup is incorrect as it polyfills
     // the method directly using setTimeout, therefore the callback doesn't get the
@@ -165,14 +161,48 @@ export function initializeUIRuntime(WorkletsModule: IWorkletsModule) {
     // @ts-ignore TypeScript uses Node definition for rAF, setTimeout, etc which returns a Timeout object rather than a number
     globalThis.requestAnimationFrame = mockedRequestAnimationFrame;
   }
+}
 
-  if (!SHOULD_BE_USE_WEB) {
-    executeOnUIRuntimeSync(() => {
-      'worklet';
-      setupCallGuard();
-      setupConsole();
-      setupMicrotasks();
-      setupRequestAnimationFrame();
-    })();
+/**
+ * A function that should be run on the RN Runtime to configure the UI Runtime
+ * with callback bindings.
+ */
+function installRNBindingsOnUIRuntime() {
+  if (!WorkletsModule) {
+    throw new WorkletsError(
+      'Worklets are trying to initialize the UI runtime without a valid WorkletsModule'
+    );
+  }
+
+  const runtimeBoundCapturableConsole = getMemorySafeCapturableConsole();
+
+  if (!globalThis._WORKLETS_BUNDLE_MODE) {
+    /** In bundle mode Runtimes setup their callGuard themselves. */
+    executeOnUIRuntimeSync(setupCallGuard)();
+
+    /**
+     * Register WorkletsError in the UI runtime global scope. (we are using
+     * `executeOnUIRuntimeSync` here to make sure that the changes are applied
+     * before any async operations are executed on the UI runtime).
+     *
+     * There's no need to register the error in bundle mode.
+     */
+    executeOnUIRuntimeSync(registerWorkletsError)();
   }
+
+  executeOnUIRuntimeSync(() => {
+    'worklet';
+
+    setupConsole(runtimeBoundCapturableConsole);
+    /**
+     * TODO: Move `setupMicrotasks` and `setupRequestAnimationFrame` to a
+     * separate function once we have a better way to distinguish between
+     * Worklet Runtimes.
+     */
+    setupMicrotasks();
+    setupRequestAnimationFrame();
+    setupSetTimeout();
+    setupSetImmediate();
+    setupSetInterval();
+  })();
 }

package/src/logger.ts

@@ -0,0 +1,16 @@
+'use strict';
+
+const PREFIX = '[Worklets]';
+
+function formatMessage(message: string) {
+  return `${PREFIX} ${message}`;
+}
+
+export const logger = {
+  warn(message: string) {
+    console.warn(formatMessage(message));
+  },
+  error(message: string) {
+    console.error(formatMessage(message));
+  },
+};

package/src/privateGlobals.d.ts

@@ -1,15 +1,18 @@
 /* eslint-disable reanimated/use-global-this */
-/* eslint-disable no-var */
 'use strict';
 
 // This file works by accident - currently Builder Bob doesn't move `.d.ts` files to output types.
 // If it ever breaks, we should address it so we'd not pollute the user's global namespace.
-import type { callGuardDEV } from './initializers';
+import type { callGuardDEV } from './callGuard';
+import type { reportFatalRemoteError } from './errors';
 import type { IWorkletsErrorConstructor } from './WorkletsError';
 import type { WorkletsModuleProxy } from './WorkletsModule';
 import type { ValueUnpacker } from './workletTypes';
 
 declare global {
+  /** The only runtime-available require method is `__r` defined by Metro. */
+  var __r: ((moduleId: number) => Record<string, unknown>) &
+    Record<string, unknown>;
   var __workletsCache: Map<number, () => unknown>;
   var __handleCache: WeakMap<object, unknown>;
   var evalWithSourceMap:
@@ -21,6 +24,7 @@ declare global {
   var _toString: (value: unknown) => string;
   var __workletsModuleProxy: WorkletsModuleProxy | undefined;
   var _WORKLET: boolean | undefined;
+  var _WORKLETS_BUNDLE_MODE: boolean | undefined;
   var _makeShareableClone: <T>(
     value: T,
     nativeStateSource?: object
@@ -31,17 +35,29 @@ declare global {
   var _makeShareableBigInt: (value: bigint) => FlatShareableRef<bigint>;
   var _makeShareableUndefined: () => FlatShareableRef<undefined>;
   var _makeShareableNull: () => FlatShareableRef<null>;
+  var _makeShareableObject: <T extends object>(
+    value: T,
+    shouldRetainRemote: boolean,
+    nativeStateSource?: object
+  ) => FlatShareableRef<T>;
+  var _makeShareableHostObject: <T extends object>(
+    value: T
+  ) => FlatShareableRef<T>;
+  var _makeShareableWorklet: (
+    value: object,
+    shouldPersistRemote: boolean
+  ) => FlatShareableRef<object>;
+  var _makeShareableArray: (value: unknown[]) => FlatShareableRef<unknown[]>;
+  var _makeShareableInitializer: (value: object) => FlatShareableRef<object>;
   var __callMicrotasks: () => void;
   var _scheduleHostFunctionOnJS: (fun: (...args: A) => R, args?: A) => void;
   var _scheduleRemoteFunctionOnJS: (fun: (...args: A) => R, args?: A) => void;
-  var __ErrorUtils: {
-    reportFatalError: (error: Error) => void;
-  };
+  /** Available only on RN Runtime */
+  var __reportFatalRemoteError: typeof reportFatalRemoteError | undefined;
   var __valueUnpacker: ValueUnpacker;
   var __callGuardDEV: typeof callGuardDEV | undefined;
   var __flushAnimationFrame: (timestamp: number) => void;
   var __frameTimestamp: number | undefined;
-  var __workletsLoggerConfig: LoggerConfigInternal;
   var _log: (value: unknown) => void;
   var _getAnimationTimestamp: () => number;
   var _scheduleOnRuntime: (

package/src/publicGlobals.ts

@@ -0,0 +1,26 @@
+'use strict';
+/* eslint-disable reanimated/use-global-this */
+export {};
+
+declare global {
+  /**
+   * This global variable is a diagnostic/development tool.
+   *
+   * It is `true` on the UI thread and `false` on the JS thread.
+   *
+   * It used to be necessary in the past for some of the functionalities of
+   * react-native-reanimated to work properly but it's no longer the case. Your
+   * code shouldn't depend on it, we keep it here mainly for backward
+   * compatibility for our users.
+   */
+  var _WORKLET: boolean | undefined;
+
+  /**
+   * This ArrayBuffer contains the memory address of `jsi::Runtime` which is the
+   * Reanimated UI runtime.
+   */
+  var _WORKLET_RUNTIME: ArrayBuffer;
+
+  /** @deprecated Don't use. */
+  var _IS_FABRIC: boolean | undefined;
+}

package/src/runLoop/requestAnimationFrame.ts

@@ -0,0 +1,67 @@
+'use strict';
+
+import { callMicrotasks } from '../threads';
+
+export function setupRequestAnimationFrame() {
+  'worklet';
+  const nativeRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+  let animationFrameCallbacks: ((timestamp: number) => void)[] = [];
+  let callbacksBegin = 0;
+  let callbacksEnd = 0;
+
+  let flushedCallbacks = animationFrameCallbacks;
+  let flushedCallbacksBegin = 0;
+  let flushedCallbacksEnd = 0;
+
+  let flushRequested = false;
+
+  globalThis.__flushAnimationFrame = (timestamp: number) => {
+    globalThis.__frameTimestamp = timestamp;
+
+    flushedCallbacks = animationFrameCallbacks;
+    animationFrameCallbacks = [];
+
+    flushedCallbacksBegin = callbacksBegin;
+    flushedCallbacksEnd = callbacksEnd;
+    callbacksBegin = callbacksEnd;
+
+    flushRequested = false;
+
+    for (const callback of flushedCallbacks) {
+      callback(timestamp);
+    }
+
+    flushedCallbacksBegin = callbacksEnd;
+
+    callMicrotasks();
+
+    globalThis.__frameTimestamp = undefined;
+  };
+
+  globalThis.requestAnimationFrame = (
+    callback: (timestamp: number) => void
+  ): number => {
+    const handle = callbacksEnd++;
+
+    animationFrameCallbacks.push(callback);
+    if (!flushRequested) {
+      flushRequested = true;
+
+      nativeRequestAnimationFrame(globalThis.__flushAnimationFrame);
+    }
+    return handle;
+  };
+
+  globalThis.cancelAnimationFrame = (handle: number) => {
+    if (handle < flushedCallbacksBegin || handle >= callbacksEnd) {
+      return;
+    }
+
+    if (handle < flushedCallbacksEnd) {
+      flushedCallbacks[handle - flushedCallbacksBegin] = () => {};
+    } else {
+      animationFrameCallbacks[handle - callbacksBegin] = () => {};
+    }
+  };
+}

package/src/runLoop/setImmediatePolyfill.ts

@@ -0,0 +1,20 @@
+'use strict';
+
+export function setupSetImmediate() {
+  'worklet';
+
+  const setImmediatePolyfill = (
+    callback: (...args: unknown[]) => void,
+    ...args: unknown[]
+  ) => {
+    return setTimeout(callback, 0, ...args);
+  };
+
+  const clearImmediatePolyfill = (immediateHandle: number) => {
+    clearTimeout(immediateHandle);
+  };
+
+  globalThis.setImmediate =
+    setImmediatePolyfill as unknown as typeof setImmediate;
+  globalThis.clearImmediate = clearImmediatePolyfill as typeof clearImmediate;
+}

package/src/runLoop/setIntervalPolyfill.ts

@@ -0,0 +1,38 @@
+'use strict';
+
+export function setupSetInterval() {
+  'worklet';
+
+  const intervalHandleToTimeoutHandle: Map<number, number> = new Map();
+
+  const setIntervalPolyfill = (
+    callback: (...args: unknown[]) => void,
+    delay: number = 0,
+    ...args: unknown[]
+  ) => {
+    let intervalHandle = 0;
+
+    const repeatingCallback = () => {
+      const timeoutHandle = setTimeout(
+        repeatingCallback,
+        delay
+      ) as unknown as number;
+      intervalHandleToTimeoutHandle.set(intervalHandle, timeoutHandle);
+      callback(...args);
+    };
+
+    intervalHandle = setTimeout(repeatingCallback, delay) as unknown as number;
+    intervalHandleToTimeoutHandle.set(intervalHandle, intervalHandle);
+
+    return intervalHandle;
+  };
+
+  const clearIntervalPolyfill = (intervalHandle: number) => {
+    const timeoutHandle = intervalHandleToTimeoutHandle.get(intervalHandle);
+    clearTimeout(timeoutHandle);
+    intervalHandleToTimeoutHandle.delete(intervalHandle);
+  };
+
+  globalThis.setInterval = setIntervalPolyfill as typeof setInterval;
+  globalThis.clearInterval = clearIntervalPolyfill as typeof clearInterval;
+}

package/src/runLoop/setTimeoutPolyfill.ts

@@ -0,0 +1,40 @@
+'use strict';
+
+export function setupSetTimeout() {
+  'worklet';
+
+  const timeoutHandleToRafHandle: Map<number, number> = new Map();
+
+  const setTimeoutPolyfill = (
+    callback: (...args: unknown[]) => void,
+    delay: number = 1,
+    ...args: unknown[]
+  ) => {
+    const start = performance.now();
+    let timeoutHandle = 0;
+
+    const rafCallback = () => {
+      const now = performance.now();
+      if (now - start >= delay) {
+        callback(...args);
+        timeoutHandleToRafHandle.delete(timeoutHandle);
+      } else {
+        const rafHandle = requestAnimationFrame(rafCallback);
+        timeoutHandleToRafHandle.set(timeoutHandle, rafHandle);
+      }
+    };
+
+    timeoutHandle = requestAnimationFrame(rafCallback);
+    timeoutHandleToRafHandle.set(timeoutHandle, timeoutHandle);
+    return timeoutHandle;
+  };
+
+  const clearTimeoutPolyfill = (timeoutHandle: number) => {
+    const rafHandle = timeoutHandleToRafHandle.get(timeoutHandle);
+    timeoutHandleToRafHandle.delete(timeoutHandle);
+    cancelAnimationFrame(rafHandle!);
+  };
+
+  globalThis.setTimeout = setTimeoutPolyfill as typeof setTimeout;
+  globalThis.clearTimeout = clearTimeoutPolyfill as typeof clearTimeout;
+}

package/src/runtimes.ts

@@ -1,8 +1,8 @@
 'use strict';
 
-import { setupCallGuard, setupConsole } from './initializers';
-import { registerLoggerConfig } from './logger';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { setupCallGuard } from './callGuard';
+import { getMemorySafeCapturableConsole, setupConsole } from './initializers';
+import { SHOULD_BE_USE_WEB } from './PlatformChecker';
 import {
   makeShareableCloneOnUIRecursive,
   makeShareableCloneRecursive,
@@ -12,8 +12,6 @@ import { registerWorkletsError, WorkletsError } from './WorkletsError';
 import { WorkletsModule } from './WorkletsModule';
 import type { WorkletFunction, WorkletRuntime } from './workletTypes';
 
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
 /**
  * Lets you create a new JS runtime which can be used to run worklets possibly
  * on different threads than JS or UI thread.
@@ -36,17 +34,14 @@ export function createWorkletRuntime(
   name: string,
   initializer?: WorkletFunction<[], void>
 ): WorkletRuntime {
-  // Assign to a different variable as __workletsLoggerConfig is not a captured
-  // identifier in the Worklet runtime.
-  const config = __workletsLoggerConfig;
+  const runtimeBoundCapturableConsole = getMemorySafeCapturableConsole();
   return WorkletsModule.createWorkletRuntime(
     name,
     makeShareableCloneRecursive(() => {
       'worklet';
-      registerWorkletsError();
-      registerLoggerConfig(config);
       setupCallGuard();
-      setupConsole();
+      registerWorkletsError();
+      setupConsole(runtimeBoundCapturableConsole);
       initializer?.();
     })
   );

package/src/shareableMappingCache.ts

@@ -1,9 +1,7 @@
 'use strict';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { SHOULD_BE_USE_WEB } from './PlatformChecker';
 import type { ShareableRef } from './workletTypes';
 
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
 /**
  * This symbol is used to represent a mapping from the value to itself.
  *