react-native-reanimated 3.0.0-rc.8 → 3.0.0

package/src/reanimated2/shareables.ts

@@ -1,6 +1,7 @@
 import NativeReanimatedModule from './NativeReanimated';
 import { ShareableRef } from './commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
+import { registerWorkletStackDetails } from './errors';
 
 // for web/chrome debugger/jest environments this file provides a stub implementation
 // where no shareable references are used. Instead, the objects themselves are used
@@ -16,6 +17,16 @@ const _shareableCache = new WeakMap<
 // this is used to allow for a converted shareable to be passed to makeShareableClone
 const _shareableFlag = Symbol('shareable flag');
 
+const MAGIC_KEY = 'REANIMATED_MAGIC_KEY';
+
+function isHostObject(value: any): boolean {
+  // We could use JSI to determine whether an object is a host object, however
+  // the below workaround works well and is way faster than an additional JSI call.
+  // We use the fact that host objects have broken implementation of `hasOwnProperty`
+  // and hence return true for all `in` checks regardless of the key we ask for.
+  return MAGIC_KEY in value;
+}
+
 export function registerShareableMapping(
   shareable: any,
   shareableRef?: ShareableRef<any>
@@ -26,14 +37,10 @@ export function registerShareableMapping(
   _shareableCache.set(shareable, shareableRef || _shareableFlag);
 }
 
-export function makeShareableShadowNodeWrapper<T>(shadowNodeWrapper: T): T {
-  const adoptedSNW =
-    NativeReanimatedModule.makeShareableClone(shadowNodeWrapper);
-  registerShareableMapping(shadowNodeWrapper, adoptedSNW);
-  return shadowNodeWrapper;
-}
-
-export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
+export function makeShareableCloneRecursive<T>(
+  value: any,
+  shouldPersistRemote = false
+): ShareableRef<T> {
   if (USE_STUB_IMPLEMENTATION) {
     return value;
   }
@@ -52,8 +59,34 @@ export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
       } else if (type === 'function' && value.__workletHash === undefined) {
         // this is a remote function
         toAdapt = value;
+      } else if (isHostObject(value)) {
+        // for host objects we pass the reference to the object as shareable and
+        // then recreate new host object wrapping the same instance on the UI thread.
+        // there is no point of iterating over keys as we do for regular objects.
+        toAdapt = value;
       } else {
         toAdapt = {};
+        if (value.__workletHash !== undefined) {
+          // we are converting a worklet
+          if (__DEV__) {
+            registerWorkletStackDetails(
+              value.__workletHash,
+              value.__stackDetails
+            );
+            delete value.__stackDetails;
+          }
+          // to save on transferring static __initData field of worklet structure
+          // we request shareable value to persist its UI counterpart. This means
+          // that the __initData field that contains long strings represeting the
+          // worklet code, source map, and location, will always be
+          // serialized/deserialized once.
+          toAdapt.__initData = makeShareableCloneRecursive(
+            value.__initData,
+            true
+          );
+          delete value.__initData;
+        }
+
         for (const [key, element] of Object.entries(value)) {
           toAdapt[key] = makeShareableCloneRecursive(element);
         }
@@ -64,16 +97,19 @@ export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
         // shareable. Meaning that they may be doing a faulty assumption in their
         // code expecting that the updates are going to automatically populate to
         // the object sent to the UI thread. If the user really wants some objects
-        // to be mutable they should use share values instead.
+        // to be mutable they should use shared values instead.
         Object.freeze(value);
       }
-      const adopted = NativeReanimatedModule.makeShareableClone(toAdapt);
+      const adopted = NativeReanimatedModule.makeShareableClone(
+        toAdapt,
+        shouldPersistRemote
+      );
       _shareableCache.set(value, adopted);
       _shareableCache.set(adopted, _shareableFlag);
       return adopted;
     }
   }
