refactor: define _value via Object.defineProperty

Author: tjzel

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

@@ -23,22 +23,6 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
       valueSetter(mutable, newValue);
     },
 
-    /**
-     * _value prop should only be accessed by the valueSetter implementation
-     * which may make the decision about updating the mutable value depending
-     * on the provided new value. All other places should only attempt to modify
-     * the mutable by assigning to value prop directly.
-     */
-    get _value(): Value {
-      return value;
-    },
-    set _value(newValue: Value) {
-      value = newValue;
-      listeners.forEach((listener) => {
-        listener(newValue);
-      });
-    },
-
     modify: (modifier, forceUpdate = true) => {
       valueSetter(
         mutable,
@@ -55,7 +39,28 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
 
     _animation: null,
     _isReanimatedSharedValue: true,
-  };
+  } as Mutable<Value>;
+
+  /*
+   * _value prop should only be accessed by the valueSetter implementation
+   * which may make the decision about updating the mutable value depending
+   * on the provided new value. All other places should only attempt to modify
+   * the mutable by assigning to value prop directly.
+   */
+  Object.defineProperty(mutable, '_value', {
+    get(): Value {
+      return value;
+    },
+    set(newValue: Value) {
+      value = newValue;
+      listeners.forEach((listener) => {
+        listener(newValue);
+      });
+    },
+    configurable: false,
+    enumerable: false,
+  });
+
   return mutable;
 }
 
@@ -80,17 +85,6 @@ function makeMutableNative<Value>(initial: Value): Mutable<Value> {
       })();
     },
 
-    get _value(): Value {
-      throw new Error(
-        '[Reanimated] Reading from `_value` directly is only possible on the UI runtime. Perhaps you passed an Animated Style to a non-animated component?'
-      );
-    },
-    set _value(_newValue: Value) {
-      throw new Error(
-        '[Reanimated] Setting `_value` directly is only possible on the UI runtime. Perhaps you want to assign to `value` instead?'
-      );
-    },
-
     modify: (modifier, forceUpdate = true) => {
       runOnUI(() => {
         mutable.modify(modifier, forceUpdate);
@@ -108,7 +102,25 @@ function makeMutableNative<Value>(initial: Value): Mutable<Value> {
     },
 
     _isReanimatedSharedValue: true,
-  };
+  } as Omit<Mutable<Value>, '_value'> as Mutable<Value>;
+
+  Object.defineProperty(mutable, '_value', {
+    // This way of defining the property makes it hidden for
+    // `Object.keys` etc. so if the user accidentally passes it
+    // to React he won't get a critical error.
+    get() {
+      throw new Error(
+        '[Reanimated] Reading from `_value` directly is only possible on the UI runtime. Perhaps you wanted to read from `value` instead?'
+      );
+    },
+    set(_newValue: Value) {
+      throw new Error(
+        '[Reanimated] Setting `_value` directly is only possible on the UI runtime. Perhaps you wanted to assign to `value` instead?'
+      );
+    },
+    configurable: false,
+    enumerable: false,
+  });
 
   shareableMappingCache.set(mutable, handle);
   return mutable;
@@ -126,16 +138,6 @@ function makeMutableWeb<Value>(initial: Value): Mutable<Value> {
       valueSetter(mutable, newValue);
     },
 
-    get _value(): Value {
-      return value;
-    },
-    set _value(newValue: Value) {
-      value = newValue;
-      listeners.forEach((listener) => {
-        listener(newValue);
-      });
-    },
-
     modify: (modifier, forceUpdate = true) => {
       valueSetter(
         mutable,
@@ -151,7 +153,21 @@ function makeMutableWeb<Value>(initial: Value): Mutable<Value> {
     },
 
     _isReanimatedSharedValue: true,
-  };
+  } as Omit<Mutable<Value>, '_value'> as Mutable<Value>;
+
+  Object.defineProperty(mutable, '_value', {
+    get(): Value {
+      return value;
+    },
+    set(newValue: Value) {
+      value = newValue;
+      listeners.forEach((listener) => {
+        listener(newValue);
+      });
+    },
+    configurable: false,
+    enumerable: false,
+  });
 
   return mutable;
 }