feat(signals): deep freeze state in patchState in dev mode

Author: rainerhahnekamp

modules/signals/spec/signal-state.spec.ts

@@ -194,4 +194,28 @@ describe('signalState', () => {
       expect(stateCounter).toBe(3);
       expect(userCounter).toBe(1);
     }));
+
+  describe('freezeInDevMode', () => {
+    it('throws on a mutable change', () => {
+      const userState = signalState(initialState);
+      expect(() =>
+        patchState(userState, (state) => {
+          state.ngrx = 'mutable change';
+          return state;
+        })
+      ).toThrowError("Cannot assign to read only property 'ngrx' of object");
+    });
+
+    it('throws on a mutable change', () => {
+      const userState = signalState(initialState);
+      expect(() =>
+        patchState(userState, (state) => {
+          state.user.firstName = 'mutable change';
+          return state;
+        })
+      ).toThrowError(
+        "Cannot assign to read only property 'firstName' of object"
+      );
+    });
+  });
 });

modules/signals/src/deep-freeze.ts

@@ -0,0 +1,43 @@
+export function deepFreeze<T>(target: T): T {
+  Object.freeze(target);
+
+  const targetIsFunction = typeof target === 'function';
+
+  Object.getOwnPropertyNames(target).forEach((prop) => {
+    // Ignore Ivy properties, ref: https://github.com/ngrx/platform/issues/2109#issuecomment-582689060
+    if (prop.startsWith('ɵ')) {
+      return;
+    }
+
+    if (
+      hasOwnProperty(target, prop) &&
+      (targetIsFunction
+        ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments'
+        : true)
+    ) {
+      const propValue = target[prop];
+
+      if (
+        (isObjectLike(propValue) || typeof propValue === 'function') &&
+        !Object.isFrozen(propValue)
+      ) {
+        deepFreeze(propValue);
+      }
+    }
+  });
+
+  return target;
+}
+
+function hasOwnProperty(
+  target: unknown,
+  propertyName: string
+): target is { [propertyName: string]: unknown } {
+  return isObjectLike(target)
+    ? Object.prototype.hasOwnProperty.call(target, propertyName)
+    : false;
+}
+
+function isObjectLike(target: unknown): target is object {
+  return typeof target === 'object' && target !== null;
+}

modules/signals/src/state-source.ts

@@ -9,6 +9,9 @@ import {
 } from '@angular/core';
 import { SIGNAL } from '@angular/core/primitives/signals';
 import { Prettify } from './ts-helpers';
+import { deepFreeze } from './deep-freeze';
+
+declare const ngDevMode: boolean;
 
 const STATE_WATCHERS = new WeakMap<object, Array<StateWatcher<any>>>();
 
@@ -40,7 +43,9 @@ export function patchState<State extends object>(
     updaters.reduce(
       (nextState: State, updater) => ({
         ...nextState,
-        ...(typeof updater === 'function' ? updater(nextState) : updater),
+        ...(typeof updater === 'function'
+          ? updater(freezeInDevMode(nextState))
+          : updater),
       }),
       currentState
     )
@@ -49,6 +54,10 @@ export function patchState<State extends object>(
   notifyWatchers(stateSource);
 }
 
+function freezeInDevMode<State extends object>(value: State): State {
+  return ngDevMode ? deepFreeze(value) : value;
+}
+
 export function getState<State extends object>(
   stateSource: StateSource<State>
 ): State {