-  return NativeReanimatedModule.makeShareableClone(value);
+  return NativeReanimatedModule.makeShareableClone(value, shouldPersistRemote);
 }
 
 export function makeShareableCloneOnUIRecursive<T>(value: T): ShareableRef<T> {

package/src/reanimated2/threads.ts

@@ -1,12 +1,102 @@
 import NativeReanimatedModule from './NativeReanimated';
+import { isJest, shouldBeUseWeb } from './PlatformChecker';
 import { ComplexWorkletFunction } from './commonTypes';
 import {
   makeShareableCloneOnUIRecursive,
   makeShareableCloneRecursive,
 } from './shareables';
 
+const IS_JEST = isJest();
+
+let _runOnUIQueue: Array<[ComplexWorkletFunction<any[], any>, any[]]> = [];
+
+export function setupSetImmediate() {
+  'worklet';
+
+  let immediateCalbacks: Array<() => void> = [];
+
+  // @ts-ignore – typescript expects this to conform to NodeJS definition and expects the return value to be NodeJS.Immediate which is an object and not a number
+  global.setImmediate = (callback: () => void): number => {
+    immediateCalbacks.push(callback);
+    return -1;
+  };
+
+  global.__flushImmediates = () => {
+    for (let index = 0; index < immediateCalbacks.length; index += 1) {
+      // we use classic 'for' loop because the size of the currentTasks array may change while executing some of the callbacks due to setImmediate calls
+      immediateCalbacks[index]();
+    }
+    immediateCalbacks = [];
+  };
+}
+
+function flushImmediatesOnUIThread() {
+  'worklet';
+  global.__flushImmediates();
+}
+
+export const flushImmediates = shouldBeUseWeb()
+  ? () => {
+      // on web flushing is a noop as immediates are handled by the browser
+    }
+  : flushImmediatesOnUIThread;
+
+/**
+ * Schedule a worklet to execute on the UI runtime. This method does not schedule the work immediately but instead
+ * waits for other worklets to be scheduled within the same JS loop. It uses setImmediate to schedule all the worklets
+ * at once making sure they will run within the same frame boundaries on the UI thread.
+ */
 export function runOnUI<A extends any[], R>(
   worklet: ComplexWorkletFunction<A, R>
+): (...args: A) => void {
+  if (__DEV__ && !shouldBeUseWeb()) {
+    if (worklet.__workletHash === undefined) {
+      throw new Error('runOnUI() can only be used on worklets');
+    }
+  }
+  return (...args) => {
+    if (IS_JEST) {
+      // Mocking time in Jest is tricky as both requestAnimationFrame and setImmediate
+      // callbacks run on the same queue and can be interleaved. There is no way
+      // to flush particular queue in Jest and the only control over mocked timers
+      // is by using jest.advanceTimersByTime() method which advances all types
+      // of timers including immediate and animation callbacks. Ideally we'd like
+      // to have some way here to schedule work along with React updates, but
+      // that's not possible, and hence in Jest environment instead of using scheduling
+      // mechanism we just schedule the work ommiting the queue. This is ok for the
+      // uses that we currently have but may not be ok for future tests that we write.
+      NativeReanimatedModule.scheduleOnUI(
+        makeShareableCloneRecursive(() => {
+          'worklet';
+          worklet(...args);
+        })
+      );
+      return;
+    }
+    _runOnUIQueue.push([worklet, args]);
+    if (_runOnUIQueue.length === 1) {
+      setImmediate(() => {
+        const queue = _runOnUIQueue;
+        _runOnUIQueue = [];
+        NativeReanimatedModule.scheduleOnUI(
+          makeShareableCloneRecursive(() => {
+            'worklet';
+            queue.forEach(([worklet, args]) => {
+              worklet(...args);
+            });
+            flushImmediates();
+          })
+        );
+      });
+    }
+  };
+}
+
+/**
+ * Schedule a worklet to execute on the UI runtime skipping batching mechanism.
+ */
+export function runOnUIImmediately<A extends any[], R>(
+  worklet: ComplexWorkletFunction<A, R>
 ): (...args: A) => void {
   if (__DEV__) {
     if (worklet.__workletHash === undefined) {
@@ -17,12 +107,24 @@ export function runOnUI<A extends any[], R>(
     NativeReanimatedModule.scheduleOnUI(
       makeShareableCloneRecursive(() => {
         'worklet';
-        return worklet(...args);
+        worklet(...args);
       })
     );
   };
 }
 
+if (__DEV__) {
+  try {
+    runOnUI(() => {
+      'worklet';
+    });
+  } catch (e) {
+    throw new Error(
+      'Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin.'
+    );
+  }
+}
+
 export function runOnJS<A extends any[], R>(
   fun: ComplexWorkletFunction<A, R>
 ): (...args: A) => void {

package/src/reanimated2/utils.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { measure } from './NativeMethods';
 import { RefObjectFunction } from './hook/commonTypes';
+import { SharedValue } from './commonTypes';
 
 export interface ComponentCoords {
   x: number;
@@ -26,3 +27,8 @@ export function getRelativeCoords(
     y: absoluteY - parentCoords.y,
   };
 }
+
+export function isSharedValue<T>(value: any): value is SharedValue<T> {
+  'worklet';
+  return typeof value === 'object' && value._isReanimatedSharedValue === true;
+}

package/src/reanimated2/valueSetter.ts

@@ -1,6 +1,5 @@
 import { AnimationObject, AnimatableValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
-import { getTimestamp } from './time';
 export { stopMapper } from './mappers';
 
 export function valueSetter(sv: any, value: any): void {
@@ -32,7 +31,7 @@ export function valueSetter(sv: any, value: any): void {
     const initializeAnimation = (timestamp: number) => {
       animation.onStart(animation, sv.value, timestamp, previousAnimation);
     };
-    const currentTimestamp = getTimestamp();
+    const currentTimestamp = global.__frameTimestamp || performance.now();
     initializeAnimation(currentTimestamp);
     const step = (timestamp: number) => {
       if (animation.cancelled) {

package/lib/commonjs/reanimated2/time.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTimestamp = getTimestamp;
-Object.defineProperty(exports, "stopMapper", {
-  enumerable: true,
-  get: function () {
-    return _mappers.stopMapper;
-  }
-});
-
-var _NativeReanimated = _interopRequireDefault(require("./NativeReanimated"));
-
-var _reactNative = require("react-native");
-
-var _PlatformChecker = require("./PlatformChecker");
-
-var _mappers = require("./mappers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-let _getTimestamp;
-
-if ((0, _PlatformChecker.nativeShouldBeMock)()) {
-  _getTimestamp = () => {
-    return _NativeReanimated.default.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-
-    return _getCurrentTime();
-  };
-}
-
-function getTimestamp() {
-  'worklet';
-
-  if (_reactNative.Platform.OS === 'web') {
-    return _NativeReanimated.default.getTimestamp();
-  }
-
-  return _getTimestamp();
-}
-//# sourceMappingURL=time.js.map

package/lib/commonjs/reanimated2/time.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_getTimestamp","nativeShouldBeMock","NativeReanimatedModule","getTimestamp","_frameTimestamp","_eventTimestamp","_getCurrentTime","Platform","OS"],"sources":["time.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { Platform } from 'react-native';\nimport { nativeShouldBeMock } from './PlatformChecker';\nexport { stopMapper } from './mappers';\n\nlet _getTimestamp: () => number;\nif (nativeShouldBeMock()) {\n  _getTimestamp = () => {\n    return NativeReanimatedModule.getTimestamp();\n  };\n} else {\n  _getTimestamp = () => {\n    'worklet';\n    if (_frameTimestamp) {\n      return _frameTimestamp;\n    }\n    if (_eventTimestamp) {\n      return _eventTimestamp;\n    }\n    return _getCurrentTime();\n  };\n}\n\nexport function getTimestamp(): number {\n  'worklet';\n  if (Platform.OS === 'web') {\n    return NativeReanimatedModule.getTimestamp();\n  }\n  return _getTimestamp();\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,IAAIA,aAAJ;;AACA,IAAI,IAAAC,mCAAA,GAAJ,EAA0B;EACxBD,aAAa,GAAG,MAAM;IACpB,OAAOE,yBAAA,CAAuBC,YAAvB,EAAP;EACD,CAFD;AAGD,CAJD,MAIO;EACLH,aAAa,GAAG,MAAM;IACpB;;IACA,IAAII,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,IAAIC,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,OAAOC,eAAe,EAAtB;EACD,CATD;AAUD;;AAEM,SAASH,YAAT,GAAgC;EACrC;;EACA,IAAII,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;IACzB,OAAON,yBAAA,CAAuBC,YAAvB,EAAP;EACD;;EACD,OAAOH,aAAa,EAApB;AACD"}

package/lib/module/reanimated2/time.js

@@ -1,37 +0,0 @@
-import NativeReanimatedModule from './NativeReanimated';
-import { Platform } from 'react-native';
-import { nativeShouldBeMock } from './PlatformChecker';
-export { stopMapper } from './mappers';
-
-let _getTimestamp;
-
-if (nativeShouldBeMock()) {
-  _getTimestamp = () => {
-    return NativeReanimatedModule.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-
-    return _getCurrentTime();
-  };
-}
-
-export function getTimestamp() {
-  'worklet';
-
-  if (Platform.OS === 'web') {
-    return NativeReanimatedModule.getTimestamp();
-  }
-
-  return _getTimestamp();
-}
-//# sourceMappingURL=time.js.map

package/lib/module/reanimated2/time.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NativeReanimatedModule","Platform","nativeShouldBeMock","stopMapper","_getTimestamp","getTimestamp","_frameTimestamp","_eventTimestamp","_getCurrentTime","OS"],"sources":["time.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { Platform } from 'react-native';\nimport { nativeShouldBeMock } from './PlatformChecker';\nexport { stopMapper } from './mappers';\n\nlet _getTimestamp: () => number;\nif (nativeShouldBeMock()) {\n  _getTimestamp = () => {\n    return NativeReanimatedModule.getTimestamp();\n  };\n} else {\n  _getTimestamp = () => {\n    'worklet';\n    if (_frameTimestamp) {\n      return _frameTimestamp;\n    }\n    if (_eventTimestamp) {\n      return _eventTimestamp;\n    }\n    return _getCurrentTime();\n  };\n}\n\nexport function getTimestamp(): number {\n  'worklet';\n  if (Platform.OS === 'web') {\n    return NativeReanimatedModule.getTimestamp();\n  }\n  return _getTimestamp();\n}\n"],"mappings":"AAAA,OAAOA,sBAAP,MAAmC,oBAAnC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,kBAAT,QAAmC,mBAAnC;AACA,SAASC,UAAT,QAA2B,WAA3B;;AAEA,IAAIC,aAAJ;;AACA,IAAIF,kBAAkB,EAAtB,EAA0B;EACxBE,aAAa,GAAG,MAAM;IACpB,OAAOJ,sBAAsB,CAACK,YAAvB,EAAP;EACD,CAFD;AAGD,CAJD,MAIO;EACLD,aAAa,GAAG,MAAM;IACpB;;IACA,IAAIE,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,IAAIC,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,OAAOC,eAAe,EAAtB;EACD,CATD;AAUD;;AAED,OAAO,SAASH,YAAT,GAAgC;EACrC;;EACA,IAAIJ,QAAQ,CAACQ,EAAT,KAAgB,KAApB,EAA2B;IACzB,OAAOT,sBAAsB,CAACK,YAAvB,EAAP;EACD;;EACD,OAAOD,aAAa,EAApB;AACD"}

package/src/reanimated2/time.ts

@@ -1,30 +0,0 @@
-import NativeReanimatedModule from './NativeReanimated';
-import { Platform } from 'react-native';
-import { nativeShouldBeMock } from './PlatformChecker';
-export { stopMapper } from './mappers';
-
-let _getTimestamp: () => number;
-if (nativeShouldBeMock()) {
-  _getTimestamp = () => {
-    return NativeReanimatedModule.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-    return _getCurrentTime();
-  };
-}
-
-export function getTimestamp(): number {
-  'worklet';
-  if (Platform.OS === 'web') {
-    return NativeReanimatedModule.getTimestamp();
-  }
-  return _getTimestamp();
-}