feat: add compiler safe API for mutables

Author: tjzel

packages/react-native-reanimated/src/commonTypes.ts

@@ -15,14 +15,15 @@ export interface StyleProps extends ViewStyle, TextStyle {
  */
 export interface SharedValue<Value = unknown> {
   value: Value;
+  get(): Value;
+  set(value: Value): void;
   addListener: (listenerID: number, listener: (value: Value) => void) => void;
   removeListener: (listenerID: number) => void;
   modify: (
     modifier?: <T extends Value>(value: T) => T,
     forceUpdate?: boolean
   ) => void;
 }
-
 export interface Mutable<Value = unknown> extends SharedValue<Value> {
   _isReanimatedSharedValue: true;
   _animation?: AnimationObject<Value> | null; // only in Native

packages/react-native-reanimated/src/mutables.ts

@@ -10,6 +10,39 @@ const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 type Listener<Value> = (newValue: Value) => void;
 
+type PartialMutable<Value> = Omit<Mutable<Value>, '_value' | 'get' | 'set'>;
+
+/**
+ * Adds `get` and `set` methods to the mutable object to handle access to `value` property.
+ *
+ * React Compiler disallows modifying return values of hooks. Even though assignment to
+ * `value` is a setter invocation, Compiler's static analysis doesn't detect it.
+ * That's why we provide a second API for users using the Compiler.
+ */
+function addCompilerSafeGetAndSet<Value>(mutable: Mutable<Value>): void {
+  'worklet';
+  Object.defineProperties(mutable, {
+    get: {
+      value() {
+        return mutable.value;
+      },
+      configurable: false,
+      enumerable: false,
+    },
+    set: {
+      value(newValue: Value | ((value: Value) => Value)) {
+        if (typeof newValue === 'function') {
+          mutable.value = (newValue as (value: Value) => Value)(mutable.value);
+        } else {
+          mutable.value = newValue;
+        }
+      },
+      configurable: false,
+      enumerable: false,
+    },
+  });
+}
+
 export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
   'worklet';
   const listeners = new Map<number, Listener<Value>>();
@@ -39,7 +72,7 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
 
     _animation: null,
     _isReanimatedSharedValue: true,
-  } as Mutable<Value>;
+  } as PartialMutable<Value> as Mutable<Value>;
 
   /*
    * _value prop should only be accessed by the valueSetter implementation
@@ -61,6 +94,8 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
     enumerable: false,
   });
 
+  addCompilerSafeGetAndSet(mutable);
+
   return mutable;
 }
 
@@ -102,7 +137,7 @@ function makeMutableNative<Value>(initial: Value): Mutable<Value> {
     },
 
     _isReanimatedSharedValue: true,
-  } as Omit<Mutable<Value>, '_value'> as Mutable<Value>;
+  } as PartialMutable<Value> as Mutable<Value>;
 
   Object.defineProperty(mutable, '_value', {
     // This way of defining the property makes it hidden for
@@ -122,6 +157,8 @@ function makeMutableNative<Value>(initial: Value): Mutable<Value> {
     enumerable: false,
   });
 
+  addCompilerSafeGetAndSet(mutable);
+
   shareableMappingCache.set(mutable, handle);
   return mutable;
 }
@@ -153,7 +190,7 @@ function makeMutableWeb<Value>(initial: Value): Mutable<Value> {
     },
 
     _isReanimatedSharedValue: true,
-  } as Omit<Mutable<Value>, '_value'> as Mutable<Value>;
+  } as PartialMutable<Value> as Mutable<Value>;
 
   Object.defineProperty(mutable, '_value', {
     get(): Value {
@@ -169,6 +206,8 @@ function makeMutableWeb<Value>(initial: Value): Mutable<Value> {
     enumerable: false,
   });
 
+  addCompilerSafeGetAndSet(mutable);
+
   return mutable;
 }