[utils] Make sure Store state is not mutable outside of the class

packages/utils/src/store/ReactStore.ts

@@ -8,14 +8,7 @@ import { useIsoLayoutEffect } from '../useIsoLayoutEffect';
 import { NOOP } from '../empty';
 
 /**
- * A Store that supports controlled state keys.
- *
- * - Keys registered through {@link useControlledProp} become controlled when a non-undefined
- *   value is provided. Controlled keys mirror the incoming value and ignore local writes
- *   (via {@link set}, {@link apply}, or {@link update}).
- * - When a key is uncontrolled, an optional default value is written once on first render.
- * - Use {@link useSyncedValue} and {@link useSyncedValues} to synchronize external values/props into the
- *   store during a layout phase using {@link useIsoLayoutEffect}.
+ * A Store that supports controlled state keys, non-reactive values and provides utility methods for React.
  */
 export class ReactStore<
   State,
@@ -113,14 +106,14 @@ export class ReactStore<
       this.controlledValues.set(key, isControlled);
 
       if (!isControlled && !Object.is(this.state[key], defaultValue)) {
-        super.update({ ...(this.state as State), [key]: defaultValue } as State);
+        super.update({ ...this.state, [key]: defaultValue } as State);
       }
     }
 
     useIsoLayoutEffect(() => {
       if (isControlled && !Object.is(this.state[key], controlled)) {
         // Set the internal state to match the controlled value.
-        super.update({ ...(this.state as State), [key]: controlled } as State);
+        super.update({ ...this.state, [key]: controlled } as State);
       }
     }, [key, controlled, defaultValue, isControlled]);
   }

packages/utils/src/store/Store.ts

@@ -5,6 +5,12 @@ type Listener<T> = (state: T) => void;
  * It uses an observer pattern to notify subscribers when the state changes.
  */
 export class Store<State> {
+  /**
+   * The internal state of the store.
+   * This property is mutable only within this class methods.
+   */
+  private internalState: State;
+
   /**
    * The current state of the store.
    * This property is updated immediately when the state changes as a result of calling {@link update}, {@link apply}, or {@link set}.
@@ -13,12 +19,14 @@ export class Store<State> {
    *
    * Do not modify properties in state directly. Instead, use the provided methods to ensure proper state management and listener notification.
    */
-  public state: State;
+  public get state() {
+    return this.internalState;
+  }
 
   private listeners: Set<Listener<State>>;
 
   constructor(state: State) {
-    this.state = state;
+    this.internalState = state;
     this.listeners = new Set();
   }
 
@@ -39,7 +47,7 @@ export class Store<State> {
    * Returns the current state of the store.
    */
   public getSnapshot = () => {
-    return this.state;
+    return this.internalState;
   };
 
   /**
@@ -48,8 +56,8 @@ export class Store<State> {
    * @param newState The new state to set for the store.
    */
   public update(newState: State) {
-    if (this.state !== newState) {
-      this.state = newState;
+    if (this.internalState !== newState) {
+      this.internalState = newState;
       this.listeners.forEach((l) => l(newState));
     }
   }
@@ -61,8 +69,8 @@ export class Store<State> {
    */
   public apply(changes: Partial<State>) {
     for (const key in changes) {
-      if (!Object.is(this.state[key], changes[key])) {
-        this.update({ ...this.state, ...changes });
+      if (!Object.is(this.internalState[key], changes[key])) {
+        this.update({ ...this.internalState, ...changes });
         return;
       }
     }
@@ -75,8 +83,8 @@ export class Store<State> {
    * @param value The new value to set for the specified key.
    */
   public set<T>(key: keyof State, value: T) {
-    if (!Object.is(this.state[key], value)) {
-      this.update({ ...this.state, [key]: value });
+    if (!Object.is(this.internalState[key], value)) {
+      this.update({ ...this.internalState, [key]: value });
     }
   }
 